自定义后效

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

Blit-Screen 后效组件

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

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

BlitScreen

Dot Effect

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

自定义后效 Pass

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

custom-pass-1 custom-pass-2

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

具体可以参考 custom-pass