Appearance
第01回 Shader Graph から HLSL へ
今回の授業内容
- Shader Graph のノードと HLSL の式を対応付ける
float、ベクトル、関数、入出力の基本を理解する- Custom Function Node から外部 HLSL ファイルを呼び出す
- UV 変形と Lambert 計算を HLSL で再実装する
- Shader Graph 版と HLSL 版の出力を比較する
HLSL を Shader Graph と併用する
Shader Graph は計算の流れを線で追えるため、値の関係を学ぶのに適しています。HLSL は同じ計算を文字で記述し、ループや再利用可能な関数としてまとめられます。
後期では Shader Graph を捨てるのではなく、入力、出力、マテリアル設定の管理に使います。複雑な計算を HLSL の関数に分けることで、グラフ全体を読みやすくします。
| Shader Graph | HLSL |
|---|---|
| Add | a + b |
| Multiply | a * b |
| Lerp | lerp(a, b, t) |
| Dot Product | dot(a, b) |
| Normalize | normalize(v) |
| Saturate | saturate(x) |
HLSL の型とベクトル
float は1つの数値、float2からfloat4 は複数の成分をまとめた型です。UV は float2、位置や方向は float3、色と Alpha は float4 で扱う場合が多くあります。
hlsl
float brightness = 0.8;
float2 uv = float2(0.25, 0.75);
float3 color = float3(1.0, 0.4, 0.1);
float4 colorWithAlpha = float4(color, 1.0);uv.x のように1成分を取り出せます。uv.yx のように順番を変えたり、color.rg のように複数成分を取り出す操作をスウィズルと呼びます。
Custom Function を作成する
Assets/Shaders/ShaderBasics.hlsl を作成し、次の関数を記述します。Shader Graph が精度に応じた関数を見つけられるよう、関数名の末尾を _float にします。
hlsl
#ifndef SHADER_BASICS_INCLUDED
#define SHADER_BASICS_INCLUDED
void TransformUV_float(
float2 UV,
float2 Tiling,
float2 Offset,
out float2 Out)
{
Out = UV * Tiling + Offset;
}
void Lambert_float(
float3 NormalWS,
float3 LightDirectionWS,
out float Out)
{
float3 n = normalize(NormalWS);
float3 l = normalize(LightDirectionWS);
Out = saturate(dot(n, l));
}
#endifShader Graph で Custom Function Node を作成し、Type を File、Source を作成した HLSL ファイルにします。Name には _float を除いた TransformUV または Lambert を指定します。
実習：ノード版と HLSL 版を比較する
- URP Unlit Shader Graph を作成する
Tiling And Offsetノードでテクスチャーの UV を変形するTransformUVCustom Function で同じ値を計算する- Boolean Keyword と Branch で両方の出力を切り替える
- Tiling と Offset を変え、差がないことを確認する
- Normal Vector とライト方向を
Lambertに入力する - Dot Product ノード版と明るさを比較する
授業内課題：前期の処理を関数化する
次のうち1つを選び、入力と出力を設計して HLSL 関数にします。
- UV スクロール
- リムライト
- 2値のしきい値で作る SDF アウトライン
- 高さで色を混ぜるグラデーション
完成条件
- 外部 HLSL ファイルが Custom Function Node から呼び出されている
- ノード版と HLSL 版を切り替えて比較できる
- 関数の入力、処理、出力を説明できる
よくある問題
- 関数名と Custom Function Node の
Nameが一致しているか確認する - ポートの型と HLSL の型が一致しているか確認する
out引数へ必ず値を代入する- HLSL ファイルを保存した後に Shader Graph のエラー表示を確認する
今回のまとめ
Shader Graph のノードは HLSL の数値、演算子、関数に対応しています。Custom Function Node を入口にすると、マテリアルと描画設定は Shader Graph に任せ、計算だけを HLSL へ分離できます。