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

Composition Target Render Pass を使用して:

Composition Target Render Pass は、レンダリングするコンテンツから自動的にテクスチャを作成します。Composition Target Render Pass は最大4つのコンポジションターゲットにレンダリングできます。Blit Render Pass を使用して、これらのテクスチャを特定のマテリアルを使用して画面や他のコンポジションターゲットに描画できます。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 Render Pass のレンダーパスまたはテクスチャを画面にブリットすることを可能にするレンダーパス構造を含んでいます。

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

    • Composition Target Render Pass は、自身とその子孫のレンダーパスを1つ以上の合成ターゲットにレンダリングします。

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

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

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

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

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

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

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

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

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

    ../../_images/viewport-2d-in-the-project.png ../../_images/render-pass-prefab-set-to-compose-and-blit-pass.png
  3. (オプション) コンポジションターゲットを設定しない場合、これらのプロパティを Composition Target Render Pass で設定できます。

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

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

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

      ヒント

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

複数のコンポジションターゲットにコンテンツをレンダリングするには、Kanzi アプリケーションを実行したいハードウェアがGL_EXT_draw_buffers拡張機能またはOpenGL ES 3.0以上をサポートしている必要があります。

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

  1. Library で、Alt を押しながら右クリック Rendering を選択し、Compose and Blit Pass を選択します。

    Compose and Blit Pass は、特定のマテリアルを使用して、Composition Target Render Pass のレンダーパスまたはテクスチャを画面にブリットすることを可能にするレンダーパス構造を含んでいます。

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

    • Composition Target Render Pass は、自身とその子孫のレンダーパスを1つ以上の合成ターゲットにレンダリングします。

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

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

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

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

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

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

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

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

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

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

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

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

    例:

    • 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 Render Pass > Clear Render Pass を選択し、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. Material Type で、複数のコンポジションターゲットにコンテンツを描画するために使用したい Library > Materials and Textures > Material Types で、Fragment Shader を編集します。

    1. (オプション) ターゲットプラットフォームが OpenGL ES 3 をサポートしていない場合は、描画するカラーバッファのリストを指定できるようにする GL_EXT_draw_buffers 拡張機能を有効にしてください。

      #extension GL_EXT_draw_buffers : enable
      
    2. gl_FragColor の代わりに、出力値を出力配列変数 gl_FragData[n] の要素に書き込みます。ここで、n は書き込みたいカラーバッファのインデックスであり、対応するインデックスを持つ Composition Target Render Pass 結果テクスチャに対応します。

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

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

      ...
      
      void main()
      {
          ...
      
          // Write the value to CompositionTargetRenderPass.ResultTexture0.
          gl_FragData[0] = ...
      
          // Write the value to CompositionTargetRenderPass.ResultTexture1.
          gl_FragData[1] = ...
      
          ...
      }
      
  6. 1つ以上の Blit Render Pass レンダーパスを設定し、Composition Target Render Pass の Result Texture プロパティに Texture プロパティをバインドすることで、コンポジションターゲットのコンテンツを描画します。

    例えば、1つの Blit Render Pass を設定して複数のコンポジションターゲットを描画するには:

    1. Library で Compose and Blit Pass > Blit Render Pass を選択し、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 します。

      • Composition Target Render Pass の Result Texture プロパティに Expression を設定します。

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

      • Property から Blit Render Pass > Texture 1

      • Expression へ

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

    1. Library で Composition Target Render Pass を選択し、Properties で Depth Texture Format を追加して、深度テクスチャに使用したい形式に設定します。

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

    2. 深度テクスチャをブリットしたい Blit Render Pass で、Composition Target Render Pass の Result Depth Texture プロパティに Texture プロパティをバインドします。

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

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

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

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

      ヒント

      Composition Target Render Pass > 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 Render Pass のコンポジションターゲットを更新する頻度を設定することができます。

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

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

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

    • Render Pass > Update Rate を、Composition Target Render Pass がレンダリングするコンテンツを更新したい速度に設定します。

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

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

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

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

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

      例えば、2つの Composition Target Render Pass レンダーパスがあり、その内容をフレームごとに更新する場合、そのレンダーパスの1つで Update Rate Offset を1に設定します。こうすることで、Kanzi はそれらのレンダーパスによってレンダリングされた内容を交互のフレームで更新します。

    ヒント

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

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

関連項目

レンダリング

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

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

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

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

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

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