最近カレー粉と醤油を使ったカレー炒めにハマっていて

チャツネを入れたり、醤油をナンプラーに変えたり、カレー粉を調合したりして

楽しんでいます。

 

さて、ＧLSL今回は簡単な模様を書いてみます。

http://glslsandbox.com/  サイトを開いて

「Create new effect!」を選択すると、ちょっと面倒そうな計算で模様を描いていると思います。

こんなの眺めてると時間がもったいないので、もうちょっと簡単なサンプルを用意しましょう。

 

コードの重要な部分は以下の３行です。

1.　vec2 p =  gl_FragCoord.xy / resolution.xy;

2.　float c = sin( p.x * 50.0 ) + sin( p.y * 50.0);

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

 

１行目

　vec2 p = ( gl_FragCoord.xy / resolution.xy );

 

gl_FragCoord は、今まで説明した左下を(0,0)とする。 x, y座標の構造体です。

ウィンドウが1024x1024pxの場合、x, y それぞれに、0 から 1023 の値が入ってきて

main() 関数は、1024×1024回呼ばれます。

 

resolution は、画面の解像度です。

　vec2 p =  gl_FragCoord.xy / resolution.xy; この式は妙な感じですが、以下の意味になります。

 

　vec2 p;

　p.x =  gl_FragCoord.x / resolution.x;

　p.y =  gl_FragCoord.y / resolution.y;

 

　.xy を使うことにより、３行が１行になるわけです。

 

　それで、p は、.x, .y, それぞれ、0 から 1.0 の値になります。（ウィンドウが 1024 x 1024 だったとして）

　gl_FragCoord そのままだと、.x, .y, それぞれ、0 から 1024 なので扱いやすい 0 から 1.0 に変換したのです。

 

２行目

　サインカーブを利用して座病の変化を色の濃淡に変換してみました。

　float c = sin( p.x * 50.0 ) ; だけにして確認すると縦の縞になります。

　float c = sin( p.x * 50.0 ) + sin( p.y * 50.0); とすることにより、格子状になります。

　（あんまり素敵な模様でないのは、コードを単純にしたかったためです）

　c の値は、0 から 1の値になります。これを色の濃淡に使います。

 

３行目

　c の値を使って色を出力します。

　vec4(c, c, c, 1.0); なので、R, G, B すべて同じ値、つまり白黒表現になります。

　最後の 1.0 は、アルファ値で glslsandbox の環境では効果を発揮しません。

 

今回のサンプル→ http://glslsandbox.com/e#71553.1

 

以上です。

次回は、これを元に遊んでみましょうー