フラグメントシェーダーでタイル風レイアウトをやってみる
以前の記事のGLSLでフラグメントシェーダーを書く場合のメモで、下記のような描画を試してみました。
void main( void ) { vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy ) / min(resolution.x,resolution.y); float l = 0.1/length(uv) ; gl_FragColor = vec4(vec3(l),1.0); }
今回は、この光の円をタイル状に並べてみようと思います。
mod関数を理解する
タイル状のレイアウトに便利なのがビルドイン関数のmod(x,y)
です。
mod関数は、割り算をした余りを返してくれる関数です。 厳密にいうとx-y*floor(x/y)を返却する関数になります。
mod関数を利用すると一定の規則でリピートされる値を作ることができます。
実際にやってみる
void main( void ) { vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy ) / min(resolution.x,resolution.y); uv = abs(mod(uv,0.2)) - 0.1 ; float l = 0.05 /length(uv) ; gl_FragColor = vec4(vec3(l),1.0); }
abs(mod(uv,0.2))
の式でタイル状の座標をつくりだします。 座標の範囲は0. ~ 0.19999
になります。
各タイルの中心点を中央にする為、0.2の半分の値である1.0を引きます。 よって最終的な値は-0.1 ~ 0.09999
になります。
uvの値は、正規化している為、短い辺は-1.0~1.0になります。長さで言うと2.0です。 その為、2.0 / 0.2
で短い辺に10個のタイルが並びます。
今回の例で言うと、縦に10個のタイルが並びました。
まとめ
なかなかmodでの座標変換が理解できませんでした。 難しいです。