Applying Post-Processing on ZEPETO World

7min
If you want to enhance your world with visual effects or improve its overall graphic quality, try using Unity’s Post-processing feature.
By adding various effects, you can increase immersion and create a more polished experience.
Getting Started with Post-processing
1
Install the Post Processing package.
﻿
In Unity, go to Window > Package Manager. Set the Packages option to Unity Registry, then search for and install the Post Processing package.
2
Duplicate the ZepetoCamera Prefab.
﻿
In the Project folder, go to Packages > ZEPETO.Character.Controller > Runtime > _Resources > Camera. Find the ZepetoCamera prefab, copy it, and paste it into the Assets folder.
Then rename the duplicated prefab to ZepetoCameraCopy.
3
Link ZepetoCameraCopy.
﻿
In the Hierarchy, select Managers > ZepetoPlayers. In the Inspector, drag and drop the duplicated ZepetoCameraCopy into the Prefab field.
4
Create a new Layer.
﻿
In the Inspector of ZepetoCameraCopy, click Layer > Add Layer to create a new layer. Then assign this new layer in the Layer field.
📘 Note
You can only use Layer 3 and Layer 6 or higher.
Layer 0 to 2 and Layer 4 to 5 are default Unity layers and cannot be modified.
﻿
Applying Post-processing
There are two main ways to apply Post-processing:
Global: Applies effects to the entire world
Local: Applies effects only when the player enters a specific area
Global Application
1
Add Post-process Layer and Post-process Volume to ZepetoCameraCopy.
﻿
In the Inspector, click Add Component to add both Post-process Layer and Post-process Volume components. In Post-process Layer, set Volume Blending > Layer to the new layer you created.
Then in Post-process Volume, check the Is Global option. In the Profile field, assign a Post Process Profile that includes the effects you want.
If you don’t have a profile yet, click the New button next to the Profile field to create one.
2
Add effects to the Post Process Profile.
﻿
If you created a new profile, select it and click the Add Effect button. Choose the effects you want and adjust their settings to create the desired look.
﻿
To edit a value, you must first check the box to the left of the field.
✏️ Tip
Effects can be modified even during Play Mode, and the changes will be saved after exiting Play Mode.
Try adjusting the settings in the Inspector while the scene is running to see the results in real time and fine-tune your effects.
﻿
<Effect Examples>
Bloom
﻿
Lens Distortion
﻿
Color Grading
﻿
﻿
Local Application
1
Add a Post-process Layer to ZepetoCameraCopy.
﻿
In the Inspector of ZepetoCameraCopy, add a Post-process Layer. Click the This button to set the Trigger, and assign the new layer to the Layer field.
2
Create a Post-process Volume object.
﻿
In the Hierarchy, click + > 3D Object > Post-process Volume to create a new volume object.
﻿
Assign the new layer to the Post-process Volume’s Layer field. Then, uncheck the Is Global option.
3
Add effects to the Post-process Volume.
﻿
Click Add Effect to add the effects you want. Adjust their settings to achieve the desired result.
4
Place the Post-process Volume.
﻿
Position the Post-process Volume in the area where you want the effects to activate.
﻿
<Local Application Example>
﻿
﻿
Controlling Post-process Volume via Script
You can also control the Post-process Volume using a script.
Below is an example using a Toggle to turn the effect on and off.
1
Create a new GameObject.
In the Hierarchy, click + > Create Empty to create a new GameObject. Then, rename the object to PostProcessManager.
2
Create a new Toggle UI.
In the Hierarchy, click + > UI > Toggle to create a new Toggle element.
3
Create a new script.
In the Project window, click + > ZEPETO > TypeScript to create a new script.
Rename the script to PostProcessScript, open it, and paste in the code below.
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(
                // Toggles all settings in the current profile settings on or 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(
                // Toggles all settings in the current profile settings on or off.
                (setting)=>{
                    setting.active = !setting.active;
                }
            );
        });
    }
}
﻿
4
Add the script to PostProcessManager.
﻿
Select PostProcessManager in the Hierarchy. In the Inspector, click Add Component > Zepeto Script, and drag the PostProcessScript into the Script field.
Then, in the Hierarchy, drag the Toggle into the On Off Toggle field, and drag the Post-process Volume into the Post Process Obj field.
﻿
<Example>
﻿
Now, when you press the Toggle in the area where the Post-process Volume is placed, you’ll see the post-processing effect activate or deactivate.
Setting up World Lighting
Interacting with an object