夜風のMixedReality

xRと出会って変わった人生と出会った技術を書き残すためのGeekなHoloRangerの居場所

ShaderGraphでパーティー感あるShaderを描く

本日はshader勉強枠です。

本日はパーティー感あるShaderを作成します。

f:id:Holomoto-Sumire:20211006212954g:plain

〇パーティー感あるシェーダー

①[UnlitGraph]でShaderGraphを作成します。

f:id:Holomoto-Sumire:20211006211413p:plain

今回もエフェクトのShaderのためライトの影響を考慮しないUnlitで作成します。ライトの処理がないことによりより軽量になります。

②LEDのタイルを作成します。[Tiling and Offset]ノード、[Fraction]ノード、[Rounded Rectangele]ノードをつなぎます。

Tilingの値は30に設定します。

f:id:Holomoto-Sumire:20211006212751p:plain

LEDタイルを作る流れは先日の電光掲示板と同様です。

redhologerbera.hatenablog.com

[Rounded Rectangele]ノードは[Rectangele]ノードに加え角を丸くする機能を持っています。

f:id:Holomoto-Sumire:20211006213122p:plain

③[Sample Texture 2D]ノードを[Multiply]ノードでつなぎカラーへと出力します。

f:id:Holomoto-Sumire:20211006213357p:plain

これによって次の画像用に電光掲示板の基礎部分が完成します。

f:id:Holomoto-Sumire:20211006213532p:plain

次に発行部分を作成します。

④[Time]ノードと[Float]型変数を[Multiply]ノードで掛け合わせます。また[UV]ノードと[Split]ノードをつなぎ、Gの出力を時間のアウトプットと[Add]ノードで足し合わせます。

f:id:Holomoto-Sumire:20211006214034p:plain

[UV]ノードを[Split]ノードで成分分けし、Y成分を時間と足し合わせてアニメーションさせます。

⑤[Fraction]ノードで0~1に値をおさめ、[Multiply]ノードで0.5をかけ強度を設定し[Multiply]ノードですでに作成した電光掲示板の基礎部分と掛け合わせます。

f:id:Holomoto-Sumire:20211006215132p:plain

これでアニメーションが作成できました。

f:id:Holomoto-Sumire:20211006215327p:plain

最後に色を掛け合わせます。

⑥[Multiply]ノードで0.5をかけ時間の流れを半減し、[Tiling and Offset]ノードのOffsetにつなぎます。その結果を[Sample Texture 2D]ノードへつなぎます。

f:id:Holomoto-Sumire:20211006215500p:plain

ここではテクスチャとして次の画像を作成しました。

f:id:Holomoto-Sumire:20211006215706p:plain

⑦最後に[Multiply]ノードでカラーを掛け合わせます。

f:id:Holomoto-Sumire:20211006215841p:plain

以上でパーティー感あるShaderが完成しました!