夜風のMixedReality

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

ガチラボでShaderGraphを使用したShader芸勉強会を開催しました。その② 面の表現

本日はShader勉強枠です。

10月27日20:30から熊本のxRコミュニティ[KumaMCN]のオンライン勉強会を開催しました。

今回はShaderGraphを使用してShaderAnimationを作成しています。

〇ガチラボとは?

[ガチラボ]とは熊本のxRコミュニティ[KumaMCN]で行われるガチ勢育成勉強会です。

熊本で活躍されているがち本さんが主に開催しておりましたが今回はがち本さんの弟子である筆者が主にShaderに関しての知見を共有しながら実際にオンラインワークショップを開催しました。

今回はShaderGraphを使用してより実践的な内容としてShader芸を披露、共有しました。

前回の記事では今回作成したシールドシェーダーのアニメーションを作成しました。

redhologerbera.hatenablog.com

今回はシールドの表現を作成します。

〇シールドシェーダー

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

今回は[Sample Texture 2D]ノードをマスタースタックの[MainColor]および[Alpha]に接続しています。

[Sample Texture 2D]ノードの画像にはUnityで提供されている[Default Particle]テクスチャを使用しています。[Invert Color]ノードの処理によって外周部が白く、中央部がくりぬかれたように黒くなっています。

これを[Alpha]につなぐことで外側から中央に向けて透過率を持つようになります。

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

ここで3Dモデル側ですべての面で共通した次のようなUVを持つことですべての面で共通した表現を行っています。

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

ここで前回の使用したアニメーションで用いたUVとは別に2つ目のUVを使用しています。

f:id:Holomoto-Sumire:20211030220944g:plainf:id:Holomoto-Sumire:20211030220341p:plain

[BaseColor]への接続に[Multiply]ノードでColorをつなぎマテリアル側で任意の色に変更できるようにします。

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

以上でベースとなる表現が完成しました。

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

〇面ごとの色のアニメーション

次に面ごとにアニメーションと同様に面ごとに色のアニメーションを行います。

頂点のアニメーション同様頂点アニメーションで使用したUVの[UV]ノードを[Posterize]ノードへつなぎ面ごとの0~1の数値を作成し、結果をマスタースタックの[Alpha]につなぐ前に処理を挟みます。

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

これによって面が動くだけではなく透明度が変化するようになりました。

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

以上でShaderGraphを使用したシールドシェーダーが完成しました。

次回ガチラボは11月24日水曜日の20時半に開催されます。