夜風のMixedReality

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

ShaderGraphでクリッピング表現を行う その①

本日はShader学習枠です。

ShaderGraphでクリッピング表現を行います。

〇クリッピング表現を行う

クリッピングとはClip(くりぬき)の名の通り、描画のうちの任意の一部分を別の色もしくは透明にする表現を指します。

今回はShaderGraphでクリッピング表現を実装します。

①新規のShaderGraphを作成します。

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

GraphInspectorMaterialからShaderの設定をUnlitに設定します。

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

Alpha Clipを有効化します。これによってα値に関する出力が追加されます。

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

④球の方程式をノードで再現します。

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

球の方程式は次のようになります。

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

ここではPositionノードでUnityでの座標系(数式のx,y,z)をSplitノードで成分分解し、それぞれの成分を二乗し、足し合わせて半径の二乗から引き算しています。

半径はRadiusとしてBlackboardにFloat型として定義しています。これによって球の半径をマテリアル側から調整できるようにしています。

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

この状態でBaseColorに接続してみます。Shaderではデバッグがしずらい面があるためメインカラーに接続して動作を見ることはよくあります。

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

球面に色が出力されていることが確認できました。

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

Alphaへ接続します。

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

これによって原点付近のみが球状に描画されるようになりました。

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

⑤Alphaへの出力の前にInvert Colorを接続します。

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

Invert Colorは入力値を反転させる(×-1)ノードになります。

この状態でシーンを見ると画像のようにリング状にクリッピングが行われます。

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

AlphaClipの値に0.99を入力します。

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

これによってリングの幅が大きくなり、球状にクリッピングされるようになります。

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

AlphaClipと球の方程式を使用することで球状のクリッピングが完成しまた。