のぐそんブログ

暗いおじさんがシコシコ書くブログです。

フラグメントシェーダーでタイル風レイアウトをやってみる

以前の記事の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での座標変換が理解できませんでした。 難しいです。

参考

[連載]やってみれば超簡単! WebGL と GLSL で始める、はじめてのシェーダコーディング(7)