rn.log

備忘録など

【シェーダーグラフメモ その23】正六角形タイルを作る

以下のような正六角形タイルを作る方法を解説します。

f:id:r-ngtm:20181213014757p:plain:w256
正六角形タイル

正六角形の作り方

まずは以下のような六角形を作ります。
f:id:r-ngtm:20181213014907p:plain

横のサイズを√3/2倍すると正六角形になります.
f:id:r-ngtm:20181213014921p:plain

シェーダーグラフで六角形を作る

まずは以下の六角形を作ります。
f:id:r-ngtm:20181213014907p:plain

STEP1: 六角形の斜線部分を作る

最初に六角形の斜線の部分を作ります。
f:id:r-ngtm:20181213014939p:plain


以下のようなノードを組み、1.5x + yを作ります。
f:id:r-ngtm:20181213014952p:plain


以下のような結果が得られました。
f:id:r-ngtm:20181213015007p:plain:w256

赤く線を付けた部分は1.5x + y = 1の直線に一致します。
f:id:r-ngtm:20181213015020p:plain:w256

STEP2 : 4つの斜線を作る

左右対称なxと上下対称なyを作り、 これらを用いて1.5x + yを作ると、 上下左右対称な4つの斜線を作ることができます。
f:id:r-ngtm:20181213015045p:plain


1.5x+y=1のラインは4箇所に表れています。
x,yはUVの中央を軸とした上下左右対称な値であることに注意してください。
f:id:r-ngtm:20181213015101p:plain

これらの斜線は六角形の4つの斜線に一致しています。

STEP3 : 水平線を作る

1.5x + y と 2y に対してMaxをかけることで、六角形の水平部分を付け加えることができます。
f:id:r-ngtm:20181213015120p:plain

f:id:r-ngtm:20181213015146p:plain:w256

水平な線は 2y = 1の直線に一致します。 yは上下対称、かつ値の範囲が0≦y≦0.5であることに注意してください。
f:id:r-ngtm:20181213015200p:plain:w256

STEP4 : 横に縮めて正六角形にする

xを2/√3倍すると、正方形の横方向の大きさが√3/2倍され、正六角形になります。
f:id:r-ngtm:20181213015421p:plain
f:id:r-ngtm:20181213015436p:plain:w256

正六角形タイルを作る

次に、この正六角形を並べて正六角形タイルを作っていきます。

STEP1: x,yの0~1の繰り返しを複数作る

まずはx,yにMultiplyとFractionをかけて0~1の繰り返しを複数作ります。
f:id:r-ngtm:20181213015507p:plain
f:id:r-ngtm:20181213015525p:plain:w256

STEP2: 偶数番目の六角形をズラす

x座標にFloorとModuloをかけ、0, 1, 0, 1,・・・の繰り返しを作り、これを0.5倍したものをy座標に足します。
これにより、偶数列目の正六角形が0.5上にずれます。
f:id:r-ngtm:20181213015614p:plain
f:id:r-ngtm:20181213015630p:plain:w256
正六角形タイルのような見た目になりました。

STEP3: 白飛びしたを超えた部分を反転させる

良い感じになってきましたが、白飛びしている箇所が気になります。
f:id:r-ngtm:20181213015648p:plain

白飛びの原因

ここで、最初の方の図を思い出してみましょう。
f:id:r-ngtm:20181213015200p:plain:w256

白飛びしている部分は
1.5x + y > 1 となっている部分です。
イメージとしては以下のようなグラフを描いています。
f:id:r-ngtm:20181213015735p:plain

白飛びの解消

ここで、色valueに対して abs(value - 1.0) としてやると、 白飛びを解消することができます。
f:id:r-ngtm:20181213015809p:plain

ノードで組んでみると以下になります。
f:id:r-ngtm:20181213015825p:plain

白飛びが消え、求めていた六角形タイルが出来上がりました。
f:id:r-ngtm:20181213014757p:plain:w256

ノード全体

f:id:r-ngtm:20181213020019p:plain

参考

今回の記事を書くにあたって下記の六角形GLSLを参考にさせていただきました。 https://gist.github.com/sakrist/8706749