Nightly

dist/preview release/babylon.d.ts

@@ -18219,6 +18219,15 @@ declare module BABYLON {
              * Restores the webgl state to only draw on the main color attachment
              */
             restoreSingleAttachment(): void;
+            /**
+             * Clears a list of attachments
+             * @param attachments list of the attachments
+             * @param colorMain clear color for the main attachment (the first one)
+             * @param colorOthers clear color for the other attachments
+             * @param clearDepth true to clear the depth buffer. Used only for the first attachment
+             * @param clearStencil true to clear the stencil buffer. Used only for the first attachment
+             */
+            clearAttachments(attachments: number[], colorMain: Nullable<IColor4Like>, colorOthers: Nullable<IColor4Like>, clearDepth: boolean, clearStencil: boolean): void;
         }
 }
 declare module BABYLON {
@@ -22923,7 +22932,6 @@ declare module BABYLON {
         prePassRT: MultiRenderTarget;
         private _multiRenderAttachments;
         private _defaultAttachments;
-        private _clearAttachments;
         private _postProcesses;
         private readonly _clearColor;
         /**
@@ -44909,6 +44917,15 @@ declare module BABYLON {
          */
         clear(color: Nullable<IColor4Like>, backBuffer: boolean, depth: boolean, stencil?: boolean): void;
         /**
+         * Clears a list of attachments
+         * @param attachments list of the attachments
+         * @param colorMain clear color for the main attachment (the first one)
+         * @param colorOthers clear color for the other attachments
+         * @param clearDepth true to clear the depth buffer. Used only for the first attachment
+         * @param clearStencil true to clear the stencil buffer. Used only for the first attachment
+         */
+        clearAttachments(attachments: number[], colorMain: Nullable<IColor4Like>, colorOthers: Nullable<IColor4Like>, clearDepth: boolean, clearStencil: boolean): void;
+        /**
          * Creates a vertex buffer
          * @param data the data for the vertex buffer
          * @returns the new buffer

dist/preview release/babylon.max.js

@@ -32623,6 +32623,19 @@ _thinEngine__WEBPACK_IMPORTED_MODULE_3__["ThinEngine"].prototype.bindAttachments
     var gl = this._gl;
     gl.drawBuffers(attachments);
 };
+_thinEngine__WEBPACK_IMPORTED_MODULE_3__["ThinEngine"].prototype.clearAttachments = function (attachments, colorMain, colorOthers, clearDepth, clearStencil) {
+    if (attachments.length === 0) {
+        return;
+    }
+    var gl = this._gl;
+    gl.drawBuffers([attachments[0]]);
+    this.clear(colorMain, colorMain !== null, clearDepth, clearStencil);
+    var saveVal = attachments[0];
+    attachments[0] = gl.NONE;
+    gl.drawBuffers(attachments);
+    this.clear(colorOthers, colorOthers !== null, false, false);
+    attachments[0] = saveVal;
+};
 _thinEngine__WEBPACK_IMPORTED_MODULE_3__["ThinEngine"].prototype.unBindMultiColorAttachmentFramebuffer = function (textures, disableGenerateMipMaps, onBeforeUnbind) {
     if (disableGenerateMipMaps === void 0) { disableGenerateMipMaps = false; }
     this._currentRenderTarget = null;
@@ -32666,7 +32679,6 @@ _thinEngine__WEBPACK_IMPORTED_MODULE_3__["ThinEngine"].prototype.unBindMultiColo
     this._bindUnboundFramebuffer(null);
 };
 _thinEngine__WEBPACK_IMPORTED_MODULE_3__["ThinEngine"].prototype.createMultipleRenderTarget = function (size, options) {
-    var _a, _b, _c, _d;
     var generateMipMaps = false;
     var generateDepthBuffer = true;
     var generateStencilBuffer = false;
@@ -32719,13 +32731,13 @@ _thinEngine__WEBPACK_IMPORTED_MODULE_3__["ThinEngine"].prototype.createMultipleR
         textures.push(texture);
         attachments.push(attachment);
         gl.activeTexture(gl["TEXTURE" + i]);
-        gl.bindTexture(gl.TEXTURE_2D, (_a = texture._hardwareTexture) === null || _a === void 0 ? void 0 : _a.underlyingResource);
+        gl.bindTexture(gl.TEXTURE_2D, texture._hardwareTexture.underlyingResource);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filters.mag);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filters.min);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
         gl.texImage2D(gl.TEXTURE_2D, 0, this._getRGBABufferInternalSizedFormat(type), width, height, 0, gl.RGBA, this._getWebGLTextureType(type), null);
-        gl.framebufferTexture2D(gl.DRAW_FRAMEBUFFER, attachment, gl.TEXTURE_2D, (_b = texture._hardwareTexture) === null || _b === void 0 ? void 0 : _b.underlyingResource, 0);
+        gl.framebufferTexture2D(gl.DRAW_FRAMEBUFFER, attachment, gl.TEXTURE_2D, texture._hardwareTexture.underlyingResource, 0);
         if (generateMipMaps) {
             this._gl.generateMipmap(this._gl.TEXTURE_2D);
         }
@@ -32752,13 +32764,13 @@ _thinEngine__WEBPACK_IMPORTED_MODULE_3__["ThinEngine"].prototype.createMultipleR
         // Depth texture
         var depthTexture = new _Materials_Textures_internalTexture__WEBPACK_IMPORTED_MODULE_0__["InternalTexture"](this, _Materials_Textures_internalTexture__WEBPACK_IMPORTED_MODULE_0__["InternalTextureSource"].MultiRenderTarget);
         gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, (_c = depthTexture._hardwareTexture) === null || _c === void 0 ? void 0 : _c.underlyingResource);
+        gl.bindTexture(gl.TEXTURE_2D, depthTexture._hardwareTexture.underlyingResource);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
         gl.texImage2D(gl.TEXTURE_2D, 0, this.webGLVersion < 2 ? gl.DEPTH_COMPONENT : gl.DEPTH_COMPONENT16, width, height, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null);
-        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, (_d = depthTexture._hardwareTexture) === null || _d === void 0 ? void 0 : _d.underlyingResource, 0);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, depthTexture._hardwareTexture.underlyingResource, 0);
         depthTexture._framebuffer = framebuffer;
         depthTexture.baseWidth = width;
         depthTexture.baseHeight = height;
@@ -33719,7 +33731,6 @@ __webpack_require__.r(__webpack_exports__);
 
 
 _thinEngine__WEBPACK_IMPORTED_MODULE_5__["ThinEngine"].prototype.createRenderTargetTexture = function (size, options) {
-    var _a;
     var fullOptions = new _Materials_Textures_renderTargetCreationOptions__WEBPACK_IMPORTED_MODULE_3__["RenderTargetCreationOptions"]();
     if (options !== undefined && typeof options === "object") {
         fullOptions.generateMipMaps = options.generateMipMaps;
@@ -33784,7 +33795,7 @@ _thinEngine__WEBPACK_IMPORTED_MODULE_5__["ThinEngine"].prototype.createRenderTar
     texture._depthStencilBuffer = this._setupFramebufferDepthAttachments(fullOptions.generateStencilBuffer ? true : false, fullOptions.generateDepthBuffer, width, height);
     // No need to rebind on every frame
     if (!texture.is2DArray) {
-        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, (_a = texture._hardwareTexture) === null || _a === void 0 ? void 0 : _a.underlyingResource, 0);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture._hardwareTexture.underlyingResource, 0);
     }
     this._bindUnboundFramebuffer(currentFrameBuffer);
     texture._framebuffer = framebuffer;
@@ -43023,14 +43034,13 @@ var NativeEngine = /** @class */ (function (_super) {
         }
         else {
             var onload_1 = function (data) {
-                var _a;
-                var webGLTexture = (_a = texture._hardwareTexture) === null || _a === void 0 ? void 0 : _a.underlyingResource;
-                if (!webGLTexture) {
+                if (!texture._hardwareTexture) {
                     if (scene) {
                         scene._removePendingData(texture);
                     }
                     return;
                 }
+                var webGLTexture = texture._hardwareTexture.underlyingResource;
                 _this._native.loadTexture(webGLTexture, data, !noMipmap, invertY, function () {
                     texture.baseWidth = _this._native.getTextureWidth(webGLTexture);
                     texture.baseHeight = _this._native.getTextureHeight(webGLTexture);
@@ -43244,10 +43254,9 @@ var NativeEngine = /** @class */ (function (_super) {
         return texture;
     };
     NativeEngine.prototype.updateTextureSamplingMode = function (samplingMode, texture) {
-        var _a, _b, _c;
-        if ((_b = (_a = texture._hardwareTexture) === null || _a === void 0 ? void 0 : _a.underlyingResource) !== null && _b !== void 0 ? _b : false) {
+        if (texture._hardwareTexture) {
             var filter = this._getNativeSamplingMode(samplingMode);
-            this._native.setTextureSampling((_c = texture._hardwareTexture) === null || _c === void 0 ? void 0 : _c.underlyingResource, filter);
+            this._native.setTextureSampling(texture._hardwareTexture.underlyingResource, filter);
         }
         texture.samplingMode = samplingMode;
     };
@@ -43302,7 +43311,6 @@ var NativeEngine = /** @class */ (function (_super) {
     };
     // TODO: Refactor to share more logic with base Engine implementation.
     NativeEngine.prototype._setTexture = function (channel, texture, isPartOfTextureArray, depthStencilTexture) {
-        var _a, _b, _c;
         if (isPartOfTextureArray === void 0) { isPartOfTextureArray = false; }
         if (depthStencilTexture === void 0) { depthStencilTexture = false; }
         var uniform = this._boundUniforms[channel];
@@ -43347,25 +43355,24 @@ var NativeEngine = /** @class */ (function (_super) {
         }
         this._activeChannel = channel;
         if (!internalTexture ||
-            !((_a = internalTexture._hardwareTexture) === null || _a === void 0 ? void 0 : _a.underlyingResource)) {
+            !internalTexture._hardwareTexture) {
             return false;
         }
-        this._native.setTextureWrapMode((_b = internalTexture._hardwareTexture) === null || _b === void 0 ? void 0 : _b.underlyingResource, this._getAddressMode(texture.wrapU), this._getAddressMode(texture.wrapV), this._getAddressMode(texture.wrapR));
+        this._native.setTextureWrapMode(internalTexture._hardwareTexture.underlyingResource, this._getAddressMode(texture.wrapU), this._getAddressMode(texture.wrapV), this._getAddressMode(texture.wrapR));
         this._updateAnisotropicLevel(texture);
-        this._native.setTexture(uniform, (_c = internalTexture._hardwareTexture) === null || _c === void 0 ? void 0 : _c.underlyingResource);
+        this._native.setTexture(uniform, internalTexture._hardwareTexture.underlyingResource);
         return true;
     };
     // TODO: Share more of this logic with the base implementation.
     // TODO: Rename to match naming in base implementation once refactoring allows different parameters.
     NativeEngine.prototype._updateAnisotropicLevel = function (texture) {
-        var _a, _b;
         var internalTexture = texture.getInternalTexture();
         var value = texture.anisotropicFilteringLevel;
-        if (!internalTexture || !((_a = internalTexture._hardwareTexture) === null || _a === void 0 ? void 0 : _a.underlyingResource)) {
+        if (!internalTexture || !internalTexture._hardwareTexture) {
             return;
         }
         if (internalTexture._cachedAnisotropicFilteringLevel !== value) {
-            this._native.setTextureAnisotropicLevel((_b = internalTexture._hardwareTexture) === null || _b === void 0 ? void 0 : _b.underlyingResource, value);
+            this._native.setTextureAnisotropicLevel(internalTexture._hardwareTexture.underlyingResource, value);
             internalTexture._cachedAnisotropicFilteringLevel = value;
         }
     };
@@ -45594,6 +45601,7 @@ var ThinEngine = /** @class */ (function () {
      * @param layer defines the 2d array index to bind to frame buffer to
      */
     ThinEngine.prototype.bindFramebuffer = function (texture, faceIndex, requiredWidth, requiredHeight, forceFullscreenViewport, lodLevel, layer) {
+        var _a, _b, _c, _d, _e;
         if (faceIndex === void 0) { faceIndex = 0; }
         if (lodLevel === void 0) { lodLevel = 0; }
         if (layer === void 0) { layer = 0; }
@@ -45604,22 +45612,22 @@ var ThinEngine = /** @class */ (function () {
         this._bindUnboundFramebuffer(texture._MSAAFramebuffer ? texture._MSAAFramebuffer : texture._framebuffer);
         var gl = this._gl;
         if (texture.is2DArray) {
-            gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, texture._hardwareTexture.underlyingResource, lodLevel, layer);
+            gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, (_a = texture._hardwareTexture) === null || _a === void 0 ? void 0 : _a.underlyingResource, lodLevel, layer);
         }
         else if (texture.isCube) {
-            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, texture._hardwareTexture.underlyingResource, lodLevel);
+            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, (_b = texture._hardwareTexture) === null || _b === void 0 ? void 0 : _b.underlyingResource, lodLevel);
         }
         var depthStencilTexture = texture._depthStencilTexture;
         if (depthStencilTexture) {
             var attachment = (depthStencilTexture._generateStencilBuffer) ? gl.DEPTH_STENCIL_ATTACHMENT : gl.DEPTH_ATTACHMENT;
             if (texture.is2DArray) {
-                gl.framebufferTextureLayer(gl.FRAMEBUFFER, attachment, depthStencilTexture._hardwareTexture.underlyingResource, lodLevel, layer);
+                gl.framebufferTextureLayer(gl.FRAMEBUFFER, attachment, (_c = depthStencilTexture._hardwareTexture) === null || _c === void 0 ? void 0 : _c.underlyingResource, lodLevel, layer);
             }
             else if (texture.isCube) {
-                gl.framebufferTexture2D(gl.FRAMEBUFFER, attachment, gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, depthStencilTexture._hardwareTexture.underlyingResource, lodLevel);
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, attachment, gl.TEXTURE_CUBE_MAP_POSITIVE_X + faceIndex, (_d = depthStencilTexture._hardwareTexture) === null || _d === void 0 ? void 0 : _d.underlyingResource, lodLevel);
             }
             else {
-                gl.framebufferTexture2D(gl.FRAMEBUFFER, attachment, gl.TEXTURE_2D, depthStencilTexture._hardwareTexture.underlyingResource, lodLevel);
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, attachment, gl.TEXTURE_2D, (_e = depthStencilTexture._hardwareTexture) === null || _e === void 0 ? void 0 : _e.underlyingResource, lodLevel);
             }
         }
         if (this._cachedViewport && !forceFullscreenViewport) {
@@ -47489,7 +47497,7 @@ var ThinEngine = /** @class */ (function () {
         if (!gl) {
             return;
         }
-        if (!texture._hardwareTexture.underlyingResource) {
+        if (!texture._hardwareTexture) {
             //  this.resetTextureCache();
             if (scene) {
                 scene._removePendingData(texture);
@@ -47613,6 +47621,7 @@ var ThinEngine = /** @class */ (function () {
     };
     /** @hidden */
     ThinEngine.prototype._bindTextureDirectly = function (target, texture, forTextureDataUpdate, force) {
+        var _a, _b;
         if (forTextureDataUpdate === void 0) { forTextureDataUpdate = false; }
         if (force === void 0) { force = false; }
         var wasPreviouslyBound = false;
@@ -47627,7 +47636,7 @@ var ThinEngine = /** @class */ (function () {
                 this._gl.bindTexture(target, texture ? texture._colorTextureArray : null);
             }
             else {
-                this._gl.bindTexture(target, texture ? texture._hardwareTexture.underlyingResource : null);
+                this._gl.bindTexture(target, (_b = (_a = texture === null || texture === void 0 ? void 0 : texture._hardwareTexture) === null || _a === void 0 ? void 0 : _a.underlyingResource) !== null && _b !== void 0 ? _b : null);
             }
             this._boundTexturesCache[this._activeChannel] = texture;
             if (texture) {
@@ -48962,6 +48971,9 @@ var WebGPUEngine = /** @class */ (function (_super) {
             return false;
         }
         if (this.dbgVerboseLogsForFirstFrames) {
+            if (this._count === undefined) {
+                this._count = 0;
+            }
             if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
                 console.log("frame #" + this._count + " - setSize called -", width, height);
             }
@@ -49042,6 +49054,9 @@ var WebGPUEngine = /** @class */ (function (_super) {
             this._viewportsCurrent[index].h = h;
             renderPass.setViewport(x, y, w, h, 0, 1);
             if (this.dbgVerboseLogsForFirstFrames) {
+                if (this._count === undefined) {
+                    this._count = 0;
+                }
                 if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
                     console.log("frame #" + this._count + " - viewport applied - (", x, y, w, h, ") current pass is main pass=" + (renderPass === this._mainRenderPassWrapper.renderPass));
                 }
@@ -49072,6 +49087,9 @@ var WebGPUEngine = /** @class */ (function (_super) {
             this._scissorsCurrent[index].h = h;
             renderPass.setScissorRect(x, y, w, h);
             if (this.dbgVerboseLogsForFirstFrames) {
+                if (this._count === undefined) {
+                    this._count = 0;
+                }
                 if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
                     console.log("frame #" + this._count + " - scissor applied - (", x, y, w, h, ") current pass is main pass=" + (renderPass === this._mainRenderPassWrapper.renderPass));
                 }
@@ -49110,6 +49128,9 @@ var WebGPUEngine = /** @class */ (function (_super) {
             color.a = 1;
         }
         if (this.dbgVerboseLogsForFirstFrames) {
+            if (this._count === undefined) {
+                this._count = 0;
+            }
             if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
                 console.log("frame #" + this._count + " - clear called - backBuffer=", backBuffer, " depth=", depth, " stencil=", stencil);
             }
@@ -49119,12 +49140,29 @@ var WebGPUEngine = /** @class */ (function (_super) {
             if (this._currentRenderPass) {
                 this._endRenderTargetRenderPass();
             }
-            this._startRenderTargetRenderPass(this._currentRenderTarget, backBuffer ? color : null, depth, stencil);
+            this._startRenderTargetRenderPass(this._currentRenderTarget, backBuffer ? color : null, backBuffer ? color : null, depth, stencil);
         }
         else {
             this._startMainRenderPass(true, backBuffer ? color : null, depth, stencil);
         }
     };
+    /**
+     * Clears a list of attachments
+     * @param attachments list of the attachments
+     * @param colorMain clear color for the main attachment (the first one)
+     * @param colorOthers clear color for the other attachments
+     * @param clearDepth true to clear the depth buffer. Used only for the first attachment
+     * @param clearStencil true to clear the stencil buffer. Used only for the first attachment
+     */
+    WebGPUEngine.prototype.clearAttachments = function (attachments, colorMain, colorOthers, clearDepth, clearStencil) {
+        if (attachments.length === 0 || !this._currentRenderTarget) {
+            return;
+        }
+        if (this._currentRenderPass) {
+            this._endRenderTargetRenderPass();
+        }
+        this._startRenderTargetRenderPass(this._currentRenderTarget, colorMain, colorOthers, clearDepth, clearStencil);
+    };
     //------------------------------------------------------------------------------
     //                              Vertex/Index Buffers
     //------------------------------------------------------------------------------
@@ -50022,6 +50060,9 @@ var WebGPUEngine = /** @class */ (function (_super) {
         }
         else {
             if (this.dbgVerboseLogsForFirstFrames) {
+                if (this._count === undefined) {
+                    this._count = 0;
+                }
                 if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
                     console.log("frame #" + this._count + " - _setTexture called with a null _currentEffect! texture=", texture);
                 }
@@ -50065,6 +50106,9 @@ var WebGPUEngine = /** @class */ (function (_super) {
         var format = texture._hardwareTexture.format;
         var mipmapCount = _WebGPU_webgpuTextureHelper__WEBPACK_IMPORTED_MODULE_14__["WebGPUTextureHelper"].ComputeNumMipmapLevels(texture.width, texture.height);
         if (this.dbgVerboseLogsForFirstFrames) {
+            if (this._count === undefined) {
+                this._count = 0;
+            }
             if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
                 console.log("frame #" + this._count + " - generate mipmaps called - width=", texture.width, "height=", texture.height, "isCube=", texture.isCube);
             }
@@ -50656,6 +50700,9 @@ var WebGPUEngine = /** @class */ (function (_super) {
         this._endMainRenderPass();
         this.flushFramebuffer();
         if (this.dbgVerboseLogsForFirstFrames) {
+            if (this._count === undefined) {
+                this._count = 0;
+            }
             if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
                 console.log("frame #" + this._count + " - counters - numPipelineDescriptorCreation=", this._counters.numPipelineDescriptorCreation, ", numBindGroupsCreation=", this._counters.numBindGroupsCreation, ", numVertexInputCacheCreation=", this._counters.numVertexInputCacheCreation);
             }
@@ -50664,6 +50711,9 @@ var WebGPUEngine = /** @class */ (function (_super) {
         this._bufferManager.destroyDeferredBuffers();
         if (this._features._collectUbosUpdatedInFrame) {
             if (this.dbgVerboseLogsForFirstFrames) {
+                if (this._count === undefined) {
+                    this._count = 0;
+                }
                 if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
                     var list = [];
                     for (var name_1 in _Materials_uniformBuffer__WEBPACK_IMPORTED_MODULE_17__["UniformBuffer"]._updatedUbosInFrame) {
@@ -50680,6 +50730,9 @@ var WebGPUEngine = /** @class */ (function (_super) {
         this._pendingDebugCommands.length = 0;
         _super.prototype.endFrame.call(this);
         if (this.dbgVerboseLogsForFirstFrames) {
+            if (this._count === undefined) {
+                this._count = 0;
+            }
             if (this._count < this.dbgVerboseLogsNumFrames) {
                 console.log("%c frame #" + this._count + " - end", "background: #ffff00");
             }
@@ -50719,7 +50772,7 @@ var WebGPUEngine = /** @class */ (function (_super) {
         this._textureHelper.setCommandEncoder(this._uploadEncoder);
         // restart the render pass
         if (currentPassType === 1) {
-            this._startRenderTargetRenderPass(this._currentRenderTarget, null, false, false);
+            this._startRenderTargetRenderPass(this._currentRenderTarget, null, null, false, false);
         }
         else if (currentPassType === 2) {
             this._startMainRenderPass(false);
@@ -50728,7 +50781,7 @@ var WebGPUEngine = /** @class */ (function (_super) {
     //------------------------------------------------------------------------------
     //                              Render Pass
     //------------------------------------------------------------------------------
-    WebGPUEngine.prototype._startRenderTargetRenderPass = function (internalTexture, clearColor, clearDepth, clearStencil) {
+    WebGPUEngine.prototype._startRenderTargetRenderPass = function (internalTexture, clearColorMain, clearColorOtherAttachments, clearDepth, clearStencil) {
         var gpuWrapper = internalTexture._hardwareTexture;
         var gpuTexture = gpuWrapper.underlyingResource;
         var depthStencilTexture = internalTexture._depthStencilTexture;
@@ -50746,13 +50799,15 @@ var WebGPUEngine = /** @class */ (function (_super) {
                 var gpuMRTWrapper = mrtTexture === null || mrtTexture === void 0 ? void 0 : mrtTexture._hardwareTexture;
                 var gpuMRTTexture = gpuMRTWrapper === null || gpuMRTWrapper === void 0 ? void 0 : gpuMRTWrapper.underlyingResource;
                 if (gpuMRTWrapper && gpuMRTTexture) {
+                    var viewDescriptor = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])(Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({}, this._rttRenderPassWrapper.colorAttachmentViewDescriptor), { format: gpuMRTWrapper.format });
                     var gpuMSAATexture = gpuMRTWrapper.msaaTexture;
-                    var colorTextureView = gpuMRTTexture.createView(this._rttRenderPassWrapper.colorAttachmentViewDescriptor);
-                    var colorMSAATextureView = gpuMSAATexture === null || gpuMSAATexture === void 0 ? void 0 : gpuMSAATexture.createView(this._rttRenderPassWrapper.colorAttachmentViewDescriptor);
+                    var colorTextureView = gpuMRTTexture.createView(viewDescriptor);
+                    var colorMSAATextureView = gpuMSAATexture === null || gpuMSAATexture === void 0 ? void 0 : gpuMSAATexture.createView(viewDescriptor);
+                    var clearColor = i === 0 ? (clearColorMain ? clearColorMain : _WebGPU_webgpuConstants__WEBPACK_IMPORTED_MODULE_8__["LoadOp"].Load) : (clearColorOtherAttachments ? clearColorOtherAttachments : _WebGPU_webgpuConstants__WEBPACK_IMPORTED_MODULE_8__["LoadOp"].Load);
                     colorAttachments.push({
                         attachment: colorMSAATextureView ? colorMSAATextureView : colorTextureView,
                         resolveTarget: gpuMSAATexture ? colorTextureView : undefined,
-                        loadValue: clearColor !== null ? clearColor : _WebGPU_webgpuConstants__WEBPACK_IMPORTED_MODULE_8__["LoadOp"].Load,
+                        loadValue: clearColor,
                         storeOp: _WebGPU_webgpuConstants__WEBPACK_IMPORTED_MODULE_8__["StoreOp"].Store,
                     });
                 }
@@ -50767,7 +50822,7 @@ var WebGPUEngine = /** @class */ (function (_super) {
             colorAttachments.push({
                 attachment: colorMSAATextureView ? colorMSAATextureView : colorTextureView,
                 resolveTarget: gpuMSAATexture ? colorTextureView : undefined,
-                loadValue: clearColor !== null ? clearColor : _WebGPU_webgpuConstants__WEBPACK_IMPORTED_MODULE_8__["LoadOp"].Load,
+                loadValue: clearColorMain !== null ? clearColorMain : _WebGPU_webgpuConstants__WEBPACK_IMPORTED_MODULE_8__["LoadOp"].Load,
                 storeOp: _WebGPU_webgpuConstants__WEBPACK_IMPORTED_MODULE_8__["StoreOp"].Store,
             });
         }
@@ -50784,6 +50839,9 @@ var WebGPUEngine = /** @class */ (function (_super) {
         };
         this._rttRenderPassWrapper.renderPass = this._renderTargetEncoder.beginRenderPass(this._rttRenderPassWrapper.renderPassDescriptor);
         if (this.dbgVerboseLogsForFirstFrames) {
+            if (this._count === undefined) {
+                this._count = 0;
+            }
             if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
                 console.log("frame #" + this._count + " - render target begin pass - internalTexture.uniqueId=", internalTexture.uniqueId, this._rttRenderPassWrapper.renderPassDescriptor);
             }
@@ -50798,6 +50856,9 @@ var WebGPUEngine = /** @class */ (function (_super) {
         if (this._currentRenderPass) {
             this._currentRenderPass.endPass();
             if (this.dbgVerboseLogsForFirstFrames) {
+                if (this._count === undefined) {
+                    this._count = 0;
+                }
                 if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
                     console.log("frame #" + this._count + " - render target end pass - internalTexture.uniqueId=", (_a = this._currentRenderTarget) === null || _a === void 0 ? void 0 : _a.uniqueId);
                 }
@@ -50812,7 +50873,7 @@ var WebGPUEngine = /** @class */ (function (_super) {
     WebGPUEngine.prototype._getCurrentRenderPass = function () {
         if (this._currentRenderTarget && !this._currentRenderPass) {
             // delayed creation of the render target pass, but we now need to create it as we are requested the render pass
-            this._startRenderTargetRenderPass(this._currentRenderTarget, null, false, false);
+            this._startRenderTargetRenderPass(this._currentRenderTarget, null, null, false, false);
         }
         else if (!this._currentRenderPass) {
             this._startMainRenderPass(false);
@@ -50849,6 +50910,9 @@ var WebGPUEngine = /** @class */ (function (_super) {
             this._mainRenderPassWrapper.renderPassDescriptor.colorAttachments[0].attachment = this._swapChainTexture.createView();
         }
         if (this.dbgVerboseLogsForFirstFrames) {
+            if (this._count === undefined) {
+                this._count = 0;
+            }
             if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
                 console.log("frame #" + this._count + " - main begin pass - texture width=" + this._mainTextureExtends.width, " height=" + this._mainTextureExtends.height, this._mainRenderPassWrapper.renderPassDescriptor);
             }
@@ -50907,6 +50971,9 @@ var WebGPUEngine = /** @class */ (function (_super) {
         if (this._mainRenderPassWrapper.renderPass !== null) {
             this._mainRenderPassWrapper.renderPass.endPass();
             if (this.dbgVerboseLogsForFirstFrames) {
+                if (this._count === undefined) {
+                    this._count = 0;
+                }
                 if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
                     console.log("frame #" + this._count + " - main end pass");
                 }
@@ -50999,6 +51066,9 @@ var WebGPUEngine = /** @class */ (function (_super) {
             aspect: _WebGPU_webgpuConstants__WEBPACK_IMPORTED_MODULE_8__["TextureAspect"].All
         };
         if (this.dbgVerboseLogsForFirstFrames) {
+            if (this._count === undefined) {
+                this._count = 0;
+            }
             if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
                 console.log("frame #" + this._count + " - bindFramebuffer called - face=", faceIndex, "lodLevel=", lodLevel, "layer=", layer, this._rttRenderPassWrapper.colorAttachmentViewDescriptor, this._rttRenderPassWrapper.depthAttachmentViewDescriptor);
             }
@@ -51488,16 +51558,15 @@ var WebGPUEngine = /** @class */ (function (_super) {
                 if (index > 0) {
                     var mrtTexture = textureArray[index - 1];
                     var gpuMRTWrapper = mrtTexture === null || mrtTexture === void 0 ? void 0 : mrtTexture._hardwareTexture;
-                    var gpuMRTTexture = gpuMRTWrapper === null || gpuMRTWrapper === void 0 ? void 0 : gpuMRTWrapper.underlyingResource;
                     descriptors.push({
-                        format: (_a = gpuMRTTexture === null || gpuMRTTexture === void 0 ? void 0 : gpuMRTTexture.format) !== null && _a !== void 0 ? _a : this._colorFormat,
+                        format: (_a = gpuMRTWrapper === null || gpuMRTWrapper === void 0 ? void 0 : gpuMRTWrapper.format) !== null && _a !== void 0 ? _a : this._colorFormat,
                         alphaBlend: alphaBlend,
                         colorBlend: colorBlend,
                         writeMask: writeMask,
                     });
                 }
                 else {
-                    // TODO WEBGPU what to do when this._mrtAttachments[i] === 0? The corresponding texture should be bound as an "empty" texture
+                    descriptors.push(undefined); // TODO WEBGPU what to do when this._mrtAttachments[i] === 0? The corresponding texture should be bound as an "empty" texture
                 }
             }
         }
@@ -191372,7 +191441,6 @@ var PrePassRenderer = /** @class */ (function () {
             }
         }
         this._multiRenderAttachments = this._engine.buildTextureLayout(multiRenderLayout);
-        this._clearAttachments = this._engine.buildTextureLayout(clearLayout);
         this._defaultAttachments = this._engine.buildTextureLayout(defaultLayout);
     };
     PrePassRenderer.prototype._createCompositionEffect = function () {
@@ -191475,11 +191543,7 @@ var PrePassRenderer = /** @class */ (function () {
     PrePassRenderer.prototype.clear = function () {
         if (this._enabled) {
             this._bindFrameBuffer();
-            // Regular clear color with the scene clear color of the 1st attachment
-            this._engine.clear(this._scene.clearColor, this._scene.autoClear || this._scene.forceWireframe || this._scene.forcePointsCloud, this._scene.autoClearDepthAndStencil, this._scene.autoClearDepthAndStencil);
-            // Clearing other attachment with 0 on all other attachments
-            this._engine.bindAttachments(this._clearAttachments);
-            this._engine.clear(this._clearColor, true, false, false);
+            this._engine.clearAttachments(this._multiRenderAttachments, this._scene.autoClear || this._scene.forceWireframe || this._scene.forcePointsCloud ? this._scene.clearColor : null, this._clearColor, this._scene.autoClearDepthAndStencil, this._scene.autoClearDepthAndStencil);
             this._engine.bindAttachments(this._defaultAttachments);
         }
     };

dist/preview release/babylon.module.d.ts

@@ -18732,6 +18732,7 @@ declare module "babylonjs/Materials/Node/nodeMaterial" {
 declare module "babylonjs/Engines/Extensions/engine.multiRender" {
     import { InternalTexture } from "babylonjs/Materials/Textures/internalTexture";
     import { IMultiRenderTargetOptions } from "babylonjs/Materials/Textures/multiRenderTarget";
+    import { IColor4Like } from "babylonjs/Maths/math.like";
     import { Nullable } from "babylonjs/types";
     module "babylonjs/Engines/thinEngine" {
         interface ThinEngine {
@@ -18774,6 +18775,15 @@ declare module "babylonjs/Engines/Extensions/engine.multiRender" {
              * Restores the webgl state to only draw on the main color attachment
              */
             restoreSingleAttachment(): void;
+            /**
+             * Clears a list of attachments
+             * @param attachments list of the attachments
+             * @param colorMain clear color for the main attachment (the first one)
+             * @param colorOthers clear color for the other attachments
+             * @param clearDepth true to clear the depth buffer. Used only for the first attachment
+             * @param clearStencil true to clear the stencil buffer. Used only for the first attachment
+             */
+            clearAttachments(attachments: number[], colorMain: Nullable<IColor4Like>, colorOthers: Nullable<IColor4Like>, clearDepth: boolean, clearStencil: boolean): void;
         }
     }
 }
@@ -23780,7 +23790,6 @@ declare module "babylonjs/Rendering/prePassRenderer" {
         prePassRT: MultiRenderTarget;
         private _multiRenderAttachments;
         private _defaultAttachments;
-        private _clearAttachments;
         private _postProcesses;
         private readonly _clearColor;
         /**
@@ -46544,6 +46553,15 @@ declare module "babylonjs/Engines/webgpuEngine" {
          */
         clear(color: Nullable<IColor4Like>, backBuffer: boolean, depth: boolean, stencil?: boolean): void;
         /**
+         * Clears a list of attachments
+         * @param attachments list of the attachments
+         * @param colorMain clear color for the main attachment (the first one)
+         * @param colorOthers clear color for the other attachments
+         * @param clearDepth true to clear the depth buffer. Used only for the first attachment
+         * @param clearStencil true to clear the stencil buffer. Used only for the first attachment
+         */
+        clearAttachments(attachments: number[], colorMain: Nullable<IColor4Like>, colorOthers: Nullable<IColor4Like>, clearDepth: boolean, clearStencil: boolean): void;
+        /**
          * Creates a vertex buffer
          * @param data the data for the vertex buffer
          * @returns the new buffer
@@ -102698,6 +102716,15 @@ declare module BABYLON {
              * Restores the webgl state to only draw on the main color attachment
              */
             restoreSingleAttachment(): void;
+            /**
+             * Clears a list of attachments
+             * @param attachments list of the attachments
+             * @param colorMain clear color for the main attachment (the first one)
+             * @param colorOthers clear color for the other attachments
+             * @param clearDepth true to clear the depth buffer. Used only for the first attachment
+             * @param clearStencil true to clear the stencil buffer. Used only for the first attachment
+             */
+            clearAttachments(attachments: number[], colorMain: Nullable<IColor4Like>, colorOthers: Nullable<IColor4Like>, clearDepth: boolean, clearStencil: boolean): void;
         }
 }
 declare module BABYLON {
@@ -107402,7 +107429,6 @@ declare module BABYLON {
         prePassRT: MultiRenderTarget;
         private _multiRenderAttachments;
         private _defaultAttachments;
-        private _clearAttachments;
         private _postProcesses;
         private readonly _clearColor;
         /**
@@ -129388,6 +129414,15 @@ declare module BABYLON {
          */
         clear(color: Nullable<IColor4Like>, backBuffer: boolean, depth: boolean, stencil?: boolean): void;
         /**
+         * Clears a list of attachments
+         * @param attachments list of the attachments
+         * @param colorMain clear color for the main attachment (the first one)
+         * @param colorOthers clear color for the other attachments
+         * @param clearDepth true to clear the depth buffer. Used only for the first attachment
+         * @param clearStencil true to clear the stencil buffer. Used only for the first attachment
+         */
+        clearAttachments(attachments: number[], colorMain: Nullable<IColor4Like>, colorOthers: Nullable<IColor4Like>, clearDepth: boolean, clearStencil: boolean): void;
+        /**
          * Creates a vertex buffer
          * @param data the data for the vertex buffer
          * @returns the new buffer

dist/preview release/documentation.d.ts

@@ -18219,6 +18219,15 @@ declare module BABYLON {
              * Restores the webgl state to only draw on the main color attachment
              */
             restoreSingleAttachment(): void;
+            /**
+             * Clears a list of attachments
+             * @param attachments list of the attachments
+             * @param colorMain clear color for the main attachment (the first one)
+             * @param colorOthers clear color for the other attachments
+             * @param clearDepth true to clear the depth buffer. Used only for the first attachment
+             * @param clearStencil true to clear the stencil buffer. Used only for the first attachment
+             */
+            clearAttachments(attachments: number[], colorMain: Nullable<IColor4Like>, colorOthers: Nullable<IColor4Like>, clearDepth: boolean, clearStencil: boolean): void;
         }
 }
 declare module BABYLON {
@@ -22923,7 +22932,6 @@ declare module BABYLON {
         prePassRT: MultiRenderTarget;
         private _multiRenderAttachments;
         private _defaultAttachments;
-        private _clearAttachments;
         private _postProcesses;
         private readonly _clearColor;
         /**
@@ -44909,6 +44917,15 @@ declare module BABYLON {
          */
         clear(color: Nullable<IColor4Like>, backBuffer: boolean, depth: boolean, stencil?: boolean): void;
         /**
+         * Clears a list of attachments
+         * @param attachments list of the attachments
+         * @param colorMain clear color for the main attachment (the first one)
+         * @param colorOthers clear color for the other attachments
+         * @param clearDepth true to clear the depth buffer. Used only for the first attachment
+         * @param clearStencil true to clear the stencil buffer. Used only for the first attachment
+         */
+        clearAttachments(attachments: number[], colorMain: Nullable<IColor4Like>, colorOthers: Nullable<IColor4Like>, clearDepth: boolean, clearStencil: boolean): void;
+        /**
          * Creates a vertex buffer
          * @param data the data for the vertex buffer
          * @returns the new buffer

dist/preview release/inspector/babylon.inspector.bundle.max.js

@@ -52566,7 +52566,7 @@ var TextureCanvasManager = /** @class */ (function () {
                         return [4 /*yield*/, this._3DEngine.readPixels(0, 0, this._size.width, this._size.height)];
                     case 1:
                         bufferView = _b.sent();
-                        this._imageData = new Uint8Array(bufferView.buffer);
+                        this._imageData = new Uint8Array(bufferView.buffer, 0, bufferView.byteLength);
                         return [3 /*break*/, 3];
                     case 2:
                         this._imageData = this._2DCanvas.getContext('2d').getImageData(0, 0, this._size.width, this._size.height).data;
@@ -60775,7 +60775,7 @@ var TextureHelper = /** @class */ (function () {
                         return [4 /*yield*/, engine.readPixels(0, 0, width, height)];
                     case 1:
                         bufferView = _a.sent();
-                        data = new Uint8Array(bufferView.buffer);
+                        data = new Uint8Array(bufferView.buffer, 0, bufferView.byteLength);
                         if (!channels.R || !channels.G || !channels.B || !channels.A) {
                             for (i = 0; i < width * height * 4; i += 4) {
                                 // If alpha is the only channel, just display alpha across all channels

dist/preview release/nodeEditor/babylon.nodeEditor.max.js

@@ -65291,7 +65291,7 @@ var TextureLineComponent = /** @class */ (function (_super) {
                         return [4 /*yield*/, engine.readPixels(0, 0, width, height)];
                     case 1:
                         bufferView = _a.sent();
-                        data = new Uint8Array(bufferView.buffer);
+                        data = new Uint8Array(bufferView.buffer, 0, bufferView.byteLength);
                         if (!texture.isCube) {
                             if (!options.displayRed || !options.displayGreen || !options.displayBlue) {
                                 for (i = 0; i < width * height * 4; i += 4) {

dist/preview release/packagesSizeBaseLine.json

@@ -1 +1 @@
-{"thinEngineOnly":129508,"engineOnly":166584,"sceneOnly":519762,"minGridMaterial":693730,"minStandardMaterial":854639}
+{"thinEngineOnly":129721,"engineOnly":166797,"sceneOnly":519975,"minGridMaterial":693943,"minStandardMaterial":854658}

dist/preview release/viewer/babylon.module.d.ts

@@ -18732,6 +18732,7 @@ declare module "babylonjs/Materials/Node/nodeMaterial" {
 declare module "babylonjs/Engines/Extensions/engine.multiRender" {
     import { InternalTexture } from "babylonjs/Materials/Textures/internalTexture";
     import { IMultiRenderTargetOptions } from "babylonjs/Materials/Textures/multiRenderTarget";
+    import { IColor4Like } from "babylonjs/Maths/math.like";
     import { Nullable } from "babylonjs/types";
     module "babylonjs/Engines/thinEngine" {
         interface ThinEngine {
@@ -18774,6 +18775,15 @@ declare module "babylonjs/Engines/Extensions/engine.multiRender" {
              * Restores the webgl state to only draw on the main color attachment
              */
             restoreSingleAttachment(): void;
+            /**
+             * Clears a list of attachments
+             * @param attachments list of the attachments
+             * @param colorMain clear color for the main attachment (the first one)
+             * @param colorOthers clear color for the other attachments
+             * @param clearDepth true to clear the depth buffer. Used only for the first attachment
+             * @param clearStencil true to clear the stencil buffer. Used only for the first attachment
+             */
+            clearAttachments(attachments: number[], colorMain: Nullable<IColor4Like>, colorOthers: Nullable<IColor4Like>, clearDepth: boolean, clearStencil: boolean): void;
         }
     }
 }
@@ -23780,7 +23790,6 @@ declare module "babylonjs/Rendering/prePassRenderer" {
         prePassRT: MultiRenderTarget;
         private _multiRenderAttachments;
         private _defaultAttachments;
-        private _clearAttachments;
         private _postProcesses;
         private readonly _clearColor;
         /**
@@ -46544,6 +46553,15 @@ declare module "babylonjs/Engines/webgpuEngine" {
          */
         clear(color: Nullable<IColor4Like>, backBuffer: boolean, depth: boolean, stencil?: boolean): void;
         /**
+         * Clears a list of attachments
+         * @param attachments list of the attachments
+         * @param colorMain clear color for the main attachment (the first one)
+         * @param colorOthers clear color for the other attachments
+         * @param clearDepth true to clear the depth buffer. Used only for the first attachment
+         * @param clearStencil true to clear the stencil buffer. Used only for the first attachment
+         */
+        clearAttachments(attachments: number[], colorMain: Nullable<IColor4Like>, colorOthers: Nullable<IColor4Like>, clearDepth: boolean, clearStencil: boolean): void;
+        /**
          * Creates a vertex buffer
          * @param data the data for the vertex buffer
          * @returns the new buffer
@@ -102698,6 +102716,15 @@ declare module BABYLON {
              * Restores the webgl state to only draw on the main color attachment
              */
             restoreSingleAttachment(): void;
+            /**
+             * Clears a list of attachments
+             * @param attachments list of the attachments
+             * @param colorMain clear color for the main attachment (the first one)
+             * @param colorOthers clear color for the other attachments
+             * @param clearDepth true to clear the depth buffer. Used only for the first attachment
+             * @param clearStencil true to clear the stencil buffer. Used only for the first attachment
+             */
+            clearAttachments(attachments: number[], colorMain: Nullable<IColor4Like>, colorOthers: Nullable<IColor4Like>, clearDepth: boolean, clearStencil: boolean): void;
         }
 }
 declare module BABYLON {
@@ -107402,7 +107429,6 @@ declare module BABYLON {
         prePassRT: MultiRenderTarget;
         private _multiRenderAttachments;
         private _defaultAttachments;
-        private _clearAttachments;
         private _postProcesses;
         private readonly _clearColor;
         /**
@@ -129388,6 +129414,15 @@ declare module BABYLON {
          */
         clear(color: Nullable<IColor4Like>, backBuffer: boolean, depth: boolean, stencil?: boolean): void;
         /**
+         * Clears a list of attachments
+         * @param attachments list of the attachments
+         * @param colorMain clear color for the main attachment (the first one)
+         * @param colorOthers clear color for the other attachments
+         * @param clearDepth true to clear the depth buffer. Used only for the first attachment
+         * @param clearStencil true to clear the stencil buffer. Used only for the first attachment
+         */
+        clearAttachments(attachments: number[], colorMain: Nullable<IColor4Like>, colorOthers: Nullable<IColor4Like>, clearDepth: boolean, clearStencil: boolean): void;
+        /**
          * Creates a vertex buffer
          * @param data the data for the vertex buffer
          * @returns the new buffer