babylon.quarks 0.18.0 → 0.19.0

package/src/TrailBatch.ts

@@ -1,17 +1,18 @@
-import {Mesh} from '@babylonjs/core/Meshes/mesh';
 import {VertexBuffer} from '@babylonjs/core/Buffers/buffer';
-import {Effect} from '@babylonjs/core/Materials/effect';
-import {ShaderMaterial} from '@babylonjs/core/Materials/shaderMaterial';
-import {Scene} from '@babylonjs/core/scene';
 import {BoundingInfo} from '@babylonjs/core/Culling/boundingInfo';
-import {Vector3 as BVector3} from '@babylonjs/core/Maths/math.vector';
-import {Vector2 as BVector2} from '@babylonjs/core/Maths/math.vector';
 import {Constants} from '@babylonjs/core/Engines/constants';
-import {Matrix4, Quaternion, RecordState, TrailParticle, Vector3} from 'quarks.core';
-import {VFXBatch, RenderMode} from './VFXBatch';
+import {ShaderMaterial} from '@babylonjs/core/Materials/shaderMaterial';
+import {Vector2 as BVector2, Vector3 as BVector3} from '@babylonjs/core/Maths/math.vector';
+import {Mesh} from '@babylonjs/core/Meshes/mesh';
+import {Scene} from '@babylonjs/core/scene';
+import {IParticleSystem, Matrix4, Quaternion, TrailParticle, TrailSettings, Vector3} from 'quarks.core';
 import {VFXBatchSettings} from './BatchedRenderer';
-import trail_vert from './shaders/trail_vert.glsl';
+import {registerShaders, shaderLanguageFor} from './shaders/shaderLanguageSupport';
 import trail_frag from './shaders/trail_frag.glsl';
+import trail_frag_wgsl from './shaders/trail_frag.wgsl';
+import trail_vert from './shaders/trail_vert.glsl';
+import trail_vert_wgsl from './shaders/trail_vert.wgsl';
+import {VFXBatch} from './VFXBatch';
 
 export class TrailBatch extends VFXBatch {
     private positionBuffer!: Float32Array;
@@ -22,23 +23,19 @@ export class TrailBatch extends VFXBatch {
     private widthBuffer!: Float32Array;
     private colorBuffer!: Float32Array;
     private indexBuffer!: Uint32Array;
+    /** True while the batch is parked on the degenerate draw, see uploadGeometry. */
+    private drawsNothing = false;
     private previousVB!: VertexBuffer;
     private nextVB!: VertexBuffer;
     private sideVB!: VertexBuffer;
     private widthVB!: VertexBuffer;
 
-    private getTrailHistoryCount(particle: TrailParticle): number {
-        const trailAny = particle as any;
-        const fastHistoryCount = trailAny._trailHistoryCount;
-        if (typeof fastHistoryCount === 'number') {
-            return fastHistoryCount;
-        }
-        return particle.previous.length;
-    }
-
     constructor(settings: VFXBatchSettings, scene: Scene) {
         super(settings, scene);
-        this.maxParticles = 10000;
+        // Trail buffers hold two vertices per recorded sample and are the largest
+        // per-batch allocation in the library, so start small and let
+        // expandBuffers grow to whatever the batch actually needs.
+        this.maxParticles = 1024;
         this.setupBuffers();
         this.rebuildMaterial();
     }
@@ -61,18 +58,42 @@ export class TrailBatch extends VFXBatch {
         this.indexBuffer = new Uint32Array(this.maxParticles * 6);
 
         // Initialize with full-capacity buffers (updatable) and a dummy triangle
-        this.positionBuffer[0] = 0; this.positionBuffer[1] = 0; this.positionBuffer[2] = 0;
-        this.positionBuffer[3] = 1; this.positionBuffer[4] = 0; this.positionBuffer[5] = 0;
-        this.positionBuffer[6] = 0; this.positionBuffer[7] = 1; this.positionBuffer[8] = 0;
-        this.positionBuffer[9] = 1; this.positionBuffer[10] = 1; this.positionBuffer[11] = 0;
-        this.indexBuffer[0] = 0; this.indexBuffer[1] = 1; this.indexBuffer[2] = 2;
-        this.indexBuffer[3] = 1; this.indexBuffer[4] = 3; this.indexBuffer[5] = 2;
+        this.positionBuffer[0] = 0;
+        this.positionBuffer[1] = 0;
+        this.positionBuffer[2] = 0;
+        this.positionBuffer[3] = 1;
+        this.positionBuffer[4] = 0;
+        this.positionBuffer[5] = 0;
+        this.positionBuffer[6] = 0;
+        this.positionBuffer[7] = 1;
+        this.positionBuffer[8] = 0;
+        this.positionBuffer[9] = 1;
+        this.positionBuffer[10] = 1;
+        this.positionBuffer[11] = 0;
+        this.indexBuffer[0] = 0;
+        this.indexBuffer[1] = 1;
+        this.indexBuffer[2] = 2;
+        this.indexBuffer[3] = 1;
+        this.indexBuffer[4] = 3;
+        this.indexBuffer[5] = 2;
 
         // Set standard vertex data with full buffer capacity (updatable)
         this.mesh.setVerticesData(VertexBuffer.PositionKind, this.positionBuffer, true);
         this.mesh.setVerticesData(VertexBuffer.UVKind, this.uvBuffer, true);
         this.mesh.setVerticesData(VertexBuffer.ColorKind, this.colorBuffer, true, 4);
-        this.mesh.setIndices(this.indexBuffer.subarray(0, 6), null, true);
+        // The whole array, not just the dummy triangle: this call is what sizes
+        // the GPU index buffer, and updateIndices later writes into it without
+        // resizing it. Handing it six indices here left a 24 byte buffer that
+        // every later frame overran — WebGL tolerated it, WebGPU rejects the
+        // draw outright ("index range does not fit in index buffer size").
+        // The vertex buffers above are already created at full capacity; this
+        // was the one that was not.
+        this.mesh.setIndices(this.indexBuffer, null, true);
+        this.drawsNothing = false;
+        if (this.mesh.subMeshes && this.mesh.subMeshes.length > 0) {
+            // Until the first update, only the dummy triangle is real.
+            this.mesh.subMeshes[0].indexCount = 6;
+        }
         const engine = this.scene.getEngine();
         this.previousVB = new VertexBuffer(engine, this.previousBuffer, 'previous', true, false, 3, false);
         this.nextVB = new VertexBuffer(engine, this.nextBuffer, 'next', true, false, 3, false);
@@ -99,29 +120,52 @@ export class TrailBatch extends VFXBatch {
         while (target >= this.maxParticles) {
             this.maxParticles *= 2;
         }
+        // Release the previous custom attribute buffers; setVerticesBuffer only
+        // replaces the reference, so skipping this leaks GPU memory on every grow.
+        this.previousVB?.dispose();
+        this.nextVB?.dispose();
+        this.sideVB?.dispose();
+        this.widthVB?.dispose();
         this.buildGeometryBuffers();
     }
 
     rebuildMaterial(): void {
-        const shaderName = `quarksTrail_${Date.now()}`;
+        // Stable name: the trail shader source never varies, so registering it once
+        // keeps Effect.ShadersStore bounded and lets Babylon reuse compiled effects.
+        const shaderName = 'quarksTrail';
         const defines: string[] = [];
 
         if (this.settings.texture) {
             defines.push('USE_MAP');
         }
 
-        Effect.ShadersStore[shaderName + 'VertexShader'] = trail_vert;
-        Effect.ShadersStore[shaderName + 'FragmentShader'] = trail_frag;
+        const shaderLanguage = shaderLanguageFor(this.scene.getEngine());
+        registerShaders(
+            shaderName,
+            {glsl: trail_vert, wgsl: trail_vert_wgsl},
+            {glsl: trail_frag, wgsl: trail_frag_wgsl},
+            shaderLanguage
+        );
 
         const attributes = ['position', 'previous', 'next', 'side', 'width', 'uv', 'color'];
-        const uniforms = ['world', 'view', 'projection', 'worldViewProjection', 'lineWidth', 'resolution', 'sizeAttenuation'];
+        const uniforms = [
+            'world',
+            'view',
+            'projection',
+            'worldViewProjection',
+            'lineWidth',
+            'resolution',
+            'sizeAttenuation',
+        ];
         const samplers: string[] = [];
 
         if (this.settings.texture) {
             samplers.push('map');
         }
 
-        const mat = new ShaderMaterial(shaderName, this.scene,
+        const mat = new ShaderMaterial(
+            shaderName,
+            this.scene,
             {vertex: shaderName, fragment: shaderName},
             {
                 attributes,
@@ -129,6 +173,7 @@ export class TrailBatch extends VFXBatch {
                 samplers,
                 defines,
                 needAlphaBlending: this.settings.materialTransparent,
+                shaderLanguage,
             }
         );
 
@@ -137,11 +182,19 @@ export class TrailBatch extends VFXBatch {
         }
         const engine = this.scene.getEngine();
         mat.setFloat('lineWidth', 1);
-        mat.setVector2('resolution', new BVector2(engine.getRenderWidth(), engine.getRenderHeight()));
+        // Reused across binds, and only re-uploaded when the render target resizes.
+        const resolution = new BVector2(engine.getRenderWidth(), engine.getRenderHeight());
+        mat.setVector2('resolution', resolution);
         mat.setFloat('sizeAttenuation', 1);
         mat.onBindObservable.add(() => {
             const renderEngine = this.scene.getEngine();
-            mat.setVector2('resolution', new BVector2(renderEngine.getRenderWidth(), renderEngine.getRenderHeight()));
+            const width = renderEngine.getRenderWidth();
+            const height = renderEngine.getRenderHeight();
+            if (resolution.x !== width || resolution.y !== height) {
+                resolution.x = width;
+                resolution.y = height;
+                mat.setVector2('resolution', resolution);
+            }
         });
 
         mat.backFaceCulling = false;
@@ -163,30 +216,45 @@ export class TrailBatch extends VFXBatch {
     private vector3_ = new Vector3();
     private quaternion_ = new Quaternion();
 
+    /** Forces the emitter's world matrix to be current before sampling it. */
+    private static ensureWorldMatrix(system: IParticleSystem): void {
+        const emitter = system.emitter as {computeWorldMatrix?: (force: boolean) => void};
+        if (emitter.computeWorldMatrix) {
+            emitter.computeWorldMatrix(true);
+        }
+    }
+
     update(): void {
         let index = 0;
         let triangles = 0;
 
         let particleCount = 0;
         const visibleSystems = this.getVisibleSystems();
-        for (const system of visibleSystems) {
+        for (let s = 0; s < visibleSystems.length; s++) {
+            const system = visibleSystems[s];
+            const particles = system.particles;
             for (let j = 0; j < system.particleNum; j++) {
-                particleCount += this.getTrailHistoryCount(system.particles[j] as TrailParticle) * 2;
+                const historyCount = (particles[j] as TrailParticle).historyCount;
+                if (historyCount === 0) {
+                    continue;
+                }
+                // +2 reserves the live tip vertex pair that frames between
+                // simulation steps append ahead of the recorded head.
+                particleCount += historyCount * 2 + 2;
             }
         }
         if (particleCount > this.maxParticles) {
             this.expandBuffers(particleCount);
         }
 
-        for (const system of visibleSystems) {
-            // Ensure world matrix is up to date
-            if ((system.emitter as any).computeWorldMatrix) {
-                (system.emitter as any).computeWorldMatrix(true);
-            }
+        for (let s = 0; s < visibleSystems.length; s++) {
+            const system = visibleSystems[s];
+            TrailBatch.ensureWorldMatrix(system);
             const rotation = this.quaternion_;
             const translation = this.vector2_;
             const scale = this.vector3_;
-            system.emitter.matrixWorld.decompose(translation, rotation, scale);
+            const emitterMatrix = system.emitter.matrixWorld;
+            emitterMatrix.decompose(translation, rotation, scale);
 
             const particles = system.particles;
             const particleNum = system.particleNum;
@@ -196,123 +264,117 @@ export class TrailBatch extends VFXBatch {
             const tileHeight = 1 / vTileCount;
             const systemWorldSpace = system.worldSpace;
             const objectScale = (Math.abs(scale.x) + Math.abs(scale.y) + Math.abs(scale.z)) / 3;
+            // A ribbon's samples were recorded at past steps and stay where they
+            // were. The particle itself has moved on since the step that wrote
+            // the newest sample, so frames that run no step would freeze the
+            // whole trail if that head were left behind. Moving the recorded
+            // head forward to catch up stretches the last segment from one
+            // step of travel to almost two, then snaps it back when the next
+            // step lands — a rubber-band the eye reads as lost smoothness,
+            // especially at 120Hz where every other frame is between steps.
+            // Appending a live tip ahead of the recorded samples keeps the
+            // body still and the tip moving without that pulse. A trail pinned
+            // to the emitter's origin is driven by the emitter's transform
+            // rather than by the particle's velocity, so it is left alone.
+            const residual = (system.rendererEmitterSettings as TrailSettings).followLocalOrigin
+                ? 0
+                : (system.simulationResidual ?? 0);
+            // Measured from the step the particle just took, not from its
+            // velocity: a trail pulled along by an orbit or by a plugin's own
+            // behavior has motion no velocity term describes.
+            const stepFraction = residual === 0 ? 0 : residual / (system.simulationStep ?? residual);
 
             for (let j = 0; j < particleNum; j++) {
                 const particle = particles[j] as TrailParticle;
-                const particleAny = particle as any;
-                const fastHistoryCount = particleAny._trailHistoryCount as number | undefined;
-                const fastHistoryCapacity = particleAny._trailHistoryCapacity as number | undefined;
-                const fastHistoryHead = particleAny._trailHistoryHead as number | undefined;
-                const fastHistoryPositions = particleAny._trailHistoryPositions as Float32Array | undefined;
-                const fastHistorySizes = particleAny._trailHistorySizes as Float32Array | undefined;
-                const fastHistoryColors = particleAny._trailHistoryColors as Float32Array | undefined;
-                const hasFastHistory =
-                    typeof fastHistoryCount === 'number' &&
-                    fastHistoryCount > 0 &&
-                    typeof fastHistoryCapacity === 'number' &&
-                    typeof fastHistoryHead === 'number' &&
-                    fastHistoryPositions instanceof Float32Array &&
-                    fastHistorySizes instanceof Float32Array &&
-                    fastHistoryColors instanceof Float32Array;
-                const historyCapacity = hasFastHistory ? (fastHistoryCapacity as number) : 0;
-                const historyHead = hasFastHistory ? (fastHistoryHead as number) : 0;
-                const historyPositions = fastHistoryPositions as Float32Array;
-                const historySizes = fastHistorySizes as Float32Array;
-                const historyColors = fastHistoryColors as Float32Array;
-                const particleHistory = particle.previous;
-                const particleHistoryLength = hasFastHistory ? fastHistoryCount : particleHistory.length;
+                const particleHistoryLength = particle.historyCount;
                 if (particleHistoryLength === 0) {
                     continue;
                 }
+                const historyCapacity = particle.historyCapacity;
+                const historyPositions = particle.historyPositions;
+                const historySizes = particle.historySizes;
+                const historyColors = particle.historyColors;
                 const col = particle.uvTile % vTileCount;
                 const row = Math.floor(particle.uvTile / vTileCount + 0.001);
                 const particleMatrix = particle.parentMatrix as unknown as Matrix4 | undefined;
-                const matrixToUse = particleMatrix ?? system.emitter.matrixWorld;
-
-                let previousNode = particleHistory.head;
-                let currentNode = previousNode;
-                let nextNode = currentNode?.next ?? currentNode;
-                const oldestFastHistoryIndex = hasFastHistory
-                    ? (historyHead - particleHistoryLength + historyCapacity) % historyCapacity
-                    : 0;
+                const me = (particleMatrix ?? emitterMatrix).elements;
+                const m00 = me[0],
+                    m01 = me[1],
+                    m02 = me[2],
+                    m03 = me[3];
+                const m10 = me[4],
+                    m11 = me[5],
+                    m12 = me[6],
+                    m13 = me[7];
+                const m20 = me[8],
+                    m21 = me[9],
+                    m22 = me[10],
+                    m23 = me[11];
+                const m30 = me[12],
+                    m31 = me[13],
+                    m32 = me[14],
+                    m33 = me[15];
+                const invHistoryLength = 1 / particleHistoryLength;
+
+                // Walk the ring buffer oldest-first with hand-rolled wrapping so the
+                // inner loop stays free of modulo operations.
+                let currentSlot = particle.getHistoryIndex(0);
+                let previousSlot = currentSlot;
 
                 for (let i = 0; i < particleHistoryLength; i++, index += 2) {
-                    let currentX: number;
-                    let currentY: number;
-                    let currentZ: number;
-                    let currentSize: number;
-                    let currentColorX: number;
-                    let currentColorY: number;
-                    let currentColorZ: number;
-                    let currentColorW: number;
-                    let previousX: number;
-                    let previousY: number;
-                    let previousZ: number;
-                    let nextX: number;
-                    let nextY: number;
-                    let nextZ: number;
-
-                    if (hasFastHistory) {
-                        const currentHistoryIndex = (oldestFastHistoryIndex + i) % historyCapacity;
-                        const previousHistoryIndex = i === 0 ? currentHistoryIndex : (oldestFastHistoryIndex + i - 1) % historyCapacity;
-                        const nextHistoryIndex =
-                            i + 1 < particleHistoryLength
-                                ? (oldestFastHistoryIndex + i + 1) % historyCapacity
-                                : currentHistoryIndex;
-
-                        const currentPosIndex = currentHistoryIndex * 3;
-                        const previousPosIndex = previousHistoryIndex * 3;
-                        const nextPosIndex = nextHistoryIndex * 3;
-
-                        currentX = historyPositions[currentPosIndex];
-                        currentY = historyPositions[currentPosIndex + 1];
-                        currentZ = historyPositions[currentPosIndex + 2];
-                        previousX = historyPositions[previousPosIndex];
-                        previousY = historyPositions[previousPosIndex + 1];
-                        previousZ = historyPositions[previousPosIndex + 2];
-                        nextX = historyPositions[nextPosIndex];
-                        nextY = historyPositions[nextPosIndex + 1];
-                        nextZ = historyPositions[nextPosIndex + 2];
-
-                        currentSize = historySizes[currentHistoryIndex];
-                        const currentColorIndex = currentHistoryIndex * 4;
-                        currentColorX = historyColors[currentColorIndex];
-                        currentColorY = historyColors[currentColorIndex + 1];
-                        currentColorZ = historyColors[currentColorIndex + 2];
-                        currentColorW = historyColors[currentColorIndex + 3];
-                    } else {
-                        const previous = previousNode!.data as RecordState;
-                        const current = currentNode!.data as RecordState;
-                        const next = nextNode!.data as RecordState;
-                        currentX = current.position.x;
-                        currentY = current.position.y;
-                        currentZ = current.position.z;
-                        previousX = previous.position.x;
-                        previousY = previous.position.y;
-                        previousZ = previous.position.z;
-                        nextX = next.position.x;
-                        nextY = next.position.y;
-                        nextZ = next.position.z;
-                        currentSize = current.size;
-                        currentColorX = current.color.x;
-                        currentColorY = current.color.y;
-                        currentColorZ = current.color.z;
-                        currentColorW = current.color.w;
-                    }
+                    const nextSlot =
+                        i + 1 < particleHistoryLength
+                            ? currentSlot + 1 === historyCapacity
+                                ? 0
+                                : currentSlot + 1
+                            : currentSlot;
+
+                    const currentPosIndex = currentSlot * 3;
+                    const previousPosIndex = previousSlot * 3;
+                    const nextPosIndex = nextSlot * 3;
+
+                    let currentX = historyPositions[currentPosIndex];
+                    let currentY = historyPositions[currentPosIndex + 1];
+                    let currentZ = historyPositions[currentPosIndex + 2];
+                    let previousX = historyPositions[previousPosIndex];
+                    let previousY = historyPositions[previousPosIndex + 1];
+                    let previousZ = historyPositions[previousPosIndex + 2];
+                    let nextX = historyPositions[nextPosIndex];
+                    let nextY = historyPositions[nextPosIndex + 1];
+                    let nextZ = historyPositions[nextPosIndex + 2];
+
+                    const currentSize = historySizes[currentSlot];
+                    const currentColorIndex = currentSlot * 4;
+                    const currentColorX = historyColors[currentColorIndex];
+                    const currentColorY = historyColors[currentColorIndex + 1];
+                    const currentColorZ = historyColors[currentColorIndex + 2];
+                    const currentColorW = historyColors[currentColorIndex + 3];
+
+                    previousSlot = currentSlot;
+                    currentSlot = nextSlot;
 
                     if (!systemWorldSpace) {
-                        this.vector_.set(currentX, currentY, currentZ).applyMatrix4(matrixToUse);
-                        currentX = this.vector_.x;
-                        currentY = this.vector_.y;
-                        currentZ = this.vector_.z;
-                        this.vector_.set(previousX, previousY, previousZ).applyMatrix4(matrixToUse);
-                        previousX = this.vector_.x;
-                        previousY = this.vector_.y;
-                        previousZ = this.vector_.z;
-                        this.vector_.set(nextX, nextY, nextZ).applyMatrix4(matrixToUse);
-                        nextX = this.vector_.x;
-                        nextY = this.vector_.y;
-                        nextZ = this.vector_.z;
+                        // Inlined point transforms — three per trail sample.
+                        let w = 1 / (m03 * currentX + m13 * currentY + m23 * currentZ + m33);
+                        let tx = (m00 * currentX + m10 * currentY + m20 * currentZ + m30) * w;
+                        let ty = (m01 * currentX + m11 * currentY + m21 * currentZ + m31) * w;
+                        currentZ = (m02 * currentX + m12 * currentY + m22 * currentZ + m32) * w;
+                        currentX = tx;
+                        currentY = ty;
+
+                        w = 1 / (m03 * previousX + m13 * previousY + m23 * previousZ + m33);
+                        tx = (m00 * previousX + m10 * previousY + m20 * previousZ + m30) * w;
+                        ty = (m01 * previousX + m11 * previousY + m21 * previousZ + m31) * w;
+                        previousZ = (m02 * previousX + m12 * previousY + m22 * previousZ + m32) * w;
+                        previousX = tx;
+                        previousY = ty;
+
+                        w = 1 / (m03 * nextX + m13 * nextY + m23 * nextZ + m33);
+                        tx = (m00 * nextX + m10 * nextY + m20 * nextZ + m30) * w;
+                        ty = (m01 * nextX + m11 * nextY + m21 * nextZ + m31) * w;
+                        nextZ = (m02 * nextX + m12 * nextY + m22 * nextZ + m32) * w;
+                        nextX = tx;
+                        nextY = ty;
                     }
 
                     const pi = index * 3;
@@ -349,9 +411,10 @@ export class TrailBatch extends VFXBatch {
                     }
 
                     const ui = index * 2;
-                    this.uvBuffer[ui] = (i / particleHistoryLength + col) * tileWidth;
+                    const u = (i * invHistoryLength + col) * tileWidth;
+                    this.uvBuffer[ui] = u;
                     this.uvBuffer[ui + 1] = (vTileCount - row - 1) * tileHeight;
-                    this.uvBuffer[ui + 2] = (i / particleHistoryLength + col) * tileWidth;
+                    this.uvBuffer[ui + 2] = u;
                     this.uvBuffer[ui + 3] = (vTileCount - row) * tileHeight;
 
                     const cci = index * 4;
@@ -374,39 +437,173 @@ export class TrailBatch extends VFXBatch {
                         this.indexBuffer[triangles * 3 + 2] = index + 3;
                         triangles++;
                     }
+                }
 
-                    if (!hasFastHistory) {
-                        previousNode = currentNode;
-                        currentNode = nextNode;
-                        nextNode = nextNode?.next ?? nextNode;
+                // Live tip: same place a sprite would be drawn this frame, past
+                // the last recorded sample. The recorded ribbon stays put.
+                if (stepFraction !== 0) {
+                    const previousHead = particle.previousPosition;
+                    const position = particle.position;
+                    let tipX = position.x + (position.x - previousHead.x) * stepFraction;
+                    let tipY = position.y + (position.y - previousHead.y) * stepFraction;
+                    let tipZ = position.z + (position.z - previousHead.z) * stepFraction;
+                    const headIndex = index - 2;
+                    const headX = this.positionBuffer[headIndex * 3];
+                    const headY = this.positionBuffer[headIndex * 3 + 1];
+                    const headZ = this.positionBuffer[headIndex * 3 + 2];
+
+                    if (!systemWorldSpace) {
+                        const w = 1 / (m03 * tipX + m13 * tipY + m23 * tipZ + m33);
+                        const tx = (m00 * tipX + m10 * tipY + m20 * tipZ + m30) * w;
+                        const ty = (m01 * tipX + m11 * tipY + m21 * tipZ + m31) * w;
+                        tipZ = (m02 * tipX + m12 * tipY + m22 * tipZ + m32) * w;
+                        tipX = tx;
+                        tipY = ty;
                     }
+
+                    const tipPi = index * 3;
+                    this.positionBuffer[tipPi] = tipX;
+                    this.positionBuffer[tipPi + 1] = tipY;
+                    this.positionBuffer[tipPi + 2] = tipZ;
+                    this.positionBuffer[tipPi + 3] = tipX;
+                    this.positionBuffer[tipPi + 4] = tipY;
+                    this.positionBuffer[tipPi + 5] = tipZ;
+
+                    this.previousBuffer[tipPi] = headX;
+                    this.previousBuffer[tipPi + 1] = headY;
+                    this.previousBuffer[tipPi + 2] = headZ;
+                    this.previousBuffer[tipPi + 3] = headX;
+                    this.previousBuffer[tipPi + 4] = headY;
+                    this.previousBuffer[tipPi + 5] = headZ;
+
+                    this.nextBuffer[tipPi] = tipX;
+                    this.nextBuffer[tipPi + 1] = tipY;
+                    this.nextBuffer[tipPi + 2] = tipZ;
+                    this.nextBuffer[tipPi + 3] = tipX;
+                    this.nextBuffer[tipPi + 4] = tipY;
+                    this.nextBuffer[tipPi + 5] = tipZ;
+
+                    // The recorded head's `next` was itself; point it at the tip
+                    // so the shader builds the live segment from one version of
+                    // each endpoint.
+                    const headPi = headIndex * 3;
+                    this.nextBuffer[headPi] = tipX;
+                    this.nextBuffer[headPi + 1] = tipY;
+                    this.nextBuffer[headPi + 2] = tipZ;
+                    this.nextBuffer[headPi + 3] = tipX;
+                    this.nextBuffer[headPi + 4] = tipY;
+                    this.nextBuffer[headPi + 5] = tipZ;
+
+                    this.sideBuffer[index] = 1;
+                    this.sideBuffer[index + 1] = -1;
+
+                    const tipSize = particle.size.x;
+                    if (systemWorldSpace || particle.parentMatrix) {
+                        this.widthBuffer[index] = tipSize;
+                        this.widthBuffer[index + 1] = tipSize;
+                    } else {
+                        this.widthBuffer[index] = tipSize * objectScale;
+                        this.widthBuffer[index + 1] = tipSize * objectScale;
+                    }
+
+                    const tipUi = index * 2;
+                    const tipU = (1 + col) * tileWidth;
+                    this.uvBuffer[tipUi] = tipU;
+                    this.uvBuffer[tipUi + 1] = (vTileCount - row - 1) * tileHeight;
+                    this.uvBuffer[tipUi + 2] = tipU;
+                    this.uvBuffer[tipUi + 3] = (vTileCount - row) * tileHeight;
+
+                    const tipColor = particle.color;
+                    const tipCi = index * 4;
+                    this.colorBuffer[tipCi] = tipColor.x;
+                    this.colorBuffer[tipCi + 1] = tipColor.y;
+                    this.colorBuffer[tipCi + 2] = tipColor.z;
+                    this.colorBuffer[tipCi + 3] = tipColor.w;
+                    this.colorBuffer[tipCi + 4] = tipColor.x;
+                    this.colorBuffer[tipCi + 5] = tipColor.y;
+                    this.colorBuffer[tipCi + 6] = tipColor.z;
+                    this.colorBuffer[tipCi + 7] = tipColor.w;
+
+                    this.indexBuffer[triangles * 3] = headIndex;
+                    this.indexBuffer[triangles * 3 + 1] = headIndex + 1;
+                    this.indexBuffer[triangles * 3 + 2] = index;
+                    triangles++;
+                    this.indexBuffer[triangles * 3] = index;
+                    this.indexBuffer[triangles * 3 + 1] = headIndex + 1;
+                    this.indexBuffer[triangles * 3 + 2] = index + 1;
+                    triangles++;
+
+                    index += 2;
                 }
             }
         }
 
+        this.uploadGeometry(index, triangles);
+    }
+
+    /**
+     * Uploads the vertex data written by `update` and resizes the sub mesh.
+     *
+     * Split out of `update` on purpose: the Babylon mesh/sub-mesh plumbing here
+     * runs a handful of times per frame, and folding it into the per-vertex loop
+     * costs that loop its optimised code.
+     */
+    private uploadGeometry(index: number, triangles: number): void {
         if (index > 0 && triangles > 0) {
-            this.mesh.updateVerticesData(VertexBuffer.PositionKind, this.positionBuffer);
-            this.mesh.updateVerticesData(VertexBuffer.UVKind, this.uvBuffer);
+            // Upload only the vertices written this frame; the buffers are sized for
+            // the high-water mark of every system in the batch.
+            this.mesh.updateVerticesData(VertexBuffer.PositionKind, this.positionBuffer.subarray(0, index * 3));
+            this.mesh.updateVerticesData(VertexBuffer.UVKind, this.uvBuffer.subarray(0, index * 2));
             this.mesh.updateIndices(this.indexBuffer.subarray(0, triangles * 3));
-            this.previousVB.update(this.previousBuffer);
-            this.nextVB.update(this.nextBuffer);
-            this.sideVB.update(this.sideBuffer);
-            this.widthVB.update(this.widthBuffer);
+            this.previousVB.update(this.previousBuffer.subarray(0, index * 3));
+            this.nextVB.update(this.nextBuffer.subarray(0, index * 3));
+            this.sideVB.update(this.sideBuffer.subarray(0, index));
+            this.widthVB.update(this.widthBuffer.subarray(0, index));
 
             const colorVB = this.mesh.getVertexBuffer(VertexBuffer.ColorKind);
-            if (colorVB) colorVB.update(this.colorBuffer);
+            if (colorVB) colorVB.update(this.colorBuffer.subarray(0, index * 4));
 
             if (this.mesh.subMeshes && this.mesh.subMeshes.length > 0) {
-                const meshBoundingInfo = this.mesh.getBoundingInfo();
-                for (const subMesh of this.mesh.subMeshes) {
-                    (subMesh as any)._boundingInfo = meshBoundingInfo;
-                }
+                this.adoptMeshBounds();
                 this.mesh.subMeshes[0].indexCount = triangles * 3;
                 this.mesh.subMeshes[0].verticesCount = index;
             }
+            this.drawsNothing = false;
         } else if (this.mesh.subMeshes && this.mesh.subMeshes.length > 0) {
-            this.mesh.subMeshes[0].indexCount = 0;
-            this.mesh.subMeshes[0].verticesCount = 0;
+            // Nothing to draw. Leaving the count at zero still submits the draw,
+            // and WebGPU complains about it once per frame for as long as the
+            // batch stays empty — which, for a looping effect, is every gap
+            // between passes. Disabling the mesh instead costs a frame coming
+            // back, the flicker the sprite batch already works around.
+            //
+            // So draw a triangle whose corners are all the same vertex: it is a
+            // legal draw that rasterises nothing, whatever stale geometry is
+            // still in the buffers. Only written on the way into empty, not on
+            // every empty frame.
+            if (!this.drawsNothing) {
+                this.indexBuffer.fill(0, 0, 6);
+                this.mesh.updateIndices(this.indexBuffer.subarray(0, 6));
+                this.adoptMeshBounds();
+                this.drawsNothing = true;
+            }
+            this.mesh.subMeshes[0].indexCount = 6;
+            this.mesh.subMeshes[0].verticesCount = 1;
+        }
+    }
+
+    /**
+     * Points every sub mesh at the mesh's own bounds.
+     *
+     * Updating indices rebuilds the sub meshes, and a fresh one computes its
+     * bounds from the vertex data — which this batch keeps deliberately stale
+     * beyond the range it draws. Transparent sorting reads those bounds every
+     * frame, so they have to be replaced again after every index update, not
+     * only when the geometry is built.
+     */
+    private adoptMeshBounds(): void {
+        const meshBoundingInfo = this.mesh.getBoundingInfo();
+        for (const subMesh of this.mesh.subMeshes) {
+            (subMesh as any)._boundingInfo = meshBoundingInfo;
         }
     }