นำ Post-Processing มาใช้ในโลก ZEPETO

6min
หากคุณต้องการเพิ่มเอฟเฟกต์ภาพที่สวยงามให้กับโลกของคุณ หรือยกระดับคุณภาพกราฟิก ลองใช้ฟีเจอร์ Post-processing ของ Unity ดูสิ
ด้วยเอฟเฟกต์ภาพที่หลากหลาย คุณสามารถสร้างโลกที่มีความสมจริงและน่าดึงดูดมากยิ่งขึ้นได้
เริ่มต้นใช้งาน Post-processing
1
ติดตั้งแพ็กเกจ Post Processing
﻿
ใน Unity ให้ไปที่ Window > Package Manager ตั้งค่า Packages เป็น Unity Registry จากนั้นค้นหาและติดตั้งแพ็กเกจ Post Processing จากรายการ
2
ทำสำเนา Prefab ที่ชื่อว่า ZepetoCamera
﻿
ในโฟลเดอร์ Project ให้ไปที่ Packages > ZEPETO.Character.Controller > Runtime > _Resources > Camera
ค้นหา ZepetoCamera Prefab จากนั้นคัดลอกแล้ววางไว้ในโฟลเดอร์ Assets
จากนั้นเปลี่ยนชื่อ Prefab ที่คัดลอกมาเป็น ZepetoCameraCopy
3
เชื่อมต่อ ZepetoCameraCopy
﻿
ใน Hierarchy ให้เลือก Managers > ZepetoPlayers
ใน Inspector ให้ลาก ZepetoCameraCopy ไปใส่ในช่อง Prefab
4
สร้าง Layer ใหม่
﻿
ใน Inspector ของ ZepetoCameraCopy ให้คลิก Layer > Add Layer เพื่อสร้าง Layer ใหม่
จากนั้นกำหนด Layer ที่สร้างไว้ในช่อง Layer
📘 หมายเหตุ
คุณสามารถใช้ได้เฉพาะ Layer 3 และ Layer 6 ขึ้นไปเท่านั้น
Layer 0–2 และ Layer 4–5 เป็น Layer พื้นฐานของ Unity ซึ่งไม่สามารถแก้ไขได้
﻿
การนำ Post-processing ไปใช้งาน
มี 2 วิธีหลักในการใช้ Post-processing:
Global：ใช้เอฟเฟกต์กับทั้งโลก
Local：ใช้เอฟเฟกต์เฉพาะเมื่อผู้เล่นเข้าสู่พื้นที่ที่กำหนด
การใช้งานแบบ Global
1
เพิ่ม Post-process Layer และ Post-process Volume ให้กับ ZepetoCameraCopy
﻿
ใน Inspector ให้คลิก Add Component แล้วเพิ่มทั้ง Post-process Layer และ Post-process Volume
ใน Post-process Layer ให้ตั้งค่า Volume Blending > Layer เป็น Layer ที่คุณสร้างไว้
จากนั้นใน Post-process Volume ให้ติ๊กที่ Is Global
ในช่อง Profile ให้เลือก Post Process Profile ที่มีเอฟเฟกต์ที่คุณต้องการ
หากยังไม่มี Profile ให้คลิกปุ่ม New ข้างช่อง Profile เพื่อสร้างใหม่
2
เพิ่มเอฟเฟกต์เข้าไปใน Post Process Profile
﻿
หากคุณสร้าง Profile ใหม่ ให้เลือก Profile นั้นแล้วคลิก Add Effect
เลือกเอฟเฟกต์ที่ต้องการ และปรับค่าต่าง ๆ ให้เหมาะสมกับสไตล์ของโลกคุณ
﻿
หากต้องการแก้ไขค่า ให้ทำเครื่องหมายถูกที่กล่องทางซ้ายของแต่ละฟิลด์ก่อน
✏️ เคล็ดลับ
คุณสามารถแก้ไขเอฟเฟกต์ได้อย่างอิสระแม้ในขณะ Play Mode และการเปลี่ยนแปลงจะยังคงอยู่แม้จะหยุดเล่นแล้ว
ลองปรับค่าต่าง ๆ ใน Inspector ขณะรัน Scene เพื่อดูผลแบบเรียลไทม์ และปรับให้ตรงกับที่คุณต้องการ
﻿
<ตัวอย่างเอฟเฟกต์>
Bloom
﻿
Lens Distortion
﻿
Color Grading
﻿
﻿
การใช้งานแบบ Local
1
เพิ่ม Post-process Layer ให้กับ ZepetoCameraCopy
﻿
ใน Inspector ของ ZepetoCameraCopy ให้เพิ่ม Post-process Layer
คลิกปุ่ม This เพื่อกำหนด Trigger แล้วตั้งค่า Layer ที่สร้างไว้ในช่อง Layer
2
สร้างวัตถุ Post-process Volume
﻿
ใน Hierarchy ให้คลิก + > 3D Object > Post-process Volume เพื่อสร้างวัตถุ Volume ใหม่
﻿
ตั้งค่า Layer ให้เป็น Layer ที่คุณสร้างไว้ และยกเลิกการติ๊ก Is Global
3
เพิ่มเอฟเฟกต์เข้าไปใน Post-process Volume
﻿
คลิกปุ่ม Add Effect แล้วเลือกเอฟเฟกต์ที่ต้องการ จากนั้นปรับค่าต่าง ๆ ให้เหมาะสม
4
วาง Post-process Volume
﻿
วางวัตถุ Post-process Volume ไว้ในพื้นที่ที่คุณต้องการให้แสดงผลเอฟเฟกต์
﻿
<ตัวอย่างการใช้งานแบบ Local>
﻿
﻿
ควบคุม Post-process Volume ด้วยสคริปต์
คุณสามารถควบคุม Post-process Volume ผ่านสคริปต์ได้เช่นกัน

ด้านล่างนี้คือตัวอย่างการเปิด/ปิดเอฟเฟกต์โดยใช้ Toggle
1
สร้าง GameObject ใหม่
ใน Hierarchy ให้คลิก + > Create Empty เพื่อสร้าง GameObject ใหม่
เปลี่ยนชื่อเป็น PostProcessManager
2
สร้าง UI Toggle ใหม่
ใน 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
﻿
เลือก PostProcessManager จาก Hierarchy
ใน Inspector ให้คลิก Add Component > Zepeto Script แล้วลาก PostProcessScript ไปวางในช่อง Script
จากนั้นลาก Toggle ไปใส่ในช่อง On Off Toggle และลาก Post-process Volume ไปใส่ในช่อง Post Process Obj
﻿
<ตัวอย่าง>
﻿
ตอนนี้เมื่อคุณกดปุ่ม Toggle ในพื้นที่ที่มี Post-process Volume อยู่ เอฟเฟกต์จะถูกเปิดหรือปิดตามการตั้งค่า
การตั้งค่าระบบแสงสว่างทั่วโลก
การโต้ตอบกับวัตถุ