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

Kanzi アプリケーションで 3D コンテンツのレンダリングを定義するには、レンダーパスを使用します。

始めるために、Kanzi Studio には次のレンダーパスプリセットが付属しています。

Default レンダーパスを使用する

Default レンダーパスプリセットを使用して、使い始めるのに必要な基本的な一連のレンダーパスを作成します。

Default レンダーパスを使用するには:

  1. Library > Rendering Alt を押しながら右クリック Render Pass Prefabs で Default レンダーパスを選択します。

    ../../_images/create-default-render-pass.png

    Kanzi Studio は、Library > Rendering 内で、透過設定のないノードを最初にレンダリングし、次に透過設定のあるノードをレンダリングするために必要なフィルタとレンダーパスを作成します。

    • Object Sources でこれらの Tag Filter フィルタ:

      • Opaque は、Transparent タグが付いていないノードを選択します。

      • Transparent は、Transparent タグを持つノードを選択します。

      ../../_images/opaque-and-transparent-filters-in-library.png ../../_images/opaque-filter-in-library.png ../../_images/transparent-filter-in-library.png
    • Render Pass Prefabs に Default レンダーパスという名前の Group レンダーパスが作成され、その中に以下が作成されます。

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

        デフォルトでは、Default レンダーパス内の Clear レンダーパスはデプスバッファーをクリアします。

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

        • Draw Objects Opaque という名前の Draw Objects レンダーパスは、Opaque フィルタで選ばれたノードをレンダリングします。

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

        • Draw Objects Transparent という名前の Draw Objects レンダーパスは、Transparent フィルタで選ばれたノードをレンダリングします。

      ../../_images/default-render-pass.png ../../_images/clear-render-pass-default-properties.png ../../_images/draw-objects-opaque-properties.png ../../_images/draw-objects-transparent-properties.png
  2. Node Tree で、レンダリングしたいコンテンツを持つ Viewport 2D ノードを選択し、Properties で Render Pass Prefab プロパティを作成した Default レンダーパスに設定します。

    Kanzi Studio は Viewport 2D ノードを Default レンダーパスを使用してレンダリングします。

    ../../_images/scene-render-pass-set-to-default-render-pass.png
  3. (オプション) あなたの Viewport 2D ノードが透明なノードを含む場合、Node Tree でノードを選択し、Properties の Tags プロパティの横にある Tags ボタンをクリックし、Transparent を選択します。

    これにより、Default レンダーパスが最初にトランスパレントノードをレンダリングし、次にオペイクノードをレンダリングするように設定されます。

    ../../_images/add-transparent-tag.png
  4. (オプション) コンテンツをレンダリングする Viewport 2D ノードの背景を設定するには、作成した Default レンダーパスで Clear レンダーパスを選択し、Properties で Clear Color 0 プロパティを追加して設定します。

    ../../_images/clear-render-pass-with-clear-color-set.png

テクスチャへのレンダリング (Rendering to texture)

Render to Texture Pass プリセットを使用して、コンテンツをテクスチャにレンダリングするために必要なレンダーパスを作成します。

Render to Texture Pass を使用するには:

  1. Library > Rendering Alt を押しながら右クリック Render Pass Prefabs で Render to Texture Pass を選択します。

    ../../_images/create-render-to-texture-pass.png

    Kanzi Studio は Library に作成します。

    • Materials and Textures > Textures における Render Target Texture

      ../../_images/render-target-texture-in-library.png
    • Rendering > Render Pass Prefabs に、Render Target Texture リソースにレンダリングする Render to Texture Pass という名前の Composition Target レンダーパスと、その中に以下を作成します。

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

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

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

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

    ../../_images/render-to-texture-pass.png ../../_images/render-to-texture-pass-properties.png ../../_images/clear-render-pass-properties.png ../../_images/draw-objects-properties.png
  2. Node Tree で、テクスチャにレンダリングしたいコンテンツを持つ Viewport 2D ノードを選択し、Properties で Render Pass Prefab プロパティを作成した Render to Texture Pass に設定します。

    Kanzi Studio は Viewport 2D ノードを Render to Texture Pass を使用してレンダリングします。

    ../../_images/scene-render-pass-set-to-render-to-texture-pass.png
  3. 最初のステップで作成した Render Target Texture を、前のステップで選択した Viewport 2D ノードのコンテンツを表示したいノードに適用します。

    例:

    1. Node Tree で、Alt を押しながら右クリック を選択し、Image を選択します。

    2. Node Tree で、Image ノードを選択します。Properties で、Image プロパティを Image ノードに表示したい Render Target Texture に設定します。

      ../../_images/render-target-texture-in-image.png

動的なイメージベースドライティング用のキューブマップのレンダリング

Image-Based Lighting Filter Pass プリセットを使用して、リアルタイムのイメージベースドライティング用の動的なキューブマップテクスチャを作成します。このプリセットは、シーンのコンテンツをレンダリングするレンダーパスツリーの一部としてのみ使用でき、Viewport 2D ノードで直接使用することはできません。

Image-Based Lighting Filter Pass は、Cubemap レンダーパスを使用して環境マップをキャプチャします。キューブマップ反射の作成 を参照してください。

動的なイメージベースドライティング用のキューブマップをレンダリングするには、

  1. スカイボックスを作成します。

    1. Library > Materials and Textures で、Alt を押しながら右クリック Material Types を行い、CubemapSkybox を選択します。

      Kanzi Studio は、Library > Materials and Textures に CubemapSkybox マテリアルタイプと CubemapSkyboxMaterial を作成し、キューブマップテクスチャをスカイボックスとして表示することをサポートします。

      ../../_images/library-create-cubemap-skybox-material-type.png
    2. スカイボックスに使用する HDR イメージをインポートします。イメージをインポートする際は、環境キューブマップテクスチャのみを作成するように Kanzi Studio を設定します。

      最良の結果を得るには、R16G16B16A16_SFLOAT などのハイダイナミックレンジ (HDR) ピクセルフォーマットを使用してください。

      ../../_images/create-textures-for-hdr-images-environment-cubemap-texture.png
    3. Library で、CubemapSkyboxMaterial マテリアルを選択します。Properties で、TextureCube プロパティをインポートしたキューブマップテクスチャに設定します。

      ../../_images/library-cubemap-skybox-material.png ../../_images/properties-cubemap-skybox-my-cubemap-texture.png
    4. Box または Sphere ノードを作成し、スカイボックスをレンダリングするために使用します。Properties で、次を設定します。

      • Mesh Material から CubemapSkyboxMaterial へ

      • ノードのサイズは、内部に表示したいコンテンツが収まるように十分に大きくしてください。

        • Box の場合、Width、Height、および Depth プロパティを設定します。

        • Sphere の場合、Radius プロパティを設定します。

      • Generate Mesh Inside Out を有効にする

        このプロパティが有効になると、Kanzi はメッシュ内にキューブマップテクスチャをレンダリングします。

      ../../_images/node-tree-box.png ../../_images/properties-box-skybox.png
  2. イメージベースドライティングで動的な反射を表示したいコンテンツを作成します。

    1. Library > Materials and Textures で、Alt を押しながら右クリック Material Types を行い、PhysicallyBased を選択します。

      Kanzi Studio は Library > Materials and Textures に PhysicallyBased マテリアルタイプと PhysicallyBasedMaterial を作成します。

      ../../_images/library-physicallybasedmaterial.png
    2. Library > Materials and Textures > Material Types で PhysicallyBased を選択し、Ctrl D を押します。

      マテリアルタイプを複製するのは、後で、環境内を移動し、その反射を動的に表示したいコンテンツに、同じマテリアルタイプのバリエーションを使用するためです。

      ../../_images/library-physicallybasedmaterial-duplicated.png
    3. 複製したコンテンツの名前を変更します。

      • マテリアルタイプを PhysicallyBased Image-Based Lighting に

      • マテリアルを PhysicallyBased Image-Based Lighting Material に

      ../../_images/library-physicallybasedmaterial-renamed.png
    4. 反射を表示したいノードを作成します。

      例えば、Sphere ノードを作成します。Properties で、以下を追加して設定します。

      • Mesh Material を PhysicallyBased Image-Based Lighting Material に

      • Material > Roughness Factor を 0.2 に

      ../../_images/node-tree-sphere.png ../../_images/properties-sphere-pbr-roughness.png
  3. 環境とコンテンツをレンダリングするレンダーパスツリーを作成します。

    1. Library > Rendering で、Alt を押しながら右クリック Render Pass Prefabs で Group レンダーパスを選択します。

    2. Group レンダーパス内に以下を作成します。

      1. Cubemap レンダーパス

      2. Default レンダーパス

    ../../_images/library-group-render-pass.png
  4. Node Tree で Viewport 2D ノードを選択します。Properties で Render Pass Prefab を Group レンダーパスに設定します。

    ../../_images/node-tree-viewport-2d.png ../../_images/properties-viewport-2d.png
  5. Cubemap レンダーパスを調整します。

    1. Node Tree Alt を押しながら右クリック で Scene に Camera を選択して作成し、Cubemap render pass Camera という名前を付けます。

      このカメラは Cubemap レンダーパスでのみ使用します。

      ../../_images/node-tree-cubemap-render-pass-camera.png
    2. Cubemap レンダーパスで以下を設定します。

      • Override Camera をキューブマップレンダーパスのカメラに

      • Resolution を 256 に

        値が大きいほど、レンダリング品質が高くなります。

      • Pixel Format を R16G16B16A16_FLOAT に

      • Mipmap Mode を Linear に

        Nearest ではピクセル化した結果になるため、Linear を使用します。

      ../../_images/library-cubemap-render-pass.png ../../_images/properties-cubemap-render-pass.png
    3. Cubemap レンダーパスで以下を行います。

      1. Clear レンダーパスを作成し、Clear Color 0 プロパティを追加します。

        ../../_images/library-clear-render-pass.png ../../_images/properties-clear-render-pass.png
      2. Gather Lights レンダーパスを作成し、その下に Draw Objects レンダーパスを作成します。

        ../../_images/library-gather-lights-draw-objects.png
  6. Cubemap レンダーパスでレンダリングするコンテンツを選択します。

    1. Node Tree で、スカイボックスに使用する Box を選択します。Properties で Tag を CubemapContent に設定します。

      ../../_images/node-tree-box.png ../../_images/properties-box-cubemap-content.png
    2. Library > Rendering Alt を押しながら右クリック Object Sources で、Tag Filter を選択し、Cubemap Content と名付けます。

      ../../_images/library-object-sources-cubemap-content.png
    3. Properties で Included Tags を CubemapContent タグに設定します。

      ../../_images/properties-cubemap-content.png
    4. Draw Objects レンダーパスで、Object Source プロパティを Cubemap Content タグフィルタに設定します。

      ../../_images/library-draw-objects-render-pass.png ../../_images/properties-draw-objects-source.png
  7. Image-Based Lighting Filter Pass を作成して調整します。

    1. Library > Rendering Alt を押しながら右クリック Render Pass Prefabs で Image-Based Lighting Filter Pass を選択します。

      ../../_images/library-image-based-lighting-filter-pass.png

      Kanzi Studio は Library に作成します。

      • Materials and Textures > Textures における以下の Cubemap Render Target Textures

        • 拡散照明用の放射照度テクスチャとしての Environment Ambient Texture

        • 反射照明用の反射テクスチャとしての Environment Reflection Texture

        ../../_images/library-environment-render-target-textures.png

        Physically-Based Rendering マテリアルを使用するプロジェクトで、生成されたキューブマップテクスチャを使用する方法については、イメージベースドライティングのキューブマップテクスチャの使用 を参照してください。

      • Rendering > Render Pass Prefabs に、Image-Based Lighting Filter Pass という名前の Group レンダーパスがあり、以下のレンダーパスを含みます。

        • Environment Ambient Kernel Pass という名前の Composition Target レンダーパス。2D ルックアップテクスチャを作成し、そこにレンダリングします。このパスは起動時に一度実行されます。結果は Environment Ambient Texture Filter Pass で使用されます。
          • Generate Environment Ambient Kernel Pass という名前の Blit レンダーパス。2D ルックアップテクスチャをレンダリングします。

        • Environment Reflection Kernel Pass という名前の Composition Target レンダーパス。2D ルックアップテクスチャをレンダリングします。このパスは起動時に一度実行されます。結果は Environment Reflection Texture Filter Pass で使用されます。
          • Generate Environment Reflection Kernel Pass という名前の Blit レンダーパス。2D ルックアップテクスチャをレンダリングします。

        • Environment Ambient Texture Filter Pass という名前の Cubemap Target レンダーパス。Environment Ambient Texture キューブマップテクスチャにレンダリングします。
          • Filter Pass という名前の Blit レンダーパス。最終的な Environment Ambient Texture をレンダリングします。

        • Environment Reflection Texture Filter Pass という名前の Cubemap Target レンダーパス。Environment Reflection Texture キューブマップテクスチャにレンダリングし、ミップマップマテリアルを使用して、異なるラフネス値を事前フィルタリングされたミップマップとしてレンダリングします。
          • Blit Base Level Pass という名前の Blit レンダーパス。Environment Reflection Texture のベースミップマップレベルをレンダリングします。

        ../../_images/library-image-based-lighting-filter-pass-expanded.png
    2. Image-Based Lighting Filter Pass を Group レンダーパスにドラッグし、Cubemap レンダーパスと Default レンダーパスの間に配置します。

      ../../_images/library-image-based-lighting-filter-pass-instantiated.png
    3. Image-Based Lighting Filter Pass のインスタンスを選択し、Properties で Add Binding をクリックし、Binding Editor で以下を行います。

      • Property を Image-Based Lighting render pass の Cubemap render pass Result Texture プロパティに設定します。

      • Library > Rendering > Render Pass Prefabs で Cubemap レンダーパスを選択し、Properties から Result Texture を Binding Editor にドラッグして、Expression エディタにドロップします。

      Save をクリックします。

      ../../_images/binding-editor-input-environment-texture.png
    4. Library > Materials and Textures > Material Types で、PhysicallyBased Image-Based Lighting マテリアルタイプを選択します。Properties の Preprocessor Defines で KANZI_SHADER_USE_LIGHT_IMAGE_BASED キーを 1 に設定し、Sync with Uniforms をクリックします。

      ../../_images/library-material-types-pb-image-based-lighting.png ../../_images/properties-use-light-image-based.png ../../_images/properties-sync-with-uniforms.png
    5. Node Tree で Scene ノードを選択します。Properties で追加して設定します。

      • Material > Environment Ambient Texture を Environment Ambient Render Target Texture に

      • Material > Environment Reflection Texture を Environment Reflection Render Target Texture に

      Image-Based Lighting Filter Pass は、これらのテクスチャを作成し、動的に更新します。

      ../../_images/node-tree-scene.png ../../_images/properties-scene-environment-textures.png
  8. 動的に反射させたいコンテンツを追加します。

    例:

    1. Node Tree で、Sphere を含む Empty Node 3D を作成します。

      ../../_images/node-tree-reflected-content.png
    2. Empty Node 3D を選択し、Properties で追加して設定します。

      • Tag を CubemapContent に

      • Render Transformation の Translation X を 3 に

      これにより、Kanzi はこのノードとその子ノードを環境の一部としてレンダリングし、ノードを反射面から離れた位置に移動させます。

      ../../_images/node-tree-empty-node-3d.png ../../_images/properties-empty-node-3d.png
    3. Sphere を選択し、Properties で Mesh Material を PhysicallyBasedMaterial に設定します。

      ../../_images/node-tree-empty-node-sphere.png ../../_images/properties-sphere-pb-material.png
    4. Library > Materials and Textures > Materials で、PhysicallyBasedMaterial を選択します。Properties で設定します。

      • Base Color Factor を白に

      • Emissive Factor を白かつ高い強度に

      ../../_images/library-pb-material.png ../../_images/properties-pb-material.png
    5. Library > Materials and Textures > Material Types で、PhysicallyBased を選択します。Properties で KANZI_SHADER_TONEMAP_REINHARD を無効にし、Sync with Uniforms をクリックします。

      これにより、トーンマッピングを無効にします。

      ../../_images/library-material-types-pb.png ../../_images/properties-tonemap-reinhard.png ../../_images/properties-pb-sync-with-uniforms.png
  9. 反射の品質を変更するには、Ambient Sample Count を設定して Environment Ambient Texture を調整します。これにより、そのキューブマップテクスチャの解像度を調整します。解像度を下げると品質は低下しますが、パフォーマンスが向上する場合があります。

    Image-Based Lighting Filter Pass で Reflection Sample Count Minimum と Reflection Sample Count Maximum を追加して設定します。サンプル数を増やすと品質は向上しますが、パフォーマンスは低下します。

    例えば、両方のプロパティを 1024 に設定します。

    以下のプロパティは Environment Reflection Texture のサンプル数を制御します。

    • Reflection Sample Count Minimum は、ベースレベルの次の最初のミップマップレベルのサンプル数です。このレベルは関連付けられたラフネスが低いため、必要なサンプル数が最も少なくなります。

    • Reflection Sample Count Progression は、Reflection Sample Count Minimum からサンプル数がどのように増加するかを制御します。ベースレベルの次の最初のミップマップレベル以降の各ミップマップレベルでは、この値に \(2^{mipmap - 1} - 1\) を掛けた分だけサンプル数が増加します。

    • Reflection Sample Count Maximum は、サンプル数の増加をこの値までに制限します。

    ../../_images/library-image-based-lighting-filter-pass-instantiated.png ../../_images/properties-image-based-lighting-reflection-sample-count.png

    例えば、最小値、増加量、最大値がそれぞれ 32、32、128 の場合、サンプル数は以下のようになります。

    • ベースレベルの次の最初のミップマップレベルは 32

    • 2 番目のミップマップレベルは 64

    • 3 番目のミップマップレベルは 128

    • 4 番目のミップマップレベルは 128

    4 番目のミップマップレベル以降、サンプル数は増加しません。

反射させるために作成したオブジェクトを移動すると、その反射も合わせて移動します。

../../_images/rendering-cubemaps-dynamic-ibl.gif

関連項目

レンダリング

レンダーパスを使用すること

レンダリングのベストプラクティス

オブジェクトソース (Object Sources) を使用する

フィルタ

レンダリングを複数のフレームに分散する

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

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

レンダリングのためのマテリアル設定