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

Composition Target レンダーパスは、次の目的で使用します。

Composition Target レンダーパスは、レンダリングするコンテンツからテクスチャを自動的に作成します。Composition Target レンダーパスは、最大 4 つのコンポジションターゲットにレンダリングできます。Blit レンダーパスを使用すると、特定のマテリアルを使用してこれらのテクスチャをスクリーンまたは他のコンポジションターゲットに描画できます。コンテンツを Render Target Texture にレンダリングするには、Render to Texture Pass を使用できます。テクスチャへのレンダリング (Rendering to texture) を参照してください。

コンテンツを1つのコンポジションターゲットにレンダリングする

コンテンツを1つのコンポジションターゲットにレンダリングするには:

  1. 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
  2. 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
  3. (オプション) コンポジションターゲットを設定しない場合は、Composition Target レンダーパスで次のプロパティを設定できます。

    • Resolution Multiplier と Resolution Divisor を使用して、デフォルトのコンポジションターゲットの解像度を設定します。

      Kanzi Studio は、コンポジションターゲットの解像度を Resolution Multiplier プロパティの値で乗算し、Resolution Divisor プロパティの値で除算します。

      例えば、合成ターゲットの解像度を4倍にするには、Resolution Multiplier を4に設定します。合成ターゲットの解像度を元の4分の1に減らすには、Resolution Divisor を4に設定します。

      ヒント

      Composition Target レンダーパス > Width および Height プロパティを使用すると、コンポジションターゲットの正確なサイズを設定できます。Width および Height プロパティの値は、Resolution Multiplier および Resolution Divisor プロパティの値に基づいて計算されたコンポジションターゲットのディメンジョンよりも優先されます。

      Width または Height プロパティを現在のビューポートの幅または高さの一部にバインドするには、Render Pass > Input Viewport Area プロパティを使用します。これは、親レンダーパスのコンポジションスペースに対するビューポートエリアを報告します。

      バインディングでは、ビューポートの寸法にアクセスするためにこれらの式を使用します:

      • 幅: {@./RenderPass.InputViewportArea}.Z

      • 高さ: {@./RenderPass.InputViewportArea}.W

    • 合成ターゲットのピクセルフォーマットを設定するには、Pixel Format 0 を使用します。

    • 深度合成ターゲットの形式を設定するには、Depth Texture Format を使用します。

      深度テクスチャを作成したい場合は、このプロパティを設定します。

      このプロパティの値は、Depth Renderbuffer Format プロパティの値を上書きします。

    • 深度レンダーバッファのフォーマットを設定するには、Depth Renderbuffer Format を使用します。

      このプロパティを設定しない場合、Kanzi はデプスレンダーバッファのフォーマットを自動的に利用可能な最適なフォーマットに設定します。ほとんどの場合、これは32ビット浮動小数点フォーマットであり、最も多くのメモリを消費します。

      Depth Texture Format プロパティの値は、このプロパティの値を上書きします。

    • 深度合成ターゲットの深度比較モードを設定するには、Depth Compare Function を使用します。

    • Kanzi が[0, 0] - [1, 1]の矩形外の合成ターゲットテクスチャのテクスチャ座標をどのように処理するかを設定するための Addressing Mode:

      • デフォルトで、これらの座標の外側でテクスチャを繰り返すようにするには、Repeat を使用します。

      • Mirror はテクスチャを繰り返すために使用しますが、繰り返しごとに反転します。

      • Clamp は、テクスチャをこれらの座標に制限し、座標の外側でテクスチャのエッジテクセルを繰り返すようにします。

      • Mirror once は、テクスチャを負の方向に1回繰り返し、その後テクスチャをクランプします。

    • Kanzi が合成ターゲットのテクスチャサンプルにアクセスする方法を設定するための Filter Mode:

      • Nearest は最も近いサンプルから色を取得します。

      • Linear は隣接するサンプルから色を補間します。これはデフォルトの値です。

    • Mipmap Mode を設定して、コンポジションターゲットのミップマップを作成します。コンポジションターゲットのミップマップを作成する を参照してください。

    • Multisample Level で使用したいアンチエイリアスサンプルの数を設定します。マルチサンプリングの使用 を参照してください。

    ../../_images/composition-target-render-pass-default-properties.png

コンテンツを複数のコンポジションターゲットにレンダリングする

Composition Target レンダーパスは、最大 4 つのコンポジションターゲットにレンダリングするように設定できます。例えば、複数のレンダーターゲットへのレンダリングを使用して、スクリーンスペースアンビエントオクルージョンやディファードシェーディングを実装できます。

コンテンツを複数のコンポジションターゲットにレンダリングするには:

  1. 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
  2. Node Tree で、コンテンツを合成ターゲットにレンダリングしたい Viewport 2D ノードを選択し、Properties で Render Pass Prefab プロパティを Compose and Blit Pass に設定します。

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

    ../../_images/viewport-2d-in-the-project.png ../../_images/render-pass-prefab-set-to-compose-and-blit-pass.png
  3. 作成するコンポジションターゲットの数を設定するには、Library の Compose and Blit Pass で Composition Target レンダーパスを選択し、Properties で Pixel Format 0、Pixel Format 1、Pixel Format 2、Pixel Format 3 プロパティのうち 1 つ以上を追加して、コンポジションターゲットに使用するピクセルフォーマットに設定します。

    ピクセルフォーマットプロパティを 1 つも設定しない場合、Kanzi は Composition Target レンダーパスに対してコンポジションターゲットを 1 つ作成します。

    インデックスが最も大きいピクセルフォーマットプロパティによって、Kanzi が Composition Target レンダーパスに対して作成するコンポジションターゲットの数が決まります。値を設定していないピクセルフォーマットプロパティは、値を設定した、よりインデックスの大きいピクセルフォーマットプロパティから値を取得します。

    例:

    • Pixel Format 0 と Pixel Format 2 プロパティの値を設定すると、Kanzi は3つのコンポジションターゲットを作成し、設定します。

      • 最初のコンポジションターゲットは、Pixel Format 0 プロパティで設定したピクセルフォーマットを使用します。

      • 2番目のコンポジションターゲットは、Pixel Format 2 プロパティで設定したピクセルフォーマットを使用します。

      • Pixel Format 2 プロパティで設定したピクセルフォーマットを使用する3番目のコンポジションターゲット。

    • 同じピクセルフォーマットを使用する2つのコンポジションターゲットを作成するには、Pixel Format 1 プロパティの値を設定します。

    ../../_images/composition-target-render-pass-in-compose-and-blit-pass.png ../../_images/composition-target-render-pass-pixel-format.png
  4. Library で Compose and Blit Pass > Composition Target レンダーパス > Clear レンダーパスを選択し、Properties で Clear Color プロパティを追加して、コンポジションターゲットのカラーバッファーのクリアに使用する色に設定します。

    例えば、2つのコンポジションターゲットを使用したい場合は、Clear Color 0 プロパティと Clear Color 1 プロパティを設定します。

    ../../_images/clear-render-pass-in-compose-and-blit-pass.png ../../_images/clear-render-pass-clear-color-0-1-set.png
  5. Library > Materials and Textures > Material Types で、複数のコンポジションターゲットにコンテンツを描画するために使用する Material Type の Fragment Shader を編集します。

    gl_FragColor の代わりに ES 3.1 のシェーダー構文を使用して、各出力とそのロケーションおよび型を明示的に定義します。layout(location = n) の n は書き込み先のカラーバッファーのインデックスで、インデックスが一致する Composition Target レンダーパスの結果テクスチャに対応します。以下の代わりに

    ...
    
    void main()
    {
        ...
    
        gl_FragColor = ...
    }
    

    ノード自体とそのすべてのチャイルドノードが静的であるかまたは特定時点の後に静的になる場合は、

    ...
    
    #version 310 es
    
    layout(location = 0) out mediump vec4 outColor0;
    layout(location = 1) out highp  float outFloat1;
    
    void main()
    {
        ...
    
        // Write the value to CompositionTargetRenderPass.ResultTexture0.
        outColor0 = ...
    
        // Write the value to CompositionTargetRenderPass.ResultTexture1.
        outFloat1 = ...
    
        ...
    }
    
  6. 1 つ以上の Blit レンダーパスを設定し、その Texture プロパティを Composition Target レンダーパスの Result Texture プロパティにバインドすることで、コンポジションターゲットのコンテンツを描画します。

    たとえば、1つの Blit レンダーパスで複数のコンポジションターゲットを描画するように設定するには:

    1. Library で Compose and Blit Pass > Blit レンダーパスを選択し、Properties で、Texture 0 プロパティをバインドしているバインディングのコピーをコンポジションターゲットごとに作成します。

      ../../_images/blit-render-pass-in-compose-and-blit-pass.png ../../_images/blit-render-pass-copy-texture-binding.png ../../_images/blit-render-pass-paste-binding.png
    2. 作成した各バインディングをクリックし、Binding Editor で設定します:

      • バインドしたいテクスチャに Property します。

      • Expression を Composition Target レンダーパス内の対応する Result Texture プロパティに

      たとえば、以下を設定します。

      • Property を Blit レンダーパス > Texture 1 に

      • Expression へ

        {@../Composition Target/CompositionTargetRenderPass.ResultTexture1}
        
      ../../_images/click-texture-binding.png ../../_images/blit-render-pass-texture-1-binding.png
  7. (オプション) 深度テクスチャにレンダリングするには:

    1. Library で Composition Target レンダーパスを選択し、Properties で Depth Texture Format を追加して、デプステクスチャに使用するフォーマットに設定します。

      Depth Texture Format プロパティを設定しなくても、Composition Target レンダーパスの子レンダーパスをレンダリングするためにレンダリング設定でデプステストが必要な場合、Kanzi はデプスレンダーバッファーを自動的に作成します。

    2. デプステクスチャをブリットする Blit レンダーパスで、Texture プロパティを Composition Target レンダーパスの Result Depth Texture プロパティにバインドします。

  8. (オプション) Composition Target レンダーパスのコンポジションターゲットを1つも手動で設定しない場合、Kanzi は作成するすべてのコンポジションターゲットにプロパティ値を適用します。これは、以下のプロパティを手動で設定することで変更できます。

    • Resolution Multiplier と Resolution Divisor を使用して、合成ターゲットの解像度を設定します。

      Kanzi は、各コンポジションターゲットの解像度を Resolution Multiplier プロパティの値で乗算し、Resolution Divisor プロパティの値で除算します。

      例えば、各コンポジションターゲットの解像度を4倍にするには、Resolution Multiplier を4に設定します。各コンポジションターゲットの解像度を元の4分の1に減らすには、Resolution Divisor を4に設定します。

      ヒント

      Composition Target レンダーパス > Width および Height プロパティを使用すると、コンポジションターゲットの正確なサイズを設定できます。Width および Height プロパティの値は、Resolution Multiplier および Resolution Divisor プロパティの値に基づいて計算されたコンポジションターゲットのディメンジョンよりも優先されます。

      Width または Height プロパティを現在のビューポートの幅または高さの一部にバインドするには、Render Pass > Input Viewport Area プロパティを使用します。これは、親レンダーパスのコンポジションスペースに対するビューポートエリアを報告します。

      バインディングでは、ビューポートの寸法にアクセスするためにこれらの式を使用します:

      • 幅: {@./RenderPass.InputViewportArea}.Z

      • 高さ: {@./RenderPass.InputViewportArea}.W

    • Kanzi が[0, 0] - [1, 1]の矩形外の合成ターゲットテクスチャのテクスチャ座標をどのように処理するかを設定するための Addressing Mode:

      • デフォルトで、これらの座標の外側でテクスチャを繰り返すようにするには、Repeat を使用します。

      • Mirror はテクスチャを繰り返すために使用しますが、繰り返しごとに反転します。

      • Clamp は、テクスチャをこれらの座標に制限し、座標の外側でテクスチャのエッジテクセルを繰り返すようにします。

      • Mirror once は、テクスチャを負の方向に1回繰り返し、その後テクスチャをクランプします。

    • Kanzi が合成ターゲットのテクスチャサンプルにアクセスする方法を設定するための Filter Mode:

      • Nearest は最も近いサンプルから色を取得します。

      • Linear は隣接するサンプルから色を補間します。これはデフォルトの値です。

    • Mipmap Mode を設定して、コンポジションターゲットのミップマップを作成します。コンポジションターゲットのミップマップを作成する を参照してください。

    • Multisample Level で使用したいアンチエイリアスサンプルの数を設定します。マルチサンプリングの使用 を参照してください。

合成ターゲットのレンダリングを複数のフレームに分散する

フレームごとのレンダリング作業量を減らすために、Kanzi が Composition Target レンダーパスのコンポジションターゲットを更新するレートを設定できます。

コンポジションターゲットのレンダリングを分散するには:

  1. Library > Rendering > Render Pass Prefabs で、コンテンツをコンポジションターゲットにレンダリングするために使用する Composition Target レンダーパスを選択します。コンテンツを1つのコンポジションターゲットにレンダリングする、コンテンツを複数のコンポジションターゲットにレンダリングする、および テクスチャへのレンダリング (Rendering to texture) を参照してください。

    ../../_images/composition-target-render-pass-in-compose-and-blit-pass.png
  2. Properties に追加して設定します。

    • Render Pass > Update Rate を、Composition Target レンダーパスがレンダリングするコンテンツを更新するレートに設定します:

      • コンテンツを毎フレーム更新するには、1に設定します。これがデフォルトの値です。

      • コンテンツを隔フレームで更新するには、2に設定し、4フレームごとに更新するには、4に設定します。

      • コンテンツを一度だけレンダリングするには、0に設定します。

    • Render Pass > Update Rate Offset をレンダリングレートをオフセットしたいフレーム数に設定します。

      この方法により、複数のレンダーパスのレンダリングを異なるフレームに分散させることができます。

      例えば、コンテンツを1フレームおきに更新する Composition Target レンダーパスが2つある場合、そのうちの一方のレンダーパスで Update Rate Offset を1に設定します。これにより、Kanzi はそれらのレンダーパスがレンダリングするコンテンツを交互のフレームで更新します。

    ヒント

    同じレンダーパスプレハブを使用する複数の Viewport 2D ノードで Update Rate プロパティと Update Rate Offset プロパティを異なる値に設定するには、そのレンダーパスプレハブのインスタンスをカスタマイズできます。レンダーパスのインスタンスをカスタマイズする を参照してください。

    ../../_images/properties-update-rate.png

関連項目

レンダリング

Kanzi Studio レンダーパスプリセットを使用する

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

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

コンポジションターゲットのミップマップの作成

マルチサンプリングの使用

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