メインコンテンツまでスキップ

sg

Tangent（接線）とは？​

3Dグラフィックスにおいて、tangent（接線） は頂点（vertex）の方向に関する情報を表します。接線は、通常、モデルの表面に沿った特定の方向（テクスチャのU方向）を示し、法線（normal）とビットangent（bitangent、テクスチャのV方向）とともに、Tangent Space（接線空間）を定義します。このTangent Spaceは、法線マップ（normal map）を使った凹凸表現（バンプマッピング）や、テクスチャの正しい向きのために必要です。

接線は以下のような3つのベクトルで構成されます：

  1. Normal（法線） - モデルの表面に対して垂直な方向。
  2. Tangent（接線） - テクスチャ空間のU方向に対応する表面に沿ったベクトル。
  3. Bitangent（副接線） - テクスチャ空間のV方向に対応するベクトルで、接線と法線に対して垂直です。

これにより、頂点の向きや法線マッピングが3Dモデルに正しく適用されます。

ShaderGraphとは？​

ShaderGraphは、Unityで視覚的にシェーダーを作成するツールです。プログラミング言語を使わず、ノードベースのインターフェースでシェーダーを組み立てられます。シェーダーは、オブジェクトの見た目を制御する重要な要素で、色、光の反射、透明度などを制御します。

ShaderGraphのいじり方と主要ノード​

ShaderGraphの基本的な操作は、ノードを繋げることによってシェーダーのロジックを構築していきます。まずShaderGraphの基本操作を説明し、その後によく使われるノードについて説明します。

ShaderGraphの始め方​

  1. ShaderGraphの作成:

    1. Projectウィンドウで右クリックし、Create > Shader > PBR GraphまたはUnlit Graphを選択します。
    2. 作成したShaderGraphを開くと、ノードベースのインターフェースが表示されます。

  2. マテリアルに適用:

    1. ShaderGraphで作成したシェーダーを使ってマテリアルを作成します。
    2. 作成したマテリアルをオブジェクトに割り当てて、シェーダーの効果を確認できます。

主要なノードの解説​

ShaderGraphにはさまざまなノードがあり、それらを組み合わせてシェーダーを作成します。ここでは、よく使われる基本ノードとその使い方を解説します。

1. Positionノード​

  • 説明: オブジェクトの各頂点のワールド空間やローカル空間での位置情報を取得します。
  • 使用用途: 頂点ごとの位置に基づいたシェーダー効果（例：グラデーションや波のような動きのシェーダー）。

2. Normal Vectorノード​

  • 説明: オブジェクトの法線ベクトルを取得します。法線は、モデルの表面の方向を表します。
  • 使用用途: ライティング効果やバンプマッピングなどに使用されます。

3. Tangentノード​

  • 説明: 各頂点の接線方向（Tangent）を取得します。通常、テクスチャのUVマッピングに関連します。
  • 使用用途: 法線マップを使った凹凸表現のシェーダー。

4. UVノード​

  • 説明: メッシュのテクスチャ座標（UV）を取得します。
  • 使用用途: テクスチャの適用やテクスチャ座標に基づくエフェクトの作成。

5. Texture2Dサンプラーノード​

  • 説明: テクスチャを読み込み、そのカラー値を取得します。
  • 使用用途: テクスチャをシェーダーに組み込み、オブジェクトに色や模様を適用する。

6. Multiplyノード​

  • 説明: 2つの値を乗算します。
  • 使用用途: 光の強さを制御したり、テクスチャの強度を調整したりする際に使用します。

7. Addノード​

  • 説明: 2つの値を加算します。
  • 使用用途: ライティングの加算や、複数のエフェクトを合成する際に使用します。

8. Sineノード​

  • 説明: Sine波を使った計算を行います。周期的な動きを表現するのに使います。
  • 使用用途: 波のような効果や、周期的に変化するエフェクトを作成。

9. Lerpノード​

  • 説明: 線形補間を行うノードで、2つの値を指定された割合でブレンドします。
  • 使用用途: カラーやテクスチャのブレンド、滑らかなトランジション効果に使用。

10. Timeノード​

  • 説明: シェーダーが実行されている時間の情報を提供します。
  • 使用用途: アニメーションの実行、タイミングに応じたエフェクト（例：時間に基づく移動や色の変化）。

11. Fresnel Effectノード​

  • 説明: カメラの視線角度に基づいて、エッジが明るく見えるエフェクトを生成します。
  • 使用用途: 反射やリムライトなどの効果で、エッジを強調する際に使用。

12. Voronoiノード​

  • 説明: ボロノイテクスチャを生成します。ランダムに分布した点から生成される多角形のパターン。
  • 使用用途: ノイズパターンの生成や、セル構造のエフェクト。

13. Noiseノード​

  • 説明: ノイズテクスチャを生成します。Perlin NoiseやSimplex Noiseなどがあります。
  • 使用用途: ランダムな動きや模様の生成。

14. Custom Functionノード​

  • 説明: コードを書いてカスタムのシェーダー関数を作成することができます。
  • 使用用途: ノードでは表現しきれない複雑な処理を行いたい場合に使用します。

ShaderGraphでの作例: 簡単な波エフェクト​

以下に、ShaderGraphを使った簡単な波エフェクトを作成する例を示します。これはオブジェクトの頂点を時間に基づいて上下に動かすエフェクトです。

作成手順​

  1. Positionノード: 頂点位置を取得。
  2. Sineノード: Timeノードからの値に基づいて波の動きを生成。
  3. Multiplyノード: 波の振幅を調整。
  4. Addノード: 元の位置に波の動きを加算。
  5. Output: 頂点位置をシェーダーの頂点変形に適用。

ShaderGraphでは、ノードを組み合わせて視覚的にシェーダーを作成することができ、これにより複雑なエフェクトも直感的に構築できます。