複数のレンダーパスまたはテクスチャのレンダリング

Blit レンダーパスを使用すると、複数の Composition Target レンダーパスまたはテクスチャを、特定のマテリアルを使用してスクリーンにブリットできます。デフォルトでは、Blit レンダーパスがブリットするテクスチャは 1 つだけです。このテクスチャには、テクスチャリソースまたは Composition Target レンダーパスの結果テクスチャを使用できます。

例えば、特定のマテリアルを使用して複数の Composition Target レンダーパスの結果テクスチャをスクリーンにブリットすることで、ブルームなどのポストプロセスエフェクトを作成できます。チュートリアル: ブルームエフェクトを作成する を参照してください。

Composition Target レンダーパスを使用して複数のコンポジションターゲットにレンダリングし、結果テクスチャをスクリーンにブリットする方法については、コンテンツを複数のコンポジションターゲットにレンダリングする を参照してください。

複数のレンダーパスまたはテクスチャをレンダリングするには:

  1. Library > Materials and Textures > Material Types で、DefaultBlit マテリアルタイプを複製します。マテリアルタイプの名前を BlitMultiple に、マテリアルの名前を BlitMultipleMaterial に変更します。

    ヒント

    プロジェクトに DefaultBlit マテリアルタイプが含まれていない場合、Library > Materials and Textures Alt を押しながら右クリック Material Types で、DefaultBlit を選択します。

    ../../_images/blitmultiple-and-blitmultiplematerial.png
  2. BlitMultiple マテリアルタイプで Fragment Shader をダブルクリックして、Shader Source Editor で開きます。

    ../../_images/defaultblit-fragment-shader.png
  3. Shader Source Editor で、Blit レンダーパスに使用させるユニフォームを追加し、それらを使用するようにシェーダーを変更して、Save をクリックします。

    例えば、シェーダーが Texture 0 と Texture 1 プロパティをカスタムプロパティ Weight を使用してそれらの間で重み付けしてミックスするようにするには、シェーダーファイルの内容を次のように置き換えます。

    #version 310 es
    
    precision mediump float;
    
    uniform sampler2D Texture0;
    uniform sampler2D Texture1;
    uniform float BlendIntensity;
    uniform float Weight;
    
    in vec2 vTexCoord;
    layout(location = 0) out vec4 fragColor;
    
    void main()
    {
        fragColor = mix(texture(Texture0, vTexCoord), texture(Texture1, vTexCoord), Weight) * BlendIntensity;
    }
    
  4. Library > Materials and Textures > Material Types で、BlitMultiple マテリアルタイプを選択します。Properties で Sync with Uniforms をクリックします。

    ../../_images/defaultblit-red-in-library.png ../../_images/defaultblit-sync-with-uniforms.png

    Kanzi Studio:

    1. フラグメントシェーダーで定義したカスタムプロパティタイプを Library > Property Types に作成します。

      例えば、Weight プロパティタイプです。

    2. シェーダーで定義したプロパティを、BlitMultiple マテリアルタイプと、そのマテリアルタイプを使用するマテリアルに追加します。

      例えば、Texture1 および Weight プロパティタイプです。

      ../../_images/blitmultiple-properties.png ../../_images/blitmultiplematerial-properties.png
  5. Library > Materials and Textures > Materials で、BlitMultiple マテリアルタイプを使用する BlitMultipleMaterial マテリアルを選択します。Properties で Blend Mode プロパティを Alpha: Premultiplied に設定します。

    このマテリアルを使用して画面にブリットするテクスチャをブレンドするために、Kanzi を設定します。

    ../../_images/defaultblitmaterial-blend-mode-alpha-premultiplied.png
  6. Library で、Alt を押しながら右クリック Rendering を選択し、Compose and Blit Pass を選択します。

    Compose and Blit Pass には、特定のマテリアルを使用して Composition Target レンダーパスまたはテクスチャをスクリーンにブリットできるようにするレンダーパス構造が含まれています。

    Compose and Blit Pass レンダーパスプリセットには、次のレンダーパスが含まれています。

    • Composition Target レンダーパスは、自身とその子孫のレンダーパスを 1 つ以上のコンポジションターゲットにレンダリングします。

      • Clear レンダーパスは、現在のレンダーコンテキストのバッファの一部またはすべてをクリアします。

        デフォルトでは、Compose and Blit Pass 内の Clear レンダーパスは、最初のカラーバッファーを透明な黒でクリアし、デプスバッファーを値 1 でクリアします。

        たとえば、最初のカラーバッファーを別の色でクリアするには、Clear Color 0 プロパティを、Kanzi が Composition Target レンダーパスにレンダリングするコンテンツの背景色として使用する色に設定します。

      • Gather Lights レンダーパスは、Compose and Blit Pass を使用するように設定した Viewport 2D ノード内の Light ノードを収集し、それらを子の Draw Objects レンダーパスに渡します。

        • Draw Objects という名前の Draw Objects レンダーパスでは、特定のノードのリストをレンダリングするように Camera ノードを設定したり、それらのノードをフィルタリングしたり、フラスタムカリングを制御したりできます。Draw Objects レンダーパスは、デフォルトでは、最も近い祖先の Gather Lights レンダーパスが提供するライトを使用してノードをレンダリングします。デフォルトでは、Draw Objects レンダーパスはデフォルトの Camera ノードを使用して Viewport 2D ノード内のすべてのノードをレンダリングします。

    • Blit レンダーパスは、特定のマテリアルを使用して、1 つ以上の単一テクスチャまたはキューブマップテクスチャを画面にブリットします。

      デフォルトでは、この Blit レンダーパスは、Composition Target レンダーパスがコンテンツをレンダリングする最初のカラーテクスチャを画面に描画します。

      ../../_images/compose-and-blit-pass-create.png ../../_images/compose-and-blit-pass-library.png
  7. Node Tree で、コンテンツをコンポジションターゲットにレンダリングしたい Viewport 2D ノードを選択します。Properties で Render Pass Prefab プロパティを Compose and Blit Pass に設定します。

    Kanzi は、その Viewport 2D 内のシーンをコンポジションターゲットにレンダリングし、Blit レンダーパスを使用してコンテンツをスクリーンに描画します。

    ../../_images/viewport-2d-in-the-project.png ../../_images/render-pass-prefab-set-to-compose-and-blit-pass.png
  8. Library > Rendering > Render Pass Prefabs で、Compose and Blit Pass > Blit レンダーパスを選択します。Properties で、以下を追加して設定します。

    • Blit レンダーパス > Texture 1 を、使用するテクスチャに設定するか、使用する Composition Target レンダーパスの結果テクスチャにバインド

      例えば、Texture 1 プロパティを追加し、それをテクスチャリソースに設定します。

    • Material を、Blit レンダーパスに使用させるマテリアルに設定

      例えば、この手順の前に編集したフラグメントシェーダーを持つ BlitMultipleMaterial マテリアルに設定して、マテリアルが2つのテクスチャをミックスできるようにします。

    • Material Properties > Weight を、各テクスチャを表示したい量に設定します

      Texture 0 のウェイトを大きくするには Weight プロパティの値を小さくし、Texture 1 のウェイトを大きくするには値を大きくします。例えば、Texture 0 プロパティと Texture 1 プロパティで設定したテクスチャの平均を表示するには、Weight を 0.5 に設定します。

    ../../_images/blit-render-pass-properties-texture1-and-material-set.png ../../_images/scene-defaultrenderpass.png ../../_images/scene-group-render-pass.png

関連項目

チュートリアル: ブルームエフェクトを作成する

コンポジションターゲットへのコンテンツのレンダリング

ポストプロセッシングエフェクトの作成

レンダリング

マテリアルタイプの使用

シェーダー

テクスチャ (Textures)