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.

BlitScreen

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

    1.  import { _decorator, Material, postProcess } from 'cc';
    2.  const { ccclass, property, menu } = _decorator;
    4.  @ccclass('CustomPostProcess')
    5.  @menu('PostProcess/CustomPostProcess')
    6.  export class CustomPostProcess extends postProcess.PostProcessSetting {
    7.      @property
    8.      blueIntensity = 1
    10.      @property
    11.      showDepth = false
    13.      @property
    14.      depthRange = 30
    16.      @property(Material)
    17.      _material: Material | undefined
    19.      @property(Material)
    20.      get material () {
    21.          return this._material;
    22.      }
    23.      set material (v) {
    24.          this._material = v;
    25.      }
    26.  }

  2. Create a CustomPass

    1.  import { Vec4, gfx, postProcess, renderer, rendering } from "cc";
    2.  import { CustomPostProcess } from "./CustomPostProcess";
    4.  export class CustomPass extends postProcess.SettingPass {
    5.      // custom pass name
    6.      name = 'CustomPass'
    8.      // out out slot name
    9.      outputNames: string[] = ['CustomPassColor']
    11.      // reference to post process setting
    12.      get setting () { return this.getSetting(CustomPostProcess); }
    14.      // Whether the pass should rendered
    15.      checkEnable(camera: renderer.scene.Camera): boolean {
    16.          let setting = this.setting;
    17.          return setting.material && super.checkEnable(camera);
    18.      }
    20.      params = new Vec4
    22.      render (camera: renderer.scene.Camera, ppl: rendering.Pipeline) {
    23.          const cameraID = this.getCameraUniqueID(camera);
    25.          // clear background to black color 
    26.          let context = this.context;
    27.          context.clearBlack()
    29.          // input name from last pass's output slot 0
    30.          let input0 = this.lastPass.slotName(camera, 0);
    31.          // output slot 0 name 
    32.          let output = this.slotName(camera, 0);
    34.          // get depth slot name
    35.          let depth = context.depthSlotName;
    37.          // also can get depth slot name from forward pass.
    38.          // let forwardPass = builder.getPass(ForwardPass);
    39.          // depth = forwardPass.slotName(camera, 1);
    41.          // set setting value to material
    42.          let setting = this.setting;
    43.          this.params.x = setting.blueIntensity
    44.          this.params.y = setting.showDepth ? 1 : 0;
    45.          this.params.z = setting.depthRange;
    46.          setting.material.setProperty('params', this.params);
    48.          context.material = setting.material;
    49.          context
    50.              // update view port
    51.              .updatePassViewPort()
    52.              // add a render pass
    53.              .addRenderPass('post-process', `${this.name}${cameraID}`)
    54.              // set inputs
    55.              .setPassInput(input0, 'inputTexture')
    56.              .setPassInput(depth, 'depthTexture')
    57.              // set outputs
    58.              .addRasterView(output, gfx.Format.RGBA8)
    59.              // final render
    60.              .blitScreen(0)
    61.              // calculate a version
    62.              .version();
    63.      }
    64.  }

  3. Register the custom pass

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

For more, please refer to custom-pass.