Chapter 43無料公開

🍇 ShaderGraphの座標空間

かもそば
かもそば
2021.04.08に更新

このチャプターでは、ShaderGraphの座標空間や、座標を利用した表現を紹介します。

座標の取得

Positionノードを使うと、3次元座標を取得することができます。

Space

Positionノードには、Spaceという項目があり、座標空間を選択することができます。

  • Object (オブジェクト空間)
  • View (ビュー空間)
  • World (ワールド空間)
  • Tangent (タンジェント空間)
Absolute Worldについて

Universal RP では、World と Absolute World は同じものを指しているようです。 (HDRP では区別されるようです)

The High Definition Render Pipeline uses Camera Relative as its default world space.
The Universal Render Pipeline uses Absolute World as its default world space.
https://docs.unity.cn/Packages/com.unity.shadergraph@7.5/manual/Position-Node.html

3Dモデルが表示されるまでの流れ

3Dモデルが画面に表示されるまでの流れを簡単にまとめたものが以下になります。

3Dモデルの頂点(オブジェクト空間) は座標変換された後にゲーム画面に表示される

オブジェクト空間 (Object Space)

オブジェクト空間は、3Dモデルごとに定義された空間です。
オブジェクトに貼りつくような表現をしたい場合にオブジェクト空間は活躍します。

オブジェクト空間の特徴

オブジェクト空間の座標は、3Dモデルの平行移動・回転・スケーリングの影響を受けます。

以下はSphereモデルのオブジェクト空間をRGBカラーとして画面に表示したものになります。

回転の影響を受ける


平行移動の影響を受ける


スケールの影響を受ける

使用例 ノイズを貼りつける

Simple Noise ノードのUVに オブジェクト空間のPositionを使用した場合、以下のようになります。

XY座標を使ってノイズを生成するため、ノイズはZ方向には引き延ばされたような形になります。

頂点はObject Space

Shader Graph の Vertex に渡す頂点情報は、Object Space にする必要があります。

ワールド空間 (World Space)

ワールド空間は、ワールド(シーン)を基準とした空間です。
空間に演出をつけたい場合に活躍します。

ワールド空間の座標のことをワールド座標と呼びます。

ワールド座標の特徴

ワールド座標はワールドを基準とした座標です。
ワールド座標をRGBカラーとして表示すると以下のようになります。

使用例 1. 高さ方向グラデーション

ワールド座標のY成分を使ってグラデーションを付けることで、高さ方向のグラデーションをつけることができます。

ShaderGraph

使用例 2. 空間のスキャンライン

ワールド座標のX成分を使うことで、X方向に流れる線を作ることもできます。

使用例 3. 空間と同期する頂点歪み

ワールド座標を利用したノイズを使ってモデルを歪ませることにより、モデルの座標と連動したノイズになります。

手順1 : ワールド座標でノイズを作る

ワールド空間の Position を利用して Simple Noise を生成すると、空間と同期したノイズになります。

手順2 : ノイズを使って頂点押し出し

ノイズと乗算した法線を頂点に加算すると、空間と同期したような歪み方をします

タンジェント空間 (Tangent Space)

タンジェント空間は、モデルの各頂点に接する面として定義される空間です。
ノーマルマップを利用した陰影計算は、タンジェント空間で行われます。

Shader Graph の Fragment に渡すNormalは、Tangent Spaceにする必要があります。

SampleTexture 2D でノーマルマップをサンプリングする際はTangentを設定しておきます。

ビュー空間 (View Space)

View Space は カメラを基準とした空間です。

ビュー空間の座標を3Dモデル上でRGBとして表示すると、以下のように表示されます。
Bチャンネルにはマイナスの数値(深度情報)が含まれるため、画面上ではB成分は見えません。

使用例1 : 深度スキャンライン

スクリーン座標のZ成分を利用することで、画面の奥へ向かうスキャンライン表現を作ることができます。

ShaderGraph

使用例2 : 波紋エフェクト

ビュー座標を使って XY方向の波紋を作ると、以下のように視点の中央から広がる波紋になります。

ShaderGraph

Cross Product (外積)を利用した波紋の作り方については、 🍇 内積・外積を使ったグラデーションで解説しています。

スクリーン空間 (Screen Space)

スクリーン座標 は 画面上の座標です。
画面に対する演出を付ける際にスクリーン座標は活躍します。

Screen Positionノードを使うとスクリーン座標を取得できます。

使用例 1. ホログラム表現

画面に対する演出を作る際にスクリーン座標は活躍します。

例えば、以下のようなホログラム表現を作ることができます。
作り方は 🍍 ホログラム表現 に載せています。

使用例 2. シマシマ表現

スクリーン座標を利用することで、シマシマ模様を作ることもできます。
作り方は 🍎 Screen Positionノード に載せています。

おまけ : FragmentとVertexの違い

Fragment : 画面ピクセルに対するシェーダー

Fragmentコンテキストにノードを接続した場合、画面ピクセルに対してシェーダーの処理が実行されます。

Vertex : 3Dモデルの頂点に対するシェーダー

Vertexコンテキストにノードを接続した場合、3Dモデルの各頂点に対してシェーダーの処理が実行されます。