@babylonjs/core 5.0.0-alpha.57 → 5.0.0-alpha.60

package/Engines/webgpuEngine.d.ts

@@ -1,7 +1,7 @@
 import { Nullable, DataArray, IndicesArray, Immutable } from "../types";
 import { Engine } from "../Engines/engine";
 import { InstancingAttributeInfo } from "../Engines/instancingAttributeInfo";
-import { InternalTexture } from "../Materials/Textures/internalTexture";
+import { InternalTexture, InternalTextureSource } from "../Materials/Textures/internalTexture";
 import { IEffectCreationOptions, Effect } from "../Materials/effect";
 import { EffectFallbacks } from "../Materials/effectFallbacks";
 import { VertexBuffer } from "../Buffers/buffer";
@@ -29,6 +29,7 @@ import { Observable } from "../Misc/observable";
 import { TwgslOptions } from "./WebGPU/webgpuTintWASM";
 import { ExternalTexture } from "../Materials/Textures/externalTexture";
 import { ShaderLanguage } from "../Materials/shaderLanguage";
+import { InternalTextureCreationOptions, TextureSize } from "../Materials/Textures/textureCreationOptions";
 declare type RenderTargetWrapper = import("./renderTargetWrapper").RenderTargetWrapper;
 /**
  * Options to load the associated Glslang library
@@ -194,6 +195,8 @@ export declare class WebGPUEngine extends Engine {
     _counters: {
         numEnableEffects: number;
         numEnableDrawWrapper: number;
+        numBundleCreationNonCompatMode: number;
+        numBundleReuseNonCompatMode: number;
     };
     /**
      * Counters from last frame
@@ -201,6 +204,8 @@ export declare class WebGPUEngine extends Engine {
     readonly countersLastFrame: {
         numEnableEffects: number;
         numEnableDrawWrapper: number;
+        numBundleCreationNonCompatMode: number;
+        numBundleReuseNonCompatMode: number;
     };
     /**
      * Max number of uncaptured error messages to log
@@ -230,12 +235,15 @@ export declare class WebGPUEngine extends Engine {
     /** @hidden */
     _pendingDebugCommands: Array<[string, Nullable<string>]>;
     private _bundleList;
+    private _bundleListRenderTarget;
     /** @hidden */
     _onAfterUnbindFrameBufferObservable: Observable<WebGPUEngine>;
+    private _defaultDrawContext;
     private _defaultMaterialContext;
     /** @hidden */
+    _currentDrawContext: WebGPUDrawContext;
+    /** @hidden */
     _currentMaterialContext: WebGPUMaterialContext;
-    private _currentDrawContext;
     private _currentOverrideVertexBuffers;
     private _currentIndexBuffer;
     private __colorWrite;
@@ -324,12 +332,12 @@ export declare class WebGPUEngine extends Engine {
         version: string;
     };
     /**
-     * True to be in compatibility mode, meaning rendering in the same way than OpenGL.
-     * Setting the property to false will improve performances, but can lead to rendering artifacts.
-     * See @TODO WEBGPU DOC PAGE
-     * @hidden
+     * (WebGPU only) True (default) to be in compatibility mode, meaning rendering all existing scenes without artifacts (same rendering than WebGL).
+     * Setting the property to false will improve performances but may not work in some scenes if some precautions are not taken.
+     * See @TODO WEBGPU DOC PAGE for more details
      */
-    compatibilityMode: boolean;
+    get compatibilityMode(): boolean;
+    set compatibilityMode(mode: boolean);
     /** @hidden */
     get currentSampleCount(): number;
     /**
@@ -544,6 +552,16 @@ export declare class WebGPUEngine extends Engine {
     /** @hidden */
     _getRGBABufferInternalSizedFormat(type: number, format?: number): number;
     updateTextureComparisonFunction(texture: InternalTexture, comparisonFunction: number): void;
+    /**
+     * Creates an internal texture without binding it to a framebuffer
+     * @hidden
+     * @param size defines the size of the texture
+     * @param options defines the options used to create the texture
+     * @param delayGPUTextureCreation true to delay the texture creation the first time it is really needed. false to create it right away
+     * @param source source type of the texture
+     * @returns a new render target texture stored in an InternalTexture
+     */
+    _createInternalTexture(size: TextureSize, options: boolean | InternalTextureCreationOptions, delayGPUTextureCreation?: boolean, source?: InternalTextureSource): InternalTexture;
     /**
      * Usually called from Texture.ts.
      * Passed information to create a hardware texture
@@ -715,6 +733,7 @@ export declare class WebGPUEngine extends Engine {
      * @param zOffsetUnits defines the value to apply to zOffsetUnits (0 by default)
      */
     setState(culling: boolean, zOffset?: number, force?: boolean, reverseSide?: boolean, cullBackFaces?: boolean, stencil?: IStencilState, zOffsetUnits?: number): void;
+    private _applyRenderPassChanges;
     private _draw;
     /**
      * Draw a list of indexed primitives
@@ -776,6 +795,8 @@ export declare class WebGPUEngine extends Engine {
     /** @hidden */
     _unpackFlipY(value: boolean): void;
     /** @hidden */
+    _bindUnboundFramebuffer(framebuffer: Nullable<WebGLFramebuffer>): void;
+    /** @hidden */
     _getSamplingParameters(samplingMode: number, generateMipMaps: boolean): {
         min: number;
         mag: number;

package/Engines/webgpuEngine.js

@@ -3,7 +3,7 @@ import { Logger } from "../Misc/logger.js";
 import { IsWindowObjectExist } from '../Misc/domManagement.js';
 import { Color4 } from "../Maths/math.js";
 import { Engine } from "../Engines/engine.js";
-import { InternalTextureSource } from "../Materials/Textures/internalTexture.js";
+import { InternalTexture, InternalTextureSource } from "../Materials/Textures/internalTexture.js";
 import { Effect } from "../Materials/effect.js";
 import * as WebGPUConstants from './WebGPU/webgpuConstants.js';
 import { VertexBuffer } from "../Buffers/buffer.js";
@@ -68,6 +68,8 @@ var WebGPUEngine = /** @class */ (function (_super) {
         _this._counters = {
             numEnableEffects: 0,
             numEnableDrawWrapper: 0,
+            numBundleCreationNonCompatMode: 0,
+            numBundleReuseNonCompatMode: 0,
         };
         /**
          * Counters from last frame
@@ -75,6 +77,8 @@ var WebGPUEngine = /** @class */ (function (_super) {
         _this.countersLastFrame = {
             numEnableEffects: 0,
             numEnableDrawWrapper: 0,
+            numBundleCreationNonCompatMode: 0,
+            numBundleReuseNonCompatMode: 0,
         };
         /**
          * Max number of uncaptured error messages to log
@@ -113,13 +117,6 @@ var WebGPUEngine = /** @class */ (function (_super) {
         _this._snapshotRenderingRecordBundles = false;
         _this._snapshotRenderingPlayBundles = false;
         _this._snapshotRenderingMainPassBundleList = [];
-        /**
-         * True to be in compatibility mode, meaning rendering in the same way than OpenGL.
-         * Setting the property to false will improve performances, but can lead to rendering artifacts.
-         * See @TODO WEBGPU DOC PAGE
-         * @hidden
-         */
-        _this.compatibilityMode = true;
         //------------------------------------------------------------------------------
         //                              Dynamic WebGPU States
         //------------------------------------------------------------------------------
@@ -356,6 +353,21 @@ var WebGPUEngine = /** @class */ (function (_super) {
             version: "unknown version",
         };
     };
+    Object.defineProperty(WebGPUEngine.prototype, "compatibilityMode", {
+        /**
+         * (WebGPU only) True (default) to be in compatibility mode, meaning rendering all existing scenes without artifacts (same rendering than WebGL).
+         * Setting the property to false will improve performances but may not work in some scenes if some precautions are not taken.
+         * See @TODO WEBGPU DOC PAGE for more details
+         */
+        get: function () {
+            return this._compatibilityMode;
+        },
+        set: function (mode) {
+            this._compatibilityMode = mode;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(WebGPUEngine.prototype, "currentSampleCount", {
         /** @hidden */
         get: function () {
@@ -467,6 +479,7 @@ var WebGPUEngine = /** @class */ (function (_super) {
             _this._timestampQuery = new WebGPUTimestampQuery(_this._device, _this._bufferManager);
             _this._occlusionQuery = _this._device.createQuerySet ? new WebGPUOcclusionQuery(_this, _this._device, _this._bufferManager) : undefined;
             _this._bundleList = new WebGPUBundleList(_this._device);
+            _this._bundleListRenderTarget = new WebGPUBundleList(_this._device);
             if (_this.dbgVerboseLogsForFirstFrames) {
                 if (_this._count === undefined) {
                     _this._count = 0;
@@ -487,6 +500,8 @@ var WebGPUEngine = /** @class */ (function (_super) {
             _this._depthCullingState.depthMask = true;
             _this._textureHelper.setCommandEncoder(_this._uploadEncoder);
             _this._clearQuad = new WebGPUClearQuad(_this._device, _this, _this._emptyVertexBuffer);
+            _this._defaultDrawContext = _this.createDrawContext();
+            _this._currentDrawContext = _this._defaultDrawContext;
             _this._defaultMaterialContext = _this.createMaterialContext();
             _this._currentMaterialContext = _this._defaultMaterialContext;
             _this._initializeContextAndSwapChain();
@@ -596,6 +611,7 @@ var WebGPUEngine = /** @class */ (function (_super) {
             needsInvertingBitmap: false,
             useUBOBindingCache: false,
             needShaderCodeInlining: true,
+            needToAlwaysBindUniformBuffers: true,
             _collectUbosUpdatedInFrame: false,
         };
     };
@@ -755,6 +771,7 @@ var WebGPUEngine = /** @class */ (function (_super) {
     /** @hidden */
     WebGPUEngine.prototype.applyStates = function () {
         this._stencilStateComposer.apply();
+        this._cacheRenderPipeline.setAlphaBlendEnabled(this._alphaState.alphaBlend);
     };
     /**
      * Force the entire cache to be cleared
@@ -963,7 +980,7 @@ var WebGPUEngine = /** @class */ (function (_super) {
                     this._startRenderTargetRenderPass(this._currentRenderTarget, false, backBuffer ? color : null, depth, stencil);
                 }
                 if (!this.compatibilityMode) {
-                    this._bundleList.addItem(new WebGPURenderItemScissor(this._scissorCached.x, this._scissorCached.y, this._scissorCached.z, this._scissorCached.w));
+                    this._bundleListRenderTarget.addItem(new WebGPURenderItemScissor(this._scissorCached.x, this._scissorCached.y, this._scissorCached.z, this._scissorCached.w));
                 }
                 else {
                     this._applyScissor(this._currentRenderPass);
@@ -995,19 +1012,21 @@ var WebGPUEngine = /** @class */ (function (_super) {
     WebGPUEngine.prototype._clearFullQuad = function (clearColor, clearDepth, clearStencil) {
         var _a, _b, _c;
         var renderPass = !this.compatibilityMode ? null : this._getCurrentRenderPass();
+        var renderPassIndex = this._getCurrentRenderPassIndex();
+        var bundleList = renderPassIndex === 0 ? this._bundleList : this._bundleListRenderTarget;
         this._clearQuad.setColorFormat(this._colorFormat);
         this._clearQuad.setDepthStencilFormat(this._depthTextureFormat);
         this._clearQuad.setMRTAttachments((_a = this._cacheRenderPipeline.mrtAttachments) !== null && _a !== void 0 ? _a : [], (_b = this._cacheRenderPipeline.mrtTextureArray) !== null && _b !== void 0 ? _b : []);
         if (!this.compatibilityMode) {
-            this._bundleList.addItem(new WebGPURenderItemStencilRef(this._clearStencilValue));
+            bundleList.addItem(new WebGPURenderItemStencilRef(this._clearStencilValue));
         }
         else {
             renderPass.setStencilReference(this._clearStencilValue);
         }
         var bundle = this._clearQuad.clear(renderPass, clearColor, clearDepth, clearStencil, this.currentSampleCount);
         if (!this.compatibilityMode) {
-            this._bundleList.addBundle(bundle);
-            this._bundleList.addItem(new WebGPURenderItemStencilRef((_c = this._stencilStateComposer.funcRef) !== null && _c !== void 0 ? _c : 0));
+            bundleList.addBundle(bundle);
+            bundleList.addItem(new WebGPURenderItemStencilRef((_c = this._stencilStateComposer.funcRef) !== null && _c !== void 0 ? _c : 0));
             this._reportDrawCall();
         }
         else {
@@ -1259,7 +1278,7 @@ var WebGPUEngine = /** @class */ (function (_super) {
      * @returns the new context
      */
     WebGPUEngine.prototype.createDrawContext = function () {
-        return new WebGPUDrawContext();
+        return new WebGPUDrawContext(this._bufferManager);
     };
     /** @hidden */
     WebGPUEngine.prototype._preparePipelineContext = function (pipelineContext, vertexSourceCode, fragmentSourceCode, createAsRaw, rawVertexSourceCode, rawFragmentSourceCode, rebuildRebind, defines, transformFeedbackVaryings, key) {
@@ -1317,7 +1336,7 @@ var WebGPUEngine = /** @class */ (function (_super) {
             isNewEffect = effect !== this._currentEffect;
             this._currentEffect = effect;
             this._currentMaterialContext = this._defaultMaterialContext;
-            this._currentDrawContext = undefined;
+            this._currentDrawContext = this._defaultDrawContext;
             this._counters.numEnableEffects++;
             if (this.dbgLogIfNotDrawWrapper) {
                 Logger.Warn("enableEffect has been called with an Effect and not a Wrapper! effect.uniqueId=" + effect.uniqueId + ", effect.name=" + effect.name + ", effect.name.vertex=" + effect.name.vertex + ", effect.name.fragment=" + effect.name.fragment, 10);
@@ -1407,6 +1426,70 @@ var WebGPUEngine = /** @class */ (function (_super) {
     WebGPUEngine.prototype.updateTextureComparisonFunction = function (texture, comparisonFunction) {
         texture._comparisonFunction = comparisonFunction;
     };
+    /**
+     * Creates an internal texture without binding it to a framebuffer
+     * @hidden
+     * @param size defines the size of the texture
+     * @param options defines the options used to create the texture
+     * @param delayGPUTextureCreation true to delay the texture creation the first time it is really needed. false to create it right away
+     * @param source source type of the texture
+     * @returns a new render target texture stored in an InternalTexture
+     */
+    WebGPUEngine.prototype._createInternalTexture = function (size, options, delayGPUTextureCreation, source) {
+        var _a, _b;
+        if (delayGPUTextureCreation === void 0) { delayGPUTextureCreation = true; }
+        if (source === void 0) { source = InternalTextureSource.Unknown; }
+        var fullOptions = {};
+        if (options !== undefined && typeof options === "object") {
+            fullOptions.generateMipMaps = options.generateMipMaps;
+            fullOptions.type = options.type === undefined ? 0 : options.type;
+            fullOptions.samplingMode = options.samplingMode === undefined ? 3 : options.samplingMode;
+            fullOptions.format = options.format === undefined ? 5 : options.format;
+            fullOptions.samples = (_a = options.samples) !== null && _a !== void 0 ? _a : 1;
+            fullOptions.creationFlags = (_b = options.creationFlags) !== null && _b !== void 0 ? _b : 0;
+        }
+        else {
+            fullOptions.generateMipMaps = options;
+            fullOptions.type = 0;
+            fullOptions.samplingMode = 3;
+            fullOptions.format = 5;
+            fullOptions.samples = 1;
+            fullOptions.creationFlags = 0;
+        }
+        if (fullOptions.type === 1 && !this._caps.textureFloatLinearFiltering) {
+            fullOptions.samplingMode = 1;
+        }
+        else if (fullOptions.type === 2 && !this._caps.textureHalfFloatLinearFiltering) {
+            fullOptions.samplingMode = 1;
+        }
+        if (fullOptions.type === 1 && !this._caps.textureFloat) {
+            fullOptions.type = 0;
+            Logger.Warn("Float textures are not supported. Type forced to TEXTURETYPE_UNSIGNED_BYTE");
+        }
+        var texture = new InternalTexture(this, source);
+        var width = size.width || size;
+        var height = size.height || size;
+        var layers = size.layers || 0;
+        texture.baseWidth = width;
+        texture.baseHeight = height;
+        texture.width = width;
+        texture.height = height;
+        texture.depth = layers;
+        texture.isReady = true;
+        texture.samples = fullOptions.samples;
+        texture.generateMipMaps = fullOptions.generateMipMaps ? true : false;
+        texture.samplingMode = fullOptions.samplingMode;
+        texture.type = fullOptions.type;
+        texture.format = fullOptions.format;
+        texture.is2DArray = layers > 0;
+        texture._cachedWrapU = 0;
+        texture._cachedWrapV = 0;
+        this._internalTexturesCache.push(texture);
+        if (!delayGPUTextureCreation) {
+            this._textureHelper.createGPUTextureForInternalTexture(texture, width, height, layers || 1, fullOptions.creationFlags);
+        }
+        return texture;
+    };
     /**
      * Usually called from Texture.ts.
      * Passed information to create a hardware texture
@@ -1848,8 +1931,12 @@ var WebGPUEngine = /** @class */ (function (_super) {
         }
         this.countersLastFrame.numEnableEffects = this._counters.numEnableEffects;
         this.countersLastFrame.numEnableDrawWrapper = this._counters.numEnableDrawWrapper;
+        this.countersLastFrame.numBundleCreationNonCompatMode = this._counters.numBundleCreationNonCompatMode;
+        this.countersLastFrame.numBundleReuseNonCompatMode = this._counters.numBundleReuseNonCompatMode;
         this._counters.numEnableEffects = 0;
         this._counters.numEnableDrawWrapper = 0;
+        this._counters.numBundleCreationNonCompatMode = 0;
+        this._counters.numBundleReuseNonCompatMode = 0;
         this._cacheRenderPipeline.endFrame();
         this._cacheBindGroups.endFrame();
         this._pendingDebugCommands.length = 0;
@@ -1896,6 +1983,7 @@ var WebGPUEngine = /** @class */ (function (_super) {
         this._timestampQuery.startFrame(this._uploadEncoder);
         this._textureHelper.setCommandEncoder(this._uploadEncoder);
         this._bundleList.reset();
+        this._bundleListRenderTarget.reset();
         // restart the render pass
         if (reopenPass) {
             if (currentPasses & 2) {
@@ -2023,13 +2111,13 @@ var WebGPUEngine = /** @class */ (function (_super) {
                 if (!gpuWrapper._bundleLists) {
                     gpuWrapper._bundleLists = [];
                 }
-                gpuWrapper._bundleLists[gpuWrapper._currentLayer] = this._bundleList.clone();
+                gpuWrapper._bundleLists[gpuWrapper._currentLayer] = this._bundleListRenderTarget.clone();
                 gpuWrapper._bundleLists[gpuWrapper._currentLayer].run(this._currentRenderPass);
-                this._bundleList.reset();
+                this._bundleListRenderTarget.reset();
             }
             else if (!this.compatibilityMode) {
-                this._bundleList.run(this._currentRenderPass);
-                this._bundleList.reset();
+                this._bundleListRenderTarget.run(this._currentRenderPass);
+                this._bundleListRenderTarget.reset();
             }
             this._currentRenderPass.endPass();
             if (this.dbgVerboseLogsForFirstFrames) {
@@ -2339,54 +2427,81 @@ var WebGPUEngine = /** @class */ (function (_super) {
         }
         this._stencilStateComposer.stencilMaterial = stencil;
     };
-    WebGPUEngine.prototype._draw = function (drawType, fillMode, start, count, instancesCount) {
-        var _a, _b, _c;
-        var renderPass = this._getCurrentRenderPass();
-        this.applyStates();
+    WebGPUEngine.prototype._applyRenderPassChanges = function (renderPass, bundleList) {
+        var _a;
         var mustUpdateViewport = this._mustUpdateViewport(renderPass);
         var mustUpdateScissor = this._mustUpdateScissor(renderPass);
         var mustUpdateStencilRef = !this._stencilStateComposer.enabled ? false : this._mustUpdateStencilRef(renderPass);
         var mustUpdateBlendColor = !this._alphaState.alphaBlend ? false : this._mustUpdateBlendColor(renderPass);
+        if (bundleList) {
+            if (mustUpdateViewport) {
+                bundleList.addItem(new WebGPURenderItemViewport(this._viewportCached.x, this._viewportCached.y, this._viewportCached.z, this._viewportCached.w));
+            }
+            if (mustUpdateScissor) {
+                bundleList.addItem(new WebGPURenderItemScissor(this._scissorCached.x, this._scissorCached.y, this._scissorCached.z, this._scissorCached.w));
+            }
+            if (mustUpdateStencilRef) {
+                bundleList.addItem(new WebGPURenderItemStencilRef((_a = this._stencilStateComposer.funcRef) !== null && _a !== void 0 ? _a : 0));
+            }
+            if (mustUpdateBlendColor) {
+                bundleList.addItem(new WebGPURenderItemBlendColor(this._alphaState._blendConstants.slice()));
+            }
+        }
+        else {
+            if (mustUpdateViewport) {
+                this._applyViewport(renderPass);
+            }
+            if (mustUpdateScissor) {
+                this._applyScissor(renderPass);
+            }
+            if (mustUpdateStencilRef) {
+                this._applyStencilRef(renderPass);
+            }
+            if (mustUpdateBlendColor) {
+                this._applyBlendColor(renderPass);
+            }
+        }
+    };
+    WebGPUEngine.prototype._draw = function (drawType, fillMode, start, count, instancesCount) {
+        var _a;
+        var renderPass = this._getCurrentRenderPass();
+        var renderPassIndex = this._getCurrentRenderPassIndex();
+        var bundleList = renderPassIndex === 0 ? this._bundleList : this._bundleListRenderTarget;
+        this.applyStates();
         var webgpuPipelineContext = this._currentEffect._pipelineContext;
         if (webgpuPipelineContext.uniformBuffer) {
             webgpuPipelineContext.uniformBuffer.update();
+            this.bindUniformBufferBase(webgpuPipelineContext.uniformBuffer.getBuffer(), 0, WebGPUShaderProcessor.LeftOvertUBOName);
         }
         if (this._snapshotRenderingPlayBundles) {
             this._reportDrawCall();
             return;
         }
-        var useFastPath = !this.compatibilityMode && ((_a = this._currentDrawContext) === null || _a === void 0 ? void 0 : _a.fastBundle);
+        if (!this.compatibilityMode && (this._currentDrawContext.isDirty(this._currentMaterialContext.updateId) || this._currentMaterialContext.isDirty || this._currentMaterialContext.forceBindGroupCreation)) {
+            this._currentDrawContext.fastBundle = undefined;
+        }
+        var useFastPath = !this.compatibilityMode && this._currentDrawContext.fastBundle;
         var renderPass2 = renderPass;
         if (useFastPath || this._snapshotRenderingRecordBundles) {
-            if (mustUpdateViewport) {
-                this._bundleList.addItem(new WebGPURenderItemViewport(this._viewportCached.x, this._viewportCached.y, this._viewportCached.z, this._viewportCached.w));
-            }
-            if (mustUpdateScissor) {
-                this._bundleList.addItem(new WebGPURenderItemScissor(this._scissorCached.x, this._scissorCached.y, this._scissorCached.z, this._scissorCached.w));
-            }
-            if (mustUpdateStencilRef) {
-                this._bundleList.addItem(new WebGPURenderItemStencilRef((_b = this._stencilStateComposer.funcRef) !== null && _b !== void 0 ? _b : 0));
-            }
-            if (mustUpdateBlendColor) {
-                this._bundleList.addItem(new WebGPURenderItemBlendColor(this._alphaState._blendConstants.slice()));
-            }
+            this._applyRenderPassChanges(renderPass, bundleList);
             if (!this._snapshotRenderingRecordBundles) {
-                this._bundleList.addBundle(this._currentDrawContext.fastBundle);
+                this._counters.numBundleReuseNonCompatMode++;
+                if (this._currentDrawContext.indirectDrawBuffer) {
+                    this._currentDrawContext.setIndirectData(count, instancesCount || 1, start);
+                }
+                bundleList.addBundle(this._currentDrawContext.fastBundle);
                 this._reportDrawCall();
                 return;
             }
-            renderPass2 = this._bundleList.getBundleEncoder(this._cacheRenderPipeline.colorFormats, this._depthTextureFormat, this.currentSampleCount); // for snapshot recording mode
-            this._bundleList.numDrawCalls++;
-        }
-        if (webgpuPipelineContext.uniformBuffer) {
-            this.bindUniformBufferBase(webgpuPipelineContext.uniformBuffer.getBuffer(), 0, "LeftOver");
+            renderPass2 = bundleList.getBundleEncoder(this._cacheRenderPipeline.colorFormats, this._depthTextureFormat, this.currentSampleCount); // for snapshot recording mode
+            bundleList.numDrawCalls++;
         }
         var textureState = 0;
         if (!this._caps.textureFloatLinearFiltering && this._currentMaterialContext.hasFloatTextures) {
             var bitVal = 1;
             for (var i = 0; i < webgpuPipelineContext.shaderProcessingContext.textureNames.length; ++i) {
                 var textureName = webgpuPipelineContext.shaderProcessingContext.textureNames[i];
-                var texture = (_c = this._currentMaterialContext.textures[textureName]) === null || _c === void 0 ? void 0 : _c.texture;
+                var texture = (_a = this._currentMaterialContext.textures[textureName]) === null || _a === void 0 ? void 0 : _a.texture;
                 if ((texture === null || texture === void 0 ? void 0 : texture.type) === 1) {
                     textureState |= bitVal;
                 }
@@ -2394,21 +2509,11 @@ var WebGPUEngine = /** @class */ (function (_super) {
             }
         }
         var pipeline = this._cacheRenderPipeline.getRenderPipeline(fillMode, this._currentEffect, this.currentSampleCount, textureState);
-        var bindGroups = this._cacheBindGroups.getBindGroups(webgpuPipelineContext, this._currentMaterialContext);
+        var bindGroups = this._cacheBindGroups.getBindGroups(webgpuPipelineContext, this._currentDrawContext, this._currentMaterialContext);
         if (!this._snapshotRenderingRecordBundles) {
-            if (mustUpdateViewport) {
-                this._applyViewport(renderPass);
-            }
-            if (mustUpdateScissor) {
-                this._applyScissor(renderPass);
-            }
-            if (mustUpdateStencilRef) {
-                this._applyStencilRef(renderPass);
-            }
-            if (mustUpdateBlendColor) {
-                this._applyBlendColor(renderPass);
-            }
+            this._applyRenderPassChanges(renderPass, !this.compatibilityMode ? bundleList : null);
             if (!this.compatibilityMode) {
+                this._counters.numBundleCreationNonCompatMode++;
                 renderPass2 = this._device.createRenderBundleEncoder({
                     colorFormats: this._cacheRenderPipeline.colorFormats,
                     depthStencilFormat: this._depthTextureFormat,
@@ -2435,15 +2540,25 @@ var WebGPUEngine = /** @class */ (function (_super) {
             renderPass2.setBindGroup(i, bindGroups[i]);
         }
         // draw
-        if (drawType === 0) {
+        var nonCompatMode = !this.compatibilityMode && !this._snapshotRenderingRecordBundles;
+        if (nonCompatMode && this._currentDrawContext.indirectDrawBuffer) {
+            this._currentDrawContext.setIndirectData(count, instancesCount || 1, start);
+            if (drawType === 0) {
+                renderPass2.drawIndexedIndirect(this._currentDrawContext.indirectDrawBuffer, 0);
+            }
+            else {
+                renderPass2.drawIndirect(this._currentDrawContext.indirectDrawBuffer, 0);
+            }
+        }
+        else if (drawType === 0) {
             renderPass2.drawIndexed(count, instancesCount || 1, start, 0, 0);
         }
         else {
             renderPass2.draw(count, instancesCount || 1, start, 0);
         }
-        if (!this.compatibilityMode && this._currentDrawContext && !this._snapshotRenderingRecordBundles) {
+        if (nonCompatMode) {
             this._currentDrawContext.fastBundle = renderPass2.finish();
-            this._bundleList.addBundle(this._currentDrawContext.fastBundle);
+            bundleList.addBundle(this._currentDrawContext.fastBundle);
         }
         this._reportDrawCall();
     };
@@ -2563,6 +2678,10 @@ var WebGPUEngine = /** @class */ (function (_super) {
     };
     /** @hidden */
     WebGPUEngine.prototype._unpackFlipY = function (value) { };
+    /** @hidden */
+    WebGPUEngine.prototype._bindUnboundFramebuffer = function (framebuffer) {
+        throw "_bindUnboundFramebuffer is not implementedin WebGPU! You probably want to use restoreDefaultFramebuffer or unBindFramebuffer instead";
+    };
     // TODO WEBGPU. All of the below should go once engine split with baseEngine.
     /** @hidden */
     WebGPUEngine.prototype._getSamplingParameters = function (samplingMode, generateMipMaps) {