テッセレーションシェーダーの使用¶

テッセレーションは、頂点データのパッチをより小さなプリミティブに細分化します。

Tessellation Control Shader は、テッセレーションの量を決定します。
Tessellation Evaluation Shader は、生成された各頂点の値を計算します。

テッセレーションは、Vertex Shader の後、オプションの Geometry Shader の前にあるオプションのシェーダーステージです。

ジオメトリシェーダーとテッセレーションシェーダーを使用するには、Kanzi アプリケーションを実行するハードウェアが OpenGL ES 3.2 または Vulkan 1.1 をサポートしている必要があります。ジオメトリシェーダーとテッセレーションシェーダーは、タイルベースのレンダリングアーキテクチャではパフォーマンスを低下させる可能性があることに注意してください。そのため、モバイルや組み込みハードウェアではジオメトリシェーダーとテッセレーションシェーダーの使用を避けることをお勧めします。

ジオメトリシェーダーを使用するを参照してください。

この手順では、テッセレーションシェーダーを使用してテクスチャをディスプレースメントマップに変換します。シェーダーは、テクスチャ内の色の値に応じて平面上のポイントを持ち上げます。

テッセレーションシェーダーを使用するには：

Kanzi Studio のメインメニューで、Project > Properties を選択し、Target Graphics API を OpenGL ES 3.2 に設定します。
Library の Alt を押しながら右クリック Materials and Textures で、Material Type を選択し、Tessellation と名付けます。

Library > Materials and Textures > Material Types > Tessellation マテリアルタイプで、Vertex Shader をダブルクリックして Shader Source Editor で開き、その内容を以下に置き換えます。

#version 320 es

in vec3 kzPosition;
in vec2 kzTexCoordinate;

out mediump vec2 vUVCoords;

uniform highp mat4 kzWorldMatrix;
void main()
{
    precision mediump float;
    vUVCoords = kzTexCoordinate;
    gl_Position = kzWorldMatrix * vec4(kzPosition.xyz, 1.0);
}

Save をクリックします。

テッセレーションの量を決定するテッセレーションコントロールシェーダーを作成します。
1. Library > Materials and Textures > Material Types で、Alt を押しながら右クリック Tessellation マテリアルタイプを選択し、Tessellation Control Shader を選択します。
  
  Kanzi Studio は、Tessellation マテリアルタイプにおいて、Vertex Shader と Fragment Shader の間に Tessellation Control Shader を作成します。
  
  Tessellation Control Shader のソースファイルの拡張子は .tesc.glsl です。
  
  Kanzi Studio は Tessellation マテリアルタイプを無効としてマークします。なぜなら、Tessellation Control Shader は Tessellation Evaluation Shader なしでは機能しないからです。
2. Library で、Tessellation Control Shader をダブルクリックして Shader Source Editor で開き、その内容を以下に置き換えます。
```
#version 320 es

layout(vertices = 3) out;
precision highp float;
uniform float tessellationLevel;
in mediump vec2 vUVCoords[];
out Patch
{
    mediump vec2 UV;
} oPatch[];

void main() {
    if (gl_InvocationID == 0)
    {
        gl_TessLevelOuter[0] = tessellationLevel;
        gl_TessLevelOuter[1] = tessellationLevel;
        gl_TessLevelOuter[2] = tessellationLevel;
        gl_TessLevelInner[0] = tessellationLevel;
    }
    oPatch[gl_InvocationID].UV = vUVCoords[gl_InvocationID];
    gl_out[gl_InvocationID].gl_Position = gl_in[gl_InvocationID].gl_Position;
}
```
  Save をクリックします。

生成された各頂点の値を計算するテッセレーション評価シェーダーを作成します。

Library > Materials and Textures > Material Types で、Alt を押しながら右クリック Tessellation マテリアルタイプを選択し、Tessellation Evaluation Shader を選択します。

Kanzi Studio は、Tessellation マテリアルタイプにおいて、Tessellation Control Shader と Fragment Shader の間に Tessellation Evaluation Shader を作成します。

Tessellation Evaluation Shader のソースファイルは、拡張子が .tesc.glsl です。

Library で、Tessellation Evaluation Shader をダブルクリックして Shader Source Editor で開き、その内容を以下に置き換えます。

#version 320 es

layout(triangles, fractional_even_spacing, ccw) in;
precision highp float;

uniform sampler2D displacementMap;

uniform highp mat4 kzCameraMatrix;
uniform highp mat4 kzProjectionMatrix;

in Patch
{
    mediump vec2 UV;
} oPatch[];

out lowp vec4 fColor;

highp vec2 interpolate2(in vec2 v0, in vec2 v1, in vec2 v2)
{
    return v0 * gl_TessCoord.x + v1 * gl_TessCoord.y + v2 * gl_TessCoord.z;
}
highp vec4 interpolate4(in vec4 v0, in vec4 v1, in vec4 v2)
{
    return v0 * gl_TessCoord.x + v1 * gl_TessCoord.y + v2 * gl_TessCoord.z;
}

void main()
{
    vec2 uv = interpolate2(oPatch[0].UV, oPatch[1].UV, oPatch[2].UV);
    vec4 tex = texture(displacementMap, uv);
    vec4 displacement = vec4(0, 1, 0, 0) * dot(tex, vec4(1, 1, 1, 0));
    fColor = tex;
    gl_Position = kzProjectionMatrix * kzCameraMatrix * (interpolate4(
        gl_in[0].gl_Position,
        gl_in[1].gl_Position,
        gl_in[2].gl_Position) + displacement);
}

Save をクリックします。

Library の Tessellation マテリアルタイプで、Fragment Shader をダブルクリックして Shader Source Editor で開き、その内容を以下に置き換えます。
```
#version 320 es

precision mediump float;
in lowp vec4 fColor;
out vec4 outColor;

void main()
{
    outColor = fColor;
}
```
Save をクリックします。
Library > Materials and Textures > Material Types で、Tessellation マテリアルタイプを選択します。Properties で Sync with Uniforms をクリックします。Delete Binding ダイアログで Yes をクリックして、使用されていないユニフォームバインディングを Tessellation マテリアルタイプから削除します。

Kanzi Studio は Library > Property Types に displacementMap プロパティタイプと tessellationLevel プロパティタイプを作成し、それらを Tessellation マテリアルタイプに追加します。

これにより、Tessellation マテリアルタイプを使用するマテリアルにこれらのプロパティを公開します。

以下のように使用します。
- displacementMap は、ディスプレイスメントマップとして使用するテクスチャを設定するために使用します
- tessellationLevel は、テッセレーションの量を制御するために使用します
Library > Property Types で、tessellationLevel プロパティタイプを選択します。Properties で以下を設定します。
- Lower Bound を 0.1 に
- Upper Bound から16まで
- Default Value を 0.1 に
作成したマテリアルでレンダリングしたいノードを作成または選択します。

例えば、Node Tree で、Plane ノードを作成します。Properties で、Render Transformation プロパティを追加し、Rotation X プロパティフィールドを-75に設定します。
Properties に追加して設定します。
- Mesh Material から Tessellation Material へ
- Material Properties > displacementMap を、ディスプレイスメントマップとして使用するテクスチャに
- Material Properties > tessellationLevel を、テッセレーションの量を調整する値に

テッセレーションシェーダーの使用¶

関連項目¶