ステップ 1 - 車とヘッドライトをレンダリングする

このチュートリアルのこのステップでは、車とヘッドライトを別々にレンダリングするために必要なレンダーパスを作成します。

チュートリアルを入手する

チュートリアルを入手するには、Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Bloom チュートリアルの横にある ダウンロード をクリックします。

Kanzi Studio はチュートリアルを <KanziWorkspace>/Tutorials ディレクトリにダウンロードします。以下が含まれています。

  • <KanziWorkspace>/Tutorials/Bloom/Assets ディレクトリにあるチュートリアルのアセット。

  • <KanziWorkspace>/Tutorials/Bloom/Start ディレクトリにあるチュートリアルの開始地点プロジェクト。

  • <KanziWorkspace>/Tutorials/Bloom/Completed ディレクトリにある完成したチュートリアル。

シーンをレンダリングする

このセクションでは、シーン全体をレンダリングするためのレンダーパスを作成します。

シーンをレンダリングするには:

  1. Kanzi Studio Quick Start ウィンドウで Projects をクリックし、Tutorials タブを選択します。Bloom チュートリアルの横にある Open をクリックし、Start project を選択します。

    ../../_images/start2.png
  2. 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
  3. Library > Rendering > Render Pass Prefabs で、Compose and Blit Pass レンダーパスプレハブを選択し、F2 キーを押して、Bloom に名前を変更します。

    このレンダーパスプレハブを使用して、この手順で作成するいくつかのレンダーパスを集めます。これらを組み合わせることで、車をレンダリングし、ヘッドライトにブルーム効果を適用します。

    ../../_images/bloom-in-library.png
  4. Library > Rendering > Render Pass Prefabs > Bloom レンダーパスプレハブで、名前を変更します。

    • Composition Target レンダーパスを Render Scene に

      このレンダーパスを使用して、Viewport 2D ノード Car のコンテンツをレンダリングし、後でレンダーパスの入力として使用してヘッドライトのみを選択するための合成ターゲットにします。

    • Blit レンダーパスを Show Scene に

      このレンダーパスを使用して、Render Scene レンダーパスを画面に描画し、Viewport 2D ノード Car のコンテンツをレンダリングします。

    ../../_images/render-scene-show-scene-in-library.png
  5. Node Tree で RootNode > Scroll View 2D > Car ノードを選択します。Properties で Render Pass Prefab プロパティを追加し、それを Bloom に設定します。

    Kanzi Studio は、Bloom レンダーパスプレハブを使用して Viewport 2D ノード Car をレンダリングします。

    ../../_images/car-in-project.png ../../_images/car-render-pass-property.png ../../_images/preview-background-color-set.png
  6. 車にアンチエイリアスを適用するには、Library で Render Scene レンダーパスを選択し、Properties で Multisample Level プロパティを追加し、使用したいアンチエイリアスサンプルの数に設定します。

    たとえば、4 に設定します。

    Kanzi アプリケーションを実行したいデバイスのドキュメントを参照して、サポートされている値を確認してください。アンチエイリアスサンプルの数はデバイスに依存するためです。デバイスがサポートしていない値に Multisample Level プロパティを設定した場合、Kanzi Engine はその値をデバイスドライバがサポートする最大値にクランプします。

    ../../_images/render-scene-in-library-2.png ../../_images/render-scene-multisample-level.png ../../_images/preview-with-multisampling.png

ヘッドライトをレンダリングする

このセクションでは、後でブルームエフェクトを適用する車のヘッドライトのみをレンダリングするために必要なレンダーパスとマテリアルを作成します。

ヘッドライトをレンダリングするには、

  1. File > Import > Import Project Item(s) を選択します。<KanziWorkspace>/Tutorials/Bloom/Assets に移動し、BloomThresholdMaterial.kzexport ファイルを選択します。

    Kanzi Studio は BloomThreshold マテリアルタイプと BloomThresholdMaterial マテリアルを追加します。このマテリアルは、特定のスレッシュホールドバリューより明るい領域のみをレンダリングします。

    BloomThreshold マテリアルタイプのフラグメントシェーダー:

    • 色の値がしきい値以下の場合、0にマッピングします。

    • 色値が1に近づくときに、しきい値を超える色値を1に近づく三次方程式にマッピングします。

    ../../_images/load-material-type-from-disk1.png ../../_images/bloomthresholdmaterial-in-library.png
  2. Library > Rendering > Render Pass Prefabs > Bloom レンダーパスプレハブで Group レンダーパスを作成し、Render Bloom という名前を付けます。

    ../../_images/render-bloom-in-library.png
  3. Render Bloom レンダーパスで Blit レンダーパスを作成し、Blit Bloom Threshold という名前を付けます。Library から Render Scene レンダーパスを Properties ウィンドウにドラッグし、Blit Bloom Threshold レンダーパスの Texture 0 プロパティにドロップします。

    Blit Bloom Threshold レンダーパスを設定して、Render Scene レンダーパスがレンダリングするコンテンツから作成するテクスチャを画面に描画します。

    ../../_images/blit-bloom-threshold-in-library.png ../../_images/blit-bloom-threshold-texture0-binding.png
  4. Properties に追加して設定します。

    • Material から BloomThresholdMaterial へ

    • Material Properties > Threshold を0.9にする

    このレンダーパスを使用して、car ノードのうち、Threshold プロパティの値よりも明るい領域のみを画面に描画します。後でこれらの領域にガウスぼかしを適用してブルーム効果を作成します。

    ../../_images/blit-bloom-threshold-properties.png ../../_images/preview-threshold-applied.png
  5. Library の Render Bloom レンダーパスで Composition Target レンダーパスを作成し、Bloom Threshold という名前を付けます。Blit Bloom Threshold レンダーパスを Bloom Threshold レンダーパスにドラッグします。

    Bloom Threshold レンダーパスを使用して、Blit Bloom Threshold レンダーパスをコンポジションターゲットにレンダリングし、後でブルーム効果を適用するレンダーパスへの入力として使用します。Kanzi が Blit Bloom Threshold レンダーパスをコンポジションターゲットにレンダリングするため、Preview には表示されません。

    ../../_images/bloom-threshold-in-library.png ../../_images/preview-with-multisampling.png

関連項目

Kanzi のレンダーパスについて詳しく知るには、レンダリング を参照してください。

マテリアルとマテリアルタイプについて詳しく学ぶには、マテリアルタイプとマテリアル を参照してください。