この半年、２日に一度ペースでバッセンに行ってるのですが、いまいち上手くなりません。

この才能の無さを楽しむしかないのかな？　と思ってやってきましたが、もう５６才…

選手寿命が尽きそうでコワイです！

 

さてGLSLですが、今回は、図形を描いてみようと思います。

まずは、円です！

 

#ifdef GL_ES

precision mediump float;

#endif

 

float circle(vec2 pos, float radius)

{

    float l = length(pos);

    if (l < radius)

        return 1.0;

    else

        return 0.0;

}

 

void main(void) {

    float c = circle(gl_FragCoord.xy, 100.0);

    gl_FragColor = vec4(c, c, c, 1.0);

}

 

今回もプログラム環境は↓です。

http://glslsandbox.com/

左上の「Create new effect! 」ボタンをクリックして

今回のコードを上書きしてみましょう。

 

左下に円の一部が見えていると思います。

 

#ifdef GL_ES

precision mediump float;

#endif

 

↑最初の３行は、浮動小数の精度を設定しているのですが

これが無いと今回のコードは、エラーになってしまうので

エラーにならないおまじないの役目が大きいので気にしなくてOKです。

 

float circle(vec2 pos, float radius)

{

    float l = length(pos);

    if (l < radius)

        return 1.0;

    else

        return 0.0;

}

↑円を描く関数です。

ほぼ、C言語と同じですね。

第一引数の型 vec2 は、以下の様な型だと思ってください。

struct vec2

{

    float x;

    float y;

}

 

length(pos);

は、GLSLに最初から入っている、距離を計算する組み込み関数です

vec2(0,0) から第一引数までの距離を返します。

 

if (l < radius)

    return 1.0;

else

    return 0.0;

↑は、第二引数で指定された半径よりも小さかったら 1.0 を返し

そうでなければ、0.0 を返す処理です。

 

これを使った main() の処理は…

 

float c = circle(gl_FragCoord.xy, 100.0);

gl_FragColor = vec4(c, c, c, 1.0);

 

まず、circle() に渡している、gl_FragCoord は、前回説明しましたが

現在処理すべき、ピクセル位置が入ってきます。

型は vec4 ですが、ここでは x y しか使用しないので

gl_FragCoord.xy  と書きます。

このように書くと xとyだけ入った、vec2 の型として使用することが出来るのです。

C言語などとは、かなり違う部分です。

 

さてこの結果を float c に入れます。

c には、0.0 か 1.0 が入ってきます。

座標 (0.0, 0.0) から、距離 100.0 未満の場合は、1.0 が入り

そうでない場合は、0.0 が入ります。

 

gl_FragColor = vec4(c, c, c, 1.0);

gl_FragColor は、前回説明しましたが、ピクセルの色の設定する変数です。

r, g, b ともに c を入れることにより

円の内側が、vec4(1.0, 1.0, 1.0, 1.0) となり真っ白に

円の外側が、vec4(0.0, 0.0, 0.0, 1.0) 真っ黒になります

 

さて、左下に１/４だけ見えているものなんなので

全部見えるようにしてみましょう。

 

float c = circle(gl_FragCoord.xy, 100.0);

この行を以下に変更します。

float c = circle(gl_FragCoord.xy – vec2(100.0, 100.0), 100.0);

これで、左下に円が全て見えるようになりました。

 

gl_FragCoord.xy – vec2(100.0, 100.0)

↑この計算により、入力される全ての座標に x – 100、y – 100 として

半径の分だけ、中央に寄せています。

 

今回は、ここまでです！

急に難しくしないように気を付けてじっくり進行させようと思います。