シェーダーグラフ (エクスペリメンタル)

注釈

Shader Graph Editor はエクスペリメンタルな機能であり、Kanzi Studio の将来のバージョンで変更または削除される可能性があります。有効にするには、シェーダーグラフエディタを有効にする を参照してください。

Shader Graph Editor は、Kanzi Studio で GLSL フラグメントシェーダーを構築するための、ノードベースのビジュアルツールです。シェーダーコードを手で記述する代わりに、シェーダーのロジックを定義する接続されたノードのグラフを作成します。シェーダーを生成すると、Kanzi Studio はグラフを GLSL フラグメントシェーダーにコンパイルし、そこから Material Type を作成します。物理ベースのグラフの場合、Kanzi Studio はその Material Type を使用する Material も作成します。

シェーダーグラフエディタを有効にする

Shader Graph Editor を有効にするには、次の手順を実行します。

  1. Kanzi Studio で、Edit > User Preferences を選択します。

  2. Experimental タブを選択します。

  3. Web-based editors セクションで、Shader graph editor を有効にします。

マテリアルタイプ (Material Types)

各シェーダーグラフは 1 つのマテリアルタイプを対象とします。マテリアルタイプによって、Material Output ノードが公開するインプットポートと、Kanzi Studio が生成する GLSL フラグメントシェーダーの種類が決まります。

マテリアルタイプは、エディタの左上隅にある Material ドロップダウンで設定します。

../../_images/material-type-panel.png

マテリアルタイプ

ディスクリプション (Description)

PBR

物理ベースのマテリアル。Material Output ノードは、Base Color、Metallic、Roughness、Normal、Emissive、AO (アンビエントオクルージョン) の入力を公開します。シェーダーを生成すると、Kanzi Studio は Material Type と、それを使用する Material を作成します。

Fullscreen

フルスクリーンエフェクトのマテリアル。Material Output ノードは単一の Color インプットを公開します。このマテリアルタイプは、ポストプロセスエフェクトや同様のフルスクリーンパスに使用します。

マテリアルタイプを切り替えると、Kanzi Studio は Material Output ノードを再構成し、新しいポートセットに存在しなくなったインプットの接続をすべて解除します。

ノードタイプ

Shader Graph Editor には、7 つのカタログカテゴリにわたる 45 個のノードがあります。Add Node メニューはノードをカテゴリ別にグループ化しており、すべてのカテゴリを一度にフィルタリングするサーチフィールドを備えています。数学ノードはポリモーフィックです。接続されたポートに合わせて、インプットとアウトプットの型を適応させます。

カタログカテゴリに加えて、Utilities サブメニューから Note ノードを追加したり、セレクションから Group ノードを作成したりできます。

../../_images/add-node-menu.png

定数

コンスタントノードは、ノード上で直接編集するリテラル値を保持します。

ノード (Node)

ディスクリプション (Description)

アウトプット

Scalar

浮動小数のコンスタント値。

result (float)

Int

整数のコンスタント値。

result (int)

Vec2

コンスタントの 2D ベクトル。

result (vec2), x (float), y (float)

Vec3

コンスタントの 3D ベクトル。

result (vec3), x (float), y (float), z (float)

Vec4

コンスタント (Constant) 4D ベクトル。

result (vec4), x (float), y (float), z (float), w (float)

Color3

RGB カラーのコンスタント (Constant)。ノード (Node) のスウォッチをクリック (Click) すると、カラーピッカーが開きます。

result (vec3)

Color4

RGBA カラーのコンスタント (Constant)。ノード (Node) のスウォッチをクリック (Click) すると、カラーピッカーが開きます。

result (vec4)

任意のコンスタント (Constant) ノード (Node) をパラメータに昇格させると、その値は Kanzi Studio の Properties パネルで編集できるユニフォーム (Uniform) になります。パラメータ を参照してください。

ビルトイン

ビルトインノード (Nodes) は、レンダリング中にエンジンが生成する値を提供します。

ノード (Node)

ディスクリプション (Description)

入力

アウトプット

UV

UV テクスチャ (Texture) 座標。

---

uv (vec2), u (float), v (float)

Time

経過タイム (Time) とフレームごとの差分。

---

Seconds (float), Delta (float)

TilingOffset

UV 座標にタイリングとオフセットを適用します。

uv (vec2), tiling (vec2), offset (vec2)

result (vec2)

Combine4

4 つの浮動小数 (Float) を vec4 に結合します。

r (float), g (float), b (float), a (float)

result (vec4)

RGB

3 つの浮動小数 (Float) を vec3 に結合します。

r (float), g (float), b (float)

result (vec3)

数学

ノード (Node)

ディスクリプション (Description)

Sin

正弦関数。

Cos

余弦関数。

Abs

絶対値。

Exp

自然指数関数 (e^x)。

Negate

符号反転（単項マイナス）。

Normalize

ベクトルの正規化。

Length

ベクトルの大きさ。常に浮動小数 (float) を出力します。

Dot

内積。常に浮動小数 (float) を出力します。

Cross

2つの vec3 値の外積。

Distance

2つの vec3 値間の距離。常に浮動小数 (float) を出力します。

Reflect

入射 vec3 ベクトルを vec3 法線に対して反射します。

Add

加算。

Subtract

減算。

Multiply

乗算。

Divide

除算。

Max

成分ごとの最大値。

Min

成分ごとの最小値。

Mix

線形補間（mix）。

Lerp

線形補間（lerp）。

Power

べき乗。

Clamp

値を最小値と最大値の間にクランプします。

マテリアル (Material)

マテリアル (Material) ノードは、エンジンがレンダリングされたジオメトリから設定する、フラグメントごとのサーフェスデータとビューデータを提供します。これらのノードには入力がありません。

ノード (Node)

ディスクリプション (Description)

アウトプット

Normal

ワールド空間におけるサーフェスの法線。

normal (vec3), x (float), y (float), z (float)

Tangent

ワールド空間におけるサーフェスの接線。

tangent (vec3), x (float), y (float), z (float)

Bitangent

法線と接線から従接線を計算します。任意の vec3 ソースを接続できます。Normal ノードと Tangent ノードを使用する必要はありません。

bitangent (vec3)

WorldPos

現在のフラグメントのワールド空間での位置。

pos (vec3)、posX (float)、posY (float)、posZ (float)

CameraPos

アクティブなカメラのワールド空間での位置。

pos (vec3)、posX (float)、posY (float)、posZ (float)

ViewDir

フラグメントからカメラへの正規化されたビュー方向（ワールド空間）。

viewDir (vec3)

テクスチャ (Texture)

テクスチャノードは、Kanzi Studio の Library にあるテクスチャリソースをサンプリングします。Texture リソースピッカーには、プロジェクト内のすべてのテクスチャが表示されます。

ノード (Node)

ディスクリプション (Description)

Texture

テクスチャをサンプリングします。ノードで Texture リソースを選択するか、未設定のままにしてプレースホルダーを使用します。プロパティ: Wrap (repeat、clamp、mirror)、Filter (linear、nearest)。入力: uv (vec2)。出力: rgba (vec4)、r、g、b、a (float)。

NormalMap

ノーマルマップをサンプリングし、結果をワールド空間に変換します。入力: uv (vec2)、textureIndex (int)、strength (float)、worldNormal (vec3)。出力: result (vec3)。

UnpackNormal

サンプリング済みのノーマルマップのカラーを、ワールド空間の法線ベクトルに変換します。入力: normalSample (vec4)、strength (float)、worldNormal (vec3)。出力: result (vec3)。
../../_images/texture-node.png

カスタム

Custom カテゴリを使用すると、手書きの GLSL をグラフに組み込むことができます。

ノード (Node)

ディスクリプション (Description)

GLSL Code

エディタ内で小さな GLSL 関数を作成します。ノードで Function name を設定し、埋め込みのコードエディタで本体を記述します。ノードは関数シグネチャを解析してポートを生成します。各 in パラメーターは入力ポートに、各 out パラメーターは出力ポートになり、inout パラメーターは両方になります。また、戻り値の型が void 以外の場合は return という名前の出力ポートが追加されます。サポートされているポートの型は float、vec2、vec3、vec4、int、bool、sampler2D です。本体に複数の関数が含まれている場合、エディタは main という名前の関数をエントリポイントとして使用します。

たとえば、次の GLSL Code ノードの本体は、3 つの入力ポート (uv、tile、softness) と 2 つの出力ポート (bright と return) を生成します。

// 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;
}
../../_images/glsl-code-node.png

出力

すべてのグラフには、Material Output ノードまたは Output ノードが 1 つだけ存在し、出力に寄与する他のすべてのノードと接続されている必要があります。

ノード (Node)

ディスクリプション (Description)

Material Output

マテリアルタイプを対象とするグラフに必須の出力先ノードです。入力ポートは Material ドロップダウンに応じて変わります。

  • PBR: Base Color (vec4)、Metallic (float)、Roughness (float)、Normal (vec3)、Emissive (vec3)、AO (float)。

  • Fullscreen: Color (vec4)。

Output

マテリアルタイプを対象としないグラフ用の汎用カラー出力先ノードです。

ユーティリティノード

ユーティリティノードはシェーダーコードを生成しません。グラフを整理するために使用します。

ノード (Node)

ディスクリプション (Description)

Group

他のノードを格納する、サイズ変更可能なコンテナです。2 つ以上のノードを選択した状態で、Ctrl G を押すか、セレクションツールバーの Group をクリックするか、右クリックのコンテキストメニューから Create Group を選択すると、グループを作成できます。グループのヘッダーをダブルクリックすると名前を変更できます。ヘッダーの + / - ボタンをクリックするとグループを折りたたみまたは展開でき、N ボタンをクリックするとメモを添付できます。また、右クリックメニューの Color 行からヘッダーの色を選択できます。

Note

自由に配置できる注釈です。Add Node メニューの Utilities から Note を追加します。メモをダブルクリックすると、テキストを編集できます。

シェーダーグラフを操作する

ノードを追加する

キャンバスを右クリックして Add Node メニューを開きます。カテゴリのサブメニューを参照するか、文字を入力してすべてのカテゴリを横断して検索します。

../../_images/creating-nodes.gif

特定の位置にノードを追加するには、メニューから選択する前に、キャンバス上のその位置を右クリックします。

ノードの接続

あるノードの出力ポートから別のノードの入力ポートへドラッグします。各入力ポートが受け付ける接続は 1 つだけです。すでに接続されている入力に新しい接続を作成すると、既存の接続が置き換えられます。

../../_images/connecting-nodes.gif

ノードの切断

接続を選択して Delete または Backspace を押します。ノードのすべての接続を一度に切断するには、ノードを右クリックして Break Links を選択します。

../../_images/disconnecting-nodes.gif

プロパティを編集する

コンスタントノードには、編集可能な値フィールドがノード上に直接表示されます。Color3 ノードと Color4 ノードには、カラーピッカーを開くスウォッチが表示されます。Texture ノードには、リソースピッカーと、選択したテクスチャのサムネイルが表示されます。GLSL Code ノードは、埋め込みの GLSL エディタを開きます。

../../_images/editing-property.gif

上流ノードと下流ノードの選択

接続グラフに沿って現在のセレクションを拡張するには、ノード、エッジ、またはセレクションを右クリックして Select Upstream または Select Downstream を選択します。Select Upstream は、現在のセレクションに入力しているすべてのノードを追加します。Select Downstream は、現在のセレクションが出力しているすべてのノードを追加します。

ノードのコピー、貼り付け、複製

選択したノードと接続をクリップボードにコピーするには、Ctrl C を押すか、セレクションを右クリックして Copy を選択します。

クリップボードの内容をビューポートの中央に貼り付けるには、Ctrl V を押します。同じ位置に繰り返し貼り付けると、新しいノードが重ならないように、貼り付けるたびに位置が少しずつずれます。

キャンバス上の特定の位置に貼り付けるには、その位置を右クリックして Paste を選択します。

セレクションをその場で複製するには、Ctrl D を押すか、セレクションを右クリックして Duplicate を選択します。

UV や Material Output などの組み込みノードは、1 つのグラフに最大 1 つしか存在できず、コピーや複製はできません。

元に戻すとやり直し

エディタは、ノードの追加と削除、プロパティの編集、ポートの接続と切断、グループ化、パラメータへの昇格など、グラフに対するすべての変更を記録します。元に戻すには Ctrl Z を、やり直すには Ctrl Y を押します。GLSL Code エディタ内では、Ctrl Z と Ctrl Y はまずローカルのコード編集履歴をたどり、その後グラフの履歴に移ります。

オートレイアウト

グラフを自動的に再配置するには、Ctrl Shift A を押します。エディタは、データフローに従ってノードを左から右に配置します。

../../_images/auto-layout.gif

ノードのグループ化

2 つ以上のノードを選択して Ctrl G を押すか、セレクションツールバーの Group をクリックするか、右クリックして Create Group を選択します。エディタは、セレクションをサイズ変更可能な Group コンテナで囲みます。

グループの名前を変更するには、ヘッダーをダブルクリックします。グループを折りたたむまたは展開するには、ヘッダーの + / - ボタンをクリックするか、グループを右クリックして Collapse Group または Expand Group を選択します。メモを添付するには、N ボタンをクリックします。グループの色を変更するには、グループを右クリックして Color 行からスウォッチを選択します。

子ノードを残したままグループを解除するには、グループを選択して Ctrl Shift G を押すか、グループを右クリックして Ungroup を選択します。

コンテキストメニューリファレンス

右クリックのコンテキストメニューに表示される内容は、右クリックした対象によって異なります。

Target

アクション

空のキャンバス

Add Node メニュー (クリップボードが空でない場合は Paste ショートカットも表示)。

単一のノード

Copy、Duplicate、Select Upstream、Select Downstream、Break Links、Promote to Parameter / Unpromote from Parameter (昇格可能な定数の場合)、Delete。グループノードでは、Collapse Group / Expand Group、Fit to Content、Ungroup、および Color 行も表示されます。

接続

Select Upstream、Select Downstream、Delete。

複数選択

Copy、Duplicate、Select Upstream、Select Downstream、Create Group (ユーティリティ以外のノードが 2 つ以上選択されている場合)、Delete。

Promote to Parameter の詳細については、パラメータ を参照してください。

シェーダーの生成

エディタの右上隅にある Generate Shader をクリックすると、グラフが検証され、GLSL フラグメントシェーダーがコンパイルされます。変更のたびに自動的に再生成するには、Generate Shader ボタンの隣にある Auto スイッチを有効にします。エディタは再生成をデバウンスするため、連続した編集でもコンパイルは 1 回だけ実行されます。

シェーダーのコンパイルに成功すると、緑色の Shader compiled successfully 通知が表示され、Kanzi Studio が結果を保存します。

  • マテリアルタイプが PBR または Fullscreen のグラフの場合、Kanzi Studio は生成されたフラグメントシェーダーを使用する Material Type を作成または更新します。PBR グラフの場合、Kanzi Studio はその Material Type を使用する Material も作成します。

  • 昇格したパラメータは、Material Type と Material のプロパティとして表示されます。パラメータ を参照してください。

../../_images/compile-success.gif

検証またはコンパイルに失敗した場合は、Problems パネルに問題の内容が表示されます。よくあるエラーには、Material Output への接続の欠落、サポートされていないポートタイプの組み合わせ、生成されたシェーダー内の孤立したユニフォームなどがあります。

../../_images/problems-panel.gif

手順を追った解説については、シェーダーグラフを作成する を参照してください。

制限事項

注釈

このエクスペリメンタルな機能は、まだ次の項目をサポートしていません。

  • サブグラフ (再利用可能なグラフの断片)

  • カスタムマテリアルタイプ

  • Unlit マテリアルタイプ

  • 生成されたマテリアルのエディタ内 3D プレビュー

関連項目

シェーダーグラフを作成する

PBR マテリアルの作成

パラメータの昇格

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

パラメータ

シェーダー

シェーダーを編集する

マテリアルタイプとマテリアル