【シェーダーグラフメモ その23】正六角形タイルを作る
以下のような正六角形タイルを作る方法を解説します。
正六角形の作り方
まずは以下のような六角形を作ります。
横のサイズを√3/2倍すると正六角形になります.
シェーダーグラフで六角形を作る
まずは以下の六角形を作ります。
STEP1: 六角形の斜線部分を作る
最初に六角形の斜線の部分を作ります。
以下のようなノードを組み、1.5x + yを作ります。
以下のような結果が得られました。
赤く線を付けた部分は1.5x + y = 1の直線に一致します。
STEP2 : ４つの斜線を作る
左右対称なxと上下対称なyを作り、
これらを用いて1.5x + yを作ると、
上下左右対称な4つの斜線を作ることができます。
1.5x+y=1のラインは4箇所に表れています。
x,yはUVの中央を軸とした上下左右対称な値であることに注意してください。
これらの斜線は六角形の４つの斜線に一致しています。
STEP3 : 水平線を作る
1.5x + y と 2y に対してMaxをかけることで、六角形の水平部分を付け加えることができます。
水平な線は 2y = 1の直線に一致します。
yは上下対称、かつ値の範囲が0≦y≦0.5であることに注意してください。
STEP4 : 横に縮めて正六角形にする
xを2/√3倍すると、正方形の横方向の大きさが√3/2倍され、正六角形になります。
正六角形タイルを作る
次に、この正六角形を並べて正六角形タイルを作っていきます。
STEP1: x,yの0~1の繰り返しを複数作る
まずはx,yにMultiplyとFractionをかけて0~1の繰り返しを複数作ります。
STEP2: 偶数番目の六角形をズラす
x座標にFloorとModuloをかけ、0, 1, 0, 1,・・・の繰り返しを作り、これを0.5倍したものをy座標に足します。
これにより、偶数列目の正六角形が0.5上にずれます。
正六角形タイルのような見た目になりました。
STEP3: 白飛びしたを超えた部分を反転させる
良い感じになってきましたが、白飛びしている箇所が気になります。
白飛びの原因
ここで、最初の方の図を思い出してみましょう。
白飛びしている部分は
1.5x + y > 1 となっている部分です。
イメージとしては以下のようなグラフを描いています。
白飛びの解消
ここで、色valueに対して abs(value - 1.0) としてやると、
白飛びを解消することができます。
ノードで組んでみると以下になります。
白飛びが消え、求めていた六角形タイルが出来上がりました。
ノード全体
参考
今回の記事を書くにあたって下記の六角形GLSLを参考にさせていただきました。 https://gist.github.com/sakrist/8706749
