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

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

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

ブルームを適用する

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

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

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

   

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

   1. Library > Rendering > Render Pass Prefabs > Bloom > Render Bloom レンダーパスで、Blit Render Pass を作成し、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 Render Pass を作成し、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.kzmat マテリアルタイプをロードします。

      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 Render Pass を作成し、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/BlitBloom.kzmat マテリアルタイプをロードします。

      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 Render Pass を作成し、Bloom Out と名付けます。Blit Combined Bloom レンダーパスを Bloom Out レンダーパスにドラッグします。

      

   2. Bloom レンダーパスプレハブの Library 内に Blit Render Pass を作成し、それに 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 マテリアルで描画し、ブルーム効果を表示します。

      

Previous step Next step

関連項目

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

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