皆さま。

初めまして、沖田といいます。

 

GLSLでのシェーダーのプログラミングついて複数回に渡って書いてみようと思います。

 

プログラミング環境は

↓ここです！

http://glslsandbox.com/

 

このサイトを見ると、誰かが作った最近の作品が並んでいます。

自分のを作るには、左上の「Create new effect! 」ボタンをクリックです。

 

サンプルのコードが入っていて、そのコードで描かれた映像が表示されています。

そこに、自分のコードを上書きしてみましょう。

 

void main(void)  {

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

}

この３行で、画面が青１色になります。

void main( void ) { … } の中にコードを書きます。

gl_FragColor には塗りつぶす色を設定しています。

R(赤) G(緑) B(青) A(アルファ:透明度) を vec4 という４つの浮動小数点の型（構造体と考えてよいでしょう）に入れています。

B  が１なので、青になります。

それぞれ、１.0 が最大値で、０は最小値です。

B を 0.0 にする画面は黒く、１.0 だと完全な青になります。

A は、使われていないので何を入れても変化はしないようです。

 

次に以下のコードに変更してみます。

 

void main(void) {

     if (gl_FragCoord.y < 50.0)

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

     else

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

}

 

画面の下の方が、緑色になったと思います。

 

以下のコードだと…

 

void main(void) {

     if (gl_FragCoord.x < 50.0 && gl_FragCoord.y < 50.0)

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

     else

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

}

 

画面の左下だけ緑になります。

 

gl_FragCoord.x, gl_FragCoord.xy には、画面の座標が入ってきていて

左下の座標は、 (0.0, 0.0) になっています。

右上の座業は、x と y の描画領域の最大値になりますが、この値はブラウザとモニタとOSによって

色々な値になります。

 

ここまで書いた、void main(void) { … } の関数部分は

フラングメントシェーダーといい、ピクセル１つ１つに対しての処理をしています。

(0, 0) で来た場合は、vec4(0.0, 1.0, 0.0, 0.0); を返し

(100,100) で来た場合は、vec4(0.0, 0.0, 1.0, 0.0); を返しています。

もし x, y の最大値が 1024 だとすると

以下のように main() が呼び出されているイメージになります。

 

for (gl_FragCoord.x = 0.;  gl_FragCoord.x < 1024.0, gl_FragCoord.x += 1.0)

{

      for (gl_FragCoord.y = 0.0;  gl_FragCoord. y < 1024.0, gl_FragCoord.y += 1.0)

      {

           main();

      }

}

 

main() が 1024 x 1024 ピクセルの回数分呼ばれています。

（実際には、フラグメントシェーターは、数個から数千個ほど並列に処理されていてるのですが

　↑のイメージで考えていて問題は無いです。）

 

今回は、ここまでです！

続きます。