fix: snapshot rendering crash with clustered lighting

clearStorageBuffer() calls _renderEncoder.clearBuffer(), which is a
command encoder operation that cannot execute while a render pass is
open on the same encoder.

In snapshot rendering mode (both STANDARD and FAST), bindFramebuffer()
eagerly creates the render pass. The clustered lighting system then
fires onClearObservable which calls StorageBuffer.clear(), hitting the
locked encoder and producing WebGPU validation errors every frame.

Fix:
- Move the WebGPU storage buffer clear from onClearObservable (fires
  after bindFramebuffer) to onBeforeBindObservable (fires before),
  so it runs while the encoder is free.
- Add _endCurrentRenderPass() as a safety guard in clearStorageBuffer()
  to prevent the same class of bug for any future callers.

Fixes https://forum.babylonjs.com/t/63139

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: Popov72

packages/dev/core/src/Engines/webgpuEngine.ts

@@ -4043,6 +4043,8 @@ export class WebGPUEngine extends ThinWebGPUEngine {
      * @param byteLength the byte length to clear (optional)
      */
     public clearStorageBuffer(storageBuffer: DataBuffer, byteOffset?: number, byteLength?: number): void {
+        // clearBuffer is a command encoder operation and cannot be recorded while a render pass is open on the same encoder.
+        this._endCurrentRenderPass();
         this._renderEncoder.clearBuffer(storageBuffer.underlyingResource, byteOffset, byteLength);
     }
 

packages/dev/core/src/Lights/Clustered/clusteredLightContainer.ts

@@ -341,6 +341,13 @@ export class ClusteredLightContainer extends Light {
         this._tileMaskTexture.onBeforeBindObservable.add(() => {
             currentRenderTarget = engine._currentRenderTarget;
             this._updateLightData();
+            // On WebGPU, clear the storage buffer here (before bindFramebuffer) because
+            // clearBuffer is a command encoder operation that cannot run while a render pass is open.
+            // In snapshot rendering mode, bindFramebuffer eagerly creates the render pass, so
+            // clearing must happen before that point.
+            if (engine.isWebGPU) {
+                this._tileMaskBuffer?.clear();
+            }
         });
 
         this._tileMaskTexture.onAfterUnbindObservable.add(() => {
@@ -354,10 +361,7 @@ export class ClusteredLightContainer extends Light {
         });
 
         this._tileMaskTexture.onClearObservable.add(() => {
-            if (engine.isWebGPU) {
-                // Clear the storage buffer for WebGPU
-                this._tileMaskBuffer?.clear();
-            } else {
+            if (!engine.isWebGPU) {
                 // Only clear the texture on WebGL
                 engine.clear({ r: 0, g: 0, b: 0, a: 1 }, true, false);
             }