自定义后效

自定义后效有两种方式,简单的后效可以直接将后效材质添加到 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;
    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. 定义 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. 注册 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