自定义后效

自定义后效有两种方式，简单的后效可以直接将后效材质添加到 Blit-Screen 后效组件 上，复杂的后效需要自定义一个后效 pass 。

Blit-Screen 后效组件

参考 设置后效流程 添加 Blit-Screen 后效组件， 将自定义后效材质拖入 Material 属性中，Blit-Screen 会按照 Materials 数组顺序依次渲染后效材质。

Materials 属性中每个自定义后效材质都支持单独开关，方便开发者管理。

具体可以参考 cocos-example-render-pipeline

自定义后效 Pass

如果需要自定义更加复杂的后效流程，你可以创建自定义后效 Pass 。

1. 定义 PostProcessSetting 组件，传递参数到 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. 定义 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. 注册 custom pass

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

具体可以参考 custom-pass