Open post process pipeline and support local mode

e2e/case/postProcess-HDR-bloom-ACES.ts

@@ -2,7 +2,7 @@
  * @title Bloom + HDR + ACES Tonemapping
  * @category PostProcess
  */
-import { Camera, TonemappingMode } from "@galacean/engine";
+import { BloomEffect, Camera, PostProcess, TonemappingEffect, TonemappingMode } from "@galacean/engine";
 import { initPostProcessEnv } from "./.initPostProcessEnv";
 
 initPostProcessEnv((camera: Camera, resArray) => {
@@ -11,15 +11,15 @@
 
   camera.enablePostProcess = true;
   camera.enableHDR = true;
-  // @ts-ignore
-  const bloomEffect = scene._postProcessManager._bloomEffect;
-  // @ts-ignore
-  const tonemappingEffect = scene._postProcessManager._tonemappingEffect;
 
-  bloomEffect.enabled = true;
-  tonemappingEffect.enabled = true;
+  const globalPostProcessEntity = scene.createRootEntity();
+  const postProcess = globalPostProcessEntity.addComponent(PostProcess);
+  const bloomEffect = postProcess.addEffect(BloomEffect);
+  const tonemappingEffect = postProcess.addEffect(TonemappingEffect);
+  tonemappingEffect.mode = TonemappingMode.ACES;
 
   bloomEffect.threshold = 0.5;
+  bloomEffect.intensity = 1;
   bloomEffect.dirtTexture = dirtTexture;
   tonemappingEffect.mode = TonemappingMode.ACES;
 });

e2e/case/postProcess-HDR-bloom-neutral.ts

@@ -2,7 +2,7 @@
  * @title Bloom + HDR + Neutral Tonemapping
  * @category PostProcess
  */
-import { Camera, TonemappingMode } from "@galacean/engine";
+import { BloomEffect, Camera, PostProcess, TonemappingEffect, TonemappingMode } from "@galacean/engine";
 import { initPostProcessEnv } from "./.initPostProcessEnv";
 
 initPostProcessEnv((camera: Camera, resArray) => {
@@ -11,15 +11,15 @@
 
   camera.enablePostProcess = true;
   camera.enableHDR = true;
-  // @ts-ignore
-  const bloomEffect = scene._postProcessManager._bloomEffect;
-  // @ts-ignore
-  const tonemappingEffect = scene._postProcessManager._tonemappingEffect;
 
-  bloomEffect.enabled = true;
-  tonemappingEffect.enabled = true;
+  const globalPostProcessEntity = scene.createRootEntity();
+  const postProcess = globalPostProcessEntity.addComponent(PostProcess);
+  const bloomEffect = postProcess.addEffect(BloomEffect);
+  const tonemappingEffect = postProcess.addEffect(TonemappingEffect);
+  tonemappingEffect.mode = TonemappingMode.ACES;
 
   bloomEffect.threshold = 0.5;
+  bloomEffect.intensity = 1;
   bloomEffect.dirtTexture = dirtTexture;
   tonemappingEffect.mode = TonemappingMode.Neutral;
 });

e2e/case/postProcess-LDR-bloom-neutral.ts

@@ -2,7 +2,7 @@
  * @title Bloom + LDR + Neutral Tonemapping
  * @category PostProcess
  */
-import { Camera, TonemappingMode } from "@galacean/engine";
+import { BloomEffect, Camera, PostProcess, TonemappingEffect, TonemappingMode } from "@galacean/engine";
 import { initPostProcessEnv } from "./.initPostProcessEnv";
 
 initPostProcessEnv((camera: Camera, resArray) => {
@@ -11,15 +11,15 @@
 
   camera.enablePostProcess = true;
   camera.enableHDR = false;
-  // @ts-ignore
-  const bloomEffect = scene._postProcessManager._bloomEffect;
-  // @ts-ignore
-  const tonemappingEffect = scene._postProcessManager._tonemappingEffect;
 
-  bloomEffect.enabled = true;
-  tonemappingEffect.enabled = true;
+  const globalPostProcessEntity = scene.createRootEntity();
+  const postProcess = globalPostProcessEntity.addComponent(PostProcess);
+  const bloomEffect = postProcess.addEffect(BloomEffect);
+  const tonemappingEffect = postProcess.addEffect(TonemappingEffect);
+  tonemappingEffect.mode = TonemappingMode.ACES;
 
   bloomEffect.threshold = 0.5;
+  bloomEffect.intensity = 1;
   bloomEffect.dirtTexture = dirtTexture;
   tonemappingEffect.mode = TonemappingMode.Neutral;
 });

e2e/case/postProcess-customPass.ts

@@ -0,0 +1,89 @@
+/**
+ * @title Custom post process pass
+ * @category PostProcess
+ */
+import {
+  Blitter,
+  BloomEffect,
+  Camera,
+  Engine,
+  Material,
+  PostProcess,
+  PostProcessPass,
+  PostProcessPassEvent,
+  RenderTarget,
+  Shader,
+  Texture2D,
+  TonemappingEffect,
+  TonemappingMode
+} from "@galacean/engine";
+import { initPostProcessEnv } from "./.initPostProcessEnv";
+
+const customShader = Shader.create(
+  "Custom Post Process",
+  `
+  attribute vec4 POSITION_UV;
+varying vec2 v_uv;
+
+void main() {	
+	gl_Position = vec4(POSITION_UV.xy, 0.0, 1.0);	
+	v_uv = POSITION_UV.zw;
+}
+  `,
+  `
+  varying vec2 v_uv;
+  uniform sampler2D renderer_BlitTexture;
+
+  void main(){
+  gl_FragColor = texture2D(renderer_BlitTexture, v_uv).rrra;
+  }
+  `
+);
+
+class CustomPass extends PostProcessPass {
+  private _blitMaterial: Material;
+
+  set intensity(value) {
+    this._blitMaterial.shaderData.setFloat("intensity", value);
+  }
+
+  constructor(engine: Engine) {
+    super(engine);
+    this.event = PostProcessPassEvent.AfterUber;
+    this._blitMaterial = new Material(this.engine, customShader);
+
+    const depthState = this._blitMaterial.renderState.depthState;
+
+    depthState.enabled = false;
+    depthState.writeEnabled = false;
+  }
+
+  onRender(_, srcTexture: Texture2D, dst: RenderTarget): void {
+    const engine = this.engine;
+    Blitter.blitTexture(engine, srcTexture, dst, undefined, undefined, this._blitMaterial, 0);
+  }
+}
+
+initPostProcessEnv((camera: Camera, resArray) => {
+  const [_, __, dirtTexture] = resArray;
+  const scene = camera.scene;
+  const engine = scene.engine;
+  const postProcessManager = scene.postProcessManager;
+
+  camera.enablePostProcess = true;
+  camera.enableHDR = true;
+
+  const globalPostProcessEntity = scene.createRootEntity();
+  const postProcess = globalPostProcessEntity.addComponent(PostProcess);
+  const bloomEffect = postProcess.addEffect(BloomEffect);
+  const tonemappingEffect = postProcess.addEffect(TonemappingEffect);
+  tonemappingEffect.mode = TonemappingMode.ACES;
+
+  bloomEffect.threshold = 0.5;
+  bloomEffect.intensity = 1;
+  bloomEffect.dirtTexture = dirtTexture;
+  tonemappingEffect.mode = TonemappingMode.Neutral;
+
+  const customPass = new CustomPass(engine);
+  postProcessManager.addPostProcessPass(customPass);
+});

e2e/config.ts

@@ -211,6 +211,11 @@
       category: "PostProcess",
       caseFileName: "postProcess-LDR-bloom-neutral",
       threshold: 0.2
+    },
+    customPass: {
+      category: "PostProcess",
+      caseFileName: "postProcess-customPass",
+      threshold: 0.2
     }
   },
   Text: {

packages/core/src/Camera.ts

@@ -65,6 +65,11 @@ export class Camera extends Component {
    */
   cullingMask: Layer = Layer.Everything;
 
+  /**
+   * Determines which PostProcess to use.
+   */
+  postProcessMask: Layer = Layer.Everything;
+
   /**
    * Depth texture mode.
    * If `DepthTextureMode.PrePass` is used, the depth texture can be accessed in the shader using `camera_DepthTexture`.
@@ -166,7 +171,7 @@ export class Camera extends Component {
    * @remarks If true, the msaa in viewport can turn or off independently by `msaaSamples` property.
    */
   get independentCanvasEnabled(): boolean {
-    if (this.enableHDR || (this.enablePostProcess && this.scene._postProcessManager.hasActiveEffect)) {
+    if (this.enableHDR || (this.enablePostProcess && this.scene.postProcessManager.hasActiveEffect)) {
       return true;
     }
 

packages/core/src/Component.ts

@@ -19,8 +19,12 @@ export class Component extends EngineObject {
   @ignoreClone
   protected _phasedActiveInScene: boolean = false;
 
+  /**
+   * @internal
+   */
   @ignoreClone
-  private _phasedActive: boolean = false;
+  _phasedActive: boolean = false;
+
   @assignmentClone
   private _enabled: boolean = true;
 

packages/core/src/RenderPipeline/BasicRenderPipeline.ts

@@ -21,6 +21,7 @@
   TextureFormat,
   TextureWrapMode
 } from "../texture";
+import { Blitter } from "./Blitter";
 import { CullingResults } from "./CullingResults";
 import { DepthOnlyPass } from "./DepthOnlyPass";
 import { OpaqueTexturePass } from "./OpaqueTexturePass";
@@ -196,19 +197,22 @@
 
     transparentQueue.render(context, PipelineStage.Forward);
 
-    const postProcessManager = scene._postProcessManager;
+    const postProcessManager = scene.postProcessManager;
     const cameraRenderTarget = camera.renderTarget;
     if (camera.enablePostProcess && postProcessManager.hasActiveEffect) {
-      postProcessManager._render(context, internalColorTarget, cameraRenderTarget);
-    } else if (internalColorTarget) {
-      internalColorTarget._blitRenderTarget();
-      PipelineUtils.blitTexture(
-        engine,
-        <Texture2D>internalColorTarget.getColorTexture(0),
-        cameraRenderTarget,
-        0,
-        camera.viewport
-      );
+      postProcessManager._render(camera, internalColorTarget, cameraRenderTarget);
+    } else {
+      postProcessManager._releaseSwapRenderTarget();
+      if (internalColorTarget) {
+        internalColorTarget._blitRenderTarget();
+        Blitter.blitTexture(
+          engine,
+          <Texture2D>internalColorTarget.getColorTexture(0),
+          cameraRenderTarget,
+          0,
+          camera.viewport
+        );
+      }
     }
 
     cameraRenderTarget?._blitRenderTarget();

packages/core/src/RenderPipeline/Blitter.ts

@@ -0,0 +1,81 @@
+import { Vector4 } from "@galacean/engine-math";
+import { Engine } from "../Engine";
+import { Material } from "../material";
+import { ShaderProperty } from "../shader";
+import { Shader } from "../shader/Shader";
+import { ShaderData } from "../shader/ShaderData";
+import { ShaderMacroCollection } from "../shader/ShaderMacroCollection";
+import { ShaderDataGroup } from "../shader/enums/ShaderDataGroup";
+import { RenderTarget, Texture2D } from "../texture";
+import { PipelineUtils } from "./PipelineUtils";
+
+export class Blitter {
+  private static _blitTextureProperty = ShaderProperty.getByName("renderer_BlitTexture");
+  private static _blitMipLevelProperty = ShaderProperty.getByName("renderer_BlitMipLevel");
+  private static _blitTexelSizeProperty = ShaderProperty.getByName("renderer_texelSize"); // x: 1/width, y: 1/height, z: width, w: height
+
+  private static _rendererShaderData = new ShaderData(ShaderDataGroup.Renderer);
+  private static _texelSize = new Vector4();
+  /**
+   * Blit texture to destination render target using a triangle.
+   * @param engine - Engine
+   * @param source - Source texture
+   * @param destination - Destination render target
+   * @param mipLevel - Mip level to blit
+   * @param viewport - Viewport
+   * @param material - The material to use when blit
+   * @param passIndex - Pass index to use of the provided material
+   */
+  static blitTexture(
+    engine: Engine,
+    source: Texture2D,
+    destination: RenderTarget | null,
+    mipLevel: number = 0,
+    viewport: Vector4 = PipelineUtils.defaultViewport,
+    material: Material = null,
+    passIndex = 0
+  ): void {
+    const basicResources = engine._basicResources;
+    const blitMesh = destination ? basicResources.flipYBlitMesh : basicResources.blitMesh;
+    const blitMaterial = material || basicResources.blitMaterial;
+    const rhi = engine._hardwareRenderer;
+    const context = engine._renderContext;
+
+    // We not use projection matrix when blit, but we must modify flipProjection to make front face correct
+    context.flipProjection = !!destination;
+
+    rhi.activeRenderTarget(destination, viewport, context.flipProjection, 0);
+
+    const rendererShaderData = Blitter._rendererShaderData;
+
+    rendererShaderData.setTexture(Blitter._blitTextureProperty, source);
+    rendererShaderData.setFloat(Blitter._blitMipLevelProperty, mipLevel);
+    Blitter._texelSize.set(1 / source.width, 1 / source.height, source.width, source.height);
+    rendererShaderData.setVector4(Blitter._blitTexelSizeProperty, Blitter._texelSize);
+
+    const pass = blitMaterial.shader.subShaders[0].passes[passIndex];
+    const compileMacros = Shader._compileMacros;
+
+    ShaderMacroCollection.unionCollection(
+      context.camera._globalShaderMacro,
+      blitMaterial.shaderData._macroCollection,
+      compileMacros
+    );
+    const program = pass._getShaderProgram(engine, compileMacros);
+
+    program.bind();
+    program.groupingOtherUniformBlock();
+    program.uploadAll(program.rendererUniformBlock, rendererShaderData);
+    program.uploadAll(program.materialUniformBlock, blitMaterial.shaderData);
+    program.uploadUnGroupTextures();
+
+    (pass._renderState || blitMaterial.renderState)._applyStates(
+      engine,
+      false,
+      pass._renderStateDataMap,
+      blitMaterial.shaderData
+    );
+
+    rhi.drawPrimitive(blitMesh._primitive, blitMesh.subMesh, program);
+  }
+}

packages/core/src/RenderPipeline/OpaqueTexturePass.ts

@@ -4,6 +4,7 @@
 import { Texture, Texture2D, TextureFilterMode } from "../texture";
 import { RenderTarget } from "../texture/RenderTarget";
 import { TextureWrapMode } from "../texture/enums/TextureWrapMode";
+import { Blitter } from "./Blitter";
 import { PipelinePass } from "./PipelinePass";
 import { PipelineUtils } from "./PipelineUtils";
 import { RenderContext } from "./RenderContext";
@@ -46,7 +47,7 @@
   }
 
   override onRender(context: RenderContext): void {
-    PipelineUtils.blitTexture(this.engine, <Texture2D>this._cameraColorTexture, this._renderTarget);
+    Blitter.blitTexture(this.engine, <Texture2D>this._cameraColorTexture, this._renderTarget);
     context.camera.shaderData.setTexture(Camera._cameraOpaqueTextureProperty, this._renderTarget.getColorTexture(0));
   }
 }