Fix scene not clearing in some Default Rendering Pipeline with multicamera cases

packages/dev/core/src/PostProcesses/RenderPipeline/Pipelines/defaultRenderingPipeline.ts

@@ -553,6 +553,8 @@ export class DefaultRenderingPipeline extends PostProcessRenderPipeline implemen
     }
 
     private _depthOfFieldSceneObserver: Nullable<Observer<Scene>> = null;
+    private _activeCameraChangedObserver: Nullable<Observer<Scene>> = null;
+    private _activeCamerasChangedObserver: Nullable<Observer<Scene>> = null;
 
     private _buildPipeline() {
         if (!this._buildAllowed) {
@@ -689,9 +691,24 @@ export class DefaultRenderingPipeline extends PostProcessRenderPipeline implemen
         }
 
         // In multicamera mode, the scene needs to autoclear in between cameras.
-        if (this._scene.activeCameras && this._scene.activeCameras.length > 1) {
+        if ((this._scene.activeCameras && this._scene.activeCameras.length > 1) || (this._scene.activeCamera && this.cameras.indexOf(this._scene.activeCamera) === -1)) {
             this._scene.autoClear = true;
         }
+        // The active camera on the scene can be changed anytime
+        if (!this._activeCameraChangedObserver) {
+            this._activeCameraChangedObserver = this._scene.onActiveCameraChanged.add(() => {
+                if (this._scene.activeCamera && this.cameras.indexOf(this._scene.activeCamera) === -1) {
+                    this._scene.autoClear = true;
+                }
+            });
+        }
+        if (!this._activeCamerasChangedObserver) {
+            this._activeCamerasChangedObserver = this._scene.onActiveCamerasChanged.add(() => {
+                if (this._scene.activeCameras && this._scene.activeCameras.length > 1) {
+                    this._scene.autoClear = true;
+                }
+            });
+        }
 
         if (!this._enableMSAAOnFirstPostProcess(this.samples) && this.samples > 1) {
             Logger.Warn("MSAA failed to enable, MSAA is only supported in browsers that support webGL >= 2.0");
@@ -787,6 +804,14 @@ export class DefaultRenderingPipeline extends PostProcessRenderPipeline implemen
             this._scene.getEngine().onResizeObservable.remove(this._resizeObserver);
             this._resizeObserver = null;
         }
+        if (this._activeCameraChangedObserver) {
+            this._scene.onActiveCameraChanged.remove(this._activeCameraChangedObserver);
+            this._activeCameraChangedObserver = null;
+        }
+        if (this._activeCamerasChangedObserver) {
+            this._scene.onActiveCamerasChanged.remove(this._activeCamerasChangedObserver);
+            this._activeCamerasChangedObserver = null;
+        }
         this._scene.imageProcessingConfiguration.onUpdateParameters.remove(this._imageProcessingConfigurationObserver);
         super.dispose();
     }

packages/dev/core/src/scene.ts

@@ -654,6 +654,11 @@ export class Scene extends AbstractScene implements IAnimatable, IClipPlanesHold
      */
     public onActiveCameraChanged = new Observable<Scene>();
 
+    /**
+     * An event triggered when the activeCameras property is updated
+     */
+    public onActiveCamerasChanged = new Observable<Scene>();
+
     /**
      * This Observable will be triggered before rendering each renderingGroup of each rendered camera.
      * The RenderingGroupInfo class contains all the information about the context in which the observable is called
@@ -1012,8 +1017,39 @@ export class Scene extends AbstractScene implements IAnimatable, IClipPlanesHold
         return this._lightsEnabled;
     }
 
+    private _activeCameras: Nullable<Camera[]> = new Array<Camera>();
     /** All of the active cameras added to this scene. */
-    public activeCameras: Nullable<Camera[]> = new Array<Camera>();
+    public get activeCameras(): Nullable<Camera[]> {
+        return this._activeCameras;
+    }
+
+    private _proxySet(target: Camera[], property: string | symbol, c: Camera) {
+        this.onActiveCamerasChanged.notifyObservers(this);
+        return Reflect.set(target, property, c);
+    }
+
+    private _proxyPush(target: Camera[], ...c: Camera[]) {
+        Array.prototype.push.apply(target, c);
+        this.onActiveCamerasChanged.notifyObservers(this);
+    }
+
+    private _makeObservableArray(array: Camera[]) {
+        const _proxyObject = {
+            set: (target: Camera[], property: string | symbol, c: Camera) => this._proxySet(target, property, c),
+            push: (target: Camera[], ...c: Camera[]) => this._proxyPush(target, ...c),
+        };
+
+        return new Proxy(array, _proxyObject);
+    }
+
+    public set activeCameras(cameras: Nullable<Camera[]>) {
+        if (cameras) {
+            this._activeCameras = this._makeObservableArray(cameras);
+        } else {
+            this._activeCameras = cameras;
+        }
+        this.onActiveCamerasChanged.notifyObservers(this);
+    }
 
     /** @hidden */
     public _activeCamera: Nullable<Camera>;