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;
    3. @ccclass('CustomPostProcess')
    4. @menu('PostProcess/CustomPostProcess')
    5. export class CustomPostProcess extends postProcess.PostProcessSetting {
    6. @property
    7. blueIntensity = 1
    8. @property
    9. showDepth = false
    10. @property
    11. depthRange = 30
    12. @property(Material)
    13. _material: Material | undefined
    14. @property(Material)
    15. get material () {
    16. return this._material;
    17. }
    18. set material (v) {
    19. this._material = v;
    20. }
    21. }
  2. Create a CustomPass

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