2018-12-19

【シェーダーグラフメモその28】集中線を作る

ShaderGraph Unity

以下のような集中線の作り方を解説します
f:id:r-ngtm:20181219214738p:plain:w280

ロゴに集中線エフェクトを加える、などといった使い方が考えられます。
f:id:r-ngtm:20181219215423p:plain:w160
f:id:r-ngtm:20181219215435p:plain:w160

作り方解説

STEP1 : ギザギザを作る

x座標でノイズを生成し、y座標と足し合わせます。
f:id:r-ngtm:20181219214806p:plain

下のほうが濃く、上のほうが色が薄いギザギザができました。
f:id:r-ngtm:20181219214817p:plain:w300

STEP2 : 下の部分を黒っぽくする

y座標にRemapを適用します。
f:id:r-ngtm:20181219214850p:plain

ギザギザの下の部分が若干黒くなりました。
f:id:r-ngtm:20181219214904p:plain:w300

STEP3 : 明暗のコントラストを補正

Smoothstepノードを使い、明暗の強弱をつけます。
f:id:r-ngtm:20181219214921p:plain

ギザギザの下の部分が若干黒くなりました。
f:id:r-ngtm:20181219214931p:plain:w300

STEP4 : 極座標変換

UV座標ノードを極座標ノードに差し替え、
xの代わりに極座標のθ、 yの代わりに極座標のrを使うようにノードを繋ぎます。

f:id:r-ngtm:20181219214956p:plain
f:id:r-ngtm:20181219215012p:plain

内側から外側へ伸びるトゲトゲになりました。
f:id:r-ngtm:20181219215032p:plain:w300

STEP1~STEP3ではx座標で生成したノイズにy座標を加算することで、上に伸びるトゲトゲを作っていました。
値が上方向に上昇するy座標の代わりに外側に向かって増加するrを使うように変更したため、このような見た目になりました。

STEP5 : ギザギザの伸びる向きを反転(完成)

極座標の半径rにOneMinusノードを適用し、0~1を反転します。

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

外側が黒く、内側が白っぽくなりました。
f:id:r-ngtm:20181219215347p:plain:w300

おまけ: ロゴに集中線を付けてみた

ドカベンロゴに集中線を付けて遊んでみました。
f:id:r-ngtm:20181219215414p:plain
f:id:r-ngtm:20181219215423p:plain

集中線の色を変えてみるのも面白いかもしれません。
f:id:r-ngtm:20181219215435p:plain

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

2018-12-18

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

ShaderGraph Unity

以下のような、六角形の光が広がる感じのシェーダーグラフの作り方を解説します
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

2018-12-17

【シェーダーグラフメモその26】六角形シールド表現

ShaderGraph Unity

以下のような、六角形が点滅するバリアのような表現を作る方法を解説します。

f:id:r-ngtm:20181217001434g:plain

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

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

作り方解説

STEP1: 半透明な六角形タイルのボールをつくる

まずは以下のようなノードを組みます。
f:id:r-ngtm:20181217002602p:plain

UnlitノードはTranparentに設定し、半透明で描画されるようにします。
f:id:r-ngtm:20181217002936p:plain

このシェーダーグラフをUnity標準のSphereにくっつけると以下のようになります。
f:id:r-ngtm:20181217003056p:plain
(※半透明になっていることが分かるように、Sphereの内側に立方体を置いています)

STEP2: 点滅させる

ノイズから時間を引き、Fractionをかけて0~1の間を繰り返すようにします。
f:id:r-ngtm:20181217004440p:plain
f:id:r-ngtm:20181217004535g:plain:w340

STEP3: 点滅をバラつかせる

点滅が偏っているので、MultiplyとFractionを組み合わせてノイズをバラつかせ、点滅をバラつかせます。
f:id:r-ngtm:20181217005320p:plain
f:id:r-ngtm:20181217005519g:plain:w340

STEP4: 点滅の色変化を大きくする

Powerノードを使い、点滅の色変化を大きくします。
f:id:r-ngtm:20181217010230p:plain
f:id:r-ngtm:20181217010259g:plain

STEP5: 六角形のすきまをつける

f:id:r-ngtm:20181217010903p:plain
f:id:r-ngtm:20181217010917g:plain

STEP6: 六角形を横につぶす(完成)

六角形が横に長いので、X座標を1.7倍して六角形を横に1/1.7倍につぶして完成です。
f:id:r-ngtm:20181217011503p:plain
f:id:r-ngtm:20181217011514g:plain

ノード全体

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

2018-12-16

【シェーダーグラフメモその25】ランダムな波紋をもつ六角形タイル

ShaderGraph Unity

以下のような模様を作るシェーダーグラフです。
f:id:r-ngtm:20181216234722p:plain

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

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

作り方解説

STEP1: 波紋をもつ六角形タイルを作る

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

STEP2: ノイズを加える

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

STEP3: 六角形位置でズラす

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

STEP4: Smoothstepで補正(完成)

Smoothstepで白黒の強弱をつけて完成です。
f:id:r-ngtm:20181216235314p:plain

ノード全体

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

2018-12-16

【シェーダーグラフメモその24】六角形スキャンライン

ShaderGraph Unity

六角形で流れる光の線(スキャンライン)を作るシェーダーグラフです。
f:id:r-ngtm:20181216170715g:plain

サンプル

https://github.com/rngtm/ShaderGraphExample/tree/master/Assets/ShaderGraphExample/24_HexScanline

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

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

作り方解説

STEP1: 六角形グリッドを作る

まずは以下のようにHexagonノードとStepノードを組み合わせて六角形グリッドを作ります。
f:id:r-ngtm:20181216170233p:plain

STEP2: 流れるグラデーションを乗算(完成)

x方向グラデーションを時間でスクロールさせてSampleGradientで色を付けます。
これとSTEP1の六角形を乗算して、六角形スキャンラインの完成です。
f:id:r-ngtm:20181216170205p:plain

2018-12-13

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

ShaderGraph Unity

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

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 : ４つの斜線を作る

左右対称な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

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

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