カウンセリングエンジニア

産業カウンセラーの有資格者が発信します。カウンセリング、マネジメント、Unityあたりの内容多めで構成する予定です

Post Processing Stack v2にカスタムエフェクトを追加する方法

はじめに

github.com

こちらの記事を参考に、PostProcessingStackに自作のポストエフェクト(カスタムエフェクト)を追加する方法をまとめます。

概要

f:id:pond-comfat:20190123024451p:plain

Unityちゃんと背景Assetを配置したSceneを用意します。
ゲームボーイ風の表示にするカスタムエフェクトを追加し、
下記の表示にするまでの手順を解説していきます

f:id:pond-comfat:20190123024515p:plain

wordpress.notargs.com ゲームボーイ風ポストエフェクトはこちらの記事を参考にさせていただきました。 ありがとうございます。

環境

Unity 2018.2.16f1
Post Processing Version 2.1.2

実装

カスタムエフェクトを追加するには下記の4つが必要です

  • PostProcessEffectSettingsを継承したSettingクラス
  • PostProcessEffectRendererを継承したRenderingLogicクラス
  • Shader
  • CustomEditor(エディタ拡張したい時のみ作成。今回は使用していません)

PostProcessEffectSettingsを継承したSettingクラス

カスタムエフェクトで使用するパラメータを定義するクラスです。
注意する点に関して補足していきます。

カスタムエフェクトの実行タイミングについて

[PostProcess()]attributeの2番目の引数でカスタムエフェクトの実行タイミングを下記の3種類から指定できます。

  • PostProcessEvent.BeforeTransparent
    • 半透明描画の前に実行される。不透明なオブジェクトにのみカスタムエフェクトが適用される
  • PostProcessEvent.BeforeStack
    • Build-inのPostProcessingStackの実行前に実行される
  • PostProcessEvent.AfterStack
    • Build-inのPostProcessingStackの実行後に実行される
パラメータの指定方法について

先述のソースコードを見ていただくと、colorやfloatではなく

public ColorParameter color1 = new ColorParameter { value = Color.gray };

や、

public FloatParameter paletteWidth = new FloatParameter {};

のように HogeHogePrameterを使用しているのが分かると思います。
HogeHogePrameterを使用しているとPostProcessingVolumeのblend時に補完さるようになります。
基本的にはHogeHogePrameterを使用するようにするのがおすすめです。

使用できるPrameterの一覧は/PostProcessing/Runtime/ParameterOverride.csの中に定義されています。

Validationをかける方法について

Settingクラスの中で IsEnabledAndSupported() メソッドをoverrideすることにより、カスタムエフェクトにvalidationをかけることができます。

(例)paletteWidthが1以上の時のみカスタムエフェクトを有効にする

public override bool IsEnabledAndSupported(PostProcessRenderContext context)
{
    return enabled.value && paletteWidth.value >= 1f;
}

PostProcessEffectRendererを継承したRenderingLogicクラス

RenderingLogicを記載するクラスです。
上記のように、shaderに対してsettingsで定義したパラメータをわたします。

Shader

カスタムエフェクトの本体となるshaderです。
StdLib.hlslをincludeする際はUnityのバージョンによって指定方法が違うみたいなので注意してください。
In Unity 2018.2

#include "PostProcessing/Shaders/StdLib.hlsl"

In Unity 2018.3

#include "Packages/com.unity.postprocessing/PostProcessing/Shaders/StdLib.hlsl"

これで実装完了です。
この後は実際にPostProcessVolumeから上記のカスタムエフェクトを追加していきます。

カスタムエフェクトを追加する

f:id:pond-comfat:20190123025709p:plain

PostProcessVolume > Add effect から、作成したカスタムエフェクトを選択します。

f:id:pond-comfat:20190123025850p:plain

以上でカスタムエフェクトを追加することができました。

f:id:pond-comfat:20190123031630g:plain

FloatParameterとColorParameterを使って実装しているためブレンドもしっかり効きます

番外編(複数のカスタムエフェクトの実行順指定)

カスタムエフェクト同士の実行順序はPostProcessLayerのInspector上で指定することができます

f:id:pond-comfat:20190123031038p:plain
Grayscale > ColorPaletteの順番

f:id:pond-comfat:20190123031134p:plain
ColorPalette > Grayscale の順番で実行

参考

Writing Custom Effects · Unity-Technologies/PostProcessing Wiki · GitHub

[Unity]4色のカラーパレットだけで画面を描画するポストエフェクトを作った | notargs.com

GitHub - keijiro/Flipbook: Flip book effect example for Unity