2Dノードにカスタムレンダリングを適用する¶

2Dノードにカスタムレンダリングを適用して、ポストプロセッシングエフェクトを作成します。

例えば、2Dノード内のカラー画像をグレースケールに変換することができます。

2Dノードにカスタムレンダリングを適用するには、Composition Brush プロパティを使用して Material Brush で画面上にノードを構成し、Force Composition プロパティを有効にします。

2Dノードにカスタムレンダリングを適用するには:

カスタムレンダリングを適用したいマテリアルを作成します。

例えば、色をグレースケールに変換するマテリアルを作成するには：
1. Library で、Alt を押しながら右クリック Materials and Textures を選択し、Material Type を選択します。Kanzi Studio は、マテリアルタイプとそのマテリアルタイプを使用するマテリアルを作成します。
2. Library > Materials and Textures > Material Types で、作成したマテリアルタイプを展開します。Vertex Shader をダブルクリックして Shader Source Editor で開き、既存のシェーダーコードをこのコードに置き換えて、シェーダーを保存します。
```
#version 310 es

in vec3 kzPosition;
in vec2 kzTextureCoordinate0;
uniform highp mat4 kzProjectionCameraWorldMatrix;

out mediump vec2 vTexCoord;

void main()
{
    precision mediump float;
    vTexCoord = kzTextureCoordinate0;
    gl_Position = kzProjectionCameraWorldMatrix * vec4(kzPosition.xyz, 1.0);
}
```
3. Fragment Shader を開き、既存のシェーダーコードをこのステップのコードに置き換え、シェーダーを保存します。
  
  シェーダーでは、これらの Kanzi デフォルトのユニフォームを使用します。
  - ContentTexture を使用して、レンダリングされたノードがレンダリング時に提供するテクスチャを定義します。
  - RenderOpacity を使用して、レンダリングされたノードの不透明度を定義します。
  シェーダーユニフォームを参照してください。
```
#version 310 es

uniform sampler2D ContentTexture;
in mediump vec2 vTexCoord;
uniform lowp float RenderOpacity;
layout(location = 0) out vec4 fragColor;

void main()
{
    precision mediump float;
    // Use this algorithm to convert the colors in the texture used by
    // the 2D node to grayscale.
    // To integrate to the Kanzi rendering pipeline, the shader must output
    // premultiplied alpha.
    vec4 color = texture(ContentTexture, vTexCoord);
    float grayscale = dot(color.rgb, vec3(0.21, 0.72, 0.07));
    float alpha = color.a * RenderOpacity;
    vec3 premultipliedColor = vec3(grayscale) * alpha;
    fragColor = vec4(premultipliedColor, alpha);
}
```
Library で、Alt を押しながら右クリック Materials and Textures を選択し、Material Brush を選択します。Properties で、Material プロパティを前のステップで作成したマテリアルに設定します。
Node Tree で、作成したマテリアルを適用したい2Dノードを作成または選択します。例えば、Stack Layout 2D ノードを作成します。Stack Layout 2D ノードで、Image ノードを作成します。
Properties に追加して設定します。
- そのノードに適用したいマテリアルを使用するマテリアルブラシに Brush Composition Brush します。
- Node 2D > Force Composition を有効にする
- （オプション） Render Target > Multisample Level に、コンテンツに適用したいアンチエイリアスサンプルの数を設定します。
- （オプション） Node > Opacity を使用してノードの半透明度を制御します。

2Dノードにカスタムレンダリングを適用する¶

関連項目¶