方法: グレースケール テクスチャ シェーダーを作成するHow to: Create a Grayscale Texture Shader

この記事では、シェーダー デザイナーと DGSL (Directed Graph Shader Language) を使用してグレースケール テクスチャ シェーダーを作成する方法を説明します。This article demonstrates how to use the Shader Designer and the Directed Graph Shader Language (DGSL) to create a grayscale texture shader. このシェーダーは、テクスチャ サンプルの RGB 色の値を変更し、その値を未変更のアルファ値と併用して最終的な色を設定します。This shader modifies the RGB color value of the texture sample, and then uses it together with the unmodified alpha value to set the final color.

グレースケール テクスチャ シェーダーを作成するCreate a grayscale texture shader

テクスチャ サンプルの色の値を変更してから最終的な出力の色に記述することで、グレースケール テクスチャ シェーダーを実装できます。You can implement a grayscale texture shader by modifying the color value of a texture sample before you write it to the final output color.

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

  1. 方法: 基本テクスチャ シェーダーを作成する」の説明に従って、基本テクスチャ シェーダーを作成します。Create a basic texture shader, as described in How to: Create a Basic Texture Shader.

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

  3. グラフに [彩度を下げる] ノードを追加します。Add a Desaturate node to the graph. ツールボックス[フィルター][彩度を下げる] を選択し、デザイン サーフェイスに移動します。In the Toolbox, under Filters, select Desaturate and move it to the design surface.

  4. [彩度を下げる] ノードを使用して、グレースケールの値を計算します。Calculate the grayscale value by using the Desaturate node. [選択] モードで、[テクスチャ サンプル] ノードの [RGB] ターミナルを [彩度を下げる] ノードの [RGB] ターミナルに移動します。In Select mode, move the RGB terminal of the Texture Sample node to the RGB terminal of the Desaturate node.

    注意

    既定では、[彩度を下げる] ノードは、入力色の彩度を全体的に下げ、グレースケール変換に標準的な輝度の重みを使用します。By default, the Desaturate node fully desaturates the input color, and uses the standard luminance weights for greyscale conversion. [輝度] プロパティの値を変更するか、入力色の彩度を一部だけ下げて、[彩度を下げる] ノードの動作を変更できます。You can change how the Desaturate node behaves by changing the value of the Luminance property, or by only partially desaturating the input color. 入力色の彩度を部分的に下げるには、[彩度を下げる] ノードの [パーセント] ターミナルに範囲 [0,1) のスカラー値を提供します。To partially desaturate the input color, provide a scalar value in the range [0,1) to the Percent terminal of the Desaturate node.

  5. グレースケールの色の値を最終的な色に接続します。Connect the grayscale color value to the final color. [彩度を下げる] ノードの [出力] ターミナルを [最終的な色] ノードの [RGB] ターミナルに移動します。Move the Output terminal of the Desaturate 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 cube.

注意

この図では、平面がプレビューの図形として使用され、テクスチャはシェーダーの効果がわかりやすくなるように指定されています。In this illustration, a plane is used as the preview shape, and a texture has been specified to better demonstrate the effect of the shader.

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

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

関連項目See also