Support post process (galacean#2129)

* feat: support bloom shader

* feat: support bloom shader

Author: zhuxudong

e2e/case/.initPostProcessEnv.ts

@@ -0,0 +1,67 @@
+import {
+  AmbientLight,
+  AssetType,
+  BackgroundMode,
+  Camera,
+  GLTFResource,
+  PrimitiveMesh,
+  SkyBoxMaterial,
+  Texture2D,
+  Vector3,
+  WebGLEngine
+} from "@galacean/engine";
+import { initScreenshot, updateForE2E } from "./.mockForE2E";
+
+export async function initPostProcessEnv(
+  callback: (camera: Camera, resArray: [GLTFResource, AmbientLight, Texture2D]) => void
+) {
+  WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
+    engine.canvas.resizeByClientSize();
+
+    const scene = engine.sceneManager.activeScene;
+    const rootEntity = scene.createRootEntity();
+
+    //Create camera
+    const cameraNode = rootEntity.createChild("camera_node");
+    cameraNode.transform.position.set(4, 0, 6);
+    cameraNode.transform.lookAt(new Vector3(1, 0, 0));
+    const camera = cameraNode.addComponent(Camera);
+
+    Promise.all([
+      engine.resourceManager
+        .load<GLTFResource>("https://gw.alipayobjects.com/os/bmw-prod/a1da72a4-023e-4bb1-9629-0f4b0f6b6fc4.glb")
+        .then((glTF) => {
+          const defaultSceneRoot = glTF.instantiateSceneRoot();
+          rootEntity.addChild(defaultSceneRoot);
+          return glTF;
+        }),
+      engine.resourceManager
+        .load<AmbientLight>({
+          type: AssetType.Env,
+          url: "https://gw.alipayobjects.com/os/bmw-prod/89c54544-1184-45a1-b0f5-c0b17e5c3e68.bin"
+        })
+        .then((ambientLight) => {
+          scene.ambientLight = ambientLight;
+          const sky = scene.background.sky;
+          const skyMaterial = new SkyBoxMaterial(engine);
+          scene.background.mode = BackgroundMode.Sky;
+
+          sky.material = skyMaterial;
+          sky.mesh = PrimitiveMesh.createCuboid(engine, 1, 1, 1);
+          skyMaterial.texture = ambientLight.specularTexture;
+          skyMaterial.textureDecodeRGBM = true;
+          return ambientLight;
+        }),
+      engine.resourceManager.load<Texture2D>({
+        type: AssetType.Texture2D,
+        url: "https://mdn.alipayobjects.com/huamei_dmxymu/afts/img/A*tMeTQ4Mx60oAAAAAAAAAAAAADuuHAQ/original"
+      })
+    ]).then((resArray) => {
+      callback(camera, resArray);
+
+      updateForE2E(engine);
+
+      initScreenshot(engine, camera);
+    });
+  });
+}

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

@@ -0,0 +1,25 @@
+/**
+ * @title Bloom + HDR + ACES Tonemapping
+ * @category PostProcess
+ */
+import { Camera, TonemappingMode } from "@galacean/engine";
+import { initPostProcessEnv } from "./.initPostProcessEnv";
+
+initPostProcessEnv((camera: Camera, resArray) => {
+  const [_, __, dirtTexture] = resArray;
+  const scene = camera.scene;
+
+  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;
+
+  bloomEffect.threshold = 0.5;
+  bloomEffect.dirtTexture = dirtTexture;
+  tonemappingEffect.mode = TonemappingMode.ACES;
+});

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

@@ -0,0 +1,25 @@
+/**
+ * @title Bloom + HDR + Neutral Tonemapping
+ * @category PostProcess
+ */
+import { Camera, TonemappingMode } from "@galacean/engine";
+import { initPostProcessEnv } from "./.initPostProcessEnv";
+
+initPostProcessEnv((camera: Camera, resArray) => {
+  const [_, __, dirtTexture] = resArray;
+  const scene = camera.scene;
+
+  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;
+
+  bloomEffect.threshold = 0.5;
+  bloomEffect.dirtTexture = dirtTexture;
+  tonemappingEffect.mode = TonemappingMode.Neutral;
+});

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

@@ -0,0 +1,25 @@
+/**
+ * @title Bloom + LDR + Neutral Tonemapping
+ * @category PostProcess
+ */
+import { Camera, TonemappingMode } from "@galacean/engine";
+import { initPostProcessEnv } from "./.initPostProcessEnv";
+
+initPostProcessEnv((camera: Camera, resArray) => {
+  const [_, __, dirtTexture] = resArray;
+  const scene = camera.scene;
+
+  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;
+
+  bloomEffect.threshold = 0.5;
+  bloomEffect.dirtTexture = dirtTexture;
+  tonemappingEffect.mode = TonemappingMode.Neutral;
+});

e2e/config.ts

@@ -180,5 +180,22 @@ export const E2E_CONFIG = {
       caseFileName: "particleRenderer-dream",
       threshold: 0.3
     }
+  },
+  PostProcess: {
+    HDRBloomACES: {
+      category: "PostProcess",
+      caseFileName: "postProcess-HDR-bloom-ACES",
+      threshold: 0.2
+    },
+    HDRBloomNeutral: {
+      category: "PostProcess",
+      caseFileName: "postProcess-HDR-bloom-neutral",
+      threshold: 0.2
+    },
+    LDRBloomNeutral: {
+      category: "PostProcess",
+      caseFileName: "postProcess-LDR-bloom-neutral",
+      threshold: 0.2
+    }
   }
 };

e2e/fixtures/originImage/PostProcess_postProcess-HDR-bloom-ACES.jpg

@@ -17,6 +17,9 @@ import { TextureFormat } from "./texture/enums/TextureFormat";
  * @internal
  */
 export class BasicResources {
+  /**
+   * Use triangle to blit texture, ref: https://michaldrobot.com/2014/04/01/gcn-execution-patterns-in-full-screen-passes/ .
+   */
   readonly blitMesh: ModelMesh;
   readonly flipYBlitMesh: ModelMesh;
   readonly blitMaterial: Material;
@@ -30,16 +33,14 @@ export class BasicResources {
     // prettier-ignore
     const vertices = new Float32Array([
       -1, -1, 0, 1, // left-bottom
-      1, -1, 1, 1,  // right-bottom
-      -1, 1, 0, 0,  // left-top
-      1, 1, 1, 0]); // right-top
+      3, -1, 2, 1,  // right-bottom
+      -1, 3, 0, -1 ]); // left-top
 
     // prettier-ignore
     const flipYVertices = new Float32Array([
-      1, -1, 1, 0,  // right-bottom
+      3, -1, 2, 0,  // right-bottom
       -1, -1, 0, 0, // left-bottom
-      1, 1, 1, 1,   // right-top
-      -1, 1, 0, 1]); // left-top
+      -1, 3, 0, 2]); // left-top
 
     const blitMaterial = new Material(engine, Shader.find("blit"));
     blitMaterial._addReferCount(1);
@@ -80,7 +81,7 @@ export class BasicResources {
     mesh._addReferCount(1);
     mesh.setVertexElements([new VertexElement("POSITION_UV", 0, VertexElementFormat.Vector4, 0)]);
     mesh.setVertexBufferBinding(new Buffer(engine, BufferBindFlag.VertexBuffer, vertices, BufferUsage.Static), 16);
-    mesh.addSubMesh(0, 4, MeshTopology.TriangleStrip);
+    mesh.addSubMesh(0, 3, MeshTopology.Triangles);
     return mesh;
   }
 

e2e/fixtures/originImage/PostProcess_postProcess-HDR-bloom-neutral.jpg

@@ -8,7 +8,7 @@ import { BasicRenderPipeline } from "./RenderPipeline/BasicRenderPipeline";
 import { PipelineUtils } from "./RenderPipeline/PipelineUtils";
 import { Transform } from "./Transform";
 import { VirtualCamera } from "./VirtualCamera";
-import { Logger } from "./base";
+import { GLCapabilityType, Logger } from "./base";
 import { deepClone, ignoreClone } from "./clone/CloneManager";
 import { CameraClearFlags } from "./enums/CameraClearFlags";
 import { CameraType } from "./enums/CameraType";
@@ -21,6 +21,7 @@ import { ShaderMacroCollection } from "./shader/ShaderMacroCollection";
 import { ShaderProperty } from "./shader/ShaderProperty";
 import { ShaderTagKey } from "./shader/ShaderTagKey";
 import { ShaderDataGroup } from "./shader/enums/ShaderDataGroup";
+import { TextureFormat } from "./texture";
 import { RenderTarget } from "./texture/RenderTarget";
 import { TextureCubeFace } from "./texture/enums/TextureCubeFace";
 
@@ -118,6 +119,8 @@ export class Camera extends Component {
   private _renderTarget: RenderTarget = null;
   private _depthBufferParams: Vector4 = new Vector4();
   private _opaqueTextureEnabled: boolean = false;
+  private _enableHDR = false;
+  private _enablePostProcess = false;
 
   @ignoreClone
   private _frustumChangeFlag: BoolUpdateFlag;
@@ -141,7 +144,6 @@ export class Camera extends Component {
    * If enabled, the opaque texture can be accessed in the shader using `camera_OpaqueTexture`.
    *
    * @defaultValue `false`
-   *
    * @remarks If enabled, the `independentCanvasEnabled` property will be forced to be true.
    */
   get opaqueTextureEnabled(): boolean {
@@ -161,11 +163,11 @@ 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._renderTarget) {
-      return false;
+    if (this.enableHDR || (this.enablePostProcess && this.scene._postProcessManager.hasActiveEffect)) {
+      return true;
     }
 
-    return this._forceUseInternalCanvas();
+    return this.opaqueTextureEnabled && !this._renderTarget;
   }
 
   /**
@@ -356,15 +358,40 @@ export class Camera extends Component {
 
   /**
    * Whether to enable HDR.
-   * @todo When render pipeline modification
+   * @defaultValue `false`
+   * @remarks If enabled, the `independentCanvasEnabled` property will be forced to be true.
    */
   get enableHDR(): boolean {
-    console.log("not implementation");
-    return false;
+    return this._enableHDR;
   }
 
   set enableHDR(value: boolean) {
-    console.log("not implementation");
+    if (this.enableHDR !== value) {
+      const rhi = this.engine._hardwareRenderer;
+      const supportHDR = rhi.isWebGL2 || rhi.canIUse(GLCapabilityType.textureHalfFloat);
+      if (value && !supportHDR) {
+        Logger.warn("Can't enable HDR in this device.");
+        return;
+      }
+      this._enableHDR = value;
+      this._checkMainCanvasAntialiasWaste();
+    }
+  }
+
+  /**
+   * Whether to enable post process.
+   * @defaultValue `false`
+   * @remarks If enabled, the `independentCanvasEnabled` property will be forced to be true.
+   */
+  get enablePostProcess(): boolean {
+    return this._enablePostProcess;
+  }
+
+  set enablePostProcess(value: boolean) {
+    if (this._enablePostProcess !== value) {
+      this._enablePostProcess = value;
+      this._checkMainCanvasAntialiasWaste();
+    }
   }
 
   /**
@@ -380,7 +407,6 @@ export class Camera extends Component {
       value && this._addResourceReferCount(value, 1);
       this._renderTarget = value;
       this._onPixelViewportChanged();
-      this._checkMainCanvasAntialiasWaste();
     }
   }
 
@@ -662,6 +688,17 @@ export class Camera extends Component {
     this.scene._componentsManager.removeCamera(this);
   }
 
+  /**
+   * @internal
+   */
+  _getInternalColorTextureFormat(): TextureFormat {
+    return this._enableHDR
+      ? this.engine._hardwareRenderer.isWebGL2
+        ? TextureFormat.R11G11B10_UFloat
+        : TextureFormat.R16G16B16A16
+      : TextureFormat.R8G8B8A8;
+  }
+
   /**
    * @internal
    * @inheritdoc
@@ -768,10 +805,6 @@ export class Camera extends Component {
     return this._inverseProjectionMatrix;
   }
 
-  private _forceUseInternalCanvas(): boolean {
-    return this.opaqueTextureEnabled;
-  }
-
   @ignoreClone
   private _onPixelViewportChanged(): void {
     this._updatePixelViewport();
@@ -781,7 +814,7 @@ export class Camera extends Component {
 
   private _checkMainCanvasAntialiasWaste(): void {
     if (this.independentCanvasEnabled && Vector4.equals(this._viewport, PipelineUtils.defaultViewport)) {
-      console.warn(
+      Logger.warn(
         "Camera use independent canvas and viewport cover the whole screen, it is recommended to disable antialias, depth and stencil to save memory when create engine."
       );
     }