# 后处理节点

后处理节点是一类特殊的渲染节点，其提供了一套规范和生命周期来帮助开发者快速定制后处理效果。

# 基类

所有的后处理节点都应该派生自基类RGPostProcessNode：

// 每个后处理Pass的数据
export interface IPostProcessPassData {
  effect: Effect;
  renderTarget: RenderTexture | Screen;
  lightMode: string;
}

// 所有后处理节点共有的配置
export interface IRGPostProcessNodeOptions {
  renderToScreen?: boolean;
  hdr?: boolean;
}

// 后处理节点基类
export abstract class RGPostProcessNode<
  TInput extends {[key: string]: keyof IRGData} = {},
  TOptions extends IRGPostProcessNodeOptions = IRGPostProcessNodeOptions
> extends RGNode<TInput, 'RenderTarget', TOptions> {
  public abstract onGetPasses(context: RenderSystem, options: TOptions): IPostProcessPassData[];
  public onCreatedData(context: RenderSystem, materials: Material[], passes: IPostProcessPassData[], options: TOptions): void {}
  public onFillData(context: RenderSystem, materials: Material[], passes: IPostProcessPassData[], options: TOptions): void {}
}

根据之前章节对渲染节点的介绍，我们可以看到后处理节点实际上是一个可以自定义输入、输出RenderTarget的节点，事实上，大部分后处理节点都会接收一个或多个RenderTexture作为输入，最终输出到RenderTexture或Screen，这也代表后处理节点实质上是可以级联的，从这个角度，对于简单的后处理流程，认为其实一个管道也可。

# 定制节点

要定制一个后处理节点，最重要的就是掌握这个节点的三个生命周期，这里以最简单的Blit节点为例，来论述如何自定义后处理节点：

@engine.RGPostProcessNode.serialize('BLIT')
export class RGBlitPostProcessNode extends engine.RGPostProcessNode<{sourceTex: 'RenderTarget'}> {
  public inputTypes = {sourceTex: 'RenderTarget' as 'RenderTarget'};

  public onGetPasses(context: RenderSystem, options: IRGPostProcessNodeOptions): IPostProcessPassData[] {
    return [{
      effect: this.getEffectByName('System::Effect::Blit'),
      renderTarget: options.renderToScreen ? context.screen : new engine.RenderTexture({
        width: context.screen.width,
        height: context.screen.height,
        colors: [{
          pixelFormat: options.hdr ? engine.ETextureFormat.RGBA16F : engine.ETextureFormat.RGBA8
        }]
      }),
      lightMode: 'Default'
    }];
  }

  public onCreatedData(context: RenderSystem, materials: Material[], passes: IPostProcessPassData[], options: IRGPostProcessNodeOptions) {
  }

  public onFillData(context: RenderSystem, materials: Material[]): void {
    const srcTex = this.getInput('sourceTex') as RenderTexture;

    if (srcTex) {
      materials[0].setTexture('sourceTex', srcTex);
    }
  }
}

首先要注意到我们使用了一个装饰器engine.RGPostProcessNode.serialize，这用于将类型type和节点实现绑定起来，一般和后续提到的后处理资源配合使用。

对于这个节点，首先定义的就是输入类型信息{sourceTex: 'RenderTarget'}，即声明需要一个渲染目标作为输入。

然后是生命周期onGetPasses，其返回了一个数组，数组的元素数量表示会有多少个Pass，每个Pass中返回一个用于渲染的Effect、用于作为输出的RenderTarget，以及用于渲染的lightMode。节点将会选择最后一个Pass的RenderTarget作为节点的总输出。