Skip to content
Cocos Creator

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.


  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.

Released under the MIT License.