mcpField
S
shader-graph-best-practices

shader-graph-best-practices

github.com/adevra開発1655 回インストール31 週間前に更新
リポジトリ

shader-graph-best-practices について

shader-graph-best-practicesは、特にモバイル向けのUnity Shader Graph制作と最適化を支援するスキルです。ノード効率、精度、カスタムライティング、テクスチャ利用、フルスクリーン効果を扱います。

主な機能

  1. 01ノード数とグラフ精度を管理
  2. 02Sub Graphで再利用可能な処理を整理
  3. 03Custom FunctionノードでHLSLを利用
  4. 04テクスチャサンプリングと高負荷ノードを削減
  5. 05Unlitグラフでカスタムライティングを構築
  6. 06Unity 6でフルスクリーン効果を設定

活用シーン

  1. 01モバイル向けShader Graphの効率を確認
  2. 02独自のグラフ処理で簡易ライティングを作成
  3. 03グラフ内の重複したテクスチャサンプリングを削減
  4. 04フルスクリーン効果を1つのパスにまとめる

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/adevra/unity-shader-agent-skills --skill shader-graph-best-practices

インストール後、Claude Code で/shader-graph-best-practicesを入力して読み込まれたか確認します。

詳細

モバイル Unity 向け Shader Graph のベストプラクティス

TRIGGER

ユーザーが URP または HDRP 用の Unity Shader Graph（ノードベースのビジュアルシェーダーエディター）を使用している場合に、このスキルを使います。トリガーには、「Shader Graph」、「node-based shader」、「sub-graph」、「custom function node」、「Shader Graph mobile」、「Shader Graph optimization」、「custom lighting Shader Graph」、「Shader Graph precision」、または Unity でのビジュアルシェーダー作成ワークフローが含まれます。また、ユーザーが Ben Cloward、Cyanilux、または Daniel Ilett の Shader Graph チュートリアルに言及した場合もトリガーされます。

基本ルール

  1. モバイル向けではノード数を 100 未満に保ちます。 各ノードはシェーダー命令にコンパイルされます。ノード数が約 100 を超えると、モバイル GPU の命令キャッシュが限界に達し、パフォーマンスが大きく低下します。整理には Sub Graph を使えますが、命令数は減りません。

  2. モバイル向けではグラフ全体の精度を Half に設定します。 Graph Inspector で Precision を「Half」に変更します。個々のノードを「Float」で上書きするのは、位置と UV のみにします。

  3. Sub Graph は最適化ではなく、整理に使います。 Sub Graph は可読性を高めますが、インラインでコンパイルされるため、命令数は減りません。ただし、複数のグラフで再利用できるため、プロジェクト全体のメンテナンス負担を軽減できます。

  4. Custom Function ノードは、ほかの方法で対応できない場合に使います。 Shader Graph で効率よく表現できない処理（または単純な処理にノードを使いすぎる場合）は、HLSL で Custom Function ノードを作成します。ライティングへのアクセス、複雑な計算、プラットフォーム固有の分岐に特に便利です。

  5. Shader Graph は必要なすべてのパス（ForwardLit、ShadowCaster、DepthOnly、DepthNormals、Meta）を自動生成します。 HLSL のようなマルチパスについて考える必要はありませんが、個別のパスを最適化することもできません。

SHADER GRAPH でのカスタムライティング

Shader Graph のデフォルトの Lit ターゲットは PBR（物理ベースレンダリング）を使用します。モバイル向けでは、よりシンプルなライティングが必要になることがよくあります。Cyanilux のカスタムライティング用サブグラフを使用します。

カスタムライティングノードのインストール

Cyanilux/URP_ShaderGraphCustomLighting パッケージを追加すると、Shader Graph に次のサブグラフノードが追加されます。

  • MainLight — 方向、色、シャドウ減衰
  • AdditionalLights — 追加ライトをループ処理します（モバイルでは控えめに使用します）
  • AmbientSH — 球面調和関数によるアンビエント
  • MainLightShadows — シャドウのサンプリング
  • Cel/Toon Shading — ステップベースのライティング
使用パターン
  1. グラフのターゲットを Unlit に設定します（Lit ではありません）。これにより Unity の PBR ライティングが無効になります。
  2. Cyanilux の MainLight サブグラフを追加して、ライトの方向と色を取得します。
  3. 独自のディフューズを計算します：saturate(dot(Normal, LightDirection)) * LightColor
  4. AmbientSH サブグラフからアンビエントを追加します。
  5. アルベドテクスチャを乗算します。
  6. Unlit グラフの Color 出力に出力します。

これにより、ライティングの複雑さを完全に制御できます。モバイルでは、PBR のマルチテクスチャ GGX/Smith BRDF は処理コストが高すぎることが多いため、これは非常に重要です。

ノード効率化のヒント

演算をまとめる
BAD:  Multiply → Add → Multiply → Saturate  (4 nodes)
GOOD: Custom Function node with: saturate(a * b + c) * d  (1 node)
Shader Graph Variables を使用する（Cyanilux）

ShaderGraphVariables パッケージを追加すると、Register Variable ノードと Get Variable ノードが使えるようになります。これにより、複雑なグラフで同じ値を何度も再計算するのを防げます。コードにおけるローカル変数に相当します。

テクスチャサンプリングの効率化
  • 同じテクスチャを複数回サンプリングする代わりに、Sample Texture 2D ノードを 1 つ使ってチャンネルを分割します。
  • ノーマルマップには、Type を Normal に設定した Sample Texture 2D ノードを使用します。アンパックは自動で行われます。
  • マスクは 1 つのテクスチャの RGBA チャンネルにまとめます（texture-packing-variant-stripping スキルを参照）。
モバイルでは負荷の高いノードを避ける
ノード負荷代替案
Fresnel Effect中手動で計算：1 - saturate(dot(ViewDir, Normal)) の後に Power
Voronoi高テクスチャに事前ベイク
Gradient Noise高Simple Noiseを使うか、テクスチャに事前ベイク
Triplanar高（テクスチャを3回サンプリング）地形ではなく、特定のメッシュでのみ使用
Normal From Height高代わりに実際のノーマルマップを使用
Custom Render Texture高可能な場合は事前ベイク

フルスクリーン シェーダーグラフ（UNITY 6+）

Unity 6では、ポストプロセッシングエフェクト用のフルスクリーン シェーダーグラフが導入されました。URPのFull Screen Pass Renderer Featureと組み合わせて使用します。

  1. Full Screenターゲットで新しいShader Graphを作成します
  2. グラフにはURPのカメラカラーと深度が入力として渡されます
  3. ポストプロセッシングエフェクト（ビネット、カラー補正など）を適用します
  4. URP RendererにFull Screen Pass Renderer Featureを追加します
  5. Full Screen Shader Graphマテリアルを割り当てます

モバイルでの考慮事項：各Full Screenパスはフルスクリーンのブリット処理です。可能な限り、エフェクトを単一のFull Screenグラフにまとめてください。

シェーダーグラフ＋モバイルのチェックリスト

  • グラフレベルの精度をHalfに設定
  • 必要に応じてPositionノードとUVノードをFloatにオーバーライド
  • ノードの合計数が100未満
  • VoronoiノードやGradient Noiseノードを使用しない（代わりに事前ベイク）
  • ライティングがシンプルな場合は、Litターゲットの代わりにUnlitターゲット＋カスタムライティングを使用
  • テクスチャのサンプリング数が4以下
  • 大きな表面でTriplanarを使用しない
  • 整理と再利用のためにSub Graphを使用
  • 切り替え可能な機能には、multi_compileではなくshader_featureキーワードを使用
  • 対象解像度でShader Graphのプレビューを使ってテスト済み

参考リソース

リポジトリ
チュートリアル
主な人物
  • Ben Cloward — 元Unity Shader Graphチーム所属で、現在はILMに在籍。UnrealとUnity Shader Graphのチュートリアルを毎週公開しています。
  • Cyanilux — 最も活発にメンテナンスされているURP Shader Graphリポジトリを公開しています。カスタムライティング、コードテンプレート、変数を扱っています。
  • Daniel Ilett — Shader Graph基礎シリーズの制作者で、『Building Quality Shaders for Unity』の著者です。
  • MinionsArt（Joyce） — 「Shaderwitch」として知られ、GIF形式の手軽なシェーダーのヒントや、200本のチュートリアルを公開しています。
  • Gabriel Aguiar — VFX GraphとShader Graphのチュートリアルを公開しています（ポータル、水、竜巻）。

出典

コメント

Markdown 対応