GLSL Code ノードによるカスタムシェーディング¶

このチュートリアルでは、GLSL Code ノードを使用して、手書きの GLSL をシェーダーグラフに埋め込む方法を説明します。シグネチャによってノードのインプットポートとアウトプットポートが定義される小さな関数を作成し、それらのポートをグラフに接続して、その関数を呼び出すフラグメントシェーダーを生成します。

GLSL Code ノードは関数シグネチャを解析し、そこからポートを生成します。各 in パラメーターはインプットポートに、各 out パラメーターはアウトプットポートになり、inout パラメーターはその両方になります。また、void 以外の戻り値の型は return という名前のアウトプットポートを追加します。サポートされるポートの型は float、vec2、vec3、vec4、int、bool、sampler2D です。

前提条件¶

開始する前に:

Shader Graph Editor を有効にします。シェーダーグラフエディタを有効にするを参照してください。

シェーダーグラフの作成¶

Library で、Alt を押しながら右クリック Materials and Textures > Shader Graphs を選択し、Shader Graph を選択します。Kanzi Studio はシェーダーグラフを作成し、Shader Graph Editor を開きます。

エディタ左上の Material ドロップダウンから Fullscreen を選択します。Material Output ノードが更新され、Color インプットが 1 つだけ公開されます。

GLSL Code ノードの追加¶

キャンバスを右クリックし、Custom > GLSL Code を選択します。Function name フィールドと埋め込み GLSL エディタを備えた GLSL Code ノードが表示されます。
Function name フィールドに Checker と入力します。

埋め込み GLSL エディタに、次の関数を入力します。

// Soft checker mask. `tile` controls cell size; `softness` blurs cell edges.
// `bright` is 1.0 on bright cells, 0.0 on dark cells.
// The return value is the antialiased mask.

float Checker(vec2 uv, float tile, float softness, out float bright) {
    vec2 cell = floor(uv * tile);
    bright = mod(cell.x + cell.y, 2.0);
    vec2 f = fract(uv * tile);
    float edge = min(min(f.x, 1.0 - f.x), min(f.y, 1.0 - f.y));
    return smoothstep(0.0, softness, edge) * bright;
}

シグネチャを入力すると、エディタはパラメータからポートを生成します。uv (vec2)、tile (float)、softness (float) は入力ポートになり、bright (float) は出力ポートになります。また、戻り値の型が void 以外であるため、return 出力ポートが追加されます。

ノードをグラフに接続する¶

このセクションでは、UV ノードで GLSL Code ノードを駆動し、その出力を Material Output ノードに送ります。

キャンバスを右クリックし、UV を選択します。UV ノードの uv 出力ポートから GLSL Code ノードの uv 入力ポートにドラッグします。
キャンバスを右クリックし、Scalar を選択します。値を 8.0 に設定し、その result 出力を GLSL Code ノードの tile 入力ポートに接続します。
別の Scalar ノードを追加して値を 0.05 に設定し、その result 出力を GLSL Code ノードの softness 入力ポートに接続します。
キャンバスを右クリックし、Combine4 を選択します。Material Output の Color インプットは vec4 を受け取るため、GLSL Code ノードの float 型の return を vec4 に変換する必要があります。
GLSL Code ノードの return 出力ポートから、Combine4 ノードの r、g、b の各入力ポートにドラッグします。これでチェッカーマスクが 3 つのカラーチャンネルすべてを駆動し、グレースケールの結果が得られます。
別の Scalar ノードを追加して値を 1.0 に設定し、その result 出力を Combine4 ノードの a 入力ポートに接続します。
Combine4 ノードの result 出力ポートから Material Output ノードの Color 入力ポートにドラッグします。

シェーダーの生成¶

Generate Shader をクリックします。シェーダーのコンパイルが成功すると、緑色の Shader compiled successfully 通知が表示され、Kanzi Studio はフルスクリーンパス用の Material Type を作成します。

GLSL Code の本体の解析またはコンパイルに失敗すると、Problems パネルにエラーが表示されます。よくある間違いは、関数シグネチャでサポートされていないポートタイプを使用すること、複数の関数を含む本体に main 関数または唯一の関数が存在しないこと、呼び出し箇所で戻り値の型が一致しないことです。