@babylonjs/core 6.34.1 → 6.34.3

package/Engines/webgpuEngine.d.ts

@@ -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 { WebGPUPerfCounter } from "./WebGPU/webgpuPerfCounter";
 /** @internal */
 interface IWebGPURenderPassWrapper {
     renderPassDescriptor: Nullable<GPURenderPassDescriptor>;
@@ -152,6 +153,8 @@ export declare class WebGPUEngine extends Engine {
     /** @internal */
     _timestampQuery: WebGPUTimestampQuery;
     /** @internal */
+    _timestampIndex: number;
+    /** @internal */
     _occlusionQuery: WebGPUOcclusionQuery;
     /** @internal */
     _compiledComputeEffects: {
@@ -299,6 +302,18 @@ export declare class WebGPUEngine extends Engine {
      */
     get compatibilityMode(): boolean;
     set compatibilityMode(mode: boolean);
+    /**
+     * Enables or disables GPU timing measurements.
+     * Note that this is only supported if the "timestamp-query" extension is enabled in the options.
+     */
+    get enableGPUTimingMeasurements(): boolean;
+    set enableGPUTimingMeasurements(enable: boolean);
+    /**
+     * Gets the GPU time spent in the main render pass for the last frame rendered (in nanoseconds).
+     * You have to enable the "timestamp-query" extension in the engine constructor options and set engine.enableGPUTimingMeasurements = true.
+     * It will only return time spent in the main pass, not additional render target / compute passes (if any)!
+     */
+    readonly gpuTimeInFrameForMainPass?: WebGPUPerfCounter;
     /** @internal */
     get currentSampleCount(): number;
     /**
@@ -426,7 +441,7 @@ export declare class WebGPUEngine extends Engine {
     /**
      * Creates a new index buffer
      * @param indices defines the content of the index buffer
-     * @param updatable defines if the index buffer must be updatable
+     * @param _updatable defines if the index buffer must be updatable
      * @param label defines the label of the buffer (for debug purpose)
      * @returns a new buffer
      */

package/Engines/webgpuEngine.js

@@ -1,9 +1,11 @@
+/* eslint-disable babylonjs/available */
 import { Logger } from "../Misc/logger.js";
 import { Color4 } from "../Maths/math.js";
 import { Engine } from "../Engines/engine.js";
 import { InternalTexture, InternalTextureSource } from "../Materials/Textures/internalTexture.js";
 import { Effect } from "../Materials/effect.js";
 
+// eslint-disable-next-line @typescript-eslint/naming-convention
 import * as WebGPUConstants from "./WebGPU/webgpuConstants.js";
 import { VertexBuffer } from "../Buffers/buffer.js";
 import { WebGPUPipelineContext } from "./WebGPU/webgpuPipelineContext.js";
@@ -34,6 +36,7 @@ import { ShaderLanguage } from "../Materials/shaderLanguage.js";
 import { WebGPUSnapshotRendering } from "./WebGPU/webgpuSnapshotRendering.js";
 import "../Buffers/buffer.align.js";
 import "../ShadersWGSL/postprocess.vertex.js";
+import { WebGPUPerfCounter } from "./WebGPU/webgpuPerfCounter.js";
 const viewDescriptorSwapChainAntialiasing = {
     label: `TextureView_SwapChain_ResolveTarget`,
     dimension: WebGPUConstants.TextureDimension.E2d,
@@ -188,6 +191,20 @@ export class WebGPUEngine extends Engine {
     set compatibilityMode(mode) {
         this._compatibilityMode = mode;
     }
+    /**
+     * Enables or disables GPU timing measurements.
+     * Note that this is only supported if the "timestamp-query" extension is enabled in the options.
+     */
+    get enableGPUTimingMeasurements() {
+        return this._timestampQuery.enable;
+    }
+    set enableGPUTimingMeasurements(enable) {
+        if (this._timestampQuery.enable === enable) {
+            return;
+        }
+        this.gpuTimeInFrameForMainPass = enable ? new WebGPUPerfCounter() : undefined;
+        this._timestampQuery.enable = enable;
+    }
     /** @internal */
     get currentSampleCount() {
         return this._currentRenderTarget ? this._currentRenderTarget.samples : this._mainPassSampleCount;
@@ -231,6 +248,8 @@ export class WebGPUEngine extends Engine {
             description: "",
         };
         /** @internal */
+        this._timestampIndex = 0;
+        /** @internal */
         this._compiledComputeEffects = {};
         /** @internal */
         this._counters = {
@@ -420,11 +439,11 @@ export class WebGPUEngine extends Engine {
             Logger.Error(e);
         })
             .then(() => {
-            this._bufferManager = new WebGPUBufferManager(this._device);
+            this._bufferManager = new WebGPUBufferManager(this, this._device);
             this._textureHelper = new WebGPUTextureHelper(this._device, this._glslang, this._tintWASM, this._bufferManager, this._deviceEnabledExtensions);
             this._cacheSampler = new WebGPUCacheSampler(this._device);
             this._cacheBindGroups = new WebGPUCacheBindGroups(this._device, this._cacheSampler, this);
-            this._timestampQuery = new WebGPUTimestampQuery(this._device, this._bufferManager);
+            this._timestampQuery = new WebGPUTimestampQuery(this, this._device, this._bufferManager);
             this._occlusionQuery = this._device.createQuerySet ? new WebGPUOcclusionQuery(this, this._device, this._bufferManager) : undefined;
             this._bundleList = new WebGPUBundleList(this._device);
             this._snapshotRendering = new WebGPUSnapshotRendering(this, this._snapshotRenderingMode, this._bundleList);
@@ -433,7 +452,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 +477,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 +711,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 +836,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 +880,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 +966,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
@@ -1020,7 +1053,7 @@ export class WebGPUEngine extends Engine {
     /**
      * Creates a new index buffer
      * @param indices defines the content of the index buffer
-     * @param updatable defines if the index buffer must be updatable
+     * @param _updatable defines if the index buffer must be updatable
      * @param label defines the label of the buffer (for debug purpose)
      * @returns a new buffer
      */
@@ -1257,10 +1290,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 +1352,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 +1364,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 +1741,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 +1791,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 +
@@ -1898,6 +1931,7 @@ export class WebGPUEngine extends Engine {
         this._endCurrentRenderPass();
         this._snapshotRendering.endFrame();
         this._timestampQuery.endFrame(this._renderEncoder);
+        this._timestampIndex = 0;
         this.flushFramebuffer();
         this._textureHelper.destroyDeferredTextures();
         this._bufferManager.destroyDeferredBuffers();
@@ -1911,7 +1945,7 @@ export class WebGPUEngine extends Engine {
                     for (const name in UniformBuffer._UpdatedUbosInFrame) {
                         list.push(name + ":" + UniformBuffer._UpdatedUbosInFrame[name]);
                     }
-                    console.log("frame #" + this._count + " - updated ubos -", list.join(", "));
+                    Logger.Log(["frame #" + this._count + " - updated ubos -", list.join(", ")]);
                 }
             }
             UniformBuffer._UpdatedUbosInFrame = {};
@@ -1933,12 +1967,12 @@ export class WebGPUEngine extends Engine {
                 this._count = 0;
             }
             if (this._count < this.dbgVerboseLogsNumFrames) {
-                console.log("%c frame #" + this._count + " - end", "background: #ffff00");
+                Logger.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");
+                    Logger.Log(["%c frame #" + this._count + " - begin", "background: #ffff00"]);
                 }
             }
         }
@@ -1952,10 +1986,6 @@ 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);
@@ -2047,7 +2077,7 @@ export class WebGPUEngine extends Engine {
                 colorAttachments.push(null);
             }
         }
-        (_e = this._debugPushGroup) === null || _e === void 0 ? void 0 : _e.call(this, "render target pass", 1);
+        (_e = this._debugPushGroup) === null || _e === void 0 ? void 0 : _e.call(this, "render target pass" + (renderTargetWrapper.label ? " (" + renderTargetWrapper.label + ")" : ""), 1);
         this._rttRenderPassWrapper.renderPassDescriptor = {
             label: ((_f = renderTargetWrapper.label) !== null && _f !== void 0 ? _f : "RTT") + "RenderPass",
             colorAttachments,
@@ -2068,6 +2098,7 @@ export class WebGPUEngine extends Engine {
                 : undefined,
             occlusionQuerySet: ((_g = this._occlusionQuery) === null || _g === void 0 ? void 0 : _g.hasQueries) ? this._occlusionQuery.querySet : undefined,
         };
+        this._timestampQuery.startPass(this._rttRenderPassWrapper.renderPassDescriptor, this._timestampIndex);
         this._currentRenderPass = this._renderEncoder.beginRenderPass(this._rttRenderPassWrapper.renderPassDescriptor);
         if (this.dbgVerboseLogsForFirstFrames) {
             if (this._count === undefined) {
@@ -2075,18 +2106,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);
@@ -2135,10 +2170,16 @@ 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);
+        this._timestampQuery.startPass(this._mainRenderPassWrapper.renderPassDescriptor, this._timestampIndex);
         this._currentRenderPass = this._renderEncoder.beginRenderPass(this._mainRenderPassWrapper.renderPassDescriptor);
         this._setDepthTextureFormat(this._mainRenderPassWrapper);
         this._setColorFormat(this._mainRenderPassWrapper);
@@ -2160,12 +2201,16 @@ export class WebGPUEngine extends Engine {
             this._bundleList.reset();
         }
         this._currentRenderPass.end();
+        this._timestampQuery.endPass(this._timestampIndex, (this._currentRenderTarget && this._currentRenderTarget.gpuTimeInFrame
+            ? this._currentRenderTarget.gpuTimeInFrame
+            : this.gpuTimeInFrameForMainPass));
+        this._timestampIndex += 2;
         if (this.dbgVerboseLogsForFirstFrames) {
             if (this._count === undefined) {
                 this._count = 0;
             }
             if (!this._count || this._count < this.dbgVerboseLogsNumFrames) {
-                console.log("frame #" +
+                Logger.Log("frame #" +
                     this._count +
                     " - " +
                     (currentPassIndex === 2 ? "main" : "render target") +
@@ -2226,18 +2271,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()...
@@ -2285,7 +2336,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 = [];
@@ -2518,8 +2569,11 @@ export class WebGPUEngine extends Engine {
     dispose() {
         var _a, _b;
         this._isDisposed = true;
+        this._timestampQuery.dispose();
         (_a = this._mainTexture) === null || _a === void 0 ? void 0 : _a.destroy();
         (_b = this._depthTexture) === null || _b === void 0 ? void 0 : _b.destroy();
+        this._textureHelper.destroyDeferredTextures();
+        this._bufferManager.destroyDeferredBuffers();
         this._device.destroy();
         super.dispose();
     }