方法: ジオメトリベースのグラデーション シェーダーを作成するHow to: Create a Geometry-Based Gradient Shader

このドキュメントでは、シェーダー デザイナーと Directed Graph Shader Language を使用してジオメトリベースのグラデーション シェーダーを作成する方法を説明します。This document demonstrates how to use the Shader Designer and the Directed Graph Shader Language to create a geometry-based gradient shader. このシェーダーは、ワールド空間におけるオブジェクトの各ポイントの高さによって、定数の RGB 色の値をスケーリングします。This shader scales a constant RGB color value by the height of each point of an object in world space.

このドキュメントでは、以下のアクティビティについて説明します。This document demonstrates these activities:

  • シェーダー グラフへのノードの追加Adding nodes to a shader graph

  • ノードのプロパティの設定Setting node properties

  • ノードの接続の解除Disconnecting nodes

  • ノードの接続Connecting nodes

ジオメトリベースのグラデーション シェーダーの作成Creating a geometry-based gradient shader

シェーダーにピクセルの位置を組み込むことによって、ジオメトリ ベースのシェーダーを実装できます。You can implement a geometry-based shader by incorporating the position of the pixel into your shader. シェーディング言語では、ピクセルには単なるカラーと 2-D 画面の場所より詳しい情報が含まれています。In shading languages, a pixel contains more information than just its color and location on a 2-D screen. ピクセルとは、システムによってはフラグメントとも呼ばれ、ピクセルに対応するサーフェイスを表す値のコレクションのことです。A pixel—known as a fragment in some systems—is a collection of values that describe the surface that corresponds to a pixel. このドキュメントで説明するシェーダーは、ワールド空間内の 3-D オブジェクトの各ピクセルの高さを使用して、フラグメントの最終的な出力の色に影響を及ぼします。The shader that's described in this document utilizes the height of each pixel of a 3-D object in world space to affect the final output color of the fragment.

開始する前に、[プロパティ] ウィンドウとツールボックスが表示されていることを確認します。Before you begin, make sure that the Properties window and the Toolbox are displayed.

ジオメトリベースのグラデーション シェーダーを作成するにはTo create a geometry-based gradient shader

  1. 操作する DGSL シェーダーを作成します。Create a DGSL shader to work with. プロジェクトに DGSL シェーダーを追加する方法については、「シェーダー デザイナー」の「作業の開始」を参照してください。For information about how to add a DGSL shader to your project, see the Getting Started section in Shader Designer.

  2. [最終的な色] ノードから [ポイントの色] ノードを接続解除します。Disconnect the Point Color node from the Final Color node. [ポイントの色] ノードの [RGB] ターミナルを選択し、[リンクの解除] を選択します。Choose the RGB terminal of the Point Color node, and then choose Break Links. これにより、次の手順で追加するノードのための領域を確保できます。This makes room for the node that's added in the next step.

  3. グラフに [乗算記号] ノードを追加します。Add a Multiply node to the graph. ツールボックス[数式][乗算記号] を選択し、デザイン サーフェイスに移動します。In the Toolbox, under Math, select Multiply and move it to the design surface.

  4. グラフに [ベクターのマスク] ノードを追加します。Add a Mask Vector node to the graph. ツールボックス[ユーティリティ][ベクターのマスク] を選択し、デザイン サーフェイスに移動します。In the Toolbox, under Utility, select Mask Vector and move it to the design surface.

  5. [ベクターのマスク] ノードのマスク値を指定します。Specify mask values for the Mask Vector node. [選択] モードで [ベクターのマスク] ノードを選択し、[プロパティ] ウィンドウで [Green / Y] プロパティを [True] に設定し、[Red / X][Blue / Z][Alpha / W] プロパティを [False] に設定します。In Select mode, select the Mask Vector node, and then in the Properties window, set the Green / Y property to True, and then set the Red / X, Blue / Z and Alpha / W properties to False. この例では、[Red / X][Green / Y][Blue / Z] プロパティは [ワールド位置] ノードの x、y、z コンポーネントに対応し、[Alpha / W] は使用されません。In this example, the Red / X, Green / Y, and Blue / Z properties correspond to the x, y, and z components of the World Position node, and Alpha / W is unused. マスク後 [Green / Y] のみ [True] に設定されるため、入力のベクターの y コンポーネントだけが残ります。Because only Green / Y is set to True, only the y component of the input vector remains after it is masked.

  6. グラフに [ワールド位置] ノードを追加します。Add a World Position node to the graph. ツールボックス[定数][ワールド位置] を選択し、デザイン サーフェイスに移動します。In the Toolbox, under Constants, select World Position and move it to the design surface.

  7. フラグメントのワールド空間の位置をマスクします。Mask the world space position of the fragment. [選択] モードで、[ワールド位置] ノードの [出力] ターミナルを [ベクターのマスク] ノードの [ベクター] ターミナルに移動します。In Select mode, move the Output terminal of the World Position node to the Vector terminal of the Mask Vector node. この接続は、フラグメントの位置をマスクして x コンポーネントと z コンポーネントを無視します。This connection masks the position of the fragment to ignore the x and z components.

  8. マスクされたワールド空間の位置で RGB 色の定数を乗算します。Multiply the RGB color constant by the masked world space position. [ポイントの色] ノードの [RGB] ターミナルを [乗算記号] ノードの [Y] ターミナルに移動し、[ベクターのマスク] ノードの [出力] ターミナルを [乗算記号] ノードの [X] ターミナルに移動します。Move the RGB terminal of the Point Color node to the Y terminal of the Multiply node, and then move the Output terminal of the Mask Vector node to the X terminal of the Multiply node. この接続は、ワールド空間のピクセルの高さによって色の値をスケーリングします。This connection scales the color value by the height of the pixel in world space.

  9. スケーリングされた色の値を最終的な色に接続します。Connect the scaled color value to the final color. [乗算記号] ノードの [出力] ターミナルを [最終的な色] ノードの [RGB] ターミナルに移動します。Move the Output terminal of the Multiply node to the RGB terminal of the Final Color node.

    次の図は、完成したシェーダー グラフと、球に適用されるシェーダーのプレビューを示します。The following illustration shows the completed shader graph and a preview of the shader applied to a sphere.

注意

この図では、シェーダーの効果をわかりやすく示すためにオレンジ色が指定されていますが、ワールド空間にプレビュー図形の位置がないため、シェーダー デザイナーでシェーダーを完全にプレビューすることができません。In this illustration, an orange color is specified to better demonstrate the effect of the shader, but because the preview shape has no position in world-space, the shader cannot be fully previewed in the Shader Designer. 完全な効果を確認するには、シェーダーを実際のシーンでプレビューする必要があります。The shader must be previewed in a real scene to demonstrate the full effect.

シェーダー グラフとその効果のプレビューShader graph and a preview of its effect

シェーダーによっては、特定の図形を使用すると、より適切にプレビューできる可能性があります。Certain shapes might provide better previews for some shaders. シェーダー デザイナーでシェーダーをプレビューする方法については、「シェーダー デザイナー」の「シェーダーのプレビュー」を参照してください。For information about how to preview shaders in the Shader Designer, see Previewing shaders in Shader Designer

次の図は、このドキュメントで説明したシェーダーを「方法: 3-D 地形をモデル化する」に示した 3-D シーンに適用したものです。The following illustration shows the shader that's described in this document applied to the 3-D scene that's demonstrated in How to: Model 3-D Terrain. ここでは、色の輝度とワールド空間のポイントの高さが共に増加しています。The intensity of the color increases with the height of the point in the world.

3-D 地形モデルに適用されたグラデーション効果Gradient effect applied to a 3-D terrain model

3-D モデルにシェーダーを適用する方法の詳細については、「方法: シェーダーを 3-D モデルに適用する」を参照してください。For more information about how to apply a shader to a 3-D model, see How to: Apply a Shader to a 3-D Model.

参照See Also

方法: シェーダーを 3-D モデルに適用する How to: Apply a Shader to a 3-D Model
方法: シェーダーをエクスポートする How to: Export a Shader
方法: 3-D 地形をモデル化する How to: Model 3-D Terrain
方法: グレースケール テクスチャ シェーダーを作成する How to: Create a Grayscale Texture Shader
シェーダー デザイナー Shader Designer
シェーダー デザイナー ノードShader Designer Nodes