夜風のMixedReality

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

Shader GraphでホログラムShaderを作る  その①

本日はShader勉強枠です。

先日コミュニティのイベント"ガチラボ"でShaderGraphを触る勉強会を開催しました。本日はそこで触ったShaderをまとめます。

〇ガチラボとは?

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

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

〇ホログラムShader

今回のShader勉強会では以下で公開されているShaderGraphをもとに最新環境で構築しました。

github.com

今回はUnity2020.3.13f1、UniversalRenderPipeline、ShaderGarphを用いて実装します。

①プロジェクトウィンドウで右クリック、["Create"]→["Shader"]→["Universal RenderPipeline"]→["UnlitGraph"]を用います。

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

Unlitなグラフはその名の通り光源の影響を受けません。今回はホログラムというエフェクトを作成するためこのテンプレートを用いています。

②["FragmentShader"]をクリックし、["GraphInspector"]ウィンドウから["Surface"]を["Transparent"]へと切り替えます。

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

これによってFragmentスタックに["Alpha"]のアウトプットが出現します。

③["Fresnell Effect"]ノードおよび["Power"]ノードを作成し画像のように["Alpha"]へとつなぎます。

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

["Fresnell Effect"]ノードはリムライトなどに用いられるカメラ座標(スクリーンスペース)に対して働くエフェクトノードです。

["Power"]ノードの処理を与えることでメリハリをつけています。

これによって透明度を持った無職の球が表現できます。

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

④["One minus"]ノード、["Power"]ノードをそれぞれつなぎます。 ["Power"]ノードの係数は17に指定します。

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

⑤["Add"]ノードを追加し["Alpha"]につないでいる["Power"]ノードのアウトプットと足し合わせます。最後に["Base Color"]へと出力します。

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

これによってホログラムエフェクトのベースとなるオーブのようなエフェクトが完成します。

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

最後に色を変更できるようにします。

⑥["Backboard"]の["+"]アイコンからカラーを追加します。

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

⑦["Base Color"]への出力の前に先ほど作ったカラーと["Multiply"]ノードを挟みます。

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

これによってオーブの色が変えられるようになりました。

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

以上でホログラムShaderのベースが完成しました。次回内部を作成します。