--- title: ZEPETOワールドでのPost-Processingの適用 slug: world-sdk-guide-ja/zepetopost-processing docTags: createdAt: 2025-04-04T06:11:35.991Z --- ワールドに印象的なビジュアル効果を追加したり、グラフィックのクオリティを向上させたい場合は、UnityのPost-processing機能を活用してみましょう。 さまざまな視覚効果を加えることで、より没入感のある、完成度の高いワールドを作ることができます。 ## Post-processingの始め方 :::::WorkflowBlock :::WorkflowBlockItem **Post Processingパッケージをインストールします。** ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/FTj_8V50vB-33q4nJwUTg_image.png) Unityで**Window > Package Manager**を開き、Packagesオプションを**Unity Registry**に設定した後、リストから**Post Processing**パッケージを探してインストールします。 ::: :::WorkflowBlockItem **ZepetoCameraのPrefabを複製します。** ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/PdWhnifKGLEyiCRTf-ed8_image.png) プロジェクトフォルダで**Packages > ZEPETO.Character.Controller > Runtime > \_Resources > Camera**に移動し、**ZepetoCamera**のPrefabをコピーして、Assetsフォルダに貼り付けます。 その後、複製したPrefabの名前を**ZepetoCameraCopy**に変更してください。 ::: :::WorkflowBlockItem **ZepetoCameraCopyをリンクします。** ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/B3TejRHBwsSsEZwXF0q0o_image.png" size="66" width="926" height="1064" position="center" showCaption="false"} Hierarchyで**Managers > ZepetoPlayers**を選択し、InspectorのPrefabフィールドにZepetoCameraCopyをドラッグ＆ドロップします。 ::: ::::WorkflowBlockItem **新しいレイヤーを作成します。** ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/Y_jWTA-9EYVgfahV5q0pm_image.png) ZepetoCameraCopyのInspectorで**Layer > Add Layer**をクリックし、新しいレイヤーを作成して、**Layer**フィールドに割り当てます。 :::hint{type="info"} 📘 **注意** 使用できるレイヤーはLayer 3とLayer 6以上です。 Layer 0～2および4～5はUnityのデフォルトレイヤーであり、編集できません。 ::: :::: ::::: ## Post-processingの適用方法 Post-processingの適用方法は主に2つあります。 1. **Global**：ワールド全体に効果を適用する方法 2. **Local**：キャラクターが特定のエリアに入ったときのみ効果を適用する方法 ### Globalの適用方法 :::::WorkflowBlock :::WorkflowBlockItem **ZepetoCameraCopyにPost-process LayerとPost-process Volumeを追加します。** ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/pIFvgTz2102f9IBsGEHjL_image.png" size="68" width="804" height="1064" position="center" showCaption="false"} 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**ボタンをクリックして新しく作成できます。 ::: ::::WorkflowBlockItem **Post Process Profileにエフェクトを追加します。** ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/SF6yzeZoC4XVKUIvw2qfA_image.png" size="68" width="790" height="841" position="center" showCaption="false"} 新しいPost Process Profileを作成した場合は、それを選択して**Add Effect**ボタンをクリックし、エフェクトを追加します。 設定値を調整して、好みのビジュアル効果を演出してください。 ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/DrxtpYh8vWlcsAj4j53uN_image.png" size="68" width="846" height="834" position="center" showCaption="false"} 設定値を変更するには、各フィールドの左側にあるチェックボックスにチェックを入れる必要があります。 :::hint{type="info"} ✏️ **ヒント** EffectはPlay Mode中にも自由に調整でき、Play Mode終了後も変更内容は保持されます。 シーン実行中にInspectorで設定をリアルタイムに調整しながら、効果の見え方を確認しましょう。より細かい演出が可能になります。 ::: :::: ::::: **\** ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/5hojtFjbUV1OqjRqoqvgX_image.png "Bloom") ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/EAdJ80rmInnavWtjOTmPP_image.png "Lens Distortion") ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/lNEAIx6y0eP43_zWAKaue_image.png "Color Grading") ### Localの適用方法 ::::WorkflowBlock :::WorkflowBlockItem **ZepetoCameraCopyにPost-process Layerを追加します。** ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/ywAazWJRAjP9nbyltadhI_image.png" size="68" width="926" height="1216" position="center" showCaption="false"} ZepetoCameraCopyのInspectorで**Post-process Layer**を追加し、**This**ボタンをクリックしてTriggerを設定し、**Layer**フィールドに新しく作成したレイヤーを指定します。 ::: :::WorkflowBlockItem **Post-process Volumeオブジェクトを作成します。** ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/EmOfkdtw4NCNCvB4f-NZx_image.png" size="68" width="934" height="1200" position="center" showCaption="false"} Hierarchyで**+ > 3D Object > Post-process Volume**をクリックして、新しいPost-process Volumeオブジェクトを作成します。 ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/oJS7z-TipBvJp4jjXzYjA_image.png" size="68" width="964" height="1197" position="center" showCaption="false"} このオブジェクトの**Layer**を新しく作成したレイヤーに設定し、**Is Global**フィールドのチェックを外します。 ::: :::WorkflowBlockItem **Post-process Volumeにエフェクトを追加します。** ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/-nG6591Mzrg7hJXp0i5pf_image.png" size="68" width="933" height="1153" position="center" showCaption="false"} **Add Effect**ボタンをクリックし、必要な効果を追加した後、設定値を調整してください。 ::: :::WorkflowBlockItem **Post-process Volumeを配置します。** ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/1iyXq3hJNWpI59jsxxXJH_image.png) Post-processingを適用したい位置に、Post-process Volumeを配置してください。 ::: :::: **\** ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/ZFa8s144qsC5zBTvGwPxJ_local.gif) ## スクリプトでPost-process Volumeを制御する 作成したPost-process Volumeは、スクリプトを使って制御することもできます。 以下は、Toggleを使ってPost-process Volumeをオン／オフする例です。 ::::WorkflowBlock :::WorkflowBlockItem **新しいGameObjectを作成します。** Hierarchyで**+ > Create Empty**をクリックして新しいGameObjectを作成し、名前を**PostProcessManager**に変更します。 ::: :::WorkflowBlockItem **新しいToggle UIを作成します。** Hierarchyで**+ > UI > Toggle**をクリックして、Toggle UIを作成します。 ::: :::WorkflowBlockItem **新しいスクリプトを作成します。** 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(); this.onOffToggle.onValueChanged.AddListener(()=>{ this._postProsessVolume.profile.settings.ForEach( // 현재 profile settings의 모든 설정을 on/off합니다. (setting)=>{ setting.active = !setting.active; } ); }); } } ``` ::: :::WorkflowBlockItem **PostProcessManagerにスクリプトを追加します。** ::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/tZbeuWSyrXM_NSJpmDZsr_image.png" size="66" width="1058" height="1348" position="center" showCaption="false"} HierarchyでPostProcessManagerを選択し、Inspectorで**Add Component > Zepeto Script**をクリックします。 **Script**フィールドにPostProcessScriptをドラッグ＆ドロップしてください。 次に、Hierarchyで作成したToggleとPost-process Volumeをそれぞれ**On Off Toggle**フィールドと**Post Process Obj**フィールドにドラッグ＆ドロップします。 ::: :::: **\<例示>** ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/J4lvzQyphSw39C0Yo-uMd_script-post-process.gif) これで、Post-process Volumeがある場所でToggleを押すと、Post-processingがオン／オフされるようになります。