Help us understand the problem. What is going on with this article?

glsl デバック

More than 1 year has passed since last update.

色デバック

数値を色として出力することで、簡単にざっくり状態を確認できる常套手段ですが、0.0 ~ 1.0の範囲でしか見えないので注意が必要です。例えばマイナスの数値や1.0を超える数値を認識できません。また、浮動小数点の精度落ちも判別しずらいです。

下の例では、半径1の円のディスタンスフィールドを描画していますが円の外周は0ではなく
circle.png

https://goo.gl/iUsxs6

precision mediump float;
uniform vec2  m;       // mouse
uniform float t;       // time
uniform vec2  r;       // resolution
uniform sampler2D smp; // prev scene

void main(void){
    vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y);
    float l= 1.-length(p);
    gl_FragColor = vec4(vec3(l), 1.0);
}

出力値をマイナスにして出力するとマイナスの領域が見えてきます。

minus.png

https://goo.gl/eR1M7B

    gl_FragColor = vec4(vec3(-l), 1.0);

半径1の円のディスタンスフィールドを描画するだけで終わるのであれば問題ないのですが、このあとに複数の図形を合成する場合には、このマイナス値が大きく影響します。色デバックで正常そうに見えているからやっかいです。色デバックで正常そうに見えるのに不具合が解消されない場合は、マイナス値や1以上の値を疑ってみましょう。出力値をマイナスにして確認するくせをつけておくと良いと思います。または、以下のように赤をプラス領域、緑をマイナス領域に分けて表示する方法もおすすめです。

rg.png

https://goo.gl/VSSrUD

    gl_FragColor = vec4(vec3(l,-l,0.), 1.0);

参考、さらに1以上の値をピンクに振ったバージョン

rgb.png

https://goo.gl/Ls4Sd8

    float l= 1.5-length(p);
        vec3 color = vec3(-l,max(l-1.,0.),l*step(l,1.));
    gl_FragColor = vec4(color 1.0);

glslでprintデバック

glslで、ビットマップデータで数字を作り、数値を確認する方法です。

小数点以下の数値を確認するのに大変便利です。

プロット関数

float plot(vec2 p, float v){
  return  smoothstep( v-0.02, v, p.y) -
          smoothstep( v, v+0.02, p.y);
}

https://goo.gl/RUJW27

グラフ化して関数などを可視化します。

glsl デバック

各種ブラウザ用デバッカーの拡張を入れると捗ります。

ソースレベルデバッカー

リアルタイムで値の確認をしたいのであれば、これで出来そうなのですが
Windows Linux用でソースのコンパイルが必要です。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away