一般社団法人 全国個人事業主支援協会

COLUMN コラム

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

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

楽しんでいます。

 

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

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

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

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

 

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

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

 

1行目

 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 を使うことにより、3行が1行になるわけです。

 

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

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

 

2行目

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

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

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

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

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

 

3行目

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

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

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

 

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

 

以上です。

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

The following two tabs change content below.

沖田 泰志

プログラマー歴36年。 趣味は草野球、スケボー、ドライブ、料理、洋服など。

最新記事 by 沖田 泰志 (全て見る)

この記事をシェアする

  • Twitterでシェア
  • Facebookでシェア
  • LINEでシェア