ZEPETOワールドでのPost-Processingの適用

6min
ワールドに印象的なビジュアル効果を追加したり、グラフィックのクオリティを向上させたい場合は、UnityのPost-processing機能を活用してみましょう。

さまざまな視覚効果を加えることで、より没入感のある、完成度の高いワールドを作ることができます。
Post-processingの始め方
1
Post Processingパッケージをインストールします。
﻿
UnityでWindow > Package Managerを開き、PackagesオプションをUnity Registryに設定した後、リストからPost Processingパッケージを探してインストールします。
2
ZepetoCameraのPrefabを複製します。
﻿
プロジェクトフォルダでPackages > ZEPETO.Character.Controller > Runtime > _Resources > Cameraに移動し、ZepetoCameraのPrefabをコピーして、Assetsフォルダに貼り付けます。
その後、複製したPrefabの名前をZepetoCameraCopyに変更してください。
3
ZepetoCameraCopyをリンクします。
﻿
HierarchyでManagers > ZepetoPlayersを選択し、InspectorのPrefabフィールドにZepetoCameraCopyをドラッグ＆ドロップします。
4
新しいレイヤーを作成します。
﻿
ZepetoCameraCopyのInspectorでLayer > Add Layerをクリックし、新しいレイヤーを作成して、Layerフィールドに割り当てます。
📘 注意
使用できるレイヤーはLayer 3とLayer 6以上です。
Layer 0～2および4～5はUnityのデフォルトレイヤーであり、編集できません。
﻿
Post-processingの適用方法
Post-processingの適用方法は主に2つあります。
Global：ワールド全体に効果を適用する方法
Local：キャラクターが特定のエリアに入ったときのみ効果を適用する方法
Globalの適用方法
1
ZepetoCameraCopyにPost-process LayerとPost-process Volumeを追加します。
﻿
InspectorでAdd Componentをクリックし、Post-process LayerとPost-process Volumeを追加します。 Post-process LayerのVolume Blending > Layerフィールドに、先ほど作成したレイヤーを指定します。
次に、Post-process VolumeのIs Globalオプションにチェックを入れ、Profileフィールドに使用したいエフェクトが含まれたPost Process Profileを割り当てます。
まだPost Process Profileがない場合は、Profileフィールド横のNewボタンをクリックして新しく作成できます。
2
Post Process Profileにエフェクトを追加します。
﻿
新しいPost Process Profileを作成した場合は、それを選択してAdd Effectボタンをクリックし、エフェクトを追加します。
設定値を調整して、好みのビジュアル効果を演出してください。
﻿
設定値を変更するには、各フィールドの左側にあるチェックボックスにチェックを入れる必要があります。
✏️ ヒント
EffectはPlay Mode中にも自由に調整でき、Play Mode終了後も変更内容は保持されます。
シーン実行中にInspectorで設定をリアルタイムに調整しながら、効果の見え方を確認しましょう。より細かい演出が可能になります。
﻿
<Effectの例>
Bloom
﻿
Lens Distortion
﻿
Color Grading
﻿
﻿
Localの適用方法
1
ZepetoCameraCopyにPost-process Layerを追加します。
﻿
ZepetoCameraCopyのInspectorでPost-process Layerを追加し、ThisボタンをクリックしてTriggerを設定し、Layerフィールドに新しく作成したレイヤーを指定します。
2
Post-process Volumeオブジェクトを作成します。
﻿
Hierarchyで+ > 3D Object > Post-process Volumeをクリックして、新しいPost-process Volumeオブジェクトを作成します。
﻿
このオブジェクトのLayerを新しく作成したレイヤーに設定し、Is Globalフィールドのチェックを外します。
3
Post-process Volumeにエフェクトを追加します。
﻿
Add Effectボタンをクリックし、必要な効果を追加した後、設定値を調整してください。
4
Post-process Volumeを配置します。
﻿
Post-processingを適用したい位置に、Post-process Volumeを配置してください。
﻿
<Local適用の例>
﻿
﻿
スクリプトでPost-process Volumeを制御する
作成したPost-process Volumeは、スクリプトを使って制御することもできます。
以下は、Toggleを使ってPost-process Volumeをオン／オフする例です。
1
新しいGameObjectを作成します。
Hierarchyで+ > Create Emptyをクリックして新しいGameObjectを作成し、名前をPostProcessManagerに変更します。
2
新しいToggle UIを作成します。
Hierarchyで+ > UI > Toggleをクリックして、Toggle UIを作成します。
3
新しいスクリプトを作成します。
Projectウィンドウで+ > ZEPETO > TypeScriptをクリックして新しいスクリプトを作成し、名前をPostProcessScriptに変更します。
作成したスクリプトを開き、以下のコードを貼り付けてください。
TypeScript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { GameObject } from 'UnityEngine';
import { PostProcessVolume } from 'UnityEngine.Rendering.PostProcessing';
import { Toggle } from 'UnityEngine.UI';

export default class PostProcessScript extends ZepetoScriptBehaviour {

    public onOffToggle: Toggle;
    public postProcessObj: GameObject;
    private _postProsessVolume: PostProcessVolume;

    Start() {    
        this._postProsessVolume = this.postProcessObj.GetComponent<PostProcessVolume>();

        this.onOffToggle.onValueChanged.AddListener(()=>{
            this._postProsessVolume.profile.settings.ForEach(
                // 현재 profile settings의 모든 설정을 on/off합니다.
                (setting)=>{
                    setting.active = !setting.active;
                }
            );
        });
    }
}
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { GameObject } from 'UnityEngine';
import { PostProcessVolume } from 'UnityEngine.Rendering.PostProcessing';
import { Toggle } from 'UnityEngine.UI';

export default class PostProcessScript extends ZepetoScriptBehaviour {

    public onOffToggle: Toggle;
    public postProcessObj: GameObject;
    private _postProsessVolume: PostProcessVolume;

    Start() {    
        this._postProsessVolume = this.postProcessObj.GetComponent<PostProcessVolume>();

        this.onOffToggle.onValueChanged.AddListener(()=>{
            this._postProsessVolume.profile.settings.ForEach(
                // 현재 profile settings의 모든 설정을 on/off합니다.
                (setting)=>{
                    setting.active = !setting.active;
                }
            );
        });
    }
}
﻿
4
PostProcessManagerにスクリプトを追加します。
﻿
HierarchyでPostProcessManagerを選択し、InspectorでAdd Component > Zepeto Scriptをクリックします。
ScriptフィールドにPostProcessScriptをドラッグ＆ドロップしてください。
次に、Hierarchyで作成したToggleとPost-process VolumeをそれぞれOn Off ToggleフィールドとPost Process Objフィールドにドラッグ＆ドロップします。
﻿
<例示>
﻿
これで、Post-process Volumeがある場所でToggleを押すと、Post-processingがオン／オフされるようになります。