@babylonjs/core 6.33.1 → 6.34.0-alpha.0

package/Engines/webgpuEngine.d.ts

@@ -11,7 +11,7 @@ import type { BaseTexture } from "../Materials/Textures/baseTexture";
 import type { IShaderProcessor } from "./Processors/iShaderProcessor";
 import type { ShaderProcessingContext } from "./Processors/shaderProcessingOptions";
 import { WebGPUTextureHelper } from "./WebGPU/webgpuTextureHelper";
-import type { ISceneLike, ThinEngineOptions } from "./thinEngine";
+import type { ThinEngineOptions } from "./thinEngine";
 import { WebGPUBufferManager } from "./WebGPU/webgpuBufferManager";
 import type { HardwareTextureWrapper } from "../Materials/Textures/hardwareTextureWrapper";
 import { WebGPUHardwareTexture } from "./WebGPU/webgpuHardwareTexture";
@@ -34,6 +34,7 @@ import type { WebGPUDataBuffer } from "../Meshes/WebGPU/webgpuDataBuffer";
 import "../Buffers/buffer.align";
 import "../ShadersWGSL/postprocess.vertex";
 import type { RenderTargetWrapper } from "./renderTargetWrapper";
+import type { ISceneLike } from "../esm/Engines/engine.interfaces.js";
 /** @internal */
 interface IWebGPURenderPassWrapper {
     renderPassDescriptor: Nullable<GPURenderPassDescriptor>;
@@ -311,11 +312,11 @@ export declare class WebGPUEngine extends Engine {
     /**
      * Indicates if the z range in NDC space is 0..1 (value: true) or -1..1 (value: false)
      */
-    readonly isNDCHalfZRange: boolean;
+    get isNDCHalfZRange(): boolean;
     /**
      * Indicates that the origin of the texture/framebuffer space is the bottom left corner. If false, the origin is top left
      */
-    readonly hasOriginBottomLeft: boolean;
+    get hasOriginBottomLeft(): boolean;
     /**
      * Create a new instance of the gpu engine.
      * @param canvas Defines the canvas to use to display the result
@@ -698,14 +699,10 @@ export declare class WebGPUEngine extends Engine {
      * @returns a ArrayBufferView promise (Uint8Array) containing RGBA colors
      */
     readPixels(x: number, y: number, width: number, height: number, hasAlpha?: boolean, flushRenderer?: boolean): Promise<ArrayBufferView>;
-    /**
-     * Begin a new frame
-     */
-    beginFrame(): void;
     /**
      * End the current frame
      */
-    endFrame(): void;
+    endFrame: () => void;
     /**
      * Force a WebGPU flush (ie. a flush of all waiting commands)
      */

package/Engines/webgpuEngine.js

@@ -204,6 +204,18 @@ export class WebGPUEngine extends Engine {
             engine.initAsync(options.glslangOptions, options.twgslOptions).then(() => resolve(engine));
         });
     }
+    /**
+     * Indicates if the z range in NDC space is 0..1 (value: true) or -1..1 (value: false)
+     */
+    get isNDCHalfZRange() {
+        return true;
+    }
+    /**
+     * Indicates that the origin of the texture/framebuffer space is the bottom left corner. If false, the origin is top left
+     */
+    get hasOriginBottomLeft() {
+        return false;
+    }
     /**
      * Create a new instance of the gpu engine.
      * @param canvas Defines the canvas to use to display the result
@@ -289,14 +301,6 @@ export class WebGPUEngine extends Engine {
         this.dbgLogIfNotDrawWrapper = true;
         /** @internal */
         this.dbgShowEmptyEnableEffectCalls = true;
-        /**
-         * Indicates if the z range in NDC space is 0..1 (value: true) or -1..1 (value: false)
-         */
-        this.isNDCHalfZRange = true;
-        /**
-         * Indicates that the origin of the texture/framebuffer space is the bottom left corner. If false, the origin is top left
-         */
-        this.hasOriginBottomLeft = false;
         //------------------------------------------------------------------------------
         //                              Dynamic WebGPU States
         //------------------------------------------------------------------------------
@@ -306,6 +310,61 @@ export class WebGPUEngine extends Engine {
         this._scissorCached = { x: 0, y: 0, z: 0, w: 0 };
         this._stencilRefsCurrent = -1;
         this._blendColorsCurrent = [null, null, null, null];
+        //------------------------------------------------------------------------------
+        //                              Frame management
+        //------------------------------------------------------------------------------
+        /**
+         * End the current frame
+         */
+        this.endFrame = () => {
+            this._endCurrentRenderPass();
+            this._snapshotRendering.endFrame();
+            this._timestampQuery.endFrame(this._renderEncoder);
+            this.flushFramebuffer();
+            this._textureHelper.destroyDeferredTextures();
+            this._bufferManager.destroyDeferredBuffers();
+            if (this._features._collectUbosUpdatedInFrame) {
+                if (this.dbgVerboseLogsForFirstFrames) {
+                    if (this._count === undefined) {
+                        this._count = 0;
+                    }
+                    if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
+                        const list = [];
+                        for (const name in UniformBuffer._UpdatedUbosInFrame) {
+                            list.push(name + ":" + UniformBuffer._UpdatedUbosInFrame[name]);
+                        }
+                        Logger.Log(["frame #" + this._count + " - updated ubos -", list.join(", ")]);
+                    }
+                }
+                UniformBuffer._UpdatedUbosInFrame = {};
+            }
+            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;
+            this._engineState._frameId++; // Was a call to super
+            if (this.dbgVerboseLogsForFirstFrames) {
+                if (this._count === undefined) {
+                    this._count = 0;
+                }
+                if (this._count < this.dbgVerboseLogsNumFrames) {
+                    Logger.Log(["%c frame #" + this._count + " - end", "background: #ffff00"]);
+                }
+                if (this._count < this.dbgVerboseLogsNumFrames) {
+                    this._count++;
+                    if (this._count !== this.dbgVerboseLogsNumFrames) {
+                        Logger.Log(["%c frame #" + this._count + " - begin", "background: #ffff00"]);
+                    }
+                }
+            }
+        };
         this._name = "WebGPU";
         options.deviceDescriptor = options.deviceDescriptor || {};
         options.enableGPUDebugMarkers = (_b = options.enableGPUDebugMarkers) !== null && _b !== void 0 ? _b : false;
@@ -433,7 +492,7 @@ export class WebGPUEngine extends Engine {
             if (this.dbgVerboseLogsForFirstFrames) {
                 if (this._count === undefined) {
                     this._count = 0;
-                    console.log("%c frame #" + this._count + " - begin", "background: #ffff00");
+                    Logger.Log(["%c frame #" + this._count + " - begin", "background: #ffff00"]);
                 }
             }
             this._uploadEncoder = this._device.createCommandEncoder(this._uploadEncoderDescriptor);
@@ -458,11 +517,11 @@ export class WebGPUEngine extends Engine {
             this.resize();
         })
             .catch((e) => {
+            var _a;
             Logger.Error("Can not create WebGPU Device and/or context.");
             Logger.Error(e);
-            if (console.trace) {
-                console.trace();
-            }
+            // eslint-disable-next-line no-console
+            (_a = console === null || console === void 0 ? void 0 : console.trace) === null || _a === void 0 ? void 0 : _a.call(console);
         });
     }
     _initGlslang(glslangOptions) {
@@ -692,7 +751,7 @@ export class WebGPUEngine extends Engine {
                 this._count = 0;
             }
             if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
-                console.log("frame #" + this._count + " - setSize -", width, height);
+                Logger.Log(["frame #" + this._count + " - setSize -", width, height]);
             }
         }
         this._initializeMainAttachments();
@@ -817,7 +876,14 @@ export class WebGPUEngine extends Engine {
                 this._count = 0;
             }
             if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
-                console.log("frame #" + this._count + " - viewport applied - (", this._viewportCached.x, this._viewportCached.y, this._viewportCached.z, this._viewportCached.w, ") current pass is main pass=" + this._currentPassIsMainPass());
+                Logger.Log([
+                    "frame #" + this._count + " - viewport applied - (",
+                    this._viewportCached.x,
+                    this._viewportCached.y,
+                    this._viewportCached.z,
+                    this._viewportCached.w,
+                    ") current pass is main pass=" + this._currentPassIsMainPass(),
+                ]);
             }
         }
     }
@@ -854,7 +920,14 @@ export class WebGPUEngine extends Engine {
                 this._count = 0;
             }
             if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
-                console.log("frame #" + this._count + " - scissor applied - (", this._scissorCached.x, this._scissorCached.y, this._scissorCached.z, this._scissorCached.w, ") current pass is main pass=" + this._currentPassIsMainPass());
+                Logger.Log([
+                    "frame #" + this._count + " - scissor applied - (",
+                    this._scissorCached.x,
+                    this._scissorCached.y,
+                    this._scissorCached.z,
+                    this._scissorCached.w,
+                    ") current pass is main pass=" + this._currentPassIsMainPass(),
+                ]);
             }
         }
     }
@@ -933,7 +1006,7 @@ export class WebGPUEngine extends Engine {
                 this._count = 0;
             }
             if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
-                console.log("frame #" + this._count + " - clear - backBuffer=", backBuffer, " depth=", depth, " stencil=", stencil, " scissor is active=", hasScissor);
+                Logger.Log(["frame #" + this._count + " - clear - backBuffer=", backBuffer, " depth=", depth, " stencil=", stencil, " scissor is active=", hasScissor]);
             }
         }
         // We need to recreate the render pass so that the new parameters for clear color / depth / stencil are taken into account
@@ -1257,10 +1330,10 @@ export class WebGPUEngine extends Engine {
         const webGpuContext = pipelineContext;
         const shaderLanguage = webGpuContext.shaderProcessingContext.shaderLanguage;
         if (this.dbgShowShaderCode) {
-            console.log(defines);
-            console.log(vertexSourceCode);
-            console.log(fragmentSourceCode);
-            console.log("***********************************************");
+            Logger.Log(["defines", defines]);
+            Logger.Log(vertexSourceCode);
+            Logger.Log(fragmentSourceCode);
+            Logger.Log("***********************************************");
         }
         webGpuContext.sources = {
             fragment: fragmentSourceCode,
@@ -1319,7 +1392,7 @@ export class WebGPUEngine extends Engine {
                 effect.drawContext === this._currentDrawContext &&
                 !this._forceEnableEffect)) {
             if (!effect.effect && this.dbgShowEmptyEnableEffectCalls) {
-                console.error("drawWrapper=", effect);
+                Logger.Log(["drawWrapper=", effect]);
                 throw "Invalid call to enableEffect: the effect property is empty!";
             }
             return;
@@ -1331,7 +1404,7 @@ export class WebGPUEngine extends Engine {
             this._currentDrawContext = effect.drawContext;
             this._counters.numEnableDrawWrapper++;
             if (!this._currentMaterialContext) {
-                console.error("drawWrapper=", effect);
+                Logger.Log(["drawWrapper=", effect]);
                 throw `Invalid call to enableEffect: the materialContext property is empty!`;
             }
         }
@@ -1708,7 +1781,7 @@ export class WebGPUEngine extends Engine {
                     this._count = 0;
                 }
                 if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
-                    console.log("frame #" + this._count + " - _setTexture called with a null _currentEffect! texture=", texture);
+                    Logger.Log(["frame #" + this._count + " - _setTexture called with a null _currentEffect! texture=", texture]);
                 }
             }
         }
@@ -1758,7 +1831,7 @@ export class WebGPUEngine extends Engine {
                 this._count = 0;
             }
             if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
-                console.log("frame #" +
+                Logger.Log("frame #" +
                     this._count +
                     " - generate mipmaps - width=" +
                     texture.width +
@@ -1882,67 +1955,6 @@ export class WebGPUEngine extends Engine {
         }
         return this._textureHelper.readPixels(gpuTexture, x, y, width, height, gpuTextureFormat);
     }
-    //------------------------------------------------------------------------------
-    //                              Frame management
-    //------------------------------------------------------------------------------
-    /**
-     * Begin a new frame
-     */
-    beginFrame() {
-        super.beginFrame();
-    }
-    /**
-     * End the current frame
-     */
-    endFrame() {
-        this._endCurrentRenderPass();
-        this._snapshotRendering.endFrame();
-        this._timestampQuery.endFrame(this._renderEncoder);
-        this.flushFramebuffer();
-        this._textureHelper.destroyDeferredTextures();
-        this._bufferManager.destroyDeferredBuffers();
-        if (this._features._collectUbosUpdatedInFrame) {
-            if (this.dbgVerboseLogsForFirstFrames) {
-                if (this._count === undefined) {
-                    this._count = 0;
-                }
-                if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
-                    const list = [];
-                    for (const name in UniformBuffer._UpdatedUbosInFrame) {
-                        list.push(name + ":" + UniformBuffer._UpdatedUbosInFrame[name]);
-                    }
-                    console.log("frame #" + this._count + " - updated ubos -", list.join(", "));
-                }
-            }
-            UniformBuffer._UpdatedUbosInFrame = {};
-        }
-        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;
-        super.endFrame();
-        if (this.dbgVerboseLogsForFirstFrames) {
-            if (this._count === undefined) {
-                this._count = 0;
-            }
-            if (this._count < this.dbgVerboseLogsNumFrames) {
-                console.log("%c frame #" + this._count + " - end", "background: #ffff00");
-            }
-            if (this._count < this.dbgVerboseLogsNumFrames) {
-                this._count++;
-                if (this._count !== this.dbgVerboseLogsNumFrames) {
-                    console.log("%c frame #" + this._count + " - begin", "background: #ffff00");
-                }
-            }
-        }
-    }
     /**
      * Force a WebGPU flush (ie. a flush of all waiting commands)
      */
@@ -1952,6 +1964,10 @@ export class WebGPUEngine extends Engine {
         this._commandBuffers[0] = this._uploadEncoder.finish();
         this._commandBuffers[1] = this._renderEncoder.finish();
         this._device.queue.submit(this._commandBuffers);
+        // Now that the command buffers have been submitted, we can reset the ubo as we can reuse the same GPU buffer(s)
+        for (let i = 0; i < this._uniformBuffers.length; ++i) {
+            this._uniformBuffers[i]._checkNewFrame(true);
+        }
         this._uploadEncoder = this._device.createCommandEncoder(this._uploadEncoderDescriptor);
         this._renderEncoder = this._device.createCommandEncoder(this._renderEncoderDescriptor);
         this._timestampQuery.startFrame(this._uploadEncoder);
@@ -2071,18 +2087,22 @@ export class WebGPUEngine extends Engine {
             }
             if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
                 const internalTexture = rtWrapper.texture;
-                console.log("frame #" +
-                    this._count +
-                    " - render target begin pass - rtt name=" +
-                    renderTargetWrapper.label +
-                    ", internalTexture.uniqueId=" +
-                    internalTexture.uniqueId +
-                    ", width=" +
-                    internalTexture.width +
-                    ", height=" +
-                    internalTexture.height +
-                    ", setClearStates=" +
-                    setClearStates, "renderPassDescriptor=", this._rttRenderPassWrapper.renderPassDescriptor);
+                Logger.Log([
+                    "frame #" +
+                        this._count +
+                        " - render target begin pass - rtt name=" +
+                        renderTargetWrapper.label +
+                        ", internalTexture.uniqueId=" +
+                        internalTexture.uniqueId +
+                        ", width=" +
+                        internalTexture.width +
+                        ", height=" +
+                        internalTexture.height +
+                        ", setClearStates=" +
+                        setClearStates,
+                    "renderPassDescriptor=",
+                    this._rttRenderPassWrapper.renderPassDescriptor,
+                ]);
             }
         }
         (_h = this._debugFlushPendingCommands) === null || _h === void 0 ? void 0 : _h.call(this);
@@ -2131,7 +2151,12 @@ export class WebGPUEngine extends Engine {
                 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 + ", setClearStates=" + setClearStates, "renderPassDescriptor=", this._mainRenderPassWrapper.renderPassDescriptor);
+                Logger.Log([
+                    "frame #" + this._count + " - main begin pass - texture width=" + this._mainTextureExtends.width,
+                    " height=" + this._mainTextureExtends.height + ", setClearStates=" + setClearStates,
+                    "renderPassDescriptor=",
+                    this._mainRenderPassWrapper.renderPassDescriptor,
+                ]);
             }
         }
         (_b = this._debugPushGroup) === null || _b === void 0 ? void 0 : _b.call(this, "main pass", 0);
@@ -2161,7 +2186,7 @@ export class WebGPUEngine extends Engine {
                 this._count = 0;
             }
             if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
-                console.log("frame #" +
+                Logger.Log("frame #" +
                     this._count +
                     " - " +
                     (currentPassIndex === 2 ? "main" : "render target") +
@@ -2222,18 +2247,24 @@ export class WebGPUEngine extends Engine {
                 this._count = 0;
             }
             if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
-                console.log("frame #" +
-                    this._count +
-                    " - bindFramebuffer - rtt name=" +
-                    texture.label +
-                    ", internalTexture.uniqueId=" +
-                    ((_b = texture.texture) === null || _b === void 0 ? void 0 : _b.uniqueId) +
-                    ", face=" +
-                    faceIndex +
-                    ", lodLevel=" +
-                    lodLevel +
-                    ", layer=" +
-                    layer, "colorAttachmentViewDescriptor=", this._rttRenderPassWrapper.colorAttachmentViewDescriptor, "depthAttachmentViewDescriptor=", this._rttRenderPassWrapper.depthAttachmentViewDescriptor);
+                Logger.Log([
+                    "frame #" +
+                        this._count +
+                        " - bindFramebuffer - rtt name=" +
+                        texture.label +
+                        ", internalTexture.uniqueId=" +
+                        ((_b = texture.texture) === null || _b === void 0 ? void 0 : _b.uniqueId) +
+                        ", face=" +
+                        faceIndex +
+                        ", lodLevel=" +
+                        lodLevel +
+                        ", layer=" +
+                        layer,
+                    "colorAttachmentViewDescriptor=",
+                    this._rttRenderPassWrapper.colorAttachmentViewDescriptor,
+                    "depthAttachmentViewDescriptor=",
+                    this._rttRenderPassWrapper.depthAttachmentViewDescriptor,
+                ]);
             }
         }
         // We don't create the render pass just now, we do a lazy creation of the render pass, hoping the render pass will be created by a call to clear()...
@@ -2281,7 +2312,7 @@ export class WebGPUEngine extends Engine {
                 this._count = 0;
             }
             if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
-                console.log("frame #" + this._count + " - unBindFramebuffer - rtt name=" + texture.label + ", internalTexture.uniqueId=", (_b = texture.texture) === null || _b === void 0 ? void 0 : _b.uniqueId);
+                Logger.Log("frame #" + this._count + " - unBindFramebuffer - rtt name=" + texture.label + ", internalTexture.uniqueId=", (_b = texture.texture) === null || _b === void 0 ? void 0 : _b.uniqueId);
             }
         }
         this._mrtAttachments = [];