rn.log

備忘録など

【シェーダーグラフメモ その27】拡散する六角形の光

以下のような、六角形の光が広がる感じのシェーダーグラフの作り方を解説します
f:id:r-ngtm:20181218220506g:plain:w400

準備 : 六角形カスタムノードを使えるようにする

以下のカスタムノードをUnityプロジェクトへ追加し、Hexagonカスタムノードが使える状態にします。
六角形タイルを作るShaderGraphカスタムノード · GitHub

HLSL形式の六角形ノードはこちら
Unity ShaderGraphのCustomFunctionで六角形タイルを作るためのHLSLファイル · GitHub

Hexagonノードは六角形タイルを出力してくれます。
f:id:r-ngtm:20181216164024p:plain

作り方解説

STEP1 : 六角形位置を表示

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

上記のシェーダーグラフをUnityデフォルトの板に適用すると、以下のような見た目になります。
f:id:r-ngtm:20181218220608p:plain:w240

STEP2 : (0.5, 0.5)からの距離をとる

f:id:r-ngtm:20181218220623p:plain
f:id:r-ngtm:20181218220649p:plain:w240

STEP3 : 色を付ける

f:id:r-ngtm:20181218220704p:plain
f:id:r-ngtm:20181218220721p:plain:w240

STEP4 : 暗い部分を半透明にする

距離にOneMinusを適用して0-1を反転します。
これにSmoothstepを適用して、グラデーションをくっきりとした感じに補正します
f:id:r-ngtm:20181218220735p:plain

UnlitノードはTransparentにしておきます.
f:id:r-ngtm:20181218220836p:plain

以下のように黒い部分が半透明になりました。
f:id:r-ngtm:20181218220854p:plain:w240

UnlitノードをTransparentに設定することで、Alpha<1.0の部分が半透明で描画されるようになります。

補足: Smoothstepの挙動

f:id:r-ngtm:20181218222738p:plain:w240

smoothstepは以下のようなカーブを描きます。

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

グラフの描画にはiq氏のgrapytoy(http://www.iquilezles.org/apps/graphtoy/)を使用させていただきました。

STEP5 : 距離をズラす

距離に数値を加算し、距離をズラします。
f:id:r-ngtm:20181218220908p:plain

以下のように光が小さくなります。
f:id:r-ngtm:20181218220924p:plain:w240

STEP6 : 動かす

数値ノードを右クリックして、Convert to Propertyを選択してプロパティ一覧へ登録します。
f:id:r-ngtm:20181218220936p:plain:w320

プロパティ一覧にVector1が追加され、SliderがVector1プロパティノードに置き換わります。
f:id:r-ngtm:20181218220951p:plain:w320

Saveするとインスペクター上から数値を変更できるようになります。
f:id:r-ngtm:20181218221009g:plain