@onerjs/core 9.0.1 → 9.0.3

package/Engines/webgpuEngine.pure.js

@@ -46,7 +46,9 @@ import { PerfCounter } from "../Misc/perfCounter.js";
 import { resetCachedPipeline } from "../Materials/effect.functions.js";
 import { RegisterAbstractEngineDom } from "./AbstractEngine/abstractEngine.dom.pure.js";
 import { RegisterAbstractEngineRenderPass } from "./AbstractEngine/abstractEngine.renderPass.pure.js";
+import { RenderCommandBatcher } from "./renderCommandBatcher.pure.js";
 import { WebGPUExternalTexture } from "./WebGPU/webgpuExternalTexture.js";
+import { ApplyWebGPURenderPassDrawCommand, CreateWebGPURenderPassIndexedDrawCommand, CreateWebGPURenderPassNonIndexedDrawCommand, WebGPURenderPassCommandStream, WebGPURenderPassDrawKind, } from "./WebGPU/webgpuRenderPassCommandStream.js";
 const ViewDescriptorSwapChainAntialiasing = {
     label: `TextureView_SwapChain_ResolveTarget`,
     dimension: "2d" /* WebGPUConstants.TextureDimension.E2d */,
@@ -68,6 +70,34 @@ const TempColor4SignedInteger = /*#__PURE__*/ new Color4();
  * @since 5.0.0
  */
 export class WebGPUEngine extends ThinWebGPUEngine {
+    /**
+     * Gets or sets the provider that lets the host lower render-pass draw submission into a batched
+     * command stream (see IWebGPURenderPassCommandRecorderProvider). Hosts such as BabylonNative,
+     * where every render-pass encoder call crosses the JS/native boundary, install a provider to
+     * amortize that cost across many draws — the same pattern the bgfx-based NativeEngine uses with
+     * its CommandBufferEncoder. When no provider is set (the default, and always the case in
+     * browsers), draws are submitted directly through the standard WebGPU encoder calls without
+     * constructing batched draw commands. Command-stream storage is allocated only when a provider
+     * is first installed.
+     */
+    get renderPassCommandRecorderProvider() {
+        return this._renderPassCommandRecorderProvider;
+    }
+    set renderPassCommandRecorderProvider(provider) {
+        // Record anything batched under the previous provider before swapping contracts.
+        this._flushRenderPassCommands();
+        this._renderPassCommandRecorderProvider = provider;
+        if (provider && !this._renderPassCommandBatching) {
+            const lowering = new WebGPURenderPassCommandStream({
+                getProvider: () => this._renderPassCommandRecorderProvider,
+            });
+            this._renderPassCommandBatching = {
+                batcher: new RenderCommandBatcher(lowering, ApplyWebGPURenderPassDrawCommand),
+                indexedDrawCommand: CreateWebGPURenderPassIndexedDrawCommand(),
+                nonIndexedDrawCommand: CreateWebGPURenderPassNonIndexedDrawCommand(),
+            };
+        }
+    }
     /**
      * Gets or sets the snapshot rendering mode
      */
@@ -302,6 +332,8 @@ export class WebGPUEngine extends ThinWebGPUEngine {
         /** @internal */
         this._virtualScenes = new Array();
         this._commandBuffers = [null, null];
+        this._submitted = null;
+        this._resolveSubmitted = null;
         // Frame Buffer Life Cycle (recreated for each render target pass)
         this._mainRenderPassWrapper = {
             renderPassDescriptor: null,
@@ -322,6 +354,8 @@ export class WebGPUEngine extends ThinWebGPUEngine {
         this._currentVertexBuffers = {};
         this._currentOverrideVertexBuffers = null;
         this._currentIndexBuffer = null;
+        this._renderPassCommandRecorderProvider = null;
+        this._renderPassCommandBatching = null;
         this._colorWriteLocal = true;
         this._forceEnableEffect = false;
         this._internalFrameCounter = 0;
@@ -356,6 +390,16 @@ export class WebGPUEngine extends ThinWebGPUEngine {
         this._stencilRefsCurrent = -1;
         this._blendColorsCurrent = [null, null, null, null];
         this._performanceMonitor = new PerformanceMonitor();
+        /**
+         * The most frames the GPU may have in flight when a frame starts, that frame included (0, the default: no limit).
+         * A frame over the limit is not started, and the render loop asks again at the next animation frame. With 2, a frame starts
+         * once the GPU has finished every frame but the previous one. Without a limit, a page whose GPU work takes longer than its
+         * frame can queue that work far ahead of the GPU, and the screen then shows frames that far behind
+         */
+        this.maxFramesInFlight = 0;
+        this._framesInFlight = 0;
+        this._framesInFlightDevice = null;
+        this._framesInFlightDone = null;
         this._name = "WebGPU";
         this._drawCalls = new PerfCounter();
         options.deviceDescriptor = options.deviceDescriptor || {};
@@ -478,6 +522,8 @@ export class WebGPUEngine extends ThinWebGPUEngine {
                         return;
                     }
                     this._contextWasLost = true;
+                    // the commands of the lost device will not be submitted: their readbacks go on, and fail as lost
+                    this._notifySubmitted();
                     Logger.Warn("WebGPU context lost. " + info);
                     this.onContextLostObservable.notifyObservers(this);
                     // eslint-disable-next-line @typescript-eslint/no-misused-promises
@@ -859,6 +905,15 @@ export class WebGPUEngine extends ThinWebGPUEngine {
         ExitPointerlock();
     }
     _rebuildBuffers() {
+        // Index / Vertex (WebGPUEngine does not extend Engine, so it must do what Engine._rebuildBuffers does)
+        for (const scene of this.scenes) {
+            scene.resetCachedMaterial();
+            scene._rebuildGeometries();
+        }
+        for (const scene of this._virtualScenes) {
+            scene.resetCachedMaterial();
+            scene._rebuildGeometries();
+        }
         super._rebuildBuffers();
         for (const storageBuffer of this._storageBuffers) {
             // The buffer can already be rebuilt by the call to _rebuildGeometries(), which recreates the storage buffers for the ComputeShaderParticleSystem
@@ -961,6 +1016,10 @@ export class WebGPUEngine extends ThinWebGPUEngine {
     _getCurrentRenderPassWrapper() {
         return this._currentRenderTarget ? this._rttRenderPassWrapper : this._mainRenderPassWrapper;
     }
+    /** @internal */
+    _flushRenderPassCommands() {
+        this._renderPassCommandBatching?.batcher.flush();
+    }
     //------------------------------------------------------------------------------
     //                          Static Pipeline WebGPU States
     //------------------------------------------------------------------------------
@@ -1036,6 +1095,7 @@ export class WebGPUEngine extends ThinWebGPUEngine {
             bundleList.addItem(new WebGPURenderItemViewport(x, y, w, h));
         }
         else {
+            this._flushRenderPassCommands();
             this._getCurrentRenderPass().setViewport(x, y, w, h, 0, 1);
         }
     }
@@ -1065,6 +1125,7 @@ export class WebGPUEngine extends ThinWebGPUEngine {
             bundleList.addItem(new WebGPURenderItemScissor(this._scissorCached.x, y, this._scissorCached.z, this._scissorCached.w));
         }
         else {
+            this._flushRenderPassCommands();
             this._getCurrentRenderPass().setScissorRect(this._scissorCached.x, y, this._scissorCached.z, this._scissorCached.w);
         }
     }
@@ -1103,6 +1164,7 @@ export class WebGPUEngine extends ThinWebGPUEngine {
             bundleList.addItem(new WebGPURenderItemStencilRef(this._stencilStateComposer.funcRef ?? 0));
         }
         else {
+            this._flushRenderPassCommands();
             this._getCurrentRenderPass().setStencilReference(this._stencilStateComposer.funcRef ?? 0);
         }
     }
@@ -1125,6 +1187,7 @@ export class WebGPUEngine extends ThinWebGPUEngine {
             bundleList.addItem(new WebGPURenderItemBlendColor(this._alphaState._blendConstants.slice()));
         }
         else {
+            this._flushRenderPassCommands();
             this._getCurrentRenderPass().setBlendConstant(this._alphaState._blendConstants);
         }
     }
@@ -1189,6 +1252,7 @@ export class WebGPUEngine extends ThinWebGPUEngine {
         }
     }
     _clearFullQuad(clearColor, clearDepth, clearStencil) {
+        this._flushRenderPassCommands();
         const renderPass = !this.compatibilityMode ? null : this._getCurrentRenderPass();
         this._clearQuad.setColorFormat(this._colorFormat);
         this._clearQuad.setDepthStencilFormat(this._depthTextureFormat);
@@ -2338,6 +2402,14 @@ export class WebGPUEngine extends ThinWebGPUEngine {
     get performanceMonitor() {
         return this._performanceMonitor;
     }
+    _processFrame(timestamp) {
+        if (this.maxFramesInFlight > 0 && this._framesInFlightDevice === this._device && this._framesInFlight >= this.maxFramesInFlight) {
+            // nothing of the frame has started and maxFPS has not counted it
+            this._frameHandler = 0;
+            return;
+        }
+        super._processFrame(timestamp);
+    }
     /**
      * Begin a new frame
      */
@@ -2355,6 +2427,9 @@ export class WebGPUEngine extends ThinWebGPUEngine {
         this._timestampIndex = 0;
         this._internalFrameCounter = 0;
         this.flushFramebuffer(true);
+        if (this.maxFramesInFlight > 0) {
+            this._countFrameInFlight();
+        }
         this._textureHelper.destroyDeferredTextures();
         this._bufferManager.destroyDeferredBuffers();
         this.countersLastFrame.numEnableEffects = this._counters.numEnableEffects;
@@ -2369,10 +2444,51 @@ export class WebGPUEngine extends ThinWebGPUEngine {
         this._cacheBindGroups.endFrame();
         super.endFrame();
     }
+    // The frame is on the GPU until the GPU has done all the work submitted so far: its intermediate flushes too
+    _countFrameInFlight() {
+        const device = this._device;
+        if (this._framesInFlightDevice !== device) {
+            // a new device: the frames of the lost one are not on it
+            this._framesInFlightDevice = device;
+            this._framesInFlight = 0;
+            // one handler for all the frames of the device
+            this._framesInFlightDone = () => {
+                if (this._framesInFlightDevice === device) {
+                    this._framesInFlight--;
+                }
+            };
+        }
+        this._framesInFlight++;
+        const done = this._framesInFlightDone;
+        // eslint-disable-next-line github/no-then
+        device.queue.onSubmittedWorkDone().then(done, done);
+    }
     /**Gets driver info if available */
     extractDriverInfo() {
         return "";
     }
+    /**
+     * @internal Resolves once the commands recorded until now are submitted, by the next flushFramebuffer (from endFrame or not),
+     * or once the device is lost or the engine disposed. The waits of one submission share one promise.
+     * @returns a promise resolved after the next submission
+     */
+    // eslint-disable-next-line no-restricted-syntax, @typescript-eslint/promise-function-async -- every wait of a submission shares this one promise, where an async method would make one per wait
+    _whenSubmittedAsync() {
+        if (!this._submitted) {
+            this._submitted = new Promise((resolve) => {
+                this._resolveSubmitted = resolve;
+            });
+        }
+        return this._submitted;
+    }
+    _notifySubmitted() {
+        const resolve = this._resolveSubmitted;
+        if (resolve) {
+            this._submitted = null;
+            this._resolveSubmitted = null;
+            resolve();
+        }
+    }
     /**
      * Force a WebGPU flush (ie. a flush of all waiting commands)
      * @internal @param _fromEndFrame defines whether the flush is triggered from endFrame or not (default: false)
@@ -2384,6 +2500,7 @@ export class WebGPUEngine extends ThinWebGPUEngine {
         this._commandBuffers[0] = this._uploadEncoder.finish();
         this._commandBuffers[1] = this._renderEncoder.finish();
         this._device.queue.submit(this._commandBuffers);
+        this._notifySubmitted();
         const frameCounter = this._internalFrameCounter++;
         // If flushFramebuffer is called from endFrame, it means the encoders are created for the next frame, but because frameId is not yet incremented at the time of the call, we use frameId + 1
         this._uploadEncoderDescriptor.label = `[${_fromEndFrame ? this.frameId + 1 : this.frameId}|${frameCounter}] - UploadEncoder`;
@@ -2821,6 +2938,39 @@ export class WebGPUEngine extends ThinWebGPUEngine {
             this._depthCullingState.cullFace = cullFace;
         }
     }
+    // The front face of a draw in the current pass (1 = CCW, 2 = CW), for draws whose side is reversed or not (see setState).
+    // Render targets are drawn Y-flipped (see the InternalsUBO yFactor in _draw), so their triangle
+    // winding is reversed here to compensate and keep the same faces visible. XR projection-layer targets
+    // opt out of that flip (_disableEngineYFlip) because the compositor presents them directly, so they
+    // keep the main-framebuffer winding.
+    _getFrontFace(reverseSide) {
+        const invertYRenderTarget = !!this._currentRenderTarget && !this._currentRenderTarget._disableEngineYFlip;
+        return reverseSide ? (invertYRenderTarget ? 1 : 2) : invertYRenderTarget ? 2 : 1;
+    }
+    // The front face of the draws of a mesh with an effect in the current pass, wound as setState does. They go through the sub mesh given,
+    // or else the one drawn with that effect, or else the first one, with the material the draw uses (SubMesh.getMaterial: the scene's default one, a render pass's,
+    // a multi-material's), and the side orientation Mesh.render gives Material._preBind: from the source mesh of an instance, and from the
+    // world matrix of the mesh itself, which the next frame computes (the last one computed can predate a change of its transform). An
+    // instance mirrored against its source is drawn on its own, the others in their source's draw: either way its own determinant's sign
+    // gives the winding
+    _getMeshFrontFace(mesh, effect, subMesh) {
+        const subMeshes = mesh.subMeshes;
+        if (!subMesh && subMeshes) {
+            subMesh = subMeshes[0];
+            for (const candidate of subMeshes) {
+                if (candidate.effect === effect) {
+                    subMesh = candidate;
+                    break;
+                }
+            }
+        }
+        const material = subMesh?.getMaterial();
+        if (!subMesh || !material) {
+            return this._getFrontFace(false);
+        }
+        mesh.computeWorldMatrix(true);
+        return this._getFrontFace(material._isReverseSide(subMesh.getRenderingMesh()._getDrawSideOrientation(material, mesh)));
+    }
     /**
      * Set various states to the webGL context
      * @param culling defines culling state: true to enable culling, false to disable it
@@ -2842,24 +2992,24 @@ export class WebGPUEngine extends ThinWebGPUEngine {
         this.setZOffset(zOffset);
         this.setZOffsetUnits(zOffsetUnits);
         // Front face
-        // Render targets are drawn Y-flipped (see the InternalsUBO yFactor in _draw), so their triangle
-        // winding is reversed here to compensate and keep the same faces visible. XR projection-layer targets
-        // opt out of that flip (_disableEngineYFlip) because the compositor presents them directly, so they
-        // keep the main-framebuffer winding.
-        const invertYRenderTarget = !!this._currentRenderTarget && !this._currentRenderTarget._disableEngineYFlip;
-        const frontFace = reverseSide ? (invertYRenderTarget ? 1 : 2) : invertYRenderTarget ? 2 : 1;
+        const frontFace = this._getFrontFace(reverseSide);
         if (this._depthCullingState.frontFace !== frontFace || force) {
             this._depthCullingState.frontFace = frontFace;
         }
         this._stencilStateComposer.stencilMaterial = stencil;
     }
     _applyRenderPassChanges(bundleList) {
+        const mustUpdateViewport = this._mustUpdateViewport();
+        const mustUpdateScissor = this._mustUpdateScissor();
         const mustUpdateStencilRef = !this._stencilStateComposer.enabled ? false : this._mustUpdateStencilRef();
         const mustUpdateBlendColor = !this._alphaState.alphaBlend ? false : this._mustUpdateBlendColor();
-        if (this._mustUpdateViewport()) {
+        if (mustUpdateViewport || mustUpdateScissor || mustUpdateStencilRef || mustUpdateBlendColor) {
+            this._flushRenderPassCommands();
+        }
+        if (mustUpdateViewport) {
             this._applyViewport(bundleList);
         }
-        if (this._mustUpdateScissor()) {
+        if (mustUpdateScissor) {
             this._applyScissor(bundleList);
         }
         if (mustUpdateStencilRef) {
@@ -2869,7 +3019,25 @@ export class WebGPUEngine extends ThinWebGPUEngine {
             this._applyBlendColor(bundleList);
         }
     }
-    _draw(drawType, fillMode, start, count, instancesCount) {
+    // A bit for each texture of the shader that is a depth texture, or a float texture the device can't filter linearly: a draw that binds
+    // one uses a pipeline of its own (see WebGPUMaterialContext.textureState). The draws and createRenderPipelineAsync both derive it here.
+    _getTextureState(webgpuPipelineContext, materialContext) {
+        let textureState = 0;
+        if (materialContext.hasFloatOrDepthTextures) {
+            let bitVal = 1;
+            for (let i = 0; i < webgpuPipelineContext.shaderProcessingContext.textureNames.length; ++i) {
+                const textureName = webgpuPipelineContext.shaderProcessingContext.textureNames[i];
+                const texture = materialContext.textures[textureName]?.texture;
+                const textureIsDepth = texture && texture.format >= 13 && texture.format <= 18;
+                if ((texture?.type === 1 && !this._caps.textureFloatLinearFiltering) || textureIsDepth) {
+                    textureState |= bitVal;
+                }
+                bitVal = bitVal << 1;
+            }
+        }
+        return textureState;
+    }
+    _draw(drawKind, fillMode, start, count, instancesCount) {
         const renderPass = this._getCurrentRenderPass();
         const bundleList = this._bundleList;
         this.applyStates();
@@ -2914,22 +3082,11 @@ export class WebGPUEngine extends ThinWebGPUEngine {
             renderPass2 = bundleList.getBundleEncoder(this._cacheRenderPipeline.colorFormats, this._depthTextureFormat, this.currentSampleCount); // for snapshot recording mode
             bundleList.numDrawCalls++;
         }
-        let textureState = 0;
-        if (this._currentMaterialContext.hasFloatOrDepthTextures) {
-            let bitVal = 1;
-            for (let i = 0; i < webgpuPipelineContext.shaderProcessingContext.textureNames.length; ++i) {
-                const textureName = webgpuPipelineContext.shaderProcessingContext.textureNames[i];
-                const texture = this._currentMaterialContext.textures[textureName]?.texture;
-                const textureIsDepth = texture && texture.format >= 13 && texture.format <= 18;
-                if ((texture?.type === 1 && !this._caps.textureFloatLinearFiltering) || textureIsDepth) {
-                    textureState |= bitVal;
-                }
-                bitVal = bitVal << 1;
-            }
-        }
+        const textureState = this._getTextureState(webgpuPipelineContext, this._currentMaterialContext);
         this._currentMaterialContext.textureState = textureState;
         const pipeline = this._cacheRenderPipeline.getRenderPipeline(fillMode, this._currentEffect, this.currentSampleCount, textureState);
         const bindGroups = this._cacheBindGroups.getBindGroups(webgpuPipelineContext, this._currentDrawContext, this._currentMaterialContext);
+        const vertexBuffers = this._cacheRenderPipeline.vertexBuffers;
         if (!this._snapshotRendering.record) {
             this._applyRenderPassChanges(!this.compatibilityMode ? bundleList : null);
             if (!this.compatibilityMode) {
@@ -2941,13 +3098,45 @@ export class WebGPUEngine extends ThinWebGPUEngine {
                 });
             }
         }
-        // bind pipeline
+        const nonCompatMode = !this.compatibilityMode && !this._snapshotRendering.record;
+        const indirectDrawBuffer = (nonCompatMode || this._currentDrawContext._enableIndirectDrawInCompatMode) && this._currentDrawContext.indirectDrawBuffer
+            ? this._currentDrawContext.indirectDrawBuffer
+            : null;
+        if (indirectDrawBuffer) {
+            this._currentDrawContext.setIndirectData(count, instancesCount || 1, start);
+        }
+        const commandBatching = this._renderPassCommandRecorderProvider && this._renderPassCommandBatching;
+        if (commandBatching && this.compatibilityMode && !this._snapshotRendering.record) {
+            let drawCommand;
+            if (drawKind === WebGPURenderPassDrawKind.INDEXED) {
+                const indexedDrawCommand = commandBatching.indexedDrawCommand;
+                indexedDrawCommand.indexBuffer = this._currentIndexBuffer;
+                indexedDrawCommand.indexFormat = this._currentIndexBuffer.is32Bits ? "uint32" /* WebGPUConstants.IndexFormat.Uint32 */ : "uint16" /* WebGPUConstants.IndexFormat.Uint16 */;
+                drawCommand = indexedDrawCommand;
+            }
+            else {
+                drawCommand = commandBatching.nonIndexedDrawCommand;
+            }
+            drawCommand.renderPass = renderPass2;
+            drawCommand.pipeline = pipeline;
+            drawCommand.bindGroups = bindGroups;
+            drawCommand.vertexBuffers = vertexBuffers;
+            drawCommand.count = count;
+            drawCommand.instancesCount = instancesCount;
+            drawCommand.start = start;
+            drawCommand.indirectDrawBuffer = indirectDrawBuffer;
+            commandBatching.batcher.submit(drawCommand);
+            this._reportDrawCall();
+            return;
+        }
+        // A provider can have pending compatibility-mode draws when switching to bundle recording.
+        if (commandBatching) {
+            commandBatching.batcher.flush();
+        }
         renderPass2.setPipeline(pipeline);
-        // bind index/vertex buffers
         if (this._currentIndexBuffer) {
             renderPass2.setIndexBuffer(this._currentIndexBuffer.underlyingResource, this._currentIndexBuffer.is32Bits ? "uint32" /* WebGPUConstants.IndexFormat.Uint32 */ : "uint16" /* WebGPUConstants.IndexFormat.Uint16 */, 0);
         }
-        const vertexBuffers = this._cacheRenderPipeline.vertexBuffers;
         for (let index = 0; index < vertexBuffers.length; index++) {
             const vertexBuffer = vertexBuffers[index];
             const buffer = vertexBuffer.effectiveBuffer;
@@ -2955,22 +3144,18 @@ export class WebGPUEngine extends ThinWebGPUEngine {
                 renderPass2.setVertexBuffer(index, buffer.underlyingResource, vertexBuffer._validOffsetRange ? 0 : vertexBuffer.byteOffset);
             }
         }
-        // bind bind groups
         for (let i = 0; i < bindGroups.length; i++) {
             renderPass2.setBindGroup(i, bindGroups[i]);
         }
-        // draw
-        const nonCompatMode = !this.compatibilityMode && !this._snapshotRendering.record;
-        if ((nonCompatMode || this._currentDrawContext._enableIndirectDrawInCompatMode) && this._currentDrawContext.indirectDrawBuffer) {
-            this._currentDrawContext.setIndirectData(count, instancesCount || 1, start);
-            if (drawType === 0) {
-                renderPass2.drawIndexedIndirect(this._currentDrawContext.indirectDrawBuffer, 0);
+        if (indirectDrawBuffer) {
+            if (drawKind === WebGPURenderPassDrawKind.INDEXED) {
+                renderPass2.drawIndexedIndirect(indirectDrawBuffer, 0);
             }
             else {
-                renderPass2.drawIndirect(this._currentDrawContext.indirectDrawBuffer, 0);
+                renderPass2.drawIndirect(indirectDrawBuffer, 0);
             }
         }
-        else if (drawType === 0) {
+        else if (drawKind === WebGPURenderPassDrawKind.INDEXED) {
             renderPass2.drawIndexed(count, instancesCount || 1, start, 0, 0);
         }
         else {
@@ -2990,7 +3175,7 @@ export class WebGPUEngine extends ThinWebGPUEngine {
      * @param instancesCount defines the number of instances to draw (if instantiation is enabled)
      */
     drawElementsType(fillMode, indexStart, indexCount, instancesCount = 1) {
-        this._draw(0, fillMode, indexStart, indexCount, instancesCount);
+        this._draw(WebGPURenderPassDrawKind.INDEXED, fillMode, indexStart, indexCount, instancesCount);
     }
     /**
      * Draw a list of unindexed primitives
@@ -3001,7 +3186,7 @@ export class WebGPUEngine extends ThinWebGPUEngine {
      */
     drawArraysType(fillMode, verticesStart, verticesCount, instancesCount = 1) {
         this._currentIndexBuffer = null;
-        this._draw(1, fillMode, verticesStart, verticesCount, instancesCount);
+        this._draw(WebGPURenderPassDrawKind.NON_INDEXED, fillMode, verticesStart, verticesCount, instancesCount);
     }
     //------------------------------------------------------------------------------
     //                        Async Pipeline Pre-Warming
@@ -3059,14 +3244,23 @@ export class WebGPUEngine extends ThinWebGPUEngine {
             // Rasterization state
             cache.setCullEnabled(entry.cullEnabled ?? true);
             cache.setCullFace(entry.cullFace ?? 1);
-            cache.setFrontFace(entry.frontFace ?? 2);
+            cache.setFrontFace(entry.frontFace ?? this._getMeshFrontFace(entry.mesh, entry.effect, entry.subMesh));
             // Write mask
             cache.setWriteMask(entry.writeMask ?? 0xf);
             // Stencil
             cache.setStencilEnabled(entry.stencilEnabled ?? false);
             const fillMode = entry.fillMode ?? 0;
             const sampleCount = entry.sampleCount ?? this.currentSampleCount;
-            const promise = cache.preWarmPipeline(fillMode, entry.effect, sampleCount, 0);
+            // the texture state a draw gets from the same textures
+            let textureState = 0;
+            if (entry.textures) {
+                const materialContext = new WebGPUMaterialContext();
+                for (const name in entry.textures) {
+                    materialContext.setTexture(name, entry.textures[name]);
+                }
+                textureState = this._getTextureState(entry.effect._pipelineContext, materialContext);
+            }
+            const promise = cache.preWarmPipeline(fillMode, entry.effect, sampleCount, textureState);
             if (promise) {
                 promises.push(promise);
             }
@@ -3090,13 +3284,15 @@ export class WebGPUEngine extends ThinWebGPUEngine {
      */
     dispose() {
         this._isDisposed = true;
+        // the commands not submitted yet never will be: their readbacks go on, and return nothing
+        this._resolveSubmitted?.();
         this.hideLoadingUI?.();
-        this._timestampQuery.dispose();
+        this._timestampQuery?.dispose();
         this._mainTexture?.destroy();
         this._depthTexture?.destroy();
-        this._textureHelper.destroyDeferredTextures();
-        this._bufferManager.destroyDeferredBuffers();
-        this._device.destroy();
+        this._textureHelper?.destroyDeferredTextures();
+        this._bufferManager?.destroyDeferredBuffers();
+        this._device?.destroy();
         _CommonDispose(this, this._renderingCanvas);
         super.dispose();
         // If this was the last WebGPU engine, reset the static caches shared by all WebGPU engines