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

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

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

チュートリアルを入手するには、Kanzi Studio の Quick Start ウィンドウで Examples をクリックします。Bloom チュートリアルの横にある をクリックします。

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

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

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

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

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

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

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

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

   

2. 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 がそのコンテンツをレンダリングする最初のカラーテクスチャを画面に描画します。

     

3. Library > Rendering > Render Pass Prefabs で、Compose and Blit Pass レンダーパスプレハブを選択し、F2 キーを押して、Bloom に名前を変更します。

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

   

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

   • Composition Target Render Pass から Render Scene へ

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

   • Blit Render Pass から Show Scene へ

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

   

5. Node Tree で、RootPage > Scroll View 2D > Car ノードを選択します。Properties で、Render Pass Prefab プロパティを追加し、それを Bloom に設定します。

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

   

6. 車にアンチエイリアスを適用するには、Library で Render Scene レンダーパスを選択し、Properties で Multisample Level プロパティを追加し、使用したいアンチエイリアスサンプルの数に設定します。

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

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

   

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

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

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

1. Library で、Materials and Textures を右クリックし、Load Material Type From Disk を選択します。<KanziWorkspace>/Tutorials/Bloom/Assets に移動し、BloomThreshold.kzmat マテリアルタイプをロードします。

   Kanzi Studio は BloomThreshold マテリアルタイプを追加し、特定のしきい値よりも明るい領域のみをレンダリングする BloomThresholdMaterial マテリアルを作成します。

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

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

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

   

2. Library > Rendering > Render Pass Prefabs > Bloom のレンダーパスプレハブで、Group Render Pass を作成し、Render Bloom と名付けます。

   

3. Render Bloom レンダーパスで、Blit Render Pass を作成し、Blit Bloom Threshold と名付けます。Library から、Render Scene レンダーパスを Properties ウィンドウにドラッグし、Blit Bloom Threshold レンダーパスの Texture 0 プロパティにドロップします。

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

   

4. Properties に追加して設定します。

   • Material から BloomThresholdMaterial へ

   • Material Properties > Threshold を0.9にする

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

   

5. Render Bloom レンダーパスの Library 内で、Composition Target Render Pass を作成し、Bloom Threshold と名付けます。Blit Bloom Threshold レンダーパスを Bloom Threshold レンダーパスにドラッグします。

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

   

Introduction Next step

関連項目

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

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