Fix clear flag of internal render target

e2e/case/.mockForE2E.ts

@@ -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);
 
-  // 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,83 @@
+/**
+ * @title Multi camera no clear
+ * @category Advance
+ */
+import {
+  BlinnPhongMaterial,
+  Camera,
+  CameraClearFlags,
+  Color,
+  Engine,
+  Layer,
+  Logger,
+  MeshRenderer,
+  PrimitiveMesh,
+  Scene,
+  WebGLEngine
+} from "@galacean/engine";
+import { initScreenshot, updateForE2E } from "./.mockForE2E";
+
+Logger.enable();
+WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
+  engine.canvas.resizeByClientSize();
+
+  initFirstScene(engine);
+  engine.run();
+});
+
+function initFirstScene(engine: Engine): Scene {
+  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);
+  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.cullingMask = Layer.Layer1;
+    camera2.enablePostProcess = true;
+    camera2.enableHDR = true;
+    camera2.clearFlags = CameraClearFlags.None;
+    // camera.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,85 @@
+/**
+ * @title Multi scene no 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/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/RenderPipeline/BasicRenderPipeline.ts

@@ -164,7 +164,16 @@ export class BasicRenderPipeline {
     rhi.activeRenderTarget(colorTarget, colorViewport, context.flipProjection, mipLevel, cubeFace);
     const clearFlags = camera.clearFlags & ~(ignoreClear ?? CameraClearFlags.None);
     const color = background.solidColor;
-    if (clearFlags !== CameraClearFlags.None) {
+
+    if (internalColorTarget) {
+      if (clearFlags === CameraClearFlags.All) {
+        rhi.clearRenderTarget(camera.engine, CameraClearFlags.All, color);
+      } else {
+        clearFlags !== CameraClearFlags.None && rhi.clearRenderTarget(camera.engine, clearFlags, color);
+        rhi.blitFrameBufferToInternalRT(camera.renderTarget, internalColorTarget, clearFlags, camera.viewport);
+        rhi.activeRenderTarget(colorTarget, colorViewport, context.flipProjection, mipLevel, cubeFace);
+      }
+    } else if (clearFlags !== CameraClearFlags.None) {
       rhi.clearRenderTarget(camera.engine, clearFlags, color);
     }
 
@@ -201,6 +210,7 @@ export class BasicRenderPipeline {
       postProcessManager._render(context, internalColorTarget, cameraRenderTarget);
     } else if (internalColorTarget) {
       internalColorTarget._blitRenderTarget();
+
       PipelineUtils.blitTexture(
         engine,
         <Texture2D>internalColorTarget.getColorTexture(0),