シェーダーグラフを作成する¶
このチュートリアルでは、UV 座標からカラーグラデーションを生成するシェーダーグラフの作成手順を説明します。シェーダーグラフの作成、ノードの追加と接続、ノードのプロパティの編集、およびシェーダーの生成の方法を学びます。
前提条件¶
始める前に、Shader Graph Editor を有効にします。シェーダーグラフエディタを有効にする を参照してください。
シェーダーグラフを作成する¶
Library で、Alt を押しながら右クリック Materials and Textures > Shader Graphs を選択し、Shader Graph を選択します。Kanzi Studio はシェーダーグラフを作成し、Shader Graph Editor を開きます。
新しいシェーダーグラフを開くと、Material ドロップダウン (左上) が Fullscreen に設定され、キャンバス上にはすでに UV、Time、Material Output の 3 つのノードが配置されています。このチュートリアルでは、グラデーションが平坦なフルスクリーンカラーとしてレンダリングされるように、Fullscreen マテリアルタイプをそのまま使用します。
シェーダーグラフを構築する¶
このセクションでは、UV 座標をカラーにマッピングし、スクリーン全体に滑らかなグラデーションを生成するグラフを構築します。
キャンバスを右クリックし、Combine4 を選択します。
UV ノードの u 出力ポートから、Combine4 ノードの r 入力ポートへドラッグします。
UV ノードの v 出力ポートから、Combine4 ノードの g 入力ポートへドラッグします。
キャンバスを右クリックし、Scalar を選択します。ノードで値を
1.0に設定します。result 出力ポートから、Combine4 ノードの b 入力ポートへドラッグします。別の Scalar ノードを追加して値を
1.0に設定し、その result 出力を Combine4 ノードの a 入力ポートに接続します。Combine4 ノードの result 出力ポートから Material Output ノードの Color 入力ポートにドラッグします。
完成したグラフは、U 座標を赤に、V 座標を緑にマッピングし、青とアルファには定数値
1.0を使用します。Fullscreen マテリアルタイプでは、これにより滑らかなカラーグラデーションが生成されます。
ノードのプロパティを編集する¶
定数ノード (Scalar、Int、Vec2、Vec3、Vec4) には、編集可能な値フィールドがノード上に直接表示されます。値フィールドをクリックして、新しい値を入力します。
シェーダーを生成する¶
シェーダーを生成するには、次の手順に従います。
Generate Shader をクリックします。
エディタがグラフを検証します。有効なグラフには、Material Output ノードまたは Output ノードがちょうど 1 つ必要であり、出力に寄与するすべてのノードがそのノードに接続されている必要があります。
シェーダーのコンパイルに成功すると、緑色の Shader compiled successfully 通知が表示されます。
エラーがある場合は、Problems パネルに問題の内容が表示されます。
次の作業¶
このグラフ内のコンスタント値を、Shader Graph Editor を開き直さずに Kanzi Studio から調整できるプロパティに変換するには、パラメータ を参照してください。