rn.log

備忘録など

【シェーダーグラフメモ その48】レーザービームを作る

はじめに 

シェーダーグラフを利用して、レーザービームっぽいものを作る方法を解説します。

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


上記のエフェクトは、レーザー+黒い帯という組み合わせでできています。

今回はこれらの作り方を解説します。

f:id:r-ngtm:20190223232247g:plain f:id:r-ngtm:20190223232835g:plain

 

エフェクト1 : レーザー

STEP1. テクスチャを用意

今回は以下のテクスチャを使用します。

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

 

上記のテクスチャはSubstanceDesignerで以下のようなノードを組んで作成しました。

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

 

STEP2 :シェーダーグラフ作成

STEP1のテクスチャをUVスクロールさせ、HDRカラーと乗算したものをPBRのEmissionに入力します。

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

 

PBRノードは以下のように設定します。

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

 

上記のシェーダーグラフを板メッシュに張り付けると以下のようになります。

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

 

マテリアルのパラメータSpeed(UVスクロールの速さ)を14にすると、以下のようになります。(レーザーっぽさを出すため、板メッシュをz方向に引き延ばしています)

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

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

 

エフェクト2 : 黒い帯

ここでは、以下のような黒い帯の作り方を解説します。

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

 

STEP1. テクスチャを用意

 今回は以下のテクスチャを使用します。

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

 

上記のテクスチャは、SubstanceDesignerで以下のようなノードを組んで作成しました。

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

 

STEP2: シェーダーグラフ作成

STEP1のテクスチャをUVスクロールさせます。

今回はテクスチャを斜めに変形させたいのでテクスチャUVのy成分にテクスチャUVのx成分を足しています。

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

 

PBRノードは以下のように設定します。

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

 

マテリアルのパラメータUvScroll(スクロールの速度)のY成分を8に設定します。

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

 

このシェーダーグラフから作成したマテリアルを円柱に張り付けると、以下のようになります。

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


スケール値(4, 16, 4)と(-4, 16, 4)の円柱を並べ、マテリアルを適用すると以下のような黒い帯になります。

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


完成

STEP1のレーザーとSTEP2の黒い帯を合わせて今回のレーザービームは完成となります。

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

 

【シェーダーグラフメモ その47】炎の卵を作る

はじめに

炎が燃えさかるような卵を作る方法を解説します。

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

 

 サンプル

github.com

 

STEP1 : テクスチャ準備

今回は以下のテクスチャを使用します。

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

 

上記のテクスチャはSubstanceDesignerで以下のようなノードを組んで作成しました。

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

BnW Spots1のパラメータを Scale = 1, Disorder = 0.27, Roughness = 0.47としたものをOutputでビットマップ出力しています。

 

STEP2 : シェーダーグラフ作成

次にシェーダーグラフを作成します。

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

 

PBRノードは以下のように設定します。

Workflow = Mettalic, Surface = Opaque, Blend = Alpha, TwoSided = True

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



これを球体に張り付けると以下のようになります。

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

 

パラメータを以下のように設定することで炎らしい見た目になります。

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

 

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

 

※光の滲みはPostProcessingStack V2のBloomで実現しています。

シェーダーグラフ単体では光の滲みは出せないので注意です。

STEP3 : 卵型のメッシュを作成(Houdini)

最後に以下のような卵型のメッシュをHoudiniで作成します。

STEP2の球メッシュを卵型メッシュに置き換えることで、炎の卵の完成となります。

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

 

STEP 3.1 非商用版Houdini Apprenticeの準備

まずは非商用版のHoudini Apprenticeをインストールします。

Download | SideFX

 

STEP 3.2 Houdiniを起動する

Houdiniを起動すると以下のようなウィンドウが登場します。

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

 

今回は赤い線で囲った部分を使用します。

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

Houdiniユーザーインターフェース

 

STEP 3.3 Geometryノード作成

ネットワークビューを右クリックするとTABメニューが現れます。

右クリックの代わりにネットワークビュー上でTABキーを押すことでもTABメニューを出せます。

 

TABメニュー上で"Geo"と入力し、Geometryを選択します。

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

 

geo1ノードが作成されます。

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

 

STEP 3.4 geo1ノードの中に入る

geo1ノードをダブルクリックして、中へ入ります。

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

  

何もないウィンドウが表示されるはずです。

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

 

STEP 3.5 Sphereノード作成

ネットワークビュー上で右クリックし、TABメニュー上で"Sphere"と入力してSphereを選択します。

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

 

 Sphereノードが作成されます。

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

 

画面左側のシーンビューには球が表示されます。

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

 

STEP 3.6 球をポリゴンにする

パラメータービューにあるPrimitive Typeを Polygon Mesh にします。

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

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

 

STEP 3.7 UVプロジェクション

次にUV座標を球体に貼り付けます。

ネットワークビュー上でTABメニューを出し、UV Projectを選択します。

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

 

入力と出力を一つずつ持ったUV Projectノードが作成されます。(uvprojection1という名前になっています)

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


丸ポチの部分をドラッグアンドドロップしてSphereノードとuvprojectノードを接続します。

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

 Sphereノードの出力がuvproject1へ入力されるようになりました。

 

STEP 3.8 UVの表示

TABメニューからuvquickshadeノードを作成します。

これをuvprojectノードと接続し、uvproject1の出力がuvquickshade1へ入力されるようにします。

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

 

uvquickshade1ノードの右端をクリックし、ノードのDisplayフラグをONにします。

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

 

シーンビューの球体にUVが表示されるようになります。

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

 

STEP 3.9 UVプロジェクションの調整

uvprojection1ノードををクリックして選択状態にします。

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

 

パラメータービューからProjectionの部分をPolarへ設定します。

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

 

球面のUVがきれいになりました。

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

 

STEP 3.10 球体を歪める

最後にBendノードを利用して球体を卵状に歪ませます。

Bend

 

まずはBendノードを作成し、uvquickshadeノードの出力がBendノードへ入力されるようにします。

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

 

Bendノードの右端のボタンをクリックしてDisplayフラグをON(可視状態)にします。

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

 

シーンビューは以下のような表示になります。

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

 

Bendノードのパラメータを以下のように設定します。

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

 

卵のような形状になります。f:id:r-ngtm:20190213223945p:plain

 

STEP 3.11 UVを90°回転させる

現状だと卵がとがっている方向にX軸、垂直な方向にY軸が向いていますが、

今回は都合が悪いのでこれを90°回転させます。

 

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

 

uvproject1とuvquickshade1の間にTransformノードを挟み込みます。

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

 

TransformノードのRotateのZ成分を-90に設定します。

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

 


UVが90°回転し、卵がとがった向きへUVのY軸、垂直な方向へX軸が向くようになりました。

Bend1ノードによってデフォームをかける前に球体を回転させているため、UVだけがうまい具合に回転してくれています。

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

 

STEP 3.12 卵型メッシュをOBJ形式で書き出し

最後に卵型メッシュをOBJ形式で書き出します。

UnityはOBJをサポートしているため、OBJで書き出すことでUnityで利用できるようになります。

 

まずはネットワークビューのbend1を右クリックします。

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

 

Save/Geometry... を選択するとファイル書き出しウィンドウが表示されます。

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

 

今回は炎の卵を作るということでファイル名をfire_egg.objとします。

Acceptボタンを押すとobjファイルが出力されます。

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

 

ファイル書き出しウィンドウの矢印アイコンをクリックすると出力されたobjファイルを手っ取り早く見ることができます。

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

 

STEP 3.13 卵型メッシュをUnityに取り込む(完成) 

fire_egg.objをUnityに取り込み、

STEP2で作成したシェーダーグラフを張り付けることで以下のような炎の卵になります。(Rotation = (0, 0, -90)にしています)

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

 

 

 

【シェーダーグラフメモ その46】滝を作る

 

はじめに

シェーダーグラフとProBuilderを組み合わせて、以下の滝のようなものを作る方法を解説します。

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

 

長くなるため今回は解説しませんが、上記の滝に手を加えると以下のような滝を作ることも可能です。

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

 

GitHubサンプル

github.com

作り方解説

STEP1 : 板を作成

ProBuilderで3x1の大きさの板を作成します。

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

 

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

STEP2 : ノイズとx座標でStepをとる

スクロールするノイズとUVのx成分でStepをとり、PBR Masterノードに出力します。

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

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

 

STEP3 : Lerpで色を付ける(シェーダーグラフ完成)

Lerpノードで色を付ければシェーダーグラフは完成となります。

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

 

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

 

STEP4 : メッシュをL字型にする

辺を選択し、Shiftキーを押しながら辺をY軸下方向に動かし、水が落ちる部分のメッシュを作成します。

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

 

 

STEP5 : UV EditorでUVを編集

次に、縦メッシュのUVを編集していきます。

まずはProBuilderのUV Editorを起動します。

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

 

先ほど作成した縦の面を選択し、UVエディタ上で選択面を右へ移動させます。

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

 

Rotationを270°に設定します。

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

 

ここまでの作業を終えると以下のようになります。

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

縦メッシュの泡の動きの向きが逆になっていますね。

 

ここで流れの向きを逆向きにするため、新しくシェーダーグラフを作成します。

 

STEP6 : 流れの向きを逆にしたシェーダーグラフを作成

STEP2 ~ STEP3で作成したシェーダーグラフを複製し、

時間の係数(0.7, 0.0)を(-0.7, 0.0)に置き換えます。

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

 

 このシェーダーグラフからマテリアルを作成しておいてください。

 

STEP7 : 縦メッシュにマテリアルを割り当てる

Material Editorを起動します。

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

 

STEP6のシェーダーグラフから作成したマテリアルを縦メッシュに割り当てます。
f:id:r-ngtm:20190203001050g:plain

完成

滝の完成です。

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

 

微調整

水に浮かぶ泡を加えたりメッシュの形に手を加えて以下のような滝を作ってみました。

説明が長くなるため、詳細は割愛します。

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

 

ノード全体

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

 

メッシュ

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

 

【シェーダーグラフメモ その45】シンプルなGlitchエフェクト

 

はじめに

テクスチャにGlitch(グリッチ)エフェクトをかけるシェーダーグラフの作り方を解説します。

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

 左側はシェーダーグラフのみで作ったグリッチエフェクトで、

グリッチのかかり具合をAnimationClipで制御したものが右になります。

 

サンプル

github.com

 

作り方解説

STEP1 : 横のラインを作る

StepSubtractを組み合わせ、横のラインを作ります。

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

 Subtractによって発生する負の成分を取り除くため、最後にSaturateをかけています。

 

STEP2 : ラインをUVのx成分に足す

ラインに0.15を乗算したものをUVのx成分に足します。

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

 

横に0.15ズレたテクスチャが表示されます。

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

 

STEP3 : ラインをランダムに動かす

ラインのY座標は以下の赤い線で囲ったノードでした。

このY座標を時間経過でランダムに変化する値に置き換えることで、ラインの位置がランダムになります。

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

 

以下のようにTime、Modulo、SimpleNoiseを接続してランダムな値を作ります。

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

時間がある程度大きくなってくるとSimpleNoiseの出力値の変化が乏しくなってくるため、Moduloノードを利用して時間を小さい範囲に抑えています。

Moduloの代わりにFractionを使ってもOKです。

 

以下のような絵が出力されます。

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

これでも十分カッコいいですが、変化が激しすぎて扱いづらいので、

フレームレートを落とします。

 

STEP4 : フレームレートを落とす(完成)

時間にPosterizeをかけることでフレームレートを落とすことができます。

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

 

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

 

 

補足 : Posterizeのグラフ

Steps = 6を指定した場合のPosterizeは以下のようなグラフを描きます。

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

グラフの描画にはGraphToyを使用させていただきました。

Graph Toy

 

Vector1プロパティを作成し、フレームレートの数値として利用するとインスペクター上から値を変更できたり、使いまわせるようになるので便利です。

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

 

微調整

微調整1 : ズレ幅をゆらす

時間にサイン波を適用したものをズレ幅に乗算することで、ズレ幅を揺らすことができます。

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

 

 

動きに変化が生まれました。

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

 

微調整2 : ノイズをバラつかせる

ノイズに巨大な数を乗算し、Fractionをかけてノイズをバラつかせます

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

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

微調整3 : フレームレートを変えてみる

フレームレートを10にした場合、以下のようになります。

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

 

フレームレートを24にすると、以下になります。

サイバーな感じが生まれました。

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

 

微調整4 : ノイズの係数を手動で変えてみる

これまで、ノイズの係数として0.15を乗算していました。

この数値をインスペクターから変更できるようにしてみましょう。

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

 

ノイズの係数用のプロパティGlitchScaleを作成し、これをMultiplyノードに接続します。

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

 

今回は数値を0.0 ~ 0.15の間で変更したいので、

プロパティのModeをSliderに設定してMin=0, Max = 0.15に設定します。

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

 

インスペクター上からノイズのかかり具合を調整できるようになりました。

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

 

調整5 : アニメーションでシェーダーを制御(完成)

上記で追加したプロパティGlitchScaleをアニメーションから制御してみました。

 

GlitchシェーダーがくっついているオブジェクトにAnimationを追加し、

GlitchScaleの数値を以下のように打ち込みます。

Animationの追加方法についてはここでは割愛します。

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

 

再生すると以下のようなになります。

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

 

【シェーダーグラフメモ その44】六角形タイルを利用した画像切り替え4種類

はじめに

六角形タイルを利用した画像切り替え4種の作り方を解説します。

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

 

準備

今回のシェーダーグラフでは、六角形タイルカスタムノードを使用します。

下記URLのカスタムノードをUnityプロジェクトに入れてください。

六角形タイルを作るShaderGraphカスタムノード · GitHub

 

Hexagonカスタムノードは以下のような値を出力してくれます。

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

 

シェーダーグラフ1 : 横方向に切り替える

テクスチャを横方向に切り替えるシェーダーグラフの作り方を解説します。

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

 

ノード全体

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

 

STEP1 : Hexagonノードから六角形タイルを作る

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

STEP2 :  右方向に向かって小さくする

StepのEdgeに定数を指定していましたが、代わりに六角形のx座標を利用して、

右側に行くほど

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

 

STEP3 : 六角形を動かす

六角形のx座標から数値を減算して、六角形を動かせるようにします。

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

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

 

Sliderをプロパティ化

マテリアルのインスペクタ上から値を変化させられるように、Sliderはプロパティ化しておきます。

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

 

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

STEP4 : 六角形の大きさの変化を左右反転させる

x座標にOneMinusノードを適用すると、x座標の左右が逆転し、六角形の大きさの変化も逆転します。

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

 

STEP5 : 六角形タイルを利用してテクスチャを混ぜる

六角形タイルとSampleTexture2DをLerpノードに入力し、テクスチャを混ぜて完成です。

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

 

結果

最終的に以下のような絵が出力されます。

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

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

 

シェーダーグラフ2 : 縦方向の変化にする 

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

 

シェーダーグラフ1では、X座標を六角形のStep値として使用していたため、横方向に六角形の大きさが変化していました。

X座標の代わりにY座標を使用した場合、縦方向の変化になります。

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

 

シェーダーグラフ3 : 広がるような変化にする

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

 

y座標の代わりに中央からの距離を利用すると、広がるような変化を作ることができます。

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

 

六角形を大きくする

HexagonノードのScaleの値を小さくすると、六角形が大きくなります。

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

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

 

シェーダーグラフ4: ランダムに混ざるような変化にする

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

 

Stepの入力値としてSimpleNoiseを利用するとランダムに混ざるような変化になります。

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

 

【シェーダーグラフメモ その43】テクスチャを引き延ばすようなエフェクト

はじめに

テクスチャを横に引き延ばすようなエフェクトをかけるシェーダーグラフの作り方を解説します。

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

 

凱風快晴はパブリックドメイン美術館にあるものを使用させていただきました。

www.bestweb-link.net

 

ノード全体

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

 

サンプル

github.com

作り方解説

STEP1 :  テクスチャ表示

SampleTexure2DノードとUnlit Masterノードを接続し、テクスチャを描画します。

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

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

STEP2 : テクスチャを右に引き延ばす

UVのx成分Minimumを適用したものをテクスチャのUVとして使うと、

しきい値より右側の部分が引き延ばされたような見た目になります。

ここではしきい値として0.5(ちょうど真ん中)を設定しています。

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

右側へ伸びたような見た目になりました。

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

 

 軽い補足

しきい値Aより右側の部分ではx座標としてAが使用されるため、右側に引き延ばされたような見た目になります。

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





STEP3 : しきい値をプロパティ化(完成)

Vector1型のプロパティを作成、Minimumノードに接続します。

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

 

インスペクタ上からしきい値を変更できるようになりました。

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

 

左に引き延ばす

Minimumの代わりにMaximumノードを使うと、テクスチャが左に引き延ばされるようになります。

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

 

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

 

軽い補足

しきい値Aより左側の部分ではx座標としてAが使用されるため、左に引き延ばされたような見た目になります。

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




【シェーダーグラフメモ その42】テレビの砂嵐のようなノイズ

 

はじめに

 テレビの砂嵐っぽいシェーダーグラフの作り方を解説します。

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

 

ノード全体

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

 

サンプル

github.com

作り方解説

STEP1. ノイズを作る

Simple NoiseをUnlit Masterノードにつないでノイズを出します。

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

 

以下のようなノイズが出力されます。

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

STEP2. ノイズを動かす

ノイズに時間を足してFractionを適用して、ノイズを動かします。

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

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

 

STEP3 . ノイズをバラつかせる(完成)

ノイズの動きに偏りがありますが、

これはSimpleNoiseの値が0.0 ~ 0.7あたりの範囲に集まっているために、動きの偏りが生まれています。

ノイズをバラつかせるために巨大な数値を乗算し、Fractionをかけて整数部分を取り除きます。

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

 

ノイズがバラついた動きになりました。

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

微調整

時間を4倍速、ノイズの係数を34にすると以下のような砂嵐になります。

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

 

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