Fix clear flag of internal render target

e2e/case/.mockForE2E.ts

@@ -1,4 +1,4 @@
-import { Camera, Engine, RenderTarget, Texture2D } from "@galacean/engine-core";
+import { Camera, Engine, RenderTarget, Texture2D, TextureFormat } from "@galacean/engine-core";
 
 export const updateForE2E = (engine, deltaTime = 100, loopTime = 10) => {
   engine._vSyncCount = Infinity;
@@ -19,7 +19,7 @@ let flipYCanvas: HTMLCanvasElement = null;
 
 export function initScreenshot(
   engine: Engine,
-  camera: Camera,
+  camera: Camera | Camera[],
   width: number = 1200,
   height: number = 800,
   flipY = false,
@@ -38,15 +38,25 @@ export function initScreenshot(
   const isPaused = engine.isPaused;
   engine.pause();
 
-  const originalTarget = camera.renderTarget;
+  const cameras = Array.isArray(camera) ? camera : [camera];
+  const callbacks = [];
   const renderColorTexture = new Texture2D(engine, width, height);
   const renderTargetData = new Uint8Array(width * height * 4);
-  const renderTarget = new RenderTarget(engine, width, height, renderColorTexture, undefined, 1);
+  const renderTarget = new RenderTarget(engine, width, height, renderColorTexture, TextureFormat.Depth24Stencil8, 1);
 
-  // render to off-screen
-  camera.renderTarget = renderTarget;
-  camera.aspectRatio = width / height;
-  camera.render();
+  cameras.forEach((camera) => {
+    const originalTarget = camera.renderTarget;
+
+    // render to off-screen
+    camera.renderTarget = renderTarget;
+    camera.aspectRatio = width / height;
+    camera.render();
+
+    callbacks.push(() => {
+      camera.renderTarget = originalTarget;
+      camera.resetAspectRatio();
+    });
+  });
 
   renderColorTexture.getPixelBuffer(0, 0, width, height, 0, renderTargetData);
 
@@ -94,8 +104,7 @@ export function initScreenshot(
       // window.URL.revokeObjectURL(url);
 
       // revert
-      camera.renderTarget = originalTarget;
-      camera.resetAspectRatio();
+      callbacks.forEach((cb) => cb());
       !isPaused && engine.resume();
     },
     isPNG ? "image/png" : "image/jpeg",

e2e/case/multi-camera-no-clear.ts

@@ -0,0 +1,96 @@
+/**
+ * @title Multi camera no clear
+ * @category Advance
+ */
+import {
+  BlinnPhongMaterial,
+  Camera,
+  CameraClearFlags,
+  Color,
+  Engine,
+  Layer,
+  Logger,
+  MeshRenderer,
+  PrimitiveMesh,
+  Scene,
+  WebGLEngine,
+  WebGLMode
+} from "@galacean/engine";
+import { initScreenshot, updateForE2E } from "./.mockForE2E";
+
+Logger.enable();
+WebGLEngine.create({
+  canvas: "canvas",
+  graphicDeviceOptions: {
+    webGLMode: WebGLMode.WebGL2
+  }
+}).then((engine) => {
+  engine.canvas.resizeByClientSize();
+
+  initFirstScene(engine);
+  engine.run();
+});
+
+function initFirstScene(engine: Engine): Scene {
+  const scene = engine.sceneManager.scenes[0];
+  const rootEntity = scene.createRootEntity();
+
+  // const renderColorTexture = new Texture2D(engine, 1024, 1024);
+  // const depthTexture = new Texture2D(engine, 1024, 1024, TextureFormat.Depth24Stencil8, false);
+  // const renderTarget = new RenderTarget(engine, 1024, 1024, renderColorTexture, TextureFormat.Depth);
+  // const renderTarget = new RenderTarget(engine, 1024, 1024, renderColorTexture, depthTexture);
+
+  // Create full screen camera
+  const cameraEntity = rootEntity.createChild("fullscreen-camera");
+  const camera = cameraEntity.addComponent(Camera);
+  // camera.renderTarget = renderTarget;
+  camera.cullingMask = Layer.Layer0;
+  cameraEntity.transform.setPosition(0, 0, 20);
+
+  // Create cube
+  const cubeEntity = rootEntity.createChild("cube");
+  cubeEntity.transform.setPosition(-3, 0, 3);
+  const renderer = cubeEntity.addComponent(MeshRenderer);
+  renderer.mesh = PrimitiveMesh.createSphere(engine, 2, 24);
+  const material = new BlinnPhongMaterial(engine);
+  material.baseColor = new Color(1, 0, 0, 1);
+  renderer.setMaterial(material);
+
+  {
+    const cameraEntity = rootEntity.createChild("window-camera");
+    const camera2 = cameraEntity.addComponent(Camera);
+    // camera2.renderTarget = renderTarget;
+    camera2.cullingMask = Layer.Layer1;
+    camera2.enablePostProcess = true;
+    camera2.enableHDR = true;
+    camera2.clearFlags = CameraClearFlags.None;
+    camera2.msaaSamples = 4;
+
+    // @ts-ignore
+    const bloomEffect = scene._postProcessManager._bloomEffect;
+    // @ts-ignore
+    const tonemappingEffect = scene._postProcessManager._tonemappingEffect;
+
+    bloomEffect.enabled = true;
+    tonemappingEffect.enabled = true;
+    bloomEffect.threshold = 0.1;
+    bloomEffect.intensity = 2;
+    cameraEntity.transform.setPosition(0, 0, 20);
+
+    // Create cube
+    const cubeEntity = rootEntity.createChild("cube");
+    cubeEntity.layer = Layer.Layer1;
+    cubeEntity.transform.setPosition(-2, 0, 3);
+    const renderer = cubeEntity.addComponent(MeshRenderer);
+    renderer.mesh = PrimitiveMesh.createSphere(engine, 2, 24);
+    const material = new BlinnPhongMaterial(engine);
+    material.baseColor = new Color(1, 0, 0, 1);
+    material.emissiveColor.set(1, 0, 0, 1);
+    renderer.setMaterial(material);
+
+    updateForE2E(engine);
+    initScreenshot(engine, [camera, camera2]);
+  }
+
+  return scene;
+}

e2e/case/multi-scene-clear.ts

@@ -0,0 +1,85 @@
+/**
+ * @title Multi scene clear
+ * @category Advance
+ */
+import {
+  BlinnPhongMaterial,
+  Camera,
+  CameraClearFlags,
+  Color,
+  Engine,
+  Logger,
+  MeshRenderer,
+  PrimitiveMesh,
+  Scene,
+  WebGLEngine
+} from "@galacean/engine";
+import { initScreenshot, updateForE2E } from "./.mockForE2E";
+
+Logger.enable();
+WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
+  engine.canvas.resizeByClientSize();
+
+  const firstCamera = initFirstScene(engine);
+  const secondCamera = initSecondScene(engine);
+
+  updateForE2E(engine);
+  initScreenshot(engine, [firstCamera, secondCamera]);
+  // initScreenshot(engine, [secondCamera, firstCamera]);
+});
+
+function initFirstScene(engine: Engine): Camera {
+  const scene = engine.sceneManager.scenes[0];
+  const rootEntity = scene.createRootEntity();
+
+  // Create full screen camera
+  const cameraEntity = rootEntity.createChild("fullscreen-camera");
+  const camera = cameraEntity.addComponent(Camera);
+  cameraEntity.transform.setPosition(0, 0, 20);
+
+  // Create cube
+  const cubeEntity = rootEntity.createChild("cube");
+  cubeEntity.transform.setPosition(-2, 0, 3);
+  const renderer = cubeEntity.addComponent(MeshRenderer);
+  renderer.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2);
+  const material = new BlinnPhongMaterial(engine);
+  material.baseColor = new Color(1, 0, 0, 1);
+  renderer.setMaterial(material);
+
+  return camera;
+}
+
+function initSecondScene(engine: Engine): Camera {
+  // Init window camera
+  const scene = new Scene(engine);
+  engine.sceneManager.addScene(scene);
+  const rootEntity = scene.createRootEntity();
+
+  const cameraEntity = rootEntity.createChild("window-camera");
+  const camera = cameraEntity.addComponent(Camera);
+  camera.enablePostProcess = true;
+  // camera.clearFlags = CameraClearFlags.None;
+
+  // @ts-ignore
+  const bloomEffect = scene._postProcessManager._bloomEffect;
+  // @ts-ignore
+  const tonemappingEffect = scene._postProcessManager._tonemappingEffect;
+
+  bloomEffect.enabled = true;
+  tonemappingEffect.enabled = true;
+  bloomEffect.threshold = 0.1;
+  bloomEffect.intensity = 2;
+  cameraEntity.transform.setPosition(0, 0, 20);
+
+  // Create cube
+  const cubeEntity = rootEntity.createChild("cube");
+  cubeEntity.transform.setPosition(2, 0, 3);
+  const renderer = cubeEntity.addComponent(MeshRenderer);
+  renderer.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2);
+  const material = new BlinnPhongMaterial(engine);
+  material.baseColor = new Color(1, 0, 0, 1);
+  material.emissiveColor.set(1, 0, 0, 1);
+  renderer.setMaterial(material);
+
+  return camera;
+}

e2e/case/multi-scene-no-clear.ts

@@ -0,0 +1,91 @@
+/**
+ * @title Multi scene no clear
+ * @category Advance
+ */
+import {
+  BlinnPhongMaterial,
+  Camera,
+  CameraClearFlags,
+  Color,
+  Engine,
+  Logger,
+  MeshRenderer,
+  PrimitiveMesh,
+  Scene,
+  WebGLEngine,
+  WebGLMode
+} from "@galacean/engine";
+import { initScreenshot, updateForE2E } from "./.mockForE2E";
+
+Logger.enable();
+WebGLEngine.create({
+  canvas: "canvas",
+  graphicDeviceOptions: {
+    webGLMode: WebGLMode.WebGL2
+  }
+}).then((engine) => {
+  engine.canvas.resizeByClientSize();
+
+  const firstCamera = initFirstScene(engine);
+  const secondCamera = initSecondScene(engine);
+
+  updateForE2E(engine);
+  initScreenshot(engine, [firstCamera, secondCamera]);
+  // initScreenshot(engine, [secondCamera, firstCamera]);
+});
+
+function initFirstScene(engine: Engine): Camera {
+  const scene = engine.sceneManager.scenes[0];
+  const rootEntity = scene.createRootEntity();
+
+  // Create full screen camera
+  const cameraEntity = rootEntity.createChild("fullscreen-camera");
+  const camera = cameraEntity.addComponent(Camera);
+  cameraEntity.transform.setPosition(0, 0, 20);
+
+  // Create cube
+  const cubeEntity = rootEntity.createChild("cube");
+  cubeEntity.transform.setPosition(-2, 0, 3);
+  const renderer = cubeEntity.addComponent(MeshRenderer);
+  renderer.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2);
+  const material = new BlinnPhongMaterial(engine);
+  material.baseColor = new Color(1, 0, 0, 1);
+  renderer.setMaterial(material);
+
+  return camera;
+}
+
+function initSecondScene(engine: Engine): Camera {
+  // Init window camera
+  const scene = new Scene(engine);
+  engine.sceneManager.addScene(scene);
+  const rootEntity = scene.createRootEntity();
+
+  const cameraEntity = rootEntity.createChild("window-camera");
+  const camera = cameraEntity.addComponent(Camera);
+  camera.enablePostProcess = true;
+  camera.clearFlags = CameraClearFlags.None;
+
+  // @ts-ignore
+  const bloomEffect = scene._postProcessManager._bloomEffect;
+  // @ts-ignore
+  const tonemappingEffect = scene._postProcessManager._tonemappingEffect;
+
+  bloomEffect.enabled = true;
+  tonemappingEffect.enabled = true;
+  bloomEffect.threshold = 0.1;
+  bloomEffect.intensity = 2;
+  cameraEntity.transform.setPosition(0, 0, 20);
+
+  // Create cube
+  const cubeEntity = rootEntity.createChild("cube");
+  cubeEntity.transform.setPosition(2, 0, 3);
+  const renderer = cubeEntity.addComponent(MeshRenderer);
+  renderer.mesh = PrimitiveMesh.createCuboid(engine, 2, 2, 2);
+  const material = new BlinnPhongMaterial(engine);
+  material.baseColor = new Color(1, 0, 0, 1);
+  material.emissiveColor.set(1, 0, 0, 1);
+  renderer.setMaterial(material);
+
+  return camera;
+}

e2e/config.ts

@@ -230,6 +230,21 @@ export const E2E_CONFIG = {
       category: "Advance",
       caseFileName: "project-loader",
       threshold: 0.4
+    },
+    MultiSceneClear: {
+      category: "Advance",
+      caseFileName: "multi-scene-clear",
+      threshold: 0.2
+    },
+    MultiSceneNoClear: {
+      category: "Advance",
+      caseFileName: "multi-scene-no-clear",
+      threshold: 0.2
+    },
+    MultiCameraNoClear: {
+      category: "Advance",
+      caseFileName: "multi-camera-no-clear",
+      threshold: 0.2
     }
   }
 };

packages/core/src/Camera.ts

@@ -83,7 +83,7 @@ export class Camera extends Component {
   /**
    * Multi-sample anti-aliasing samples when use independent canvas mode.
    *
-   * @remarks The `independentCanvasEnabled` property should be `true` to take effect, otherwise it will be invalid.
+   * @remarks It will take effect when `independentCanvasEnabled` property is `true`, otherwise it will be invalid.
    */
   msaaSamples: MSAASamples = MSAASamples.None;
 
@@ -162,15 +162,19 @@ export class Camera extends Component {
 
   /**
    * Whether independent canvas is enabled.
-   *
    * @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)) {
+    // Uber pass need internal RT
+    if (this.enablePostProcess && this.scene._postProcessManager.hasActiveEffect) {
       return true;
     }
 
-    return this.opaqueTextureEnabled && !this._renderTarget;
+    if (this.enableHDR || this.opaqueTextureEnabled) {
+      return this._getInternalColorTextureFormat() !== this.renderTarget?.getColorTexture(0).format;
+    }
+
+    return false;
   }
 
   /**