【Unity/PlayMaker】Post Processing Stack V1の使い方(STYLYモバイルアプリ制作者向け)

現在Unityの最新バージョンのポストプロセスはSTYLY VRでのみ動作しますので、ARでは使用できません。

今回はSTYLYモバイルアプリでも使用できるポストプロセスを使う方法を解説します。また、AR/VRシーンのどちらでも使用できます。

本記事ではPost Processing Stack V1 およびPlayMaker(有料)を使用します。

ポストプロセスとは

ポストエフェクトとは「カメラに映る情報(3Dモデル、ライト,etc)を、ディスプレイに描画(レンダリング)した結果」に、エフェクト(フィルター)をかけることを指します。

カメラアプリの「SNOW」や、画像編集ソフト「Photoshop」をイメージしてください。
UnityではUnityが用意するPost Processing StackをPackage Managerからダウンロード・インポートすることで使用できます。

簡単な手順でシーンのクオリティを向上させることができるので重宝する機能です。

導入方法

今回はUnity2022.3.27f1を使用します。

まずはSTYLY Plugin for Unityをインストールします。

STYLY Plugin for Unity

STYLY Plugin for Unity


上記の記事のリンクからSTYLY Pluginをダウンロードし、Assets→Import Package→Custom Packageでインポートします。

Assets→Import Package→Custom Package

Assets→Import Package→Custom Package


Assetsを右クリックしてShow in Explorerをクリックしてエクスプローラーでファイルを表示しておきます。

Show in Explorer

Show in Explorer


次にSTYLY-Unity-ExamplesリポジトリをGitHubからZipでダウンロードしてください。

STYLY-Unity-Examples

STYLY-Unity-Examples


https://github.com/styly-dev/STYLY-Unity-Examples

ダウンロードしたZipファイルを解凍し、

/Assets/STYLY_Examples/SetPostProcessing

のフォルダを先に開いておいたUnityプロジェクトのAssets下にコピーしてください。

Assets/STYLY_Examples/SetPostProcessing→Assets

Assets/STYLY_Examples/SetPostProcessing→Assets


そうするとUnity画面のAssetsの中にSetPostProcessingというフォルダが追加されます。

SetPostProcessing

SetPostProcessing


SetPostProcessing/Prefabs/SetPostProcessing(Upload to STYLY)をヒエラルキーにドラッグアンドドロップします。

SetPostProcessing/Prefabs/SetPostProcessing(Upload to STYLY)

SetPostProcessing/Prefabs/SetPostProcessing(Upload to STYLY)


Post-Processing Stack V1とPlaymaker(有料)をインポートします。

Playmakerの導入方法は下記の記事を参照してください。

Playmakeを既に購入している方はPackage Manager→My AssetsからPlaymakerをインストールしてください。

Package Manager→My Assets→Playmaker

Package Manager→My Assets→Playmaker


下記のURLからPost-Processing Stack V1をダウンロードし、UnityのAssets→Import Package→Custom Packageでインポートします。

Download Post-Processing Stack V1

Download Post-Processing Stack V1


https://github.com/Unity-Technologies/PostProcessing/releases/tag/1.0.4

Assets→Import Package→Custom Package

Assets→Import Package→Custom Package


Post-Processing Stack V1

Post-Processing Stack V1


このままではエラーが出てしまうので少し修正します。

インポートが完了したらUnityのAssets/PostProcessing/Editor/PropertyDrawers/Min Drawerを右クリックしてShow in Explorerをクリックしてエクスプローラーでファイルを表示します。

Assets/PostProcessing/Editor/PropertyDrawers/Min Drawer→Show in Explorer

Assets/PostProcessing/Editor/PropertyDrawers/Min Drawer→Show in Explorer


MinDrawer.csをダブルクリックしてVisualStudioを開き、内容を修正します。

MinDrawer.cs→VisualStudio

MinDrawer.cs→VisualStudio


2行目:using UnityEngine.PostProcessing;

using UnityEngine.PostProcessing;

using UnityEngine.PostProcessing;


2行目:using MinAttribute = UnityEngine.PostProcessing.MinAttribute;

using MinAttribute = UnityEngine.PostProcessing.MinAttribute;

using MinAttribute = UnityEngine.PostProcessing.MinAttribute;


内容を修正したらCtrl+[S]で保存してVisualStudioを閉じます。

Unityに戻るとこの様な画面が出てくるので”Yes, for these and other files that might be found later”をクリックします。

”Yes,  for these and other files that might be found later”

”Yes,  for these and other files that might be found later”


ポストプロセスの変化が分かりやすいようにシーンにオブジェクトを追加します。

ヒエラルキーで右クリックして3D Object→Cubeを追加します。

次にアセットの任意の場所を右クリックしてCreate→Materialを作成してください。

3D Object→Cube、Create→Material

3D Object→Cube、Create→Material


マテリアルにインスペクターからEmissionにチェックを入れ、カラーを好きな色に変更してIntensityを1に変更します。

Emission→Intensity=1

Emission→Intensity=1


この状態でUnityエディタを実行(再生)するとシーンの変化がわかると思います。

Play Scene

Play Scene


Bloom

Bloom


これで導入は完了です。

SetPostProcessing使用方法

ヒエラルキーにあるSetPostProcessing(Upload to STYLY)のインスペクターにあるPostProcessing Profileをダブルクリックするとエフェクト一覧が表示されます。

SetPostProcessing(Upload to STYLY)→PostProcessing Profile

SetPostProcessing(Upload to STYLY)→PostProcessing Profile


このパラメータや数値を変更して自分好みのシーンを作り上げていきましょう。

Change parameters

Change parameters


項目ごとの見た目の変化は下記の記事で紹介しているので確認してみてください。

STYLYアプリでシーンを確認してみると、ARでポストプロセスのブルームがかかっていることが確認できます。

AR

AR

使用上の注意

PostProcessing Profileの設定の中にはSTYLYやVRに適さないProfile設定があります。

同じシーンに複数のSetPostProcessを配置すると競合します。また、STYLYのFilter機能とも競合するので使わないでください。

STYLYの設定により使えないもの(Forward Rendering/MSAA有効のため)

・Fog:deferred Rendering Pathでないと使えない。
・Antialiasing:Fast Approximate Anti-aliasingのみ使える。Temporal Anit-aliasingは使えない。
・Screen Space Reflection

VRシーンで使用する際に適さない物
・Depth Of Field
・Motion Blur
・Chromatic Aberration:画面端に向けて色収差を出す効果。VRではあまり効果がない。
・Grain:画面にノイズをかける効果。VRではおすすめしない。
・Vignette:画面の周辺を黒くぼかす効果。VRではおすすめしない。

STYLYへアップロード

実際にSTYLYへアップロードして使用しましょう。

Post Processingを使用する場合は、Prefabではなくシーンごとアップロードしてください。

今回はUnityのシーンをそのままSTYLYにアップロードするので、こちらをご参照ください。

STYLYアカウントを作成する

アカウント作成方法