@zephyr3d/editor 0.3.7 → 0.3.8

package/dist/modules/zephyr3d_backend-webgpu.js

@@ -2773,6 +2773,7 @@ class WebGPUMiscCaps {
     supportDepthClamp;
     maxBindGroups;
     maxTexCoordIndex;
+    supportTimestampQuery;
     constructor(device){
         this.supportOversizedViewport = false;
         this.supportBlendMinMax = true;
@@ -2780,6 +2781,7 @@ class WebGPUMiscCaps {
         this.supportDepthClamp = device.device.features.has('depth-clip-control');
         this.maxBindGroups = 4;
         this.maxTexCoordIndex = 8;
+        this.supportTimestampQuery = device.device.features.has('timestamp-query');
     }
 }
 class WebGPUShaderCaps {
@@ -4879,6 +4881,7 @@ class WebGPURenderPass {
     _currentViewport;
     _currentScissor;
     _frameBufferInfo;
+    _deferredMipmapTextures;
     constructor(device){
         this._device = device;
         this._renderCommandEncoder = null;
@@ -4887,6 +4890,7 @@ class WebGPURenderPass {
         this._currentViewport = null;
         this._currentScissor = null;
         this._frameBufferInfo = this.createFrameBufferInfo(null);
+        this._deferredMipmapTextures = [];
     }
     get active() {
         return !!this._renderPassEncoder;
@@ -5034,6 +5038,10 @@ class WebGPURenderPass {
         if (validation & VALIDATION_FAILED$1) {
             return;
         }
+        if (this.hasDeferredMipmapsForBindGroups(bindGroups)) {
+            this.end();
+            this.flushDeferredMipmapsForBindGroups(bindGroups);
+        }
         if (validation & VALIDATION_NEED_NEW_PASS) {
             this.end();
         }
@@ -5153,7 +5161,7 @@ class WebGPURenderPass {
         this.setViewport(this._currentViewport);
         this.setScissor(this._currentScissor);
     }
-    end() {
+    end(generateMipmaps = true) {
         if (!this.active) {
             return;
         }
@@ -5168,15 +5176,38 @@ class WebGPURenderPass {
             const options = this._frameBufferInfo.frameBuffer.getOptions();
             if (options.colorAttachments) {
                 for (const attachment of options.colorAttachments){
-                    attachment.texture._markAsCurrentFB(false);
-                    if (attachment.generateMipmaps && attachment.texture.mipLevelCount > 1) {
-                        attachment.texture.generateMipmaps();
-                    }
+                    const texture = attachment.texture;
+                    texture._markAsCurrentFB(false);
+                    this.handleColorAttachmentMipmap(texture, !!attachment.generateMipmaps, generateMipmaps);
                 }
             }
             options.depthAttachment?.texture?._markAsCurrentFB(false);
         }
     }
+    hasDeferredMipmapsForBindGroups(bindGroups) {
+        return bindGroups?.some((bindGroup)=>{
+            return bindGroup?.textureList.some((texture)=>this._deferredMipmapTextures.indexOf(texture) >= 0);
+        });
+    }
+    flushDeferredMipmapsForBindGroups(bindGroups) {
+        if (!bindGroups) {
+            this.flushDeferredMipmaps();
+            return;
+        }
+        for (const bindGroup of bindGroups){
+            for (const texture of bindGroup?.textureList ?? []){
+                this.flushDeferredMipmap(texture);
+            }
+        }
+    }
+    flushDeferredMipmaps() {
+        const textures = this._deferredMipmapTextures.splice(0);
+        for (const texture of textures){
+            if (!texture.disposed) {
+                texture.generateMipmaps();
+            }
+        }
+    }
     capture(renderBundleEncoder, program, vertexData, stateSet, bindGroups, bindGroupOffsets, primitiveType, first, count, numInstances) {
         const validation = this.validateDraw(program, bindGroups, stateSet, primitiveType, first, count, numInstances);
         if (validation & VALIDATION_FAILED$1) {
@@ -5287,6 +5318,30 @@ class WebGPURenderPass {
         }
         return validation;
     }
+    handleColorAttachmentMipmap(texture, attachmentGenerateMipmaps, generateMipmaps) {
+        if (!attachmentGenerateMipmaps || texture.mipLevelCount <= 1) {
+            return;
+        }
+        if (generateMipmaps) {
+            this.removeDeferredMipmap(texture);
+            texture.generateMipmaps();
+        } else if (this._deferredMipmapTextures.indexOf(texture) < 0) {
+            this._deferredMipmapTextures.push(texture);
+        }
+    }
+    flushDeferredMipmap(texture) {
+        if (this.removeDeferredMipmap(texture) && !texture.disposed) {
+            texture.generateMipmaps();
+        }
+    }
+    removeDeferredMipmap(texture) {
+        const index = this._deferredMipmapTextures.indexOf(texture);
+        if (index >= 0) {
+            this._deferredMipmapTextures.splice(index, 1);
+            return true;
+        }
+        return false;
+    }
     setBindGroupsForRender(renderPassEncoder, program, bindGroups, bindGroupOffsets, renderBundleEncoder) {
         if (bindGroups) {
             for(let i = 0; i < 4; i++){
@@ -5331,6 +5386,10 @@ class WebGPUComputePass {
         if (validation & VALIDATION_FAILED) {
             return;
         }
+        if (this._device.commandQueue.hasDeferredMipmapsForBindGroups(bindGroups)) {
+            this.end();
+            this._device.commandQueue.flushDeferredMipmapsForBindGroups(bindGroups);
+        }
         if (!this.active) {
             this.begin();
         }
@@ -5437,10 +5496,7 @@ class CommandQueueImmediate {
     getEncoder() {
         const segment = this.getOrCreateCurrentSegment();
         segment.hasBodyCommands = true;
-        if (!segment.bodyEncoder) {
-            segment.bodyEncoder = this._device.device.createCommandEncoder();
-        }
-        return segment.bodyEncoder;
+        return this.getOrCreateBodyEncoder(segment);
     }
     flushUploads() {
         this.finalizeCurrentSegmentUploads();
@@ -5557,6 +5613,26 @@ class CommandQueueImmediate {
         this.submit();
         return this._device.device.queue.onSubmittedWorkDone();
     }
+    insertTimestampMarker(querySet, queryIndex, includePendingUploads) {
+        this.endAllBodyPasses(false);
+        if (includePendingUploads) {
+            this.finalizeCurrentSegmentUploads();
+            const encoder = this.getEncoder();
+            this.encodeTimestampMarker(encoder, querySet, queryIndex);
+        } else {
+            const segment = this.getOrCreateCurrentSegment();
+            const pendingBuffers = segment.buffersWithPendingUploads.splice(0);
+            const pendingTextures = segment.texturesWithPendingUploads.splice(0);
+            segment.hasBodyCommands = true;
+            const encoder = this.getOrCreateBodyEncoder(segment);
+            this.encodeTimestampMarker(encoder, querySet, queryIndex);
+            if (pendingBuffers.length > 0 || pendingTextures.length > 0) {
+                const nextSegment = this.createSegment();
+                nextSegment.buffersWithPendingUploads.push(...pendingBuffers);
+                nextSegment.texturesWithPendingUploads.push(...pendingTextures);
+            }
+        }
+    }
     createSegment() {
         const segment = {
             uploadEncoder: null,
@@ -5581,6 +5657,12 @@ class CommandQueueImmediate {
         }
         return segment.uploadEncoder;
     }
+    getOrCreateBodyEncoder(segment) {
+        if (!segment.bodyEncoder) {
+            segment.bodyEncoder = this._device.device.createCommandEncoder();
+        }
+        return segment.bodyEncoder;
+    }
     ensureRenderBodyReady() {
         if (this._computePass.active) {
             this._computePass.end();
@@ -5591,9 +5673,15 @@ class CommandQueueImmediate {
             this._renderPass.end();
         }
     }
-    endAllBodyPasses() {
+    flushDeferredMipmapsForBindGroups(bindGroups) {
+        this._renderPass.flushDeferredMipmapsForBindGroups(bindGroups);
+    }
+    hasDeferredMipmapsForBindGroups(bindGroups) {
+        return this._renderPass.hasDeferredMipmapsForBindGroups(bindGroups);
+    }
+    endAllBodyPasses(generateMipmaps = true) {
         if (this._renderPass.active) {
-            this._renderPass.end();
+            this._renderPass.end(generateMipmaps);
         }
         if (this._computePass.active) {
             this._computePass.end();
@@ -5601,9 +5689,10 @@ class CommandQueueImmediate {
     }
     submit() {
         this.endAllBodyPasses();
+        this._renderPass.flushDeferredMipmaps();
         this.finalizeCurrentSegmentUploads();
+        const commandBuffers = [];
         if (this._segments.length > 0) {
-            const commandBuffers = [];
             for (const segment of this._segments){
                 if (segment.uploadEncoder && segment.hasUploadCommands) {
                     commandBuffers.push(segment.uploadEncoder.finish());
@@ -5612,9 +5701,14 @@ class CommandQueueImmediate {
                     commandBuffers.push(segment.bodyEncoder.finish());
                 }
             }
-            if (commandBuffers.length > 0) {
-                this._device.device.queue.submit(commandBuffers);
-            }
+        }
+        const timestampResolveCommandBuffer = this._device.createTimestampResolveCommandBuffer();
+        if (timestampResolveCommandBuffer) {
+            commandBuffers.push(timestampResolveCommandBuffer);
+        }
+        if (commandBuffers.length > 0) {
+            this._device.device.queue.submit(commandBuffers);
+            this._device.onTimestampCommandBuffersSubmitted();
         }
         for (const buffer of this._buffersAwaitingSyncEnd){
             buffer.endSyncChanges();
@@ -5627,6 +5721,16 @@ class CommandQueueImmediate {
         this._segments.length = 0;
         this._drawcallCounter = 0;
     }
+    encodeTimestampMarker(encoder, querySet, queryIndex) {
+        const pass = encoder.beginComputePass({
+            label: `timestamp-marker:${queryIndex}`,
+            timestampWrites: {
+                querySet,
+                beginningOfPassWriteIndex: queryIndex
+            }
+        });
+        pass.end();
+    }
     markBufferAwaitingSyncEnd(buffer) {
         if (this._buffersAwaitingSyncEnd.indexOf(buffer) < 0) {
             this._buffersAwaitingSyncEnd.push(buffer);
@@ -5675,6 +5779,301 @@ class CommandQueueImmediate {
     }
 }
 
+const TIMESTAMP_QUERY_COUNT = 4096;
+const TIMESTAMP_BYTES_PER_QUERY = 8;
+const TIMESTAMP_QUERIES_PER_SCOPE = 2;
+const TIMESTAMP_RESOLVE_STRIDE = 256;
+const MAX_RESOLVED_RESULT_HISTORY = 4096;
+const defaultTimestampQueryOptions = {
+    includePendingUploads: true,
+    allowCrossFrame: false,
+    strict: false
+};
+class WebGPUTimestampQueryManager {
+    _device;
+    _supported;
+    _querySet;
+    _freeQueryPairs;
+    _records;
+    _openRecords;
+    _endedRecords;
+    _pendingSubmitBatches;
+    _resolvedResults;
+    _nextId;
+    constructor(device){
+        this._device = device;
+        this._supported = device.device.features.has('timestamp-query');
+        this._querySet = this._supported ? device.device.createQuerySet({
+            type: 'timestamp',
+            count: TIMESTAMP_QUERY_COUNT
+        }) : null;
+        this._freeQueryPairs = [];
+        for(let i = TIMESTAMP_QUERY_COUNT - 2; i >= 0; i -= 2){
+            this._freeQueryPairs.push(i);
+        }
+        this._records = new Map();
+        this._openRecords = new Map();
+        this._endedRecords = [];
+        this._pendingSubmitBatches = [];
+        this._resolvedResults = [];
+        this._nextId = 0;
+    }
+    get supported() {
+        return this._supported;
+    }
+    begin(label, options) {
+        if (!this._supported || !this._querySet) {
+            return 0;
+        }
+        const id = ++this._nextId;
+        const resolvedOptions = {
+            ...defaultTimestampQueryOptions,
+            ...options ?? {}
+        };
+        const startIndex = this._freeQueryPairs.pop();
+        if (startIndex === undefined) {
+            const result = this.createResult(id, label ?? '', this._device.frameInfo.frameCounter, 0n, 0n, 'exhausted', false, 'GPU timestamp query pool exhausted');
+            this._records.set(id, {
+                id,
+                label: result.label,
+                frameId: result.frameId,
+                options: resolvedOptions,
+                startIndex: -1,
+                endIndex: -1,
+                status: 'exhausted',
+                autoClosed: false,
+                result,
+                waiters: []
+            });
+            this.pushResolvedResult(result);
+            return id;
+        }
+        const record = {
+            id,
+            label: label ?? '',
+            frameId: this._device.frameInfo.frameCounter,
+            options: resolvedOptions,
+            startIndex,
+            endIndex: startIndex + 1,
+            status: 'open',
+            autoClosed: false,
+            result: null,
+            waiters: []
+        };
+        this._records.set(id, record);
+        this._openRecords.set(id, record);
+        this._device.commandQueue.insertTimestampMarker(this._querySet, record.startIndex, record.options.includePendingUploads);
+        return id;
+    }
+    end(id) {
+        if (!this._supported) {
+            return;
+        }
+        const record = this._records.get(id);
+        if (!record) {
+            this.reportInvalidEnd(id, 'endTimestampQuery() ignored: invalid query id');
+            return;
+        }
+        if (record.status !== 'open') {
+            if (record.status !== 'exhausted' && record.status !== 'unsupported') {
+                this.reportInvalidEnd(id, 'endTimestampQuery() ignored: query is not open');
+            }
+            return;
+        }
+        this.endRecord(record, false);
+    }
+    autoCloseOpenScopes() {
+        for (const record of Array.from(this._openRecords.values())){
+            if (!record.options.allowCrossFrame) {
+                this.endRecord(record, true);
+            }
+        }
+    }
+    createResolveCommandBuffer() {
+        if (!this._querySet || this._endedRecords.length === 0) {
+            return null;
+        }
+        const records = this._endedRecords.splice(0);
+        const entries = records.map((record, index)=>{
+            record.status = 'resolving';
+            return {
+                record,
+                readbackOffset: index * TIMESTAMP_RESOLVE_STRIDE
+            };
+        });
+        const byteLength = entries.length * TIMESTAMP_RESOLVE_STRIDE;
+        const resolveBuffer = this._device.device.createBuffer({
+            label: 'timestamp-query-resolve',
+            size: byteLength,
+            usage: GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC
+        });
+        const readbackBuffer = this._device.device.createBuffer({
+            label: 'timestamp-query-readback',
+            size: byteLength,
+            usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+        });
+        const encoder = this._device.device.createCommandEncoder({
+            label: 'timestamp-query-resolve'
+        });
+        for (const entry of entries){
+            encoder.resolveQuerySet(this._querySet, entry.record.startIndex, TIMESTAMP_QUERIES_PER_SCOPE, resolveBuffer, entry.readbackOffset);
+        }
+        encoder.copyBufferToBuffer(resolveBuffer, 0, readbackBuffer, 0, byteLength);
+        this._pendingSubmitBatches.push({
+            entries,
+            resolveBuffer,
+            readbackBuffer
+        });
+        return encoder.finish();
+    }
+    onSubmitted() {
+        const batches = this._pendingSubmitBatches.splice(0);
+        for (const batch of batches){
+            batch.readbackBuffer.mapAsync(GPUMapMode.READ).then(()=>{
+                this.completeBatch(batch);
+            }).catch((err)=>{
+                this.failBatch(batch, err instanceof Error ? err.message : String(err));
+            });
+        }
+    }
+    poll(query) {
+        if (!this._supported) {
+            return this.createUnsupportedResult(query);
+        }
+        const record = this.findRecord(query);
+        if (!record) {
+            return this.createInvalidResult(query, 'Timestamp query not found');
+        }
+        return record.result;
+    }
+    resolve(query) {
+        if (!this._supported) {
+            return Promise.resolve(this.createUnsupportedResult(query));
+        }
+        const record = this.findRecord(query);
+        if (!record) {
+            return Promise.resolve(this.createInvalidResult(query, 'Timestamp query not found'));
+        }
+        if (record.result) {
+            return Promise.resolve(record.result);
+        }
+        return new Promise((resolve)=>{
+            record.waiters.push(resolve);
+        });
+    }
+    collect(filter) {
+        return this._resolvedResults.filter((result)=>{
+            return (filter?.label === undefined || result.label === filter.label) && (filter?.frameId === undefined || result.frameId === filter.frameId);
+        });
+    }
+    endRecord(record, autoClosed) {
+        if (!this._querySet) {
+            return;
+        }
+        record.autoClosed = autoClosed;
+        this._openRecords.delete(record.id);
+        this._device.commandQueue.insertTimestampMarker(this._querySet, record.endIndex, record.options.includePendingUploads);
+        record.status = 'ended';
+        this._endedRecords.push(record);
+        if (autoClosed) {
+            console.warn(`GPU timestamp query '${record.label}' was automatically closed at frame end`);
+        }
+    }
+    completeBatch(batch) {
+        const values = new BigUint64Array(batch.readbackBuffer.getMappedRange());
+        for (const entry of batch.entries){
+            const record = entry.record;
+            const valueOffset = entry.readbackOffset / TIMESTAMP_BYTES_PER_QUERY;
+            const start = values[valueOffset];
+            const end = values[valueOffset + 1];
+            const duration = end >= start ? end - start : 0n;
+            const result = this.createResult(record.id, record.label, record.frameId, start, end, record.autoClosed ? 'auto-closed' : 'resolved', record.autoClosed);
+            result.durationMs = Number(duration) / 1000000;
+            record.status = result.status;
+            record.result = result;
+            this.freeQueryPair(record.startIndex);
+            this.resolveWaiters(record);
+            this.pushResolvedResult(result);
+        }
+        batch.readbackBuffer.unmap();
+        batch.readbackBuffer.destroy();
+        batch.resolveBuffer.destroy();
+    }
+    failBatch(batch, message) {
+        for (const entry of batch.entries){
+            const record = entry.record;
+            const result = this.createResult(record.id, record.label, record.frameId, 0n, 0n, 'failed', record.autoClosed, message);
+            record.status = 'failed';
+            record.result = result;
+            this.freeQueryPair(record.startIndex);
+            this.resolveWaiters(record);
+            this.pushResolvedResult(result);
+        }
+        batch.readbackBuffer.destroy();
+        batch.resolveBuffer.destroy();
+    }
+    freeQueryPair(startIndex) {
+        if (startIndex >= 0 && this._freeQueryPairs.indexOf(startIndex) < 0) {
+            this._freeQueryPairs.push(startIndex);
+        }
+    }
+    resolveWaiters(record) {
+        for (const resolve of record.waiters.splice(0)){
+            resolve(record.result);
+        }
+    }
+    pushResolvedResult(result) {
+        this._resolvedResults.push(result);
+        while(this._resolvedResults.length > MAX_RESOLVED_RESULT_HISTORY){
+            const oldResult = this._resolvedResults.shift();
+            if (oldResult) {
+                const oldRecord = this._records.get(oldResult.id);
+                if (oldRecord?.result === oldResult) {
+                    this._records.delete(oldResult.id);
+                }
+            }
+        }
+    }
+    reportInvalidEnd(id, message) {
+        const record = this._records.get(id);
+        if (record?.options.strict) {
+            throw new Error(message);
+        }
+        console.warn(message);
+    }
+    findRecord(query) {
+        if (typeof query === 'number') {
+            return this._records.get(query) ?? null;
+        }
+        let latest = null;
+        for (const record of this._records.values()){
+            if (record.label === query) {
+                latest = record;
+            }
+        }
+        return latest;
+    }
+    createUnsupportedResult(query) {
+        return this.createResult(typeof query === 'number' ? query : 0, typeof query === 'string' ? query : '', this._device.frameInfo.frameCounter, 0n, 0n, 'unsupported', false, 'GPU timestamp queries are not supported by this WebGPU device');
+    }
+    createInvalidResult(query, message) {
+        return this.createResult(typeof query === 'number' ? query : 0, typeof query === 'string' ? query : '', this._device.frameInfo.frameCounter, 0n, 0n, 'invalid', false, message);
+    }
+    createResult(id, label, frameId, start, end, status, autoClosed, message) {
+        return {
+            id,
+            label,
+            frameId,
+            durationMs: 0,
+            start,
+            end,
+            status,
+            autoClosed: autoClosed || undefined,
+            message
+        };
+    }
+}
+
 class WebGPUDevice extends BaseDevice {
     _context;
     _device;
@@ -5705,6 +6104,7 @@ class WebGPUDevice extends BaseDevice {
     _emptyBindGroup;
     _captureRenderBundle;
     _adapterInfo;
+    _timestampQueries;
     constructor(backend, cvs, options){
         super(cvs, backend, options?.dpr);
         this._reverseWindingOrder = false;
@@ -5815,7 +6215,25 @@ class WebGPUDevice extends BaseDevice {
                 ...this._adapter.features
             ],
             requiredLimits: {
-                ...this._adapter.limits
+                maxBufferSize: this._adapter.limits.maxBufferSize,
+                maxBindingsPerBindGroup: this._adapter.limits.maxBindingsPerBindGroup,
+                maxTextureDimension2D: this._adapter.limits.maxTextureDimension2D,
+                maxComputeWorkgroupSizeX: this._adapter.limits.maxComputeWorkgroupSizeX,
+                maxComputeWorkgroupSizeY: this._adapter.limits.maxComputeWorkgroupSizeY,
+                maxComputeWorkgroupSizeZ: this._adapter.limits.maxComputeWorkgroupSizeZ,
+                maxSampledTexturesPerShaderStage: this._adapter.limits.maxSampledTexturesPerShaderStage,
+                maxSamplersPerShaderStage: this._adapter.limits.maxSamplersPerShaderStage,
+                maxStorageBuffersPerShaderStage: this._adapter.limits.maxStorageBuffersPerShaderStage,
+                maxStorageTexturesPerShaderStage: this._adapter.limits.maxStorageTexturesPerShaderStage,
+                maxUniformBuffersPerShaderStage: this._adapter.limits.maxUniformBuffersPerShaderStage,
+                maxUniformBufferBindingSize: this._adapter.limits.maxUniformBufferBindingSize,
+                maxStorageBufferBindingSize: this._adapter.limits.maxStorageBufferBindingSize,
+                maxInterStageShaderVariables: this._adapter.limits.maxInterStageShaderVariables,
+                maxColorAttachments: this._adapter.limits.maxColorAttachments,
+                maxColorAttachmentBytesPerSample: this._adapter.limits.maxColorAttachmentBytesPerSample,
+                maxComputeWorkgroupStorageSize: this._adapter.limits.maxComputeWorkgroupStorageSize,
+                maxComputeInvocationsPerWorkgroup: this._adapter.limits.maxComputeInvocationsPerWorkgroup,
+                maxComputeWorkgroupsPerDimension: this._adapter.limits.maxComputeWorkgroupsPerDimension
             }
         });
         console.info('WebGPU device features:');
@@ -5851,6 +6269,7 @@ class WebGPUDevice extends BaseDevice {
         this._bindGroupCache = new BindGroupCache(this);
         this._vertexLayoutCache = new VertexLayoutCache();
         this._commandQueue = new CommandQueueImmediate(this);
+        this._timestampQueries = new WebGPUTimestampQueryManager(this);
         this._canRender = true;
         this.setViewport(null);
         this.setScissor(null);
@@ -5885,6 +6304,21 @@ class WebGPUDevice extends BaseDevice {
         // throw new Error('not implemented');
         return null;
     }
+    beginTimestampQuery(label, options) {
+        return this._timestampQueries.begin(label, options);
+    }
+    endTimestampQuery(id) {
+        this._timestampQueries.end(id);
+    }
+    pollTimestampQuery(query) {
+        return this._timestampQueries.poll(query);
+    }
+    resolveTimestampQuery(query) {
+        return this._timestampQueries.resolve(query);
+    }
+    collectTimestampQueries(filter) {
+        return this._timestampQueries.collect(filter);
+    }
     createRenderStateSet() {
         return new WebGPURenderStateSet(this);
     }
@@ -6300,6 +6734,12 @@ class WebGPUDevice extends BaseDevice {
     flushUploads() {
         this._commandQueue.flushUploads();
     }
+    /** @internal */ createTimestampResolveCommandBuffer() {
+        return this._timestampQueries.createResolveCommandBuffer();
+    }
+    /** @internal */ onTimestampCommandBuffersSubmitted() {
+        this._timestampQueries.onSubmitted();
+    }
     /** @internal */ _setFramebuffer(rt) {
         this._commandQueue.setFramebuffer(rt);
     }
@@ -6312,6 +6752,7 @@ class WebGPUDevice extends BaseDevice {
         }
     }
     /** @internal */ onEndFrame() {
+        this._timestampQueries.autoCloseOpenScopes();
         this._commandQueue.endFrame();
     }
     /** @internal */ _draw(primitiveType, first, count) {