Customize a Post Process

There are two methods to customize a post-process, add a simple post-process material to the BlitScreen Component or define a post pass for a complex post-process.

Blit-Screen Component

Refer to the Config Post Process, add a BlitScreen Component, and drag the custom post-process material to the Material property. The Blit-Screen component will render all the materials in the Material property according to the order they are added.

Every material in the Materials property contains a single switch to help developers manage them.

For more, please refer to cocos-example-render-pipeline.

Customize a Post Process Pass

You can create a custom post-process Pass to accomplish complex post-process effect.

1. Define a PostProcessSetting component that will be delivered to the CustomPass

   import { _decorator, Material, postProcess } from 'cc';
   const { ccclass, property, menu } = _decorator;
   
   @ccclass('CustomPostProcess')
   @menu('PostProcess/CustomPostProcess')
   export class CustomPostProcess extends postProcess.PostProcessSetting {
       @property
       blueIntensity = 1
   
       @property
       showDepth = false
   
       @property
       depthRange = 30
   
       @property(Material)
       _material: Material | undefined
   
       @property(Material)
       get material () {
           return this._material;
       }
       set material (v) {
           this._material = v;
       }
   }

2. Create a CustomPass

   import { Vec4, gfx, postProcess, renderer, rendering } from "cc";
   import { CustomPostProcess } from "./CustomPostProcess";
   
   export class CustomPass extends postProcess.SettingPass {
       // custom pass name
       name = 'CustomPass'
   
       // out out slot name
       outputNames: string[] = ['CustomPassColor']
   
       // reference to post process setting
       get setting () { return this.getSetting(CustomPostProcess); }
   
       // Whether the pass should rendered
       checkEnable(camera: renderer.scene.Camera): boolean {
           let setting = this.setting;
           return setting.material && super.checkEnable(camera);
       }
   
       params = new Vec4
   
       render (camera: renderer.scene.Camera, ppl: rendering.Pipeline) {
           const cameraID = this.getCameraUniqueID(camera);
   
           // clear background to black color 
           let context = this.context;
           context.clearBlack()
   
           // input name from last pass's output slot 0
           let input0 = this.lastPass.slotName(camera, 0);
           // output slot 0 name 
           let output = this.slotName(camera, 0);
   
           // get depth slot name
           let depth = context.depthSlotName;
   
           // also can get depth slot name from forward pass.
           // let forwardPass = builder.getPass(ForwardPass);
           // depth = forwardPass.slotName(camera, 1);
   
           // set setting value to material
           let setting = this.setting;
           this.params.x = setting.blueIntensity
           this.params.y = setting.showDepth ? 1 : 0;
           this.params.z = setting.depthRange;
           setting.material.setProperty('params', this.params);
   
           context.material = setting.material;
           context
               // update view port
               .updatePassViewPort()
               // add a render pass
               .addRenderPass('post-process', `${this.name}${cameraID}`)
               // set inputs
               .setPassInput(input0, 'inputTexture')
               .setPassInput(depth, 'depthTexture')
               // set outputs
               .addRasterView(output, gfx.Format.RGBA8)
               // final render
               .blitScreen(0)
               // calculate a version
               .version();
       }
   }

3. Register the custom pass

   let builder = rendering.getCustomPipeline('Custom') as postProcess.PostProcessBuilder;
   if (builder) {
       // insert CustomPass after a BlitScreenPass
       builder.insertPass(new CustomPass, BlitScreenPass);
   }

For more, please refer to custom-pass.