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.


Dot Effect

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.

custom-pass-1 custom-pass-2

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

     import { _decorator, Material, postProcess } from 'cc';
     const { ccclass, property, menu } = _decorator;
     export class CustomPostProcess extends postProcess.PostProcessSetting {
         blueIntensity = 1
         showDepth = false
         depthRange = 30
         _material: Material | undefined
         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;
             // 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;
                 // update view port
                 // add a render pass
                 .addRenderPass('post-process', `${}${cameraID}`)
                 // set inputs
                 .setPassInput(input0, 'inputTexture')
                 .setPassInput(depth, 'depthTexture')
                 // set outputs
                 .addRasterView(output, gfx.Format.RGBA8)
                 // final render
                 // calculate a 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.

results matching ""

    No results matching ""