ステップ2 - ブルームエフェクトを表示する

このステップでは、まず車のヘッドライトにブルーム効果を適用します。次に、通常レンダリングされたシーンの上にブレンドしてブルーム効果を表示します。

次のステップでは、ブルームエフェクトをさらに3回適用して微調整します。

ブルームを適用する

ブルームを適用するには、

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

   Kanzi Studio は GaussianBloom07 マテリアルタイプと GaussianBloom07Material マテリアルを追加します。このマテリアルは、7ピクセルのカーネルサイズを使用した方向性のあるガウスぼかし効果を提供します。このマテリアルを使用してブルーム効果を作成します。

   

2. ブルームエフェクトの最初のパスを適用します。

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

      Blit Horizontal Bloom レンダーパスを設定して、Bloom Threshold レンダーパスの結果テクスチャを画面に描画します。

      

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

      • Material から GaussianBloom07Material へ

      • Material Properties > Blur Direction プロパティ X プロパティフィールドを1に設定

        この方法で、水平方向にぼかし効果を適用します。

      • Material Properties > Blur Radius を2に

        この方法で、ぼかし効果の強さを設定します。

      • Material Properties > Intensity を1.5に

        この方法で、ブルーム効果の強度を設定します。

      このレンダーパスを使用して、Bloom Threshold レンダーパスを GaussianBloom07Material マテリアルを使用して描画し、Car ノードに水平方向のガウスぼかしを伴うブルーム効果を適用します。

      

   3. Library の Render Bloom レンダーパスで Composition Target レンダーパスを作成し、Horizontal Bloom という名前を付けます。Blit Horizontal Bloom を Horizontal Bloom レンダーパスにドラッグします。

      Horizontal Bloom レンダーパスを使用して、Blit Horizontal Bloom レンダーパスをコンポジションターゲットにレンダリングします。このセクションの後半では、コンポジションターゲットを入力として使用し、垂直方向にガウスぼかしを適用したブルーム効果を持つレンダーパスを使用します。

      

   4. Library で、Horizontal Bloom レンダーパスを選択します。Properties で、Resolution Divisor プロパティを追加し、それを2に設定します。

      この方法では、レンダーパスが自身をレンダリングする合成ターゲットの解像度を2で分割します。

      パフォーマンスを向上させるために、コンポジションターゲットの解像度を下げます。

      

   5. Library で、Horizontal Bloom レンダーパスを複製し、新しいレンダーパスの名前を Vertical Bloom に変更します。

      このレンダーパスを使用して、垂直方向にぼかしを適用します。

      

   6. Library で、Vertical Bloom > Blit Horizontal Bloom レンダーパスを選択します。Properties で：

      • Name プロパティを Blit Vertical Bloom に設定します。

      • Texture 0 プロパティにバインドされているバインディングをクリックし、Binding Editor で Expression を設定します。

        {@../../Horizontal Bloom/CompositionTargetRenderPass.ResultTexture0}
        

        Save をクリックします。

      • Blur Direction を設定します。

        • X プロパティフィールドを0にする

        • Y プロパティフィールドを0.5に設定します。

          この方法で、垂直方向にぼかし効果を適用します。

          Horizontal Bloom レンダーパスの解像度を2で割ったため、値として0.5を使用します。この方法で、対称的なぼかし効果を作成します。

      このレンダーパスを使用して、Horizontal Bloom レンダーパスを GaussianBloom07Material マテリアルを使用して描画し、Car ノードに垂直方向のガウスぼかしを伴うブルーム効果を適用します。

      

3. ブルームエフェクトの複数のパスを組み合わせるために使用するマテリアルを追加します。

   1. <KanziWorkspace>/Tutorials/Bloom/Assets/Combine.kzexport マテリアルを読み込みます。

      Kanzi Studio は Combine マテリアルタイプと CombineMaterial マテリアルを追加します。このマテリアルは、4つのテクスチャのレンダリングと、それぞれのテクスチャの乗算係数の定義をサポートします。

      

   2. Library > Materials and Textures > Materials で、CombineMaterial を選択します。Properties で、Texture 0、Texture 1、Texture 2、および Texture 3 プロパティを < No Texture > に設定します。

      

4. Library > Rendering > Render Pass Prefabs > Bloom > Render Bloom で Blit レンダーパスを作成し、Blit Combined Bloom という名前を付けて、以下を行います。

   • Library から Vertical Bloom レンダーパスを Properties ウィンドウにドラッグし、Blit Combined Bloom レンダーパスの Texture 0 プロパティにドロップします。

   • Properties で、Material を CombineMaterial に設定します。

   このレンダーパスを使用して、Vertical Bloom レンダーパスを CombineMaterial を使用して画面に描画します。このチュートリアルの次のステップでは、ブルームエフェクトをさらに3回適用し、このレンダーパスを使用して4つのパスすべての出力を結合します。

   

ヘッドライトが点灯している車を表示する

このセクションでは、ヘッドライトが点灯した状態で車を表示するために必要なレンダーパスとマテリアルを作成します。

ヘッドライトが点灯した状態で車を表示するには:

1. 通常レンダリングされたシーンとブルームエフェクトをブレンドすることをサポートするマテリアルを作成します。

   1. <KanziWorkspace>/Tutorials/Bloom/Assets/BlitBloomMaterial.kzexport マテリアルを読み込みます。

      Kanzi Studio は BlitBloom マテリアルタイプと BlitBloomMaterial マテリアルを追加します。このマテリアルは、ブルーム効果と通常レンダリングされたシーンのブレンド、およびブルーム効果の色の設定をサポートします。

      

   2. Library > Materials and Textures > Materials で、BlitBloomMaterial を選択します。Properties で、Blend Mode プロパティを Additive に設定します。

      Blend Mode を Additive に設定するのは、ブルーム効果を表示するために、そのピクセル値を通常レンダリングされたシーンのピクセル値に加算したいからです。

      

2. ブルームエフェクトを使用してシーンを表示します。

   1. Library > Rendering > Render Pass Prefabs > Bloom > Render Bloom で Composition Target レンダーパスを作成し、Bloom Out という名前を付けます。Blit Combined Bloom レンダーパスを Bloom Out レンダーパスにドラッグします。

      

   2. Library の Bloom レンダーパスプレハブで Blit レンダーパスを作成し、Show Bloom という名前を付けて、以下を行います。

      • Library から Bloom Out レンダーパスを Properties ウィンドウにドラッグし、Show Bloom レンダーパスの Texture 0 プロパティにドロップします。

      • Properties に追加して設定します。

        • Material から BlitBloomMaterial へ

        • Material Properties > Post-processing Color Multiply プロパティ Lightness (L) プロパティフィールドを240に設定

          この方法で、ブルームエフェクトの明るさを設定します。

      このレンダーパスを使用して、Bloom Out レンダーパスを BlitBloomMaterial マテリアルで描画し、ブルーム効果を表示します。

      

前のステップ 次のステップ

関連項目

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

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