ポストプロセッシングエフェクトの作成¶

マテリアルとレンダーパスを使用して、3Dコンテンツ用のポストプロセッシングエフェクトを作成します。ポストプロセッシングでは、特定のマテリアルを使用して、レンダーパスでスクリーンに描画するフレームバッファ内のコンテンツにエフェクトを適用します。

このトピックでは、色の彩度レベルを調整できるシンプルなポストプロセッシング効果を作成する方法を示します。チュートリアルを完了することで、より複雑なポストプロセッシング効果を作成する方法を学ぶことができます。チュートリアル: ブルームエフェクトを作成するを参照してください。

ヒント

Kanzi Studio には、組み込みのトーンマッピングシェーダーを含む、いくつかの物理ベースレンダリングマテリアルタイプが付属しています。シェーダーとマテリアルタイプの使用を参照してください。

ヒント

<KanziInstallation>/Studio/Asset Library/MaterialTypes プロジェクトには、ポストプロセッシングエフェクトの作成に使用できるマテリアルタイプがいくつか含まれています。たとえば、シンプルなブラーエフェクトを作成するには、MaterialTypes/Postprocess/DirectionalGaussianBlur マテリアルタイプを使用します。マテリアルタイプの使用を参照してください。

ポストプロセッシングエフェクトを作成するには、以下のようにします。

ポストプロセッシング用のマテリアルを定義します。

たとえば、DefaultBlit マテリアルを変更して、色の彩度レベルの調整を含めます。
1. Library > Materials and Textures > Material Types で、DefaultBlit マテリアルタイプを複製します。マテリアルタイプの名前を PostProcessingBlit に、マテリアルの名前を PostProcessingBlitMaterial に変更します。
  
  ヒント
  
  プロジェクトに DefaultBlit マテリアルタイプが含まれていない場合、Library > Materials and Textures Alt を押しながら右クリック Material Types で、DefaultBlit を選択します。
2. Library > Materials and Textures > Material Types > PostProcessingBlit で、Fragment Shader をダブルクリックして Shader Source Editor で開きます。シェーダーファイルの内容を以下に置き換えます。
```
#version 310 es

precision mediump float;

uniform sampler2D Texture0;
uniform float BlendIntensity;

// Defines the amount of color saturation.
uniform float Saturation;

in vec2 vTexCoord;
layout(location = 0) out vec4 fragColor;

// Converts an RGB color value to grayscale.
float colorToLuma(vec3 col)
{
    return col.r * 0.2126 + col.g * 0.7152 + col.b * 0.0722;
}

void main()
{
    vec4 color = texture(Texture0, vTexCoord);

    vec3 grayscale = vec3(colorToLuma(color.rgb));

    // Interpolate between the color and grayscale values using the Saturation
    // property to weight between them.
    fragColor = vec4(mix(grayscale, color.rgb, Saturation), color.a) * BlendIntensity;
}
```
  Save をクリックします。
3. Library > Materials and Textures > Material Types で、PostProcessingBlit マテリアルタイプを選択します。Properties で Sync with Uniforms をクリックします。
  
  Kanzi Studio:
  1. フラグメントシェーダーで定義した Saturation プロパティタイプを Library > Property Types に作成します。
  2. このマテリアルタイプと PostProcessingBlitMaterial マテリアルに Saturation プロパティを追加します。
    
    このプロパティタイプを使用して、エフェクト内の色の飽和レベルを制御します。
レンダーパスを使用して、ポストプロセッシングエフェクトを適用します。

例えば、3Dコンテンツの色の彩度レベルを設定するポストプロセッシング効果を適用するには：
1. Library で Alt を押しながら右クリック Rendering を選択し、Compose and Blit Pass レンダーパスプリセットを作成して、Post-process Color Saturation という名前を付けます。
  
  Compose and Blit Pass には、特定のマテリアルを使用して Composition Target レンダーパスまたはテクスチャをスクリーンにブリットできるようにするレンダーパス構造が含まれています。
  
  コンポジションターゲットへのコンテンツのレンダリングを参照してください。
  
  Library > Rendering > Render Pass Prefabs では、各トップレベルのレンダーパスがレンダーパスプレハブのルートです。
  
  レンダーパスプレハブ内で、特定のレンダリング結果を達成するためにレンダーパスの階層を作成できます。
2. Node Tree で、ポストプロセッシングエフェクトを適用したい3Dコンテンツを含む Viewport 2D ノードを選択します。Properties で、Render Pass Prefab プロパティを Post-process Color Saturation レンダーパスプレハブに設定します。
  
  Kanzi は、Post-process Color Saturation レンダーパスプレハブを使用して Viewport 2D ノードをレンダリングします。
3. ポストプロセッシングエフェクトを使用するには、そのポストプロセッシングエフェクトをサポートするマテリアルを使用してコンテンツをレンダリングするように Blit レンダーパスを設定します。
  
  たとえば、Library で、Post-process Color Saturation > Blit レンダーパスを選択し、Properties で Material プロパティを PostProcessingBlitMaterial マテリアルに設定します。
4. ポストプロセッシングエフェクトを制御するには、そのポストプロセッシングエフェクトをサポートするマテリアルのために作成したプロパティを追加して設定します。
  
  たとえば、彩度のレベルを制御するには、Library で Blit レンダーパスを選択し、Properties で Saturation プロパティを追加して、それを目的の値に設定します。

ポストプロセッシングエフェクトの作成¶

関連項目¶