Fix issue when using multi-views and scene clear color is transparent

dist/preview release/what's new.md

@@ -145,6 +145,7 @@
 - Fix bones serialization to include their ids. This allows to retrieve bones (animation groups, etc.) once the scene has been re-serialized ([julien-moreau](https://github.com/julien-moreau))
 - Fix an issue with hand-detachment when using hand tracking in WebXR ([#9882](https://github.com/BabylonJS/Babylon.js/issues/9882)) ([RaananW](https://github.com/RaananW))
 - Fix issue with cursor and 'doNotHandleCursors' on GUI ([msDestiny14](https://github.com/msDestiny14))
+- Fix issue with multi-views when using a transparent scene clear color ([Popov72](https://github.com/Popov72))
 - Fix thin instances + animated bones not rendered in the depth renderer ([Popov72](https://github.com/Popov72))
 
 ## Breaking changes

src/Engines/Extensions/engine.views.ts

@@ -12,6 +12,8 @@ export class EngineView {
     target: HTMLCanvasElement;
     /** Defines an optional camera used to render the view (will use active camera else) */
     camera?: Camera;
+    /** Indicates if the destination view canvas should be cleared before copying the parent canvas. Can help if the scene clear color has alpha < 1 */
+    clearBeforeCopy?: boolean;
 }
 
 declare module "../../Engines/engine" {
@@ -35,9 +37,10 @@ declare module "../../Engines/engine" {
          * Register a new child canvas
          * @param canvas defines the canvas to register
          * @param camera defines an optional camera to use with this canvas (it will overwrite the scene.camera for this view)
+         * @param clearBeforeCopy Indicates if the destination view canvas should be cleared before copying the parent canvas. Can help if the scene clear color has alpha < 1
          * @returns the associated view
          */
-        registerView(canvas: HTMLCanvasElement, camera?: Camera): EngineView;
+        registerView(canvas: HTMLCanvasElement, camera?: Camera, clearBeforeCopy?: boolean): EngineView;
 
         /**
          * Remove a registered child canvas
@@ -52,7 +55,7 @@ Engine.prototype.getInputElement = function(): Nullable<HTMLElement> {
     return this.inputElement || this.getRenderingCanvas();
 };
 
-Engine.prototype.registerView = function(canvas: HTMLCanvasElement, camera?: Camera): EngineView {
+Engine.prototype.registerView = function(canvas: HTMLCanvasElement, camera?: Camera, clearBeforeCopy?: boolean): EngineView {
     if (!this.views) {
         this.views = [];
     }
@@ -69,7 +72,7 @@ Engine.prototype.registerView = function(canvas: HTMLCanvasElement, camera?: Cam
         canvas.height = masterCanvas.height;
     }
 
-    let newView = {target: canvas, camera: camera};
+    let newView = {target: canvas, camera, clearBeforeCopy};
     this.views.push(newView);
 
     if (camera) {
@@ -153,6 +156,9 @@ Engine.prototype._renderViews = function() {
         this._renderFrame();
 
         // Copy to target
+        if (view.clearBeforeCopy) {
+            context.clearRect(0, 0, parent.width, parent.height);
+        }
         context.drawImage(parent, 0, 0);
 
         // Restore