LoginSignup
12

More than 5 years have passed since last update.

glsl デバック

Last updated at Posted at 2017-12-29

色デバック

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

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

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

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

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

rg.png

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

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

rgb.png

    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);
}

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

glsl デバック

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

ソースレベルデバッカー

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

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12