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

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

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

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

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

  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 Render Pass に使用させたいユニフォームを追加し、それらを使用するようにシェーダーを変更して、Save をクリックします。

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

    precision mediump float;
    
    uniform sampler2D Texture0;
    uniform sampler2D Texture1;
    uniform float BlendIntensity;
    uniform float Weight;
    
    varying vec2 vTexCoord;
    
    void main()
    {
        gl_FragColor = mix(texture2D(Texture0, vTexCoord), texture2D(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 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
  7. 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
  8. Library > Rendering > Render Pass Prefabs で Compose and Blit Pass > Blit Render Pass を選択します。Properties で追加して設定します:

    • Blit Render Pass > Texture 1 をテクスチャに設定するか、使用したい Composition Target Render Pass の結果テクスチャにバインドします

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

    • Blit Render Pass が使用する Material を、目的のマテリアルに設定します。

      例えば、この手順の前に編集したフラグメントシェーダーを持つ 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)