現在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](https://styly.cc/wp-content/uploads/2024/06/image4-3.png)
STYLY Plugin for Unity
上記の記事のリンクからSTYLY Pluginをダウンロードし、Assets→Import Package→Custom Packageでインポートします。
![Assets→Import Package→Custom Package](https://styly.cc/wp-content/uploads/2024/06/image12-3.png)
Assets→Import Package→Custom Package
Assetsを右クリックしてShow in Explorerをクリックしてエクスプローラーでファイルを表示しておきます。
![Show in Explorer](https://styly.cc/wp-content/uploads/2024/06/image1-5.png)
Show in Explorer
次にSTYLY-Unity-ExamplesリポジトリをGitHubからZipでダウンロードしてください。
![STYLY-Unity-Examples](https://styly.cc/wp-content/uploads/2024/06/image6-4.png)
STYLY-Unity-Examples
https://github.com/styly-dev/STYLY-Unity-Examples
ダウンロードしたZipファイルを解凍し、
/Assets/STYLY_Examples/SetPostProcessing
のフォルダを先に開いておいたUnityプロジェクトのAssets下にコピーしてください。
![Assets/STYLY_Examples/SetPostProcessing→Assets](https://styly.cc/wp-content/uploads/2024/06/image8-3.png)
Assets/STYLY_Examples/SetPostProcessing→Assets
そうするとUnity画面のAssetsの中にSetPostProcessingというフォルダが追加されます。
![SetPostProcessing](https://styly.cc/wp-content/uploads/2024/06/image17-4.png)
SetPostProcessing
SetPostProcessing/Prefabs/SetPostProcessing(Upload to STYLY)をヒエラルキーにドラッグアンドドロップします。
![SetPostProcessing/Prefabs/SetPostProcessing(Upload to STYLY)](https://styly.cc/wp-content/uploads/2024/06/image19-3.png)
SetPostProcessing/Prefabs/SetPostProcessing(Upload to STYLY)
Post-Processing Stack V1とPlaymaker(有料)をインポートします。
Playmakerの導入方法は下記の記事を参照してください。
Playmakeを既に購入している方はPackage Manager→My AssetsからPlaymakerをインストールしてください。
下記のURLからPost-Processing Stack V1をダウンロードし、UnityのAssets→Import Package→Custom Packageでインポートします。
![Download Post-Processing Stack V1](https://styly.cc/wp-content/uploads/2024/06/image10-3.png)
Download Post-Processing Stack V1
https://github.com/Unity-Technologies/PostProcessing/releases/tag/1.0.4
![Assets→Import Package→Custom Package](https://styly.cc/wp-content/uploads/2024/06/image2-5.png)
Assets→Import Package→Custom Package
![Post-Processing Stack V1](https://styly.cc/wp-content/uploads/2024/06/image15-3.png)
Post-Processing Stack V1
このままではエラーが出てしまうので少し修正します。
インポートが完了したらUnityのAssets/PostProcessing/Editor/PropertyDrawers/Min Drawerを右クリックしてShow in Explorerをクリックしてエクスプローラーでファイルを表示します。
![Assets/PostProcessing/Editor/PropertyDrawers/Min Drawer→Show in Explorer](https://styly.cc/wp-content/uploads/2024/06/image20-3.png)
Assets/PostProcessing/Editor/PropertyDrawers/Min Drawer→Show in Explorer
MinDrawer.csをダブルクリックしてVisualStudioを開き、内容を修正します。
![MinDrawer.cs→VisualStudio](https://styly.cc/wp-content/uploads/2024/06/image21-3.png)
MinDrawer.cs→VisualStudio
2行目:using UnityEngine.PostProcessing;
![using UnityEngine.PostProcessing;](https://styly.cc/wp-content/uploads/2024/06/image3-3.png)
using UnityEngine.PostProcessing;
↓
2行目:using MinAttribute = UnityEngine.PostProcessing.MinAttribute;
![using MinAttribute = UnityEngine.PostProcessing.MinAttribute;](https://styly.cc/wp-content/uploads/2024/06/image14-4.png)
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”](https://styly.cc/wp-content/uploads/2024/06/image13-3.png)
”Yes, for these and other files that might be found later”
ポストプロセスの変化が分かりやすいようにシーンにオブジェクトを追加します。
ヒエラルキーで右クリックして3D Object→Cubeを追加します。
次にアセットの任意の場所を右クリックしてCreate→Materialを作成してください。
![3D Object→Cube、Create→Material](https://styly.cc/wp-content/uploads/2024/06/image16-4.png)
3D Object→Cube、Create→Material
マテリアルにインスペクターからEmissionにチェックを入れ、カラーを好きな色に変更してIntensityを1に変更します。
![Emission→Intensity=1](https://styly.cc/wp-content/uploads/2024/06/image22-3.png)
Emission→Intensity=1
この状態でUnityエディタを実行(再生)するとシーンの変化がわかると思います。
![Play Scene](https://styly.cc/wp-content/uploads/2024/06/image18-3.png)
Play Scene
![Bloom](https://styly.cc/wp-content/uploads/2024/06/image11-3.png)
Bloom
これで導入は完了です。
SetPostProcessing使用方法
ヒエラルキーにあるSetPostProcessing(Upload to STYLY)のインスペクターにあるPostProcessing Profileをダブルクリックするとエフェクト一覧が表示されます。
![SetPostProcessing(Upload to STYLY)→PostProcessing Profile](https://styly.cc/wp-content/uploads/2024/06/image7-3.png)
SetPostProcessing(Upload to STYLY)→PostProcessing Profile
このパラメータや数値を変更して自分好みのシーンを作り上げていきましょう。
![Change parameters](https://styly.cc/wp-content/uploads/2024/06/image5-3.png)
Change parameters
項目ごとの見た目の変化は下記の記事で紹介しているので確認してみてください。
STYLYアプリでシーンを確認してみると、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にアップロードするので、こちらをご参照ください。
アカウント作成方法