3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ShaderGraph レシピ #5 HEX柄(ハニカム模様)

Last updated at Posted at 2020-12-17

#HEX柄(ハニカム模様)

スクリーンショット 2020-12-18 1.07.28.png

六角形の有機的な柄です。
これを作れると、バリア表現など様々な演出で重宝します。

#作り方
構造を説明するのが難しいので、こういうものだと覚えましょう。
また自分で作れなくてもUnity公式が配布しているので困ったらそれをつかいましょう。

1.タイルを作ります

前半部分の全体像
スクリーンショット 2020-12-18 1.14.37.png

まずストライプを作って、タイリングした1つ辺りのサイズの大きさに切り出します。

スクリーンショット 2020-12-18 1.36.53.png

スクリーンショット 2020-12-18 1.41.24.png
これのことです。今はTiling=10で作ってるので、だいたい10/1くらいの部分にストライブが出ています。

これと、一番最初にMultiplyした結果をVector2のxとy成分にします。
スクリーンショット 2020-12-18 1.46.58.png
この部分ですね。
そうすると実際には下のような画像がつくられます
スクリーンショット 2020-12-18 1.45.44.png

それをModuloノードを使って1,1で割った余りを出すときれいにタイリングされます。理屈はよくわかりません。
スクリーンショット 2020-12-18 1.43.44.png

この結果から0.5を引いて、負数の部分を作った後、absoluteノードで絶対値を取り出すとHEXのもとになるタイルが作れます。

スクリーンショット 2020-12-18 1.50.59.png

2.ヘックスに仕上げます

後半部分の全体像

スクリーンショット 2020-12-18 1.18.06.png

1ノードずつ追いかけていくと、なんとなく過程が分かるのですが、要するに前半戦で作ったタイルの各成分を一度取り出して、増幅して、合成して、重なりが薄い部分(結果的に値が0に近い部分)でHEXの線を作ります。

スクリーンショット 2020-12-18 1.59.33.png

この部分ですね。
あとは値を倍にしてメリハリつけた後、Smoothstepノードを使って2値化して完成です。

スクリーンショット 2020-12-18 1.59.59.png

SmoothstepノードEdge2の値の閾値を大きくするとHEXの線が太くなります。

スクリーンショット 2020-12-18 2.03.22.png

スクリーンショット 2020-12-18 2.03.41.png

###完成!
スクリーンショット 2020-12-18 1.07.28.png

その他のレシピはShaderGraphレシピ一覧にまとまっています

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?