@codexo/exojs 0.6.1 → 0.6.2

package/dist/exo.esm.js

@@ -5638,9 +5638,9 @@ class WebGl2VertexArrayObject {
     }
 }
 
-var vertexSource$3 = "#version 300 es\nprecision lowp float;\nprecision lowp int;\n\n// Per-instance attributes (divisor = 1). Each Sprite contributes one entry\n// to the per-instance buffer; gl_VertexID 0..3 selects which corner of the\n// quad this invocation is computing.\nlayout(location = 0) in vec4 a_localBounds;     // left, top, right, bottom (local space)\nlayout(location = 1) in vec3 a_transformAB;     // a, b, x — first row of 2D affine\nlayout(location = 2) in vec3 a_transformCD;     // c, d, y — second row\nlayout(location = 3) in vec4 a_uvBounds;        // uMin, vMin, uMax, vMax (normalised, already flipY-swapped)\nlayout(location = 4) in vec4 a_color;           // RGBA tint\nlayout(location = 5) in uint a_textureSlot;\n\nuniform mat3 u_projection;\n\nout vec2 v_texcoord;\nout vec4 v_color;\nflat out uint v_textureSlot;\n\nvoid main(void) {\n    // gl_VertexID 0..3 → corner: 0=TL, 1=TR, 2=BL, 3=BR (TRIANGLE_STRIP order)\n    int vid = gl_VertexID;\n    int cornerX = vid & 1;\n    int cornerY = (vid >> 1) & 1;\n\n    // Local-space corner: pick from the bounds rectangle.\n    float localX = (cornerX == 0) ? a_localBounds.x : a_localBounds.z;\n    float localY = (cornerY == 0) ? a_localBounds.y : a_localBounds.w;\n\n    // Apply the per-instance affine transform: world = M * (localX, localY, 1)\n    float worldX = (a_transformAB.x * localX) + (a_transformAB.y * localY) + a_transformAB.z;\n    float worldY = (a_transformCD.x * localX) + (a_transformCD.y * localY) + a_transformCD.z;\n\n    gl_Position = vec4((u_projection * vec3(worldX, worldY, 1.0)).xy, 0.0, 1.0);\n\n    // UV: pick from the bounds rectangle. The CPU pre-swaps Y bounds when\n    // the texture is flipY, so the shader doesn't have to know.\n    float u = (cornerX == 0) ? a_uvBounds.x : a_uvBounds.z;\n    float v = (cornerY == 0) ? a_uvBounds.y : a_uvBounds.w;\n    v_texcoord = vec2(u, v);\n\n    v_color = vec4(a_color.rgb * a_color.a, a_color.a);\n    v_textureSlot = a_textureSlot;\n}\n";
+var vertexSource$4 = "#version 300 es\nprecision lowp float;\nprecision lowp int;\n\n// Per-instance attributes (divisor = 1). Each Sprite contributes one entry\n// to the per-instance buffer; gl_VertexID 0..3 selects which corner of the\n// quad this invocation is computing.\nlayout(location = 0) in vec4 a_localBounds;     // left, top, right, bottom (local space)\nlayout(location = 1) in vec3 a_transformAB;     // a, b, x — first row of 2D affine\nlayout(location = 2) in vec3 a_transformCD;     // c, d, y — second row\nlayout(location = 3) in vec4 a_uvBounds;        // uMin, vMin, uMax, vMax (normalised, already flipY-swapped)\nlayout(location = 4) in vec4 a_color;           // RGBA tint\nlayout(location = 5) in uint a_textureSlot;\n\nuniform mat3 u_projection;\n\nout vec2 v_texcoord;\nout vec4 v_color;\nflat out uint v_textureSlot;\n\nvoid main(void) {\n    // gl_VertexID 0..3 → corner: 0=TL, 1=TR, 2=BL, 3=BR (TRIANGLE_STRIP order)\n    int vid = gl_VertexID;\n    int cornerX = vid & 1;\n    int cornerY = (vid >> 1) & 1;\n\n    // Local-space corner: pick from the bounds rectangle.\n    float localX = (cornerX == 0) ? a_localBounds.x : a_localBounds.z;\n    float localY = (cornerY == 0) ? a_localBounds.y : a_localBounds.w;\n\n    // Apply the per-instance affine transform: world = M * (localX, localY, 1)\n    float worldX = (a_transformAB.x * localX) + (a_transformAB.y * localY) + a_transformAB.z;\n    float worldY = (a_transformCD.x * localX) + (a_transformCD.y * localY) + a_transformCD.z;\n\n    gl_Position = vec4((u_projection * vec3(worldX, worldY, 1.0)).xy, 0.0, 1.0);\n\n    // UV: pick from the bounds rectangle. The CPU pre-swaps Y bounds when\n    // the texture is flipY, so the shader doesn't have to know.\n    float u = (cornerX == 0) ? a_uvBounds.x : a_uvBounds.z;\n    float v = (cornerY == 0) ? a_uvBounds.y : a_uvBounds.w;\n    v_texcoord = vec2(u, v);\n\n    v_color = vec4(a_color.rgb * a_color.a, a_color.a);\n    v_textureSlot = a_textureSlot;\n}\n";
 
-var fragmentSource$3 = "#version 300 es\r\nprecision lowp float;\r\nprecision lowp int;\r\n\r\n// Multi-texture sprite batching: up to 8 textures bound per draw call,\r\n// each fragment selects its source via a flat-interpolated slot index.\r\n//\r\n// GLSL ES 3.0 forbids non-constant array-of-sampler indexing unless the\r\n// expression is dynamically uniform — which a per-vertex slot is not\r\n// once different triangles in the same batch carry different slots. The\r\n// if/else chain below dispatches statically and dodges that constraint.\r\n\r\nuniform sampler2D u_texture0;\r\nuniform sampler2D u_texture1;\r\nuniform sampler2D u_texture2;\r\nuniform sampler2D u_texture3;\r\nuniform sampler2D u_texture4;\r\nuniform sampler2D u_texture5;\r\nuniform sampler2D u_texture6;\r\nuniform sampler2D u_texture7;\r\n\r\nin vec2 v_texcoord;\r\nin vec4 v_color;\r\nflat in uint v_textureSlot;\r\n\r\nlayout(location = 0) out vec4 fragColor;\r\n\r\nvoid main(void) {\r\n    vec4 sampleColor;\r\n\r\n    if (v_textureSlot == 0u) {\r\n        sampleColor = texture(u_texture0, v_texcoord);\r\n    } else if (v_textureSlot == 1u) {\r\n        sampleColor = texture(u_texture1, v_texcoord);\r\n    } else if (v_textureSlot == 2u) {\r\n        sampleColor = texture(u_texture2, v_texcoord);\r\n    } else if (v_textureSlot == 3u) {\r\n        sampleColor = texture(u_texture3, v_texcoord);\r\n    } else if (v_textureSlot == 4u) {\r\n        sampleColor = texture(u_texture4, v_texcoord);\r\n    } else if (v_textureSlot == 5u) {\r\n        sampleColor = texture(u_texture5, v_texcoord);\r\n    } else if (v_textureSlot == 6u) {\r\n        sampleColor = texture(u_texture6, v_texcoord);\r\n    } else {\r\n        sampleColor = texture(u_texture7, v_texcoord);\r\n    }\r\n\r\n    fragColor = sampleColor * v_color;\r\n}\r\n";
+var fragmentSource$4 = "#version 300 es\r\nprecision lowp float;\r\nprecision lowp int;\r\n\r\n// Multi-texture sprite batching: up to 8 textures bound per draw call,\r\n// each fragment selects its source via a flat-interpolated slot index.\r\n//\r\n// GLSL ES 3.0 forbids non-constant array-of-sampler indexing unless the\r\n// expression is dynamically uniform — which a per-vertex slot is not\r\n// once different triangles in the same batch carry different slots. The\r\n// if/else chain below dispatches statically and dodges that constraint.\r\n\r\nuniform sampler2D u_texture0;\r\nuniform sampler2D u_texture1;\r\nuniform sampler2D u_texture2;\r\nuniform sampler2D u_texture3;\r\nuniform sampler2D u_texture4;\r\nuniform sampler2D u_texture5;\r\nuniform sampler2D u_texture6;\r\nuniform sampler2D u_texture7;\r\n\r\nin vec2 v_texcoord;\r\nin vec4 v_color;\r\nflat in uint v_textureSlot;\r\n\r\nlayout(location = 0) out vec4 fragColor;\r\n\r\nvoid main(void) {\r\n    vec4 sampleColor;\r\n\r\n    if (v_textureSlot == 0u) {\r\n        sampleColor = texture(u_texture0, v_texcoord);\r\n    } else if (v_textureSlot == 1u) {\r\n        sampleColor = texture(u_texture1, v_texcoord);\r\n    } else if (v_textureSlot == 2u) {\r\n        sampleColor = texture(u_texture2, v_texcoord);\r\n    } else if (v_textureSlot == 3u) {\r\n        sampleColor = texture(u_texture3, v_texcoord);\r\n    } else if (v_textureSlot == 4u) {\r\n        sampleColor = texture(u_texture4, v_texcoord);\r\n    } else if (v_textureSlot == 5u) {\r\n        sampleColor = texture(u_texture5, v_texcoord);\r\n    } else if (v_textureSlot == 6u) {\r\n        sampleColor = texture(u_texture6, v_texcoord);\r\n    } else {\r\n        sampleColor = texture(u_texture7, v_texcoord);\r\n    }\r\n\r\n    fragColor = sampleColor * v_color;\r\n}\r\n";
 
 /**
  * Instanced sprite renderer for WebGL2.
@@ -5688,7 +5688,7 @@ class WebGl2SpriteRenderer extends AbstractWebGl2Renderer {
     constructor(batchSize) {
         super();
         this._batchSize = batchSize;
-        this._shader = new Shader(vertexSource$3, fragmentSource$3);
+        this._shader = new Shader(vertexSource$4, fragmentSource$4);
         this._instanceData = new ArrayBuffer(batchSize * instanceStrideBytes$3);
         this._instanceFloat32 = new Float32Array(this._instanceData);
         this._instanceUint32 = new Uint32Array(this._instanceData);
@@ -5911,226 +5911,385 @@ class WebGl2SpriteRenderer extends AbstractWebGl2Renderer {
     }
 }
 
-var vertexSource$2 = "#version 300 es\nprecision lowp float;\nprecision lowp int;\n\n// Per-instance attributes (one entry per particle, 24 bytes total).\nlayout(location = 0) in vec2 a_translation;     // particle position in system-local space\nlayout(location = 1) in vec2 a_scale;            // particle scale\nlayout(location = 2) in float a_rotation;        // particle rotation in degrees\nlayout(location = 3) in vec4 a_color;            // RGBA tint\n\nuniform mat3 u_projection;\nuniform mat3 u_systemTransform;\nuniform vec4 u_localBounds;                      // left, top, right, bottom (system.vertices)\nuniform vec4 u_uvBounds;                         // uMin, vMin, uMax, vMax (flipY-swapped)\n\nout vec2 v_texcoord;\nout vec4 v_color;\n\nvoid main(void) {\n    // Static index buffer is [0,1,2,0,2,3] (triangle-list), so gl_VertexID 0..3\n    // maps to TL, TR, BR, BL via the same bit math the sprite renderer uses.\n    int vid = gl_VertexID;\n    int cornerX = ((vid + 1) >> 1) & 1;\n    int cornerY = vid >> 1;\n\n    float localX = (cornerX == 0) ? u_localBounds.x : u_localBounds.z;\n    float localY = (cornerY == 0) ? u_localBounds.y : u_localBounds.w;\n\n    // Per-particle scale + rotation.\n    vec2 rotation = vec2(sin(radians(a_rotation)), cos(radians(a_rotation)));\n    vec2 transformed = vec2(\n        (localX * (a_scale.x * rotation.y)) + (localY * (a_scale.y * rotation.x)),\n        (localX * (a_scale.x * -rotation.x)) + (localY * (a_scale.y * rotation.y))\n    );\n\n    vec3 worldPos = vec3(transformed + a_translation, 1.0);\n\n    gl_Position = vec4((u_projection * u_systemTransform * worldPos).xy, 0.0, 1.0);\n\n    float u = (cornerX == 0) ? u_uvBounds.x : u_uvBounds.z;\n    float v = (cornerY == 0) ? u_uvBounds.y : u_uvBounds.w;\n    v_texcoord = vec2(u, v);\n\n    v_color = vec4(a_color.rgb * a_color.a, a_color.a);\n}\n";
-
-var fragmentSource$2 = "#version 300 es\r\nprecision lowp float;\r\n\r\nuniform sampler2D u_texture;\r\n\r\nin vec2 v_texcoord;\r\nin vec4 v_color;\r\n\r\nlayout(location = 0) out vec4 fragColor;\r\n\r\nvoid main(void) {\r\n    fragColor = texture(u_texture, v_texcoord) * v_color;\r\n}\r\n";
-
-/**
- * Instanced particle renderer for WebGL2.
- *
- * One ParticleSystem = one batch. Each `render(system)` flushes any
- * pending batch, sets the system-level uniforms (transform, local
- * bounds, UV bounds, texture), and packs every active particle into
- * the per-instance buffer. The next `flush()` issues a single
- * `drawElementsInstanced` for that system.
- *
- * Per-instance layout (24 bytes per particle, 4 attributes):
- * ```
- *   translation  f32x2  (offset  0,  8 bytes)  particle position (system-local)
- *   scale        f32x2  (offset  8,  8 bytes)
- *   rotation     f32    (offset 16,  4 bytes)  degrees
- *   color        u8x4   (offset 20,  4 bytes)  RGBA tint, normalised
- * ```
- *
- * vs the previous per-vertex layout (36 bytes per vertex × 4 verts =
- * 144 bytes per particle), this is an 83% bandwidth reduction and
- * roughly 80% fewer CPU writes per particle (one pack call vs four
- * duplicated vertex writes plus per-corner UV coords).
- *
- * The system transform stays as a uniform — mixing systems in one
- * batch would require either a per-instance transform matrix (more
- * bandwidth) or per-particle texture-slot indexing (multi-texture
- * support similar to the sprite renderer). Both are follow-ups; the
- * current pattern keeps the renderer focused on the per-particle win.
- */
-const instanceStrideBytes$2 = 24;
-const wordsPerInstance$1 = instanceStrideBytes$2 / Uint32Array.BYTES_PER_ELEMENT;
-const indicesPerQuad = 6;
-const quadIndices$2 = new Uint16Array([0, 1, 2, 0, 2, 3]);
-class WebGl2ParticleRenderer extends AbstractWebGl2Renderer {
-    _shader;
-    _batchSize;
-    _instanceData;
-    _instanceFloat32;
-    _instanceUint32;
-    _instanceCount = 0;
-    _currentTexture = null;
-    _currentBlendMode = null;
-    _currentView = null;
-    _currentViewId = -1;
-    _instanceBuffer = null;
-    _indexBuffer = null;
-    _vao = null;
-    _connection = null;
-    constructor(batchSize) {
-        super();
-        this._batchSize = batchSize;
-        this._shader = new Shader(vertexSource$2, fragmentSource$2);
-        this._instanceData = new ArrayBuffer(batchSize * instanceStrideBytes$2);
-        this._instanceFloat32 = new Float32Array(this._instanceData);
-        this._instanceUint32 = new Uint32Array(this._instanceData);
+const createQuadIndices = (size) => {
+    const data = new Uint16Array(size * 6);
+    const len = data.length;
+    for (let i = 0, offset = 0; i < len; i += 6, offset += 4) {
+        data[i] = offset;
+        data[i + 1] = offset + 1;
+        data[i + 2] = offset + 2;
+        data[i + 3] = offset;
+        data[i + 4] = offset + 2;
+        data[i + 5] = offset + 3;
     }
-    render(system) {
-        const backend = this.getBackend();
-        const { texture, particles, blendMode } = system;
-        const textureChanged = texture !== this._currentTexture;
-        const blendModeChanged = blendMode !== this._currentBlendMode;
-        // System transform / texture / UV / local-bounds are uniforms, so
-        // mixing systems in one batch is invalid. Flush any prior system
-        // before setting up this one.
-        this.flush();
-        if (textureChanged) {
-            this._currentTexture = texture;
-            backend.bindTexture(texture);
-        }
-        if (blendModeChanged) {
-            this._currentBlendMode = blendMode;
-            backend.setBlendMode(blendMode);
-        }
-        // System-level uniforms are set before packing so the eventual
-        // flush() can sync them in one go.
-        const localBounds = system.vertices;
-        const uvBounds = this._unpackUvBounds(system);
-        this._shader
-            .getUniform('u_systemTransform')
-            .setValue(system.getGlobalTransform().toArray(false));
-        this._shader
-            .getUniform('u_localBounds')
-            .setValue(localBounds);
-        this._shader
-            .getUniform('u_uvBounds')
-            .setValue(uvBounds);
-        const f32 = this._instanceFloat32;
-        const u32 = this._instanceUint32;
-        const limit = Math.min(particles.length, this._batchSize);
-        for (let i = 0; i < limit; i++) {
-            const particle = particles[i];
-            const offset = i * wordsPerInstance$1;
-            f32[offset + 0] = particle.position.x;
-            f32[offset + 1] = particle.position.y;
-            f32[offset + 2] = particle.scale.x;
-            f32[offset + 3] = particle.scale.y;
-            f32[offset + 4] = particle.rotation;
-            u32[offset + 5] = particle.tint.toRgba();
+    return data;
+};
+const createCanvas = (options = {}) => {
+    const { canvas, fillStyle, width, height } = options;
+    const newCanvas = canvas ?? document.createElement('canvas');
+    const context = newCanvas.getContext('2d');
+    newCanvas.width = width ?? 10;
+    newCanvas.height = height ?? 10;
+    context.fillStyle = fillStyle ?? '#6495ed';
+    context.fillRect(0, 0, newCanvas.width, newCanvas.height);
+    return newCanvas;
+};
+const heightCache = new Map();
+const determineFontHeight = (font) => {
+    if (!heightCache.has(font)) {
+        const body = document.body;
+        const dummy = document.createElement('div');
+        dummy.appendChild(document.createTextNode('M'));
+        dummy.setAttribute('style', `font: ${font};position:absolute;top:0;left:0`);
+        body.appendChild(dummy);
+        heightCache.set(font, dummy.offsetHeight);
+        body.removeChild(dummy);
+    }
+    return heightCache.get(font);
+};
+
+class Texture {
+    static _black = null;
+    static _white = null;
+    static defaultSamplerOptions = {
+        scaleMode: ScaleModes.Linear,
+        wrapMode: WrapModes.ClampToEdge,
+        premultiplyAlpha: true,
+        generateMipMap: true,
+        flipY: false,
+    };
+    static empty = new Texture(null);
+    static get black() {
+        if (Texture._black === null) {
+            Texture._black = new Texture(createCanvas({ fillStyle: '#000' }));
         }
-        this._instanceCount = limit;
-        return this;
+        return Texture._black;
     }
-    flush() {
-        const backend = this.getBackendOrNull();
-        const instanceBuffer = this._instanceBuffer;
-        const indexBuffer = this._indexBuffer;
-        const vao = this._vao;
-        if (this._instanceCount === 0 || backend === null || instanceBuffer === null || indexBuffer === null || vao === null) {
-            return;
+    static get white() {
+        if (Texture._white === null) {
+            Texture._white = new Texture(createCanvas({ fillStyle: '#fff' }));
         }
-        const view = backend.view;
-        if (this._currentView !== view || this._currentViewId !== view.updateId) {
-            this._currentView = view;
-            this._currentViewId = view.updateId;
-            this._shader
-                .getUniform('u_projection')
-                .setValue(view.getTransform().toArray(false));
+        return Texture._white;
+    }
+    _version = 0;
+    _source = null;
+    _size = new Size(0, 0);
+    _destroyListeners = new Set();
+    _scaleMode;
+    _wrapMode;
+    _premultiplyAlpha = false;
+    _generateMipMap = false;
+    _flipY = false;
+    constructor(source = null, options) {
+        const { scaleMode, wrapMode, premultiplyAlpha, generateMipMap, flipY } = { ...Texture.defaultSamplerOptions, ...options };
+        this._scaleMode = scaleMode;
+        this._wrapMode = wrapMode;
+        this._premultiplyAlpha = premultiplyAlpha;
+        this._generateMipMap = generateMipMap;
+        this._flipY = flipY;
+        if (source !== null) {
+            this.setSource(source);
         }
-        this._shader.sync();
-        backend.bindVertexArrayObject(vao);
-        instanceBuffer.upload(this._instanceFloat32.subarray(0, this._instanceCount * wordsPerInstance$1));
-        vao.drawInstanced(indicesPerQuad, 0, this._instanceCount, RenderingPrimitives.Triangles);
-        backend.stats.batches++;
-        backend.stats.drawCalls++;
-        this._instanceCount = 0;
     }
-    onConnect(backend) {
-        const gl = backend.context;
-        this._shader.connect(createWebGl2ShaderProgram(gl));
-        this._connection = this._createConnection(gl);
-        this._indexBuffer = new WebGl2RenderBuffer(BufferTypes.ElementArrayBuffer, quadIndices$2, BufferUsage.StaticDraw)
-            .connect(this._createBufferRuntime(this._connection));
-        this._instanceBuffer = new WebGl2RenderBuffer(BufferTypes.ArrayBuffer, this._instanceData, BufferUsage.DynamicDraw)
-            .connect(this._createBufferRuntime(this._connection));
-        this._shader.sync();
-        this._vao = new WebGl2VertexArrayObject()
-            .addIndex(this._indexBuffer)
-            .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_translation'), gl.FLOAT, false, instanceStrideBytes$2, 0, false, 1)
-            .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_scale'), gl.FLOAT, false, instanceStrideBytes$2, 8, false, 1)
-            .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_rotation'), gl.FLOAT, false, instanceStrideBytes$2, 16, false, 1)
-            .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_color'), gl.UNSIGNED_BYTE, true, instanceStrideBytes$2, 20, false, 1)
-            .connect(this._createVaoRuntime(this._connection));
+    get source() {
+        return this._source;
     }
-    onDisconnect() {
-        this._shader.disconnect();
-        this._instanceBuffer?.destroy();
-        this._instanceBuffer = null;
-        this._indexBuffer?.destroy();
-        this._indexBuffer = null;
-        this._vao?.destroy();
-        this._vao = null;
-        this._connection = null;
-        this._currentTexture = null;
-        this._currentBlendMode = null;
-        this._currentView = null;
-        this._currentViewId = -1;
-        this._instanceCount = 0;
+    set source(source) {
+        this.setSource(source);
     }
-    destroy() {
-        this.disconnect();
-        this._shader.destroy();
+    get size() {
+        return this._size;
     }
-    /**
-     * Convert the system's per-corner packed-u32 texCoords into the
-     * (uMin, vMin, uMax, vMax) bounds the new vertex shader expects.
-     * Already accounts for flipY (the system's `texCoords` baked it in).
-     *
-     * The four packed u32s, by corner index, are:
-     *   [0] TL = (uMin/uMax | vMin/vMax depending on flipY)
-     *   [1] TR
-     *   [2] BR
-     *   [3] BL
-     * We need (uMin, vMin, uMax, vMax) — the corner-extreme values.
-     */
-    _uvBoundsScratch = new Float32Array(4);
-    _unpackUvBounds(system) {
-        const texCoords = system.texCoords;
-        // Each packed u32: low 16 bits = U normalised to 0..65535,
-        //                  high 16 bits = V normalised.
-        const uTopLeft = (texCoords[0] & 0xFFFF) / 0xFFFF;
-        const vTopLeft = ((texCoords[0] >>> 16) & 0xFFFF) / 0xFFFF;
-        const uBottomRight = (texCoords[2] & 0xFFFF) / 0xFFFF;
-        const vBottomRight = ((texCoords[2] >>> 16) & 0xFFFF) / 0xFFFF;
-        // For flipY: TL.v becomes vMax (was minY → maxY). The shader picks
-        // (cornerY == 0 ? vMin : vMax); writing TL.v into vMin and BR.v into
-        // vMax matches the original per-corner ordering whether or not flipY
-        // was applied at texCoords pack time.
-        this._uvBoundsScratch[0] = uTopLeft;
-        this._uvBoundsScratch[1] = vTopLeft;
-        this._uvBoundsScratch[2] = uBottomRight;
-        this._uvBoundsScratch[3] = vBottomRight;
-        return this._uvBoundsScratch;
+    set size(size) {
+        this.setSize(size.width, size.height);
     }
-    _createConnection(gl) {
+    get width() {
+        return this._size.width;
+    }
+    set width(width) {
+        this.setSize(width, this.height);
+    }
+    get height() {
+        return this._size.height;
+    }
+    set height(height) {
+        this.setSize(this.width, height);
+    }
+    get scaleMode() {
+        return this._scaleMode;
+    }
+    set scaleMode(scaleMode) {
+        this.setScaleMode(scaleMode);
+    }
+    get wrapMode() {
+        return this._wrapMode;
+    }
+    set wrapMode(wrapMode) {
+        this.setWrapMode(wrapMode);
+    }
+    get premultiplyAlpha() {
+        return this._premultiplyAlpha;
+    }
+    set premultiplyAlpha(premultiplyAlpha) {
+        this.setPremultiplyAlpha(premultiplyAlpha);
+    }
+    get generateMipMap() {
+        return this._generateMipMap;
+    }
+    set generateMipMap(generateMipMap) {
+        this._generateMipMap = generateMipMap;
+    }
+    get flipY() {
+        return this._flipY;
+    }
+    set flipY(flipY) {
+        this._flipY = flipY;
+    }
+    get powerOfTwo() {
+        return isPowerOfTwo(this.width) && isPowerOfTwo(this.height);
+    }
+    get version() {
+        return this._version;
+    }
+    addDestroyListener(listener) {
+        this._destroyListeners.add(listener);
+        return this;
+    }
+    removeDestroyListener(listener) {
+        this._destroyListeners.delete(listener);
+        return this;
+    }
+    setScaleMode(scaleMode) {
+        if (this._scaleMode !== scaleMode) {
+            this._scaleMode = scaleMode;
+            this._touch();
+        }
+        return this;
+    }
+    setWrapMode(wrapMode) {
+        if (this._wrapMode !== wrapMode) {
+            this._wrapMode = wrapMode;
+            this._touch();
+        }
+        return this;
+    }
+    setPremultiplyAlpha(premultiplyAlpha) {
+        if (this._premultiplyAlpha !== premultiplyAlpha) {
+            this._premultiplyAlpha = premultiplyAlpha;
+            this._touch();
+        }
+        return this;
+    }
+    setSource(source) {
+        if (this._source !== source) {
+            this._source = source;
+            this.updateSource();
+        }
+        return this;
+    }
+    updateSource() {
+        const { width, height } = getTextureSourceSize(this._source);
+        this.setSize(width, height);
+        this._touch();
+        return this;
+    }
+    setSize(width, height) {
+        if (!this._size.equals({ width, height })) {
+            this._size.set(width, height);
+            this._touch();
+        }
+        return this;
+    }
+    destroy() {
+        for (const listener of Array.from(this._destroyListeners)) {
+            listener();
+        }
+        this._destroyListeners.clear();
+        this._size.destroy();
+        this._source = null;
+    }
+    _touch() {
+        this._version++;
+    }
+}
+
+var vertexSource$3 = "#version 300 es\nprecision lowp float;\n\nlayout(location = 0) in vec2 a_position;\nlayout(location = 1) in vec2 a_texcoord;\nlayout(location = 2) in vec4 a_color;\n\nuniform mat3 u_projection;\nuniform mat3 u_translation;\n\nout vec2 v_texcoord;\nout vec4 v_color;\n\nvoid main(void) {\n    gl_Position = vec4((u_projection * u_translation * vec3(a_position, 1.0)).xy, 0.0, 1.0);\n    v_texcoord = a_texcoord;\n    v_color = a_color;\n}\n";
+
+var fragmentSource$3 = "#version 300 es\nprecision lowp float;\n\nuniform sampler2D u_texture;\nuniform vec4 u_tint;\n\nin vec2 v_texcoord;\nin vec4 v_color;\n\nlayout(location = 0) out vec4 fragColor;\n\nvoid main(void) {\n    vec4 base = texture(u_texture, v_texcoord) * v_color * u_tint;\n    fragColor = vec4(base.rgb * base.a, base.a);\n}\n";
+
+// Per-vertex layout (20 bytes):
+//   position: vec2 f32 (offset  0,  8 bytes)
+//   texcoord: vec2 f32 (offset  8,  8 bytes)
+//   color:    u8x4 norm (offset 16, 4 bytes)
+const vertexStrideBytes$5 = 20;
+const vertexStrideWords$1 = vertexStrideBytes$5 / 4;
+const initialVertexCapacity = 64;
+const initialIndexCapacity = 192;
+const defaultVertexColor = 0xFFFFFFFF; // white, full alpha
+class WebGl2MeshRenderer extends AbstractWebGl2Renderer {
+    _shader = new Shader(vertexSource$3, fragmentSource$3);
+    _tintScratch = new Float32Array(4);
+    _textureUnitScratch = new Int32Array([0]);
+    _vertexCapacity = initialVertexCapacity;
+    _indexCapacity = initialIndexCapacity;
+    _vertexData = new ArrayBuffer(initialVertexCapacity * vertexStrideBytes$5);
+    _float32View = new Float32Array(this._vertexData);
+    _uint32View = new Uint32Array(this._vertexData);
+    _indexData = new Uint16Array(initialIndexCapacity);
+    _connection = null;
+    _currentBlendMode = null;
+    _currentView = null;
+    _viewId = -1;
+    render(mesh) {
+        const connection = this._connection;
+        if (!connection) {
+            throw new Error('WebGl2MeshRenderer is not connected to a backend.');
+        }
+        const vertexCount = mesh.vertexCount;
+        if (vertexCount === 0) {
+            return;
+        }
+        const backend = this.getBackend();
+        const blendMode = mesh.blendMode;
+        if (blendMode !== this._currentBlendMode) {
+            this._currentBlendMode = blendMode;
+            backend.setBlendMode(blendMode);
+        }
+        const view = backend.view;
+        if (this._currentView !== view || this._viewId !== view.updateId) {
+            this._currentView = view;
+            this._viewId = view.updateId;
+            this._shader.getUniform('u_projection').setValue(view.getTransform().toArray(false));
+        }
+        this._shader.getUniform('u_translation').setValue(mesh.getGlobalTransform().toArray(false));
+        const tint = mesh.tint;
+        this._tintScratch[0] = tint.red;
+        this._tintScratch[1] = tint.green;
+        this._tintScratch[2] = tint.blue;
+        this._tintScratch[3] = tint.alpha;
+        this._shader.getUniform('u_tint').setValue(this._tintScratch);
+        // The fragment shader always samples u_texture; meshes without an
+        // explicit texture get the engine's 1x1 white default so the shader
+        // path stays branchless.
+        const meshTexture = mesh.texture ?? Texture.white;
+        this._shader.getUniform('u_texture').setValue(this._textureUnitScratch);
+        backend.bindTexture(meshTexture, 0);
+        this._ensureVertexCapacity(vertexCount);
+        const positions = mesh.vertices;
+        const uvs = mesh.uvs;
+        const colors = mesh.colors;
+        for (let i = 0; i < vertexCount; i++) {
+            const word = i * vertexStrideWords$1;
+            const pair = i * 2;
+            this._float32View[word] = positions[pair];
+            this._float32View[word + 1] = positions[pair + 1];
+            if (uvs !== null) {
+                this._float32View[word + 2] = uvs[pair];
+                this._float32View[word + 3] = uvs[pair + 1];
+            }
+            else {
+                this._float32View[word + 2] = 0;
+                this._float32View[word + 3] = 0;
+            }
+            this._uint32View[word + 4] = colors !== null ? colors[i] : defaultVertexColor;
+        }
+        const indexCount = mesh.indexCount;
+        this._ensureIndexCapacity(indexCount);
+        if (mesh.indices !== null) {
+            this._indexData.set(mesh.indices, 0);
+        }
+        else {
+            for (let i = 0; i < indexCount; i++) {
+                this._indexData[i] = i;
+            }
+        }
+        this._shader.sync();
+        backend.bindVertexArrayObject(connection.vao);
+        connection.vertexBuffer.upload(this._float32View.subarray(0, vertexCount * vertexStrideWords$1));
+        connection.indexBuffer.upload(this._indexData.subarray(0, indexCount));
+        connection.vao.draw(indexCount, 0, RenderingPrimitives.Triangles);
+        backend.stats.batches++;
+        backend.stats.drawCalls++;
+    }
+    flush() {
+        // Mesh draws are immediate per-mesh; nothing to batch.
+    }
+    destroy() {
+        this.disconnect();
+        this._shader.destroy();
+        this._currentBlendMode = null;
+        this._currentView = null;
+    }
+    onConnect(backend) {
+        const gl = backend.context;
         const vaoHandle = gl.createVertexArray();
         if (vaoHandle === null) {
-            throw new Error('WebGl2ParticleRenderer: could not create vertex array object.');
+            throw new Error('Could not create vertex array object.');
         }
-        return {
-            gl,
-            buffers: new Map(),
-            vaoHandle,
-        };
+        this._shader.connect(createWebGl2ShaderProgram(gl));
+        const buffers = new Map();
+        const indexBuffer = new WebGl2RenderBuffer(BufferTypes.ElementArrayBuffer, this._indexData, BufferUsage.DynamicDraw)
+            .connect(this._createBufferRuntime(gl, buffers));
+        const vertexBuffer = new WebGl2RenderBuffer(BufferTypes.ArrayBuffer, this._vertexData, BufferUsage.DynamicDraw)
+            .connect(this._createBufferRuntime(gl, buffers));
+        // Force the shader's first finalize so attribute locations are
+        // available immediately (the async-compile path defers extraction
+        // to first sync(), but we need attributes here for VAO setup).
+        this._shader.sync();
+        const vao = new WebGl2VertexArrayObject()
+            .addIndex(indexBuffer)
+            .addAttribute(vertexBuffer, this._shader.getAttribute('a_position'), gl.FLOAT, false, vertexStrideBytes$5, 0)
+            .addAttribute(vertexBuffer, this._shader.getAttribute('a_texcoord'), gl.FLOAT, false, vertexStrideBytes$5, 8)
+            .addAttribute(vertexBuffer, this._shader.getAttribute('a_color'), gl.UNSIGNED_BYTE, true, vertexStrideBytes$5, 16)
+            .connect(this._createVaoRuntime(gl, vaoHandle));
+        this._connection = { gl, vao, vertexBuffer, indexBuffer };
     }
-    _createBufferRuntime(connection) {
-        const handle = connection.gl.createBuffer();
+    onDisconnect() {
+        const connection = this._connection;
+        if (!connection) {
+            return;
+        }
+        this._shader.disconnect();
+        connection.indexBuffer.destroy();
+        connection.vertexBuffer.destroy();
+        connection.vao.destroy();
+        this._connection = null;
+        this._currentBlendMode = null;
+        this._currentView = null;
+        this._viewId = -1;
+    }
+    _ensureVertexCapacity(vertexCount) {
+        if (vertexCount <= this._vertexCapacity) {
+            return;
+        }
+        while (this._vertexCapacity < vertexCount) {
+            this._vertexCapacity *= 2;
+        }
+        this._vertexData = new ArrayBuffer(this._vertexCapacity * vertexStrideBytes$5);
+        this._float32View = new Float32Array(this._vertexData);
+        this._uint32View = new Uint32Array(this._vertexData);
+    }
+    _ensureIndexCapacity(indexCount) {
+        if (indexCount <= this._indexCapacity) {
+            return;
+        }
+        while (this._indexCapacity < indexCount) {
+            this._indexCapacity *= 2;
+        }
+        this._indexData = new Uint16Array(this._indexCapacity);
+    }
+    _createBufferRuntime(gl, buffers) {
+        const handle = gl.createBuffer();
         if (handle === null) {
-            throw new Error('WebGl2ParticleRenderer: could not create render buffer.');
+            throw new Error('Could not create render buffer.');
         }
         return {
             bind: (buffer) => {
-                connection.gl.bindBuffer(buffer.type, handle);
+                gl.bindBuffer(buffer.type, handle);
             },
             upload: (buffer, offset) => {
-                const gl = connection.gl;
+                const state = buffers.get(buffer);
                 const data = buffer.data;
-                const state = connection.buffers.get(buffer);
                 gl.bindBuffer(buffer.type, handle);
                 if (state && state.dataByteLength >= data.byteLength) {
                     gl.bufferSubData(buffer.type, offset, data);
@@ -6138,22 +6297,21 @@ class WebGl2ParticleRenderer extends AbstractWebGl2Renderer {
                 }
                 else {
                     gl.bufferData(buffer.type, data, buffer.usage);
-                    connection.buffers.set(buffer, { handle, dataByteLength: data.byteLength });
+                    buffers.set(buffer, { handle, dataByteLength: data.byteLength });
                 }
             },
             destroy: (buffer) => {
-                connection.gl.deleteBuffer(handle);
-                connection.buffers.delete(buffer);
+                gl.deleteBuffer(handle);
+                buffers.delete(buffer);
                 buffer.disconnect();
             },
         };
     }
-    _createVaoRuntime(connection) {
+    _createVaoRuntime(gl, vaoHandle) {
         let appliedVersion = -1;
         return {
             bind: (vao) => {
-                const gl = connection.gl;
-                gl.bindVertexArray(connection.vaoHandle);
+                gl.bindVertexArray(vaoHandle);
                 if (appliedVersion !== vao.version) {
                     let lastBuffer = null;
                     for (const attribute of vao.attributes) {
@@ -6161,14 +6319,8 @@ class WebGl2ParticleRenderer extends AbstractWebGl2Renderer {
                             attribute.buffer.bind();
                             lastBuffer = attribute.buffer;
                         }
-                        if (attribute.integer) {
-                            gl.vertexAttribIPointer(attribute.location, attribute.size, attribute.type, attribute.stride, attribute.start);
-                        }
-                        else {
-                            gl.vertexAttribPointer(attribute.location, attribute.size, attribute.type, attribute.normalized, attribute.stride, attribute.start);
-                        }
+                        gl.vertexAttribPointer(attribute.location, attribute.size, attribute.type, attribute.normalized, attribute.stride, attribute.start);
                         gl.enableVertexAttribArray(attribute.location);
-                        gl.vertexAttribDivisor(attribute.location, attribute.divisor);
                     }
                     if (vao.indexBuffer) {
                         vao.indexBuffer.bind();
@@ -6177,10 +6329,9 @@ class WebGl2ParticleRenderer extends AbstractWebGl2Renderer {
                 }
             },
             unbind: () => {
-                connection.gl.bindVertexArray(null);
+                gl.bindVertexArray(null);
             },
             draw: (vao, size, start, type) => {
-                const gl = connection.gl;
                 if (vao.indexBuffer) {
                     gl.drawElements(type, size, gl.UNSIGNED_SHORT, start);
                 }
@@ -6188,181 +6339,234 @@ class WebGl2ParticleRenderer extends AbstractWebGl2Renderer {
                     gl.drawArrays(type, start, size);
                 }
             },
-            drawInstanced: (vao, count, start, instanceCount, type) => {
-                const gl = connection.gl;
-                if (vao.indexBuffer) {
-                    gl.drawElementsInstanced(type, count, gl.UNSIGNED_SHORT, start, instanceCount);
-                }
-                else {
-                    gl.drawArraysInstanced(type, start, count, instanceCount);
-                }
-            },
             destroy: (vao) => {
-                connection.gl.deleteVertexArray(connection.vaoHandle);
+                gl.deleteVertexArray(vaoHandle);
                 vao.disconnect();
             },
         };
     }
 }
 
-var vertexSource$1 = "#version 300 es\r\nprecision lowp float;\r\n\r\nlayout(location = 0) in vec2 a_position;\r\nlayout(location = 1) in vec4 a_color;\r\n\r\nuniform mat3 u_projection;\r\nuniform mat3 u_translation;\r\n\r\nout vec4 v_color;\r\n\r\nvoid main(void) {\r\n    gl_Position = vec4((u_projection * u_translation * vec3(a_position, 1.0)).xy, 0.0, 1.0);\r\n    v_color = vec4(a_color.rgb * a_color.a, a_color.a);\r\n}\r\n";
+var vertexSource$2 = "#version 300 es\nprecision lowp float;\nprecision lowp int;\n\n// Per-instance attributes (one entry per particle, 24 bytes total).\nlayout(location = 0) in vec2 a_translation;     // particle position in system-local space\nlayout(location = 1) in vec2 a_scale;            // particle scale\nlayout(location = 2) in float a_rotation;        // particle rotation in degrees\nlayout(location = 3) in vec4 a_color;            // RGBA tint\n\nuniform mat3 u_projection;\nuniform mat3 u_systemTransform;\nuniform vec4 u_localBounds;                      // left, top, right, bottom (system.vertices)\nuniform vec4 u_uvBounds;                         // uMin, vMin, uMax, vMax (flipY-swapped)\n\nout vec2 v_texcoord;\nout vec4 v_color;\n\nvoid main(void) {\n    // Static index buffer is [0,1,2,0,2,3] (triangle-list), so gl_VertexID 0..3\n    // maps to TL, TR, BR, BL via the same bit math the sprite renderer uses.\n    int vid = gl_VertexID;\n    int cornerX = ((vid + 1) >> 1) & 1;\n    int cornerY = vid >> 1;\n\n    float localX = (cornerX == 0) ? u_localBounds.x : u_localBounds.z;\n    float localY = (cornerY == 0) ? u_localBounds.y : u_localBounds.w;\n\n    // Per-particle scale + rotation.\n    vec2 rotation = vec2(sin(radians(a_rotation)), cos(radians(a_rotation)));\n    vec2 transformed = vec2(\n        (localX * (a_scale.x * rotation.y)) + (localY * (a_scale.y * rotation.x)),\n        (localX * (a_scale.x * -rotation.x)) + (localY * (a_scale.y * rotation.y))\n    );\n\n    vec3 worldPos = vec3(transformed + a_translation, 1.0);\n\n    gl_Position = vec4((u_projection * u_systemTransform * worldPos).xy, 0.0, 1.0);\n\n    float u = (cornerX == 0) ? u_uvBounds.x : u_uvBounds.z;\n    float v = (cornerY == 0) ? u_uvBounds.y : u_uvBounds.w;\n    v_texcoord = vec2(u, v);\n\n    v_color = vec4(a_color.rgb * a_color.a, a_color.a);\n}\n";
 
-var fragmentSource$1 = "#version 300 es\r\nprecision lowp float;\r\n\r\nlayout(location = 0) out vec4 fragColor;\r\n\r\nin vec4 v_color;\r\n\r\nvoid main(void) {\r\n    fragColor = v_color;\r\n}\r\n";
+var fragmentSource$2 = "#version 300 es\r\nprecision lowp float;\r\n\r\nuniform sampler2D u_texture;\r\n\r\nin vec2 v_texcoord;\r\nin vec4 v_color;\r\n\r\nlayout(location = 0) out vec4 fragColor;\r\n\r\nvoid main(void) {\r\n    fragColor = texture(u_texture, v_texcoord) * v_color;\r\n}\r\n";
 
-const minBatchVertexSize = 4;
-const vertexStrideBytes$3 = 12;
-const vertexStrideWords = vertexStrideBytes$3 / 4;
-class WebGl2PrimitiveRenderer extends AbstractWebGl2Renderer {
-    _vertexCapacity;
-    _indexCapacity;
-    _vertexData;
-    _indexData;
-    _float32View;
-    _uint32View;
-    _shader = new Shader(vertexSource$1, fragmentSource$1);
-    _connection = null;
+/**
+ * Instanced particle renderer for WebGL2.
+ *
+ * One ParticleSystem = one batch. Each `render(system)` flushes any
+ * pending batch, sets the system-level uniforms (transform, local
+ * bounds, UV bounds, texture), and packs every active particle into
+ * the per-instance buffer. The next `flush()` issues a single
+ * `drawElementsInstanced` for that system.
+ *
+ * Per-instance layout (24 bytes per particle, 4 attributes):
+ * ```
+ *   translation  f32x2  (offset  0,  8 bytes)  particle position (system-local)
+ *   scale        f32x2  (offset  8,  8 bytes)
+ *   rotation     f32    (offset 16,  4 bytes)  degrees
+ *   color        u8x4   (offset 20,  4 bytes)  RGBA tint, normalised
+ * ```
+ *
+ * vs the previous per-vertex layout (36 bytes per vertex × 4 verts =
+ * 144 bytes per particle), this is an 83% bandwidth reduction and
+ * roughly 80% fewer CPU writes per particle (one pack call vs four
+ * duplicated vertex writes plus per-corner UV coords).
+ *
+ * The system transform stays as a uniform — mixing systems in one
+ * batch would require either a per-instance transform matrix (more
+ * bandwidth) or per-particle texture-slot indexing (multi-texture
+ * support similar to the sprite renderer). Both are follow-ups; the
+ * current pattern keeps the renderer focused on the per-particle win.
+ */
+const instanceStrideBytes$2 = 24;
+const wordsPerInstance$1 = instanceStrideBytes$2 / Uint32Array.BYTES_PER_ELEMENT;
+const indicesPerQuad = 6;
+const quadIndices$2 = new Uint16Array([0, 1, 2, 0, 2, 3]);
+class WebGl2ParticleRenderer extends AbstractWebGl2Renderer {
+    _shader;
+    _batchSize;
+    _instanceData;
+    _instanceFloat32;
+    _instanceUint32;
+    _instanceCount = 0;
+    _currentTexture = null;
     _currentBlendMode = null;
     _currentView = null;
-    _viewId = -1;
+    _currentViewId = -1;
+    _instanceBuffer = null;
+    _indexBuffer = null;
+    _vao = null;
+    _connection = null;
     constructor(batchSize) {
         super();
-        this._vertexCapacity = Math.max(minBatchVertexSize, batchSize);
-        this._indexCapacity = Math.max(6, this._vertexCapacity * 3);
-        this._vertexData = new ArrayBuffer(this._vertexCapacity * vertexStrideBytes$3);
-        this._indexData = new Uint16Array(this._indexCapacity);
-        this._float32View = new Float32Array(this._vertexData);
-        this._uint32View = new Uint32Array(this._vertexData);
+        this._batchSize = batchSize;
+        this._shader = new Shader(vertexSource$2, fragmentSource$2);
+        this._instanceData = new ArrayBuffer(batchSize * instanceStrideBytes$2);
+        this._instanceFloat32 = new Float32Array(this._instanceData);
+        this._instanceUint32 = new Uint32Array(this._instanceData);
     }
-    render(shape) {
-        const connection = this._connection;
-        if (!connection) {
-            throw new Error('Renderer not connected');
-        }
+    render(system) {
         const backend = this.getBackend();
-        const { geometry, drawMode, color, blendMode } = shape;
-        const vertices = geometry.vertices;
-        const sourceIndices = geometry.indices;
-        const vertexCount = vertices.length / 2;
-        const indexCount = sourceIndices.length > 0 ? sourceIndices.length : vertexCount;
-        if (vertexCount === 0 || indexCount === 0) {
-            return;
+        const { texture, particles, blendMode } = system;
+        const textureChanged = texture !== this._currentTexture;
+        const blendModeChanged = blendMode !== this._currentBlendMode;
+        // System transform / texture / UV / local-bounds are uniforms, so
+        // mixing systems in one batch is invalid. Flush any prior system
+        // before setting up this one.
+        this.flush();
+        if (textureChanged) {
+            this._currentTexture = texture;
+            backend.bindTexture(texture);
         }
-        this._ensureVertexCapacity(vertexCount);
-        this._ensureIndexCapacity(indexCount);
-        if (blendMode !== this._currentBlendMode) {
+        if (blendModeChanged) {
             this._currentBlendMode = blendMode;
             backend.setBlendMode(blendMode);
         }
-        const view = backend.view;
-        if (this._currentView !== view || this._viewId !== view.updateId) {
-            this._currentView = view;
-            this._viewId = view.updateId;
-            this._shader.getUniform('u_projection').setValue(view.getTransform().toArray(false));
-        }
-        this._shader.getUniform('u_translation').setValue(shape.getGlobalTransform().toArray(false));
-        const packedColor = color.toRgba();
-        for (let i = 0; i < vertexCount; i++) {
-            const sourceIndex = i * 2;
-            const targetIndex = i * vertexStrideWords;
-            this._float32View[targetIndex] = vertices[sourceIndex];
-            this._float32View[targetIndex + 1] = vertices[sourceIndex + 1];
-            this._uint32View[targetIndex + 2] = packedColor;
+        // System-level uniforms are set before packing so the eventual
+        // flush() can sync them in one go.
+        const localBounds = system.vertices;
+        const uvBounds = this._unpackUvBounds(system);
+        this._shader
+            .getUniform('u_systemTransform')
+            .setValue(system.getGlobalTransform().toArray(false));
+        this._shader
+            .getUniform('u_localBounds')
+            .setValue(localBounds);
+        this._shader
+            .getUniform('u_uvBounds')
+            .setValue(uvBounds);
+        const f32 = this._instanceFloat32;
+        const u32 = this._instanceUint32;
+        const limit = Math.min(particles.length, this._batchSize);
+        for (let i = 0; i < limit; i++) {
+            const particle = particles[i];
+            const offset = i * wordsPerInstance$1;
+            f32[offset + 0] = particle.position.x;
+            f32[offset + 1] = particle.position.y;
+            f32[offset + 2] = particle.scale.x;
+            f32[offset + 3] = particle.scale.y;
+            f32[offset + 4] = particle.rotation;
+            u32[offset + 5] = particle.tint.toRgba();
         }
-        if (sourceIndices.length > 0) {
-            this._indexData.set(sourceIndices, 0);
+        this._instanceCount = limit;
+        return this;
+    }
+    flush() {
+        const backend = this.getBackendOrNull();
+        const instanceBuffer = this._instanceBuffer;
+        const indexBuffer = this._indexBuffer;
+        const vao = this._vao;
+        if (this._instanceCount === 0 || backend === null || instanceBuffer === null || indexBuffer === null || vao === null) {
+            return;
         }
-        else {
-            for (let i = 0; i < vertexCount; i++) {
-                this._indexData[i] = i;
-            }
+        const view = backend.view;
+        if (this._currentView !== view || this._currentViewId !== view.updateId) {
+            this._currentView = view;
+            this._currentViewId = view.updateId;
+            this._shader
+                .getUniform('u_projection')
+                .setValue(view.getTransform().toArray(false));
         }
         this._shader.sync();
-        backend.bindVertexArrayObject(connection.vao);
-        connection.vertexBuffer.upload(this._float32View.subarray(0, vertexCount * vertexStrideWords));
-        connection.indexBuffer.upload(this._indexData.subarray(0, indexCount));
-        connection.vao.draw(indexCount, 0, drawMode);
+        backend.bindVertexArrayObject(vao);
+        instanceBuffer.upload(this._instanceFloat32.subarray(0, this._instanceCount * wordsPerInstance$1));
+        vao.drawInstanced(indicesPerQuad, 0, this._instanceCount, RenderingPrimitives.Triangles);
         backend.stats.batches++;
         backend.stats.drawCalls++;
-    }
-    flush() {
-        // Primitive rendering is immediate per shape in this bridge stage.
-    }
-    destroy() {
-        this.disconnect();
-        this._shader.destroy();
-        this._currentBlendMode = null;
-        this._currentView = null;
+        this._instanceCount = 0;
     }
     onConnect(backend) {
         const gl = backend.context;
-        const vaoHandle = gl.createVertexArray();
         this._shader.connect(createWebGl2ShaderProgram(gl));
-        if (vaoHandle === null) {
-            throw new Error('Could not create vertex array object.');
-        }
-        const buffers = new Map();
-        const indexBuffer = new WebGl2RenderBuffer(BufferTypes.ElementArrayBuffer, this._indexData, BufferUsage.DynamicDraw)
-            .connect(this._createBufferRuntime(gl, buffers));
-        const vertexBuffer = new WebGl2RenderBuffer(BufferTypes.ArrayBuffer, this._vertexData, BufferUsage.DynamicDraw)
-            .connect(this._createBufferRuntime(gl, buffers));
-        // Force shader finalize so the attribute table is populated. The
-        // async-compile path defers attribute extraction from initialize()
-        // to first sync(); without this nudge, getAttribute() below would
-        // throw "Attribute 'a_position' is not available".
+        this._connection = this._createConnection(gl);
+        this._indexBuffer = new WebGl2RenderBuffer(BufferTypes.ElementArrayBuffer, quadIndices$2, BufferUsage.StaticDraw)
+            .connect(this._createBufferRuntime(this._connection));
+        this._instanceBuffer = new WebGl2RenderBuffer(BufferTypes.ArrayBuffer, this._instanceData, BufferUsage.DynamicDraw)
+            .connect(this._createBufferRuntime(this._connection));
         this._shader.sync();
-        const vao = new WebGl2VertexArrayObject()
-            .addIndex(indexBuffer)
-            .addAttribute(vertexBuffer, this._shader.getAttribute('a_position'), gl.FLOAT, false, vertexStrideBytes$3, 0)
-            .addAttribute(vertexBuffer, this._shader.getAttribute('a_color'), gl.UNSIGNED_BYTE, true, vertexStrideBytes$3, 8)
-            .connect(this._createVaoRuntime(gl, vaoHandle));
-        this._connection = { gl, buffers, vaoHandle, vao, indexBuffer, vertexBuffer };
+        this._vao = new WebGl2VertexArrayObject()
+            .addIndex(this._indexBuffer)
+            .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_translation'), gl.FLOAT, false, instanceStrideBytes$2, 0, false, 1)
+            .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_scale'), gl.FLOAT, false, instanceStrideBytes$2, 8, false, 1)
+            .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_rotation'), gl.FLOAT, false, instanceStrideBytes$2, 16, false, 1)
+            .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_color'), gl.UNSIGNED_BYTE, true, instanceStrideBytes$2, 20, false, 1)
+            .connect(this._createVaoRuntime(this._connection));
     }
     onDisconnect() {
-        const connection = this._connection;
-        if (!connection) {
-            return;
-        }
         this._shader.disconnect();
-        connection.indexBuffer.destroy();
-        connection.vertexBuffer.destroy();
-        connection.vao.destroy();
+        this._instanceBuffer?.destroy();
+        this._instanceBuffer = null;
+        this._indexBuffer?.destroy();
+        this._indexBuffer = null;
+        this._vao?.destroy();
+        this._vao = null;
         this._connection = null;
+        this._currentTexture = null;
         this._currentBlendMode = null;
         this._currentView = null;
-        this._viewId = -1;
-    }
-    _ensureVertexCapacity(vertexCount) {
-        if (vertexCount <= this._vertexCapacity) {
-            return;
-        }
-        while (this._vertexCapacity < vertexCount) {
-            this._vertexCapacity *= 2;
-        }
-        this._vertexData = new ArrayBuffer(this._vertexCapacity * vertexStrideBytes$3);
-        this._float32View = new Float32Array(this._vertexData);
-        this._uint32View = new Uint32Array(this._vertexData);
+        this._currentViewId = -1;
+        this._instanceCount = 0;
     }
-    _ensureIndexCapacity(indexCount) {
-        if (indexCount <= this._indexCapacity) {
-            return;
-        }
-        while (this._indexCapacity < indexCount) {
-            this._indexCapacity *= 2;
-        }
-        this._indexData = new Uint16Array(this._indexCapacity);
+    destroy() {
+        this.disconnect();
+        this._shader.destroy();
     }
-    _createBufferRuntime(gl, buffers) {
-        const handle = gl.createBuffer();
+    /**
+     * Convert the system's per-corner packed-u32 texCoords into the
+     * (uMin, vMin, uMax, vMax) bounds the new vertex shader expects.
+     * Already accounts for flipY (the system's `texCoords` baked it in).
+     *
+     * The four packed u32s, by corner index, are:
+     *   [0] TL = (uMin/uMax | vMin/vMax depending on flipY)
+     *   [1] TR
+     *   [2] BR
+     *   [3] BL
+     * We need (uMin, vMin, uMax, vMax) — the corner-extreme values.
+     */
+    _uvBoundsScratch = new Float32Array(4);
+    _unpackUvBounds(system) {
+        const texCoords = system.texCoords;
+        // Each packed u32: low 16 bits = U normalised to 0..65535,
+        //                  high 16 bits = V normalised.
+        const uTopLeft = (texCoords[0] & 0xFFFF) / 0xFFFF;
+        const vTopLeft = ((texCoords[0] >>> 16) & 0xFFFF) / 0xFFFF;
+        const uBottomRight = (texCoords[2] & 0xFFFF) / 0xFFFF;
+        const vBottomRight = ((texCoords[2] >>> 16) & 0xFFFF) / 0xFFFF;
+        // For flipY: TL.v becomes vMax (was minY → maxY). The shader picks
+        // (cornerY == 0 ? vMin : vMax); writing TL.v into vMin and BR.v into
+        // vMax matches the original per-corner ordering whether or not flipY
+        // was applied at texCoords pack time.
+        this._uvBoundsScratch[0] = uTopLeft;
+        this._uvBoundsScratch[1] = vTopLeft;
+        this._uvBoundsScratch[2] = uBottomRight;
+        this._uvBoundsScratch[3] = vBottomRight;
+        return this._uvBoundsScratch;
+    }
+    _createConnection(gl) {
+        const vaoHandle = gl.createVertexArray();
+        if (vaoHandle === null) {
+            throw new Error('WebGl2ParticleRenderer: could not create vertex array object.');
+        }
+        return {
+            gl,
+            buffers: new Map(),
+            vaoHandle,
+        };
+    }
+    _createBufferRuntime(connection) {
+        const handle = connection.gl.createBuffer();
         if (handle === null) {
-            throw new Error('Could not create render buffer.');
+            throw new Error('WebGl2ParticleRenderer: could not create render buffer.');
         }
         return {
             bind: (buffer) => {
-                gl.bindBuffer(buffer.type, handle);
+                connection.gl.bindBuffer(buffer.type, handle);
             },
             upload: (buffer, offset) => {
-                const state = buffers.get(buffer);
+                const gl = connection.gl;
                 const data = buffer.data;
+                const state = connection.buffers.get(buffer);
                 gl.bindBuffer(buffer.type, handle);
                 if (state && state.dataByteLength >= data.byteLength) {
                     gl.bufferSubData(buffer.type, offset, data);
@@ -6370,21 +6574,22 @@ class WebGl2PrimitiveRenderer extends AbstractWebGl2Renderer {
                 }
                 else {
                     gl.bufferData(buffer.type, data, buffer.usage);
-                    buffers.set(buffer, { handle, dataByteLength: data.byteLength });
+                    connection.buffers.set(buffer, { handle, dataByteLength: data.byteLength });
                 }
             },
             destroy: (buffer) => {
-                gl.deleteBuffer(handle);
-                buffers.delete(buffer);
+                connection.gl.deleteBuffer(handle);
+                connection.buffers.delete(buffer);
                 buffer.disconnect();
             },
         };
     }
-    _createVaoRuntime(gl, vaoHandle) {
+    _createVaoRuntime(connection) {
         let appliedVersion = -1;
         return {
             bind: (vao) => {
-                gl.bindVertexArray(vaoHandle);
+                const gl = connection.gl;
+                gl.bindVertexArray(connection.vaoHandle);
                 if (appliedVersion !== vao.version) {
                     let lastBuffer = null;
                     for (const attribute of vao.attributes) {
@@ -6392,8 +6597,14 @@ class WebGl2PrimitiveRenderer extends AbstractWebGl2Renderer {
                             attribute.buffer.bind();
                             lastBuffer = attribute.buffer;
                         }
-                        gl.vertexAttribPointer(attribute.location, attribute.size, attribute.type, attribute.normalized, attribute.stride, attribute.start);
+                        if (attribute.integer) {
+                            gl.vertexAttribIPointer(attribute.location, attribute.size, attribute.type, attribute.stride, attribute.start);
+                        }
+                        else {
+                            gl.vertexAttribPointer(attribute.location, attribute.size, attribute.type, attribute.normalized, attribute.stride, attribute.start);
+                        }
                         gl.enableVertexAttribArray(attribute.location);
+                        gl.vertexAttribDivisor(attribute.location, attribute.divisor);
                     }
                     if (vao.indexBuffer) {
                         vao.indexBuffer.bind();
@@ -6402,9 +6613,10 @@ class WebGl2PrimitiveRenderer extends AbstractWebGl2Renderer {
                 }
             },
             unbind: () => {
-                gl.bindVertexArray(null);
+                connection.gl.bindVertexArray(null);
             },
             draw: (vao, size, start, type) => {
+                const gl = connection.gl;
                 if (vao.indexBuffer) {
                     gl.drawElements(type, size, gl.UNSIGNED_SHORT, start);
                 }
@@ -6412,111 +6624,335 @@ class WebGl2PrimitiveRenderer extends AbstractWebGl2Renderer {
                     gl.drawArrays(type, start, size);
                 }
             },
+            drawInstanced: (vao, count, start, instanceCount, type) => {
+                const gl = connection.gl;
+                if (vao.indexBuffer) {
+                    gl.drawElementsInstanced(type, count, gl.UNSIGNED_SHORT, start, instanceCount);
+                }
+                else {
+                    gl.drawArraysInstanced(type, start, count, instanceCount);
+                }
+            },
             destroy: (vao) => {
-                gl.deleteVertexArray(vaoHandle);
+                connection.gl.deleteVertexArray(connection.vaoHandle);
                 vao.disconnect();
             },
         };
     }
 }
 
-var vertexSource = "#version 300 es\r\nprecision lowp float;\r\n\r\nlayout(location = 0) in vec2 a_position;\r\nlayout(location = 1) in vec2 a_texcoord;\r\n\r\nuniform mat3 u_projection;\r\n\r\nout vec2 v_texcoord;\r\n\r\nvoid main(void) {\r\n    gl_Position = vec4((u_projection * vec3(a_position, 1.0)).xy, 0.0, 1.0);\r\n    v_texcoord = a_texcoord;\r\n}\r\n";
+var vertexSource$1 = "#version 300 es\r\nprecision lowp float;\r\n\r\nlayout(location = 0) in vec2 a_position;\r\nlayout(location = 1) in vec4 a_color;\r\n\r\nuniform mat3 u_projection;\r\nuniform mat3 u_translation;\r\n\r\nout vec4 v_color;\r\n\r\nvoid main(void) {\r\n    gl_Position = vec4((u_projection * u_translation * vec3(a_position, 1.0)).xy, 0.0, 1.0);\r\n    v_color = vec4(a_color.rgb * a_color.a, a_color.a);\r\n}\r\n";
 
-var fragmentSource = "#version 300 es\r\nprecision lowp float;\r\n\r\nuniform sampler2D u_content;\r\nuniform sampler2D u_mask;\r\n\r\nin vec2 v_texcoord;\r\n\r\nlayout(location = 0) out vec4 fragColor;\r\n\r\nvoid main(void) {\r\n    vec4 contentColor = texture(u_content, v_texcoord);\r\n    float maskAlpha = texture(u_mask, v_texcoord).a;\r\n\r\n    fragColor = vec4(contentColor.rgb * maskAlpha, contentColor.a * maskAlpha);\r\n}\r\n";
+var fragmentSource$1 = "#version 300 es\r\nprecision lowp float;\r\n\r\nlayout(location = 0) out vec4 fragColor;\r\n\r\nin vec4 v_color;\r\n\r\nvoid main(void) {\r\n    fragColor = v_color;\r\n}\r\n";
 
-// 4 floats per vertex: position(x, y) + texcoord(u, v).
-const vertexStrideBytes$2 = 16;
-const quadIndices$1 = new Uint16Array([0, 1, 2, 0, 2, 3]);
-/**
- * Single-quad two-texture compositor used by `WebGl2Backend.composeWithAlphaMask`.
- *
- * Renders the content texture onto the active render target with each
- * output texel's alpha multiplied by the mask texture's alpha at the
- * same UV. Both textures are sampled with stretched-fit UVs over the
- * destination rectangle.
- *
- * Intentionally not a {@link AbstractWebGl2Renderer} subclass: this
- * compositor is invoked directly by the manager for non-Drawable
- * compositing operations and never participates in the renderer
- * registry dispatch path.
- */
-class WebGl2MaskCompositor {
-    _shader = new Shader(vertexSource, fragmentSource);
-    _vertexData = new ArrayBuffer(4 * vertexStrideBytes$2);
-    _float32View = new Float32Array(this._vertexData);
-    _contentSamplerSlot = new Int32Array([0]);
-    _maskSamplerSlot = new Int32Array([1]);
+const minBatchVertexSize = 4;
+const vertexStrideBytes$4 = 12;
+const vertexStrideWords = vertexStrideBytes$4 / 4;
+class WebGl2PrimitiveRenderer extends AbstractWebGl2Renderer {
+    _vertexCapacity;
+    _indexCapacity;
+    _vertexData;
+    _indexData;
+    _float32View;
+    _uint32View;
+    _shader = new Shader(vertexSource$1, fragmentSource$1);
     _connection = null;
-    connect(backend) {
-        if (this._connection !== null) {
+    _currentBlendMode = null;
+    _currentView = null;
+    _viewId = -1;
+    constructor(batchSize) {
+        super();
+        this._vertexCapacity = Math.max(minBatchVertexSize, batchSize);
+        this._indexCapacity = Math.max(6, this._vertexCapacity * 3);
+        this._vertexData = new ArrayBuffer(this._vertexCapacity * vertexStrideBytes$4);
+        this._indexData = new Uint16Array(this._indexCapacity);
+        this._float32View = new Float32Array(this._vertexData);
+        this._uint32View = new Uint32Array(this._vertexData);
+    }
+    render(shape) {
+        const connection = this._connection;
+        if (!connection) {
+            throw new Error('Renderer not connected');
+        }
+        const backend = this.getBackend();
+        const { geometry, drawMode, color, blendMode } = shape;
+        const vertices = geometry.vertices;
+        const sourceIndices = geometry.indices;
+        const vertexCount = vertices.length / 2;
+        const indexCount = sourceIndices.length > 0 ? sourceIndices.length : vertexCount;
+        if (vertexCount === 0 || indexCount === 0) {
             return;
         }
+        this._ensureVertexCapacity(vertexCount);
+        this._ensureIndexCapacity(indexCount);
+        if (blendMode !== this._currentBlendMode) {
+            this._currentBlendMode = blendMode;
+            backend.setBlendMode(blendMode);
+        }
+        const view = backend.view;
+        if (this._currentView !== view || this._viewId !== view.updateId) {
+            this._currentView = view;
+            this._viewId = view.updateId;
+            this._shader.getUniform('u_projection').setValue(view.getTransform().toArray(false));
+        }
+        this._shader.getUniform('u_translation').setValue(shape.getGlobalTransform().toArray(false));
+        const packedColor = color.toRgba();
+        for (let i = 0; i < vertexCount; i++) {
+            const sourceIndex = i * 2;
+            const targetIndex = i * vertexStrideWords;
+            this._float32View[targetIndex] = vertices[sourceIndex];
+            this._float32View[targetIndex + 1] = vertices[sourceIndex + 1];
+            this._uint32View[targetIndex + 2] = packedColor;
+        }
+        if (sourceIndices.length > 0) {
+            this._indexData.set(sourceIndices, 0);
+        }
+        else {
+            for (let i = 0; i < vertexCount; i++) {
+                this._indexData[i] = i;
+            }
+        }
+        this._shader.sync();
+        backend.bindVertexArrayObject(connection.vao);
+        connection.vertexBuffer.upload(this._float32View.subarray(0, vertexCount * vertexStrideWords));
+        connection.indexBuffer.upload(this._indexData.subarray(0, indexCount));
+        connection.vao.draw(indexCount, 0, drawMode);
+        backend.stats.batches++;
+        backend.stats.drawCalls++;
+    }
+    flush() {
+        // Primitive rendering is immediate per shape in this bridge stage.
+    }
+    destroy() {
+        this.disconnect();
+        this._shader.destroy();
+        this._currentBlendMode = null;
+        this._currentView = null;
+    }
+    onConnect(backend) {
         const gl = backend.context;
         const vaoHandle = gl.createVertexArray();
+        this._shader.connect(createWebGl2ShaderProgram(gl));
         if (vaoHandle === null) {
-            throw new Error('WebGl2MaskCompositor: could not create vertex array object.');
+            throw new Error('Could not create vertex array object.');
         }
-        this._shader.connect(createWebGl2ShaderProgram(gl));
-        const bufferHandles = new Map();
-        const indexBuffer = new WebGl2RenderBuffer(BufferTypes.ElementArrayBuffer, quadIndices$1, BufferUsage.StaticDraw)
-            .connect(this._createBufferRuntime(gl, bufferHandles));
+        const buffers = new Map();
+        const indexBuffer = new WebGl2RenderBuffer(BufferTypes.ElementArrayBuffer, this._indexData, BufferUsage.DynamicDraw)
+            .connect(this._createBufferRuntime(gl, buffers));
         const vertexBuffer = new WebGl2RenderBuffer(BufferTypes.ArrayBuffer, this._vertexData, BufferUsage.DynamicDraw)
-            .connect(this._createBufferRuntime(gl, bufferHandles));
-        // Force shader finalize so getAttribute() below sees a populated
-        // attribute table; the async-compile path defers extraction until
-        // the first sync() call.
+            .connect(this._createBufferRuntime(gl, buffers));
+        // Force shader finalize so the attribute table is populated. The
+        // async-compile path defers attribute extraction from initialize()
+        // to first sync(); without this nudge, getAttribute() below would
+        // throw "Attribute 'a_position' is not available".
         this._shader.sync();
         const vao = new WebGl2VertexArrayObject()
             .addIndex(indexBuffer)
-            .addAttribute(vertexBuffer, this._shader.getAttribute('a_position'), gl.FLOAT, false, vertexStrideBytes$2, 0)
-            .addAttribute(vertexBuffer, this._shader.getAttribute('a_texcoord'), gl.FLOAT, false, vertexStrideBytes$2, 8)
+            .addAttribute(vertexBuffer, this._shader.getAttribute('a_position'), gl.FLOAT, false, vertexStrideBytes$4, 0)
+            .addAttribute(vertexBuffer, this._shader.getAttribute('a_color'), gl.UNSIGNED_BYTE, true, vertexStrideBytes$4, 8)
             .connect(this._createVaoRuntime(gl, vaoHandle));
-        this._connection = { gl, vaoHandle, vao, indexBuffer, vertexBuffer, bufferHandles };
+        this._connection = { gl, buffers, vaoHandle, vao, indexBuffer, vertexBuffer };
     }
-    disconnect() {
+    onDisconnect() {
         const connection = this._connection;
-        if (connection === null) {
+        if (!connection) {
             return;
         }
+        this._shader.disconnect();
         connection.indexBuffer.destroy();
         connection.vertexBuffer.destroy();
         connection.vao.destroy();
-        this._shader.disconnect();
         this._connection = null;
+        this._currentBlendMode = null;
+        this._currentView = null;
+        this._viewId = -1;
     }
-    compose(backend, content, mask, x, y, width, height, blendMode) {
-        const connection = this._connection;
-        if (connection === null) {
-            throw new Error('WebGl2MaskCompositor: not connected.');
+    _ensureVertexCapacity(vertexCount) {
+        if (vertexCount <= this._vertexCapacity) {
+            return;
         }
-        // Update the quad vertices for this destination rect. UVs are 0..1
-        // mapped over (left, top) → (right, bottom) with an explicit Y-flip
-        // for render-texture sampling: the mask path samples textures
-        // already authored as RGBA in render-texture orientation.
-        this._writeQuadVertices(x, y, x + width, y + height);
-        // Bind the compositor program. Setting projection + sampler uniforms
-        // each call because they need to match the current render target.
-        backend.bindShader(this._shader);
-        const view = backend.view;
-        const projection = view.getTransform().toArray(false);
-        this._shader.getUniform('u_projection').setValue(projection);
-        this._shader.getUniform('u_content').setValue(this._contentSamplerSlot);
-        this._shader.getUniform('u_mask').setValue(this._maskSamplerSlot);
-        this._shader.sync();
-        backend.bindTexture(content, 0);
-        backend.bindTexture(mask, 1);
-        backend.setBlendMode(blendMode);
-        backend.bindVertexArrayObject(connection.vao);
-        connection.vertexBuffer.upload(this._float32View);
-        connection.vao.draw(6, 0);
-        backend.stats.batches++;
-        backend.stats.drawCalls++;
-        // Reset the active texture unit to 0 to avoid leaking unit 1 into
-        // subsequent renderer state.
-        backend.bindTexture(null, 1);
-    }
-    _writeQuadVertices(left, top, right, bottom) {
-        const view = this._float32View;
+        while (this._vertexCapacity < vertexCount) {
+            this._vertexCapacity *= 2;
+        }
+        this._vertexData = new ArrayBuffer(this._vertexCapacity * vertexStrideBytes$4);
+        this._float32View = new Float32Array(this._vertexData);
+        this._uint32View = new Uint32Array(this._vertexData);
+    }
+    _ensureIndexCapacity(indexCount) {
+        if (indexCount <= this._indexCapacity) {
+            return;
+        }
+        while (this._indexCapacity < indexCount) {
+            this._indexCapacity *= 2;
+        }
+        this._indexData = new Uint16Array(this._indexCapacity);
+    }
+    _createBufferRuntime(gl, buffers) {
+        const handle = gl.createBuffer();
+        if (handle === null) {
+            throw new Error('Could not create render buffer.');
+        }
+        return {
+            bind: (buffer) => {
+                gl.bindBuffer(buffer.type, handle);
+            },
+            upload: (buffer, offset) => {
+                const state = buffers.get(buffer);
+                const data = buffer.data;
+                gl.bindBuffer(buffer.type, handle);
+                if (state && state.dataByteLength >= data.byteLength) {
+                    gl.bufferSubData(buffer.type, offset, data);
+                    state.dataByteLength = data.byteLength;
+                }
+                else {
+                    gl.bufferData(buffer.type, data, buffer.usage);
+                    buffers.set(buffer, { handle, dataByteLength: data.byteLength });
+                }
+            },
+            destroy: (buffer) => {
+                gl.deleteBuffer(handle);
+                buffers.delete(buffer);
+                buffer.disconnect();
+            },
+        };
+    }
+    _createVaoRuntime(gl, vaoHandle) {
+        let appliedVersion = -1;
+        return {
+            bind: (vao) => {
+                gl.bindVertexArray(vaoHandle);
+                if (appliedVersion !== vao.version) {
+                    let lastBuffer = null;
+                    for (const attribute of vao.attributes) {
+                        if (lastBuffer !== attribute.buffer) {
+                            attribute.buffer.bind();
+                            lastBuffer = attribute.buffer;
+                        }
+                        gl.vertexAttribPointer(attribute.location, attribute.size, attribute.type, attribute.normalized, attribute.stride, attribute.start);
+                        gl.enableVertexAttribArray(attribute.location);
+                    }
+                    if (vao.indexBuffer) {
+                        vao.indexBuffer.bind();
+                    }
+                    appliedVersion = vao.version;
+                }
+            },
+            unbind: () => {
+                gl.bindVertexArray(null);
+            },
+            draw: (vao, size, start, type) => {
+                if (vao.indexBuffer) {
+                    gl.drawElements(type, size, gl.UNSIGNED_SHORT, start);
+                }
+                else {
+                    gl.drawArrays(type, start, size);
+                }
+            },
+            destroy: (vao) => {
+                gl.deleteVertexArray(vaoHandle);
+                vao.disconnect();
+            },
+        };
+    }
+}
+
+var vertexSource = "#version 300 es\r\nprecision lowp float;\r\n\r\nlayout(location = 0) in vec2 a_position;\r\nlayout(location = 1) in vec2 a_texcoord;\r\n\r\nuniform mat3 u_projection;\r\n\r\nout vec2 v_texcoord;\r\n\r\nvoid main(void) {\r\n    gl_Position = vec4((u_projection * vec3(a_position, 1.0)).xy, 0.0, 1.0);\r\n    v_texcoord = a_texcoord;\r\n}\r\n";
+
+var fragmentSource = "#version 300 es\r\nprecision lowp float;\r\n\r\nuniform sampler2D u_content;\r\nuniform sampler2D u_mask;\r\n\r\nin vec2 v_texcoord;\r\n\r\nlayout(location = 0) out vec4 fragColor;\r\n\r\nvoid main(void) {\r\n    vec4 contentColor = texture(u_content, v_texcoord);\r\n    float maskAlpha = texture(u_mask, v_texcoord).a;\r\n\r\n    fragColor = vec4(contentColor.rgb * maskAlpha, contentColor.a * maskAlpha);\r\n}\r\n";
+
+// 4 floats per vertex: position(x, y) + texcoord(u, v).
+const vertexStrideBytes$3 = 16;
+const quadIndices$1 = new Uint16Array([0, 1, 2, 0, 2, 3]);
+/**
+ * Single-quad two-texture compositor used by `WebGl2Backend.composeWithAlphaMask`.
+ *
+ * Renders the content texture onto the active render target with each
+ * output texel's alpha multiplied by the mask texture's alpha at the
+ * same UV. Both textures are sampled with stretched-fit UVs over the
+ * destination rectangle.
+ *
+ * Intentionally not a {@link AbstractWebGl2Renderer} subclass: this
+ * compositor is invoked directly by the manager for non-Drawable
+ * compositing operations and never participates in the renderer
+ * registry dispatch path.
+ */
+class WebGl2MaskCompositor {
+    _shader = new Shader(vertexSource, fragmentSource);
+    _vertexData = new ArrayBuffer(4 * vertexStrideBytes$3);
+    _float32View = new Float32Array(this._vertexData);
+    _contentSamplerSlot = new Int32Array([0]);
+    _maskSamplerSlot = new Int32Array([1]);
+    _connection = null;
+    connect(backend) {
+        if (this._connection !== null) {
+            return;
+        }
+        const gl = backend.context;
+        const vaoHandle = gl.createVertexArray();
+        if (vaoHandle === null) {
+            throw new Error('WebGl2MaskCompositor: could not create vertex array object.');
+        }
+        this._shader.connect(createWebGl2ShaderProgram(gl));
+        const bufferHandles = new Map();
+        const indexBuffer = new WebGl2RenderBuffer(BufferTypes.ElementArrayBuffer, quadIndices$1, BufferUsage.StaticDraw)
+            .connect(this._createBufferRuntime(gl, bufferHandles));
+        const vertexBuffer = new WebGl2RenderBuffer(BufferTypes.ArrayBuffer, this._vertexData, BufferUsage.DynamicDraw)
+            .connect(this._createBufferRuntime(gl, bufferHandles));
+        // Force shader finalize so getAttribute() below sees a populated
+        // attribute table; the async-compile path defers extraction until
+        // the first sync() call.
+        this._shader.sync();
+        const vao = new WebGl2VertexArrayObject()
+            .addIndex(indexBuffer)
+            .addAttribute(vertexBuffer, this._shader.getAttribute('a_position'), gl.FLOAT, false, vertexStrideBytes$3, 0)
+            .addAttribute(vertexBuffer, this._shader.getAttribute('a_texcoord'), gl.FLOAT, false, vertexStrideBytes$3, 8)
+            .connect(this._createVaoRuntime(gl, vaoHandle));
+        this._connection = { gl, vaoHandle, vao, indexBuffer, vertexBuffer, bufferHandles };
+    }
+    disconnect() {
+        const connection = this._connection;
+        if (connection === null) {
+            return;
+        }
+        connection.indexBuffer.destroy();
+        connection.vertexBuffer.destroy();
+        connection.vao.destroy();
+        this._shader.disconnect();
+        this._connection = null;
+    }
+    compose(backend, content, mask, x, y, width, height, blendMode) {
+        const connection = this._connection;
+        if (connection === null) {
+            throw new Error('WebGl2MaskCompositor: not connected.');
+        }
+        // Update the quad vertices for this destination rect. UVs are 0..1
+        // mapped over (left, top) → (right, bottom) with an explicit Y-flip
+        // for render-texture sampling: the mask path samples textures
+        // already authored as RGBA in render-texture orientation.
+        this._writeQuadVertices(x, y, x + width, y + height);
+        // Bind the compositor program. Setting projection + sampler uniforms
+        // each call because they need to match the current render target.
+        backend.bindShader(this._shader);
+        const view = backend.view;
+        const projection = view.getTransform().toArray(false);
+        this._shader.getUniform('u_projection').setValue(projection);
+        this._shader.getUniform('u_content').setValue(this._contentSamplerSlot);
+        this._shader.getUniform('u_mask').setValue(this._maskSamplerSlot);
+        this._shader.sync();
+        backend.bindTexture(content, 0);
+        backend.bindTexture(mask, 1);
+        backend.setBlendMode(blendMode);
+        backend.bindVertexArrayObject(connection.vao);
+        connection.vertexBuffer.upload(this._float32View);
+        connection.vao.draw(6, 0);
+        backend.stats.batches++;
+        backend.stats.drawCalls++;
+        // Reset the active texture unit to 0 to avoid leaking unit 1 into
+        // subsequent renderer state.
+        backend.bindTexture(null, 1);
+    }
+    _writeQuadVertices(left, top, right, bottom) {
+        const view = this._float32View;
         // Vertex 0: top-left (UV 0, 0)
         view[0] = left;
         view[1] = top;
@@ -6761,6 +7197,116 @@ class Sprite extends Drawable {
 }
 RenderNode.setInternalSpriteFactory(() => new Sprite(null));
 
+/**
+ * Arbitrary 2D triangle-mesh primitive.
+ *
+ * `Mesh` lives alongside {@link Sprite} as a public Drawable: it has the
+ * same transform (position/rotation/scale/origin), tint, blendMode,
+ * filters, masks, and cacheAsBitmap — but the geometry it renders is
+ * user-supplied rather than implied by a texture frame. The intended use
+ * cases are:
+ *
+ * - Custom-shape sprites whose silhouette isn't a quad (badges, speech
+ *   bubbles, region overlays).
+ * - Deformable visuals (rope/ribbon, banner, water surface): mutate the
+ *   vertex array between frames and the GPU re-tessellates nothing —
+ *   only the transform changes per frame.
+ * - Particles or trails with custom geometry per emitter.
+ *
+ * The mesh data is **immutable after construction** in v1: vertex /
+ * index / UV / color arrays are exposed as readonly references. Mutate
+ * the underlying typed arrays in-place if you need per-frame updates,
+ * but the array lengths and topology cannot change. Texture is the only
+ * post-construction mutable property.
+ *
+ * The vertex stream is a flat `Float32Array` of (x, y) pairs in local
+ * space. The mesh's local bounds are computed once at construction from
+ * the AABB of those vertices and used by the cull pass. Re-computing
+ * after in-place mutation is the caller's responsibility (call
+ * `recomputeLocalBounds()`).
+ */
+class Mesh extends Drawable {
+    vertices;
+    indices;
+    uvs;
+    colors;
+    _texture;
+    constructor(options) {
+        super();
+        const { vertices, indices = null, uvs = null, colors = null, texture = null } = options;
+        if (vertices.length === 0 || vertices.length % 2 !== 0) {
+            throw new Error(`Mesh vertices must be a non-empty flat array of (x,y) pairs (got length ${vertices.length}).`);
+        }
+        const vertexCount = vertices.length / 2;
+        if (vertexCount < 3) {
+            throw new Error(`Mesh requires at least 3 vertices (got ${vertexCount}).`);
+        }
+        if (uvs !== null && uvs.length !== vertices.length) {
+            throw new Error(`Mesh uvs length ${uvs.length} must equal vertices length ${vertices.length}.`);
+        }
+        if (colors !== null && colors.length !== vertexCount) {
+            throw new Error(`Mesh colors length ${colors.length} must equal vertex count ${vertexCount}.`);
+        }
+        if (indices !== null) {
+            if (indices.length === 0 || indices.length % 3 !== 0) {
+                throw new Error(`Mesh indices must be a non-empty multiple of 3 (got length ${indices.length}).`);
+            }
+            for (let i = 0; i < indices.length; i++) {
+                if (indices[i] >= vertexCount) {
+                    throw new Error(`Mesh index ${indices[i]} at position ${i} is out of range for vertex count ${vertexCount}.`);
+                }
+            }
+        }
+        else if (vertexCount % 3 !== 0) {
+            throw new Error(`Non-indexed Mesh requires a vertex count that is a multiple of 3 (got ${vertexCount}).`);
+        }
+        this.vertices = vertices;
+        this.indices = indices;
+        this.uvs = uvs;
+        this.colors = colors;
+        this._texture = texture;
+        this.recomputeLocalBounds();
+    }
+    get vertexCount() {
+        return this.vertices.length / 2;
+    }
+    get indexCount() {
+        return this.indices?.length ?? this.vertexCount;
+    }
+    get texture() {
+        return this._texture;
+    }
+    set texture(texture) {
+        this._texture = texture;
+        this.invalidateCache();
+    }
+    /**
+     * Recompute the local AABB from the current vertex array. Call after
+     * mutating `vertices` in place to keep culling correct; otherwise the
+     * bounds the cull pass sees will be the AABB at construction time.
+     */
+    recomputeLocalBounds() {
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        for (let i = 0; i < this.vertices.length; i += 2) {
+            const x = this.vertices[i];
+            const y = this.vertices[i + 1];
+            if (x < minX)
+                minX = x;
+            if (x > maxX)
+                maxX = x;
+            if (y < minY)
+                minY = y;
+            if (y > maxY)
+                maxY = y;
+        }
+        this.localBounds.set(minX, minY, maxX - minX, maxY - minY);
+        return this;
+    }
+}
+
 class Particle {
     _totalLifetime = Time.oneSecond.clone();
     _elapsedLifetime = Time.zero.clone();
@@ -7040,208 +7586,6 @@ class ParticleSystem extends Drawable {
     }
 }
 
-const createQuadIndices = (size) => {
-    const data = new Uint16Array(size * 6);
-    const len = data.length;
-    for (let i = 0, offset = 0; i < len; i += 6, offset += 4) {
-        data[i] = offset;
-        data[i + 1] = offset + 1;
-        data[i + 2] = offset + 2;
-        data[i + 3] = offset;
-        data[i + 4] = offset + 2;
-        data[i + 5] = offset + 3;
-    }
-    return data;
-};
-const createCanvas = (options = {}) => {
-    const { canvas, fillStyle, width, height } = options;
-    const newCanvas = canvas ?? document.createElement('canvas');
-    const context = newCanvas.getContext('2d');
-    newCanvas.width = width ?? 10;
-    newCanvas.height = height ?? 10;
-    context.fillStyle = fillStyle ?? '#6495ed';
-    context.fillRect(0, 0, newCanvas.width, newCanvas.height);
-    return newCanvas;
-};
-const heightCache = new Map();
-const determineFontHeight = (font) => {
-    if (!heightCache.has(font)) {
-        const body = document.body;
-        const dummy = document.createElement('div');
-        dummy.appendChild(document.createTextNode('M'));
-        dummy.setAttribute('style', `font: ${font};position:absolute;top:0;left:0`);
-        body.appendChild(dummy);
-        heightCache.set(font, dummy.offsetHeight);
-        body.removeChild(dummy);
-    }
-    return heightCache.get(font);
-};
-
-class Texture {
-    static _black = null;
-    static _white = null;
-    static defaultSamplerOptions = {
-        scaleMode: ScaleModes.Linear,
-        wrapMode: WrapModes.ClampToEdge,
-        premultiplyAlpha: true,
-        generateMipMap: true,
-        flipY: false,
-    };
-    static empty = new Texture(null);
-    static get black() {
-        if (Texture._black === null) {
-            Texture._black = new Texture(createCanvas({ fillStyle: '#000' }));
-        }
-        return Texture._black;
-    }
-    static get white() {
-        if (Texture._white === null) {
-            Texture._white = new Texture(createCanvas({ fillStyle: '#fff' }));
-        }
-        return Texture._white;
-    }
-    _version = 0;
-    _source = null;
-    _size = new Size(0, 0);
-    _destroyListeners = new Set();
-    _scaleMode;
-    _wrapMode;
-    _premultiplyAlpha = false;
-    _generateMipMap = false;
-    _flipY = false;
-    constructor(source = null, options) {
-        const { scaleMode, wrapMode, premultiplyAlpha, generateMipMap, flipY } = { ...Texture.defaultSamplerOptions, ...options };
-        this._scaleMode = scaleMode;
-        this._wrapMode = wrapMode;
-        this._premultiplyAlpha = premultiplyAlpha;
-        this._generateMipMap = generateMipMap;
-        this._flipY = flipY;
-        if (source !== null) {
-            this.setSource(source);
-        }
-    }
-    get source() {
-        return this._source;
-    }
-    set source(source) {
-        this.setSource(source);
-    }
-    get size() {
-        return this._size;
-    }
-    set size(size) {
-        this.setSize(size.width, size.height);
-    }
-    get width() {
-        return this._size.width;
-    }
-    set width(width) {
-        this.setSize(width, this.height);
-    }
-    get height() {
-        return this._size.height;
-    }
-    set height(height) {
-        this.setSize(this.width, height);
-    }
-    get scaleMode() {
-        return this._scaleMode;
-    }
-    set scaleMode(scaleMode) {
-        this.setScaleMode(scaleMode);
-    }
-    get wrapMode() {
-        return this._wrapMode;
-    }
-    set wrapMode(wrapMode) {
-        this.setWrapMode(wrapMode);
-    }
-    get premultiplyAlpha() {
-        return this._premultiplyAlpha;
-    }
-    set premultiplyAlpha(premultiplyAlpha) {
-        this.setPremultiplyAlpha(premultiplyAlpha);
-    }
-    get generateMipMap() {
-        return this._generateMipMap;
-    }
-    set generateMipMap(generateMipMap) {
-        this._generateMipMap = generateMipMap;
-    }
-    get flipY() {
-        return this._flipY;
-    }
-    set flipY(flipY) {
-        this._flipY = flipY;
-    }
-    get powerOfTwo() {
-        return isPowerOfTwo(this.width) && isPowerOfTwo(this.height);
-    }
-    get version() {
-        return this._version;
-    }
-    addDestroyListener(listener) {
-        this._destroyListeners.add(listener);
-        return this;
-    }
-    removeDestroyListener(listener) {
-        this._destroyListeners.delete(listener);
-        return this;
-    }
-    setScaleMode(scaleMode) {
-        if (this._scaleMode !== scaleMode) {
-            this._scaleMode = scaleMode;
-            this._touch();
-        }
-        return this;
-    }
-    setWrapMode(wrapMode) {
-        if (this._wrapMode !== wrapMode) {
-            this._wrapMode = wrapMode;
-            this._touch();
-        }
-        return this;
-    }
-    setPremultiplyAlpha(premultiplyAlpha) {
-        if (this._premultiplyAlpha !== premultiplyAlpha) {
-            this._premultiplyAlpha = premultiplyAlpha;
-            this._touch();
-        }
-        return this;
-    }
-    setSource(source) {
-        if (this._source !== source) {
-            this._source = source;
-            this.updateSource();
-        }
-        return this;
-    }
-    updateSource() {
-        const { width, height } = getTextureSourceSize(this._source);
-        this.setSize(width, height);
-        this._touch();
-        return this;
-    }
-    setSize(width, height) {
-        if (!this._size.equals({ width, height })) {
-            this._size.set(width, height);
-            this._touch();
-        }
-        return this;
-    }
-    destroy() {
-        for (const listener of Array.from(this._destroyListeners)) {
-            listener();
-        }
-        this._destroyListeners.clear();
-        this._size.destroy();
-        this._source = null;
-    }
-    _touch() {
-        this._version++;
-    }
-}
-
 /**
  * Instance-based renderer registry.
  *
@@ -7427,6 +7771,7 @@ class WebGl2Backend {
         this._setupContext();
         this._addEvents();
         this.rendererRegistry.registerRenderer(Sprite, new WebGl2SpriteRenderer(spriteRendererBatchSize));
+        this.rendererRegistry.registerRenderer(Mesh, new WebGl2MeshRenderer());
         this.rendererRegistry.registerRenderer(ParticleSystem, new WebGl2ParticleRenderer(particleRendererBatchSize));
         this.rendererRegistry.registerRenderer(DrawableShape, new WebGl2PrimitiveRenderer(primitiveRendererBatchSize));
         this.rendererRegistry.connect(this);
@@ -8076,334 +8421,994 @@ function getWebGpuBlendState(blendMode) {
                 },
             };
     }
-}
-
-/// <reference types="@webgpu/types" />
-const primitiveShaderSource = `
-struct VertexInput {
-    @location(0) position: vec4<f32>,
-    @location(1) color: vec4<f32>,
-};
-
-struct VertexOutput {
-    @builtin(position) position: vec4<f32>,
-    @location(0) color: vec4<f32>,
-};
-
-@vertex
-fn vertexMain(input: VertexInput) -> VertexOutput {
-    var output: VertexOutput;
-
-    output.position = input.position;
-    output.color = vec4<f32>(input.color.rgb * input.color.a, input.color.a);
-
-    return output;
-}
-
-@fragment
-fn fragmentMain(input: VertexOutput) -> @location(0) vec4<f32> {
-    return input.color;
-}
-`;
-// 4 floats (pre-transformed clip-space position) + 1 u32 (color) = 20 bytes.
-// The CPU applies (view * shape.globalTransform) to each vertex before writing
-// it into the vertex buffer, so the shader outputs the position as-is. This
-// matches the sprite renderer's approach and eliminates the need for a per-
-// drawcall uniform binding.
-const vertexStrideBytes$1 = 20;
-const wordsPerVertex = vertexStrideBytes$1 / Uint32Array.BYTES_PER_ELEMENT;
-class WebGpuPrimitiveRenderer extends AbstractWebGpuRenderer {
-    _combinedTransform = new Matrix();
-    _drawCalls = [];
-    _drawCallCount = 0;
-    _pipelines = new Map();
-    _device = null;
-    _shaderModule = null;
-    _pipelineLayout = null;
-    _vertexBuffer = null;
-    _indexBuffer = null;
-    _vertexBufferCapacity = 0;
-    _indexBufferCapacity = 0;
-    _vertexData = new ArrayBuffer(0);
-    _float32View = new Float32Array(this._vertexData);
-    _uint32View = new Uint32Array(this._vertexData);
-    _packedIndexData = new Uint16Array(0);
-    _generatedIndexData = new Uint16Array(0);
-    _sequentialIndexData = new Uint16Array(0);
-    render(shape) {
+}
+
+/// <reference types="@webgpu/types" />
+const primitiveShaderSource = `
+struct VertexInput {
+    @location(0) position: vec4<f32>,
+    @location(1) color: vec4<f32>,
+};
+
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) color: vec4<f32>,
+};
+
+@vertex
+fn vertexMain(input: VertexInput) -> VertexOutput {
+    var output: VertexOutput;
+
+    output.position = input.position;
+    output.color = vec4<f32>(input.color.rgb * input.color.a, input.color.a);
+
+    return output;
+}
+
+@fragment
+fn fragmentMain(input: VertexOutput) -> @location(0) vec4<f32> {
+    return input.color;
+}
+`;
+// 4 floats (pre-transformed clip-space position) + 1 u32 (color) = 20 bytes.
+// The CPU applies (view * shape.globalTransform) to each vertex before writing
+// it into the vertex buffer, so the shader outputs the position as-is. This
+// matches the sprite renderer's approach and eliminates the need for a per-
+// drawcall uniform binding.
+const vertexStrideBytes$2 = 20;
+const wordsPerVertex$1 = vertexStrideBytes$2 / Uint32Array.BYTES_PER_ELEMENT;
+class WebGpuPrimitiveRenderer extends AbstractWebGpuRenderer {
+    _combinedTransform = new Matrix();
+    _drawCalls = [];
+    _drawCallCount = 0;
+    _pipelines = new Map();
+    _device = null;
+    _shaderModule = null;
+    _pipelineLayout = null;
+    _vertexBuffer = null;
+    _indexBuffer = null;
+    _vertexBufferCapacity = 0;
+    _indexBufferCapacity = 0;
+    _vertexData = new ArrayBuffer(0);
+    _float32View = new Float32Array(this._vertexData);
+    _uint32View = new Uint32Array(this._vertexData);
+    _packedIndexData = new Uint16Array(0);
+    _generatedIndexData = new Uint16Array(0);
+    _sequentialIndexData = new Uint16Array(0);
+    render(shape) {
+        const backend = this._backend;
+        if (backend === null) {
+            throw new Error('Renderer not connected');
+        }
+        if (shape.drawMode !== RenderingPrimitives.Points
+            && shape.drawMode !== RenderingPrimitives.Lines
+            && shape.drawMode !== RenderingPrimitives.LineLoop
+            && shape.drawMode !== RenderingPrimitives.LineStrip
+            && shape.drawMode !== RenderingPrimitives.Triangles
+            && shape.drawMode !== RenderingPrimitives.TriangleFan
+            && shape.drawMode !== RenderingPrimitives.TriangleStrip) {
+            throw new Error(`WebGPU primitive renderer does not support draw mode "${shape.drawMode}" yet.`);
+        }
+        backend.setBlendMode(shape.blendMode);
+        if (shape.geometry.vertices.length === 0) {
+            return;
+        }
+        const drawCallIndex = this._drawCallCount++;
+        const drawCall = this._drawCalls[drawCallIndex];
+        if (drawCall) {
+            drawCall.shape = shape;
+            drawCall.blendMode = shape.blendMode;
+        }
+        else {
+            this._drawCalls.push({
+                shape,
+                blendMode: shape.blendMode,
+            });
+        }
+    }
+    flush() {
+        const backend = this._backend;
+        const device = this._device;
+        if (!backend || !device) {
+            return;
+        }
+        if (this._drawCallCount === 0 && !backend.clearRequested) {
+            return;
+        }
+        const scissor = backend.getScissorRect();
+        const maskClipsAll = scissor !== null && (scissor.width <= 0 || scissor.height <= 0);
+        // Phase 1: resolve drawcalls and record each one's offsets into the
+        // shared packed buffers. Transform gets baked into the vertex data
+        // during phase 2 so no per-drawcall uniform binding is needed.
+        const plan = [];
+        const resolvedDrawCalls = [];
+        let totalVertices = 0;
+        let totalIndices = 0;
+        if (this._drawCallCount > 0 && !maskClipsAll) {
+            for (let drawCallIndex = 0; drawCallIndex < this._drawCallCount; drawCallIndex++) {
+                const drawCall = this._drawCalls[drawCallIndex];
+                const shape = drawCall.shape;
+                const resolved = this._resolveDrawCall(shape);
+                resolvedDrawCalls.push(resolved);
+                if (resolved === null) {
+                    continue;
+                }
+                const pipeline = this._getPipeline({
+                    topology: resolved.topology,
+                    usesStripIndex: resolved.usesStripIndex,
+                    blendMode: drawCall.blendMode,
+                    format: backend.renderTargetFormat,
+                });
+                plan.push({
+                    pipeline,
+                    vertexByteOffset: totalVertices * vertexStrideBytes$2,
+                    vertexCount: resolved.vertexCount,
+                    indexByteOffset: totalIndices * Uint16Array.BYTES_PER_ELEMENT,
+                    indexCount: resolved.indexCount,
+                });
+                totalVertices += resolved.vertexCount;
+                totalIndices += resolved.indexCount;
+            }
+        }
+        // If nothing will actually render, still honor a pending clear with
+        // a single empty pass so createColorAttachment consumes the clear
+        // state exactly once.
+        if (plan.length === 0) {
+            if (backend.clearRequested) {
+                const encoder = device.createCommandEncoder();
+                const pass = encoder.beginRenderPass({
+                    colorAttachments: [backend.createColorAttachment()],
+                });
+                backend.stats.renderPasses++;
+                pass.end();
+                backend.submit(encoder.finish());
+            }
+            this._drawCallCount = 0;
+            return;
+        }
+        // Phase 2: size GPU buffers for the whole-frame totals, then pack
+        // every drawcall's CPU-side data. _writeShapeVertices applies
+        // (view * shape.globalTransform) per-vertex so the shader simply
+        // outputs input.position unchanged.
+        this._ensureVertexCapacity(totalVertices);
+        if (totalIndices > 0) {
+            this._ensureIndexCapacity(totalIndices);
+            if (this._packedIndexData.length < totalIndices) {
+                this._packedIndexData = new Uint16Array(Math.max(totalIndices, this._packedIndexData.length === 0 ? 1 : this._packedIndexData.length * 2));
+            }
+        }
+        {
+            let vOffset = 0;
+            let iOffset = 0;
+            for (let i = 0; i < this._drawCallCount; i++) {
+                const resolved = resolvedDrawCalls[i];
+                if (resolved === null) {
+                    continue;
+                }
+                const drawCall = this._drawCalls[i];
+                const shape = drawCall.shape;
+                this._writeShapeVertices(backend, shape, vOffset);
+                if (resolved.indices !== null && resolved.indexCount > 0) {
+                    this._packedIndexData.set(resolved.indices.subarray(0, resolved.indexCount), iOffset);
+                    iOffset += resolved.indexCount;
+                }
+                vOffset += resolved.vertexCount;
+            }
+        }
+        // Phase 3: single writeBuffer per GPU buffer covers the whole frame.
+        device.queue.writeBuffer(this._vertexBuffer, 0, this._vertexData, 0, totalVertices * vertexStrideBytes$2);
+        if (totalIndices > 0) {
+            device.queue.writeBuffer(this._indexBuffer, 0, this._packedIndexData.buffer, this._packedIndexData.byteOffset, totalIndices * Uint16Array.BYTES_PER_ELEMENT);
+        }
+        // Phase 4: single render pass. Per-draw state is just pipeline and
+        // vertex/index subrange offsets — the transform has already been
+        // baked into the vertex data.
+        const encoder = device.createCommandEncoder();
+        const pass = encoder.beginRenderPass({
+            colorAttachments: [backend.createColorAttachment()],
+        });
+        backend.stats.renderPasses++;
+        if (scissor !== null) {
+            pass.setScissorRect(scissor.x, scissor.y, scissor.width, scissor.height);
+        }
+        for (const planned of plan) {
+            pass.setPipeline(planned.pipeline);
+            pass.setVertexBuffer(0, this._vertexBuffer, planned.vertexByteOffset);
+            if (planned.indexCount > 0) {
+                pass.setIndexBuffer(this._indexBuffer, 'uint16', planned.indexByteOffset);
+                pass.drawIndexed(planned.indexCount);
+            }
+            else {
+                pass.draw(planned.vertexCount);
+            }
+            backend.stats.batches++;
+            backend.stats.drawCalls++;
+        }
+        pass.end();
+        backend.submit(encoder.finish());
+        this._drawCallCount = 0;
+    }
+    destroy() {
+        this.disconnect();
+        this._combinedTransform.destroy();
+    }
+    onConnect(backend) {
+        this._backend = backend;
+        this._device = this._backend.device;
+        this._shaderModule = this._device.createShaderModule({ code: primitiveShaderSource });
+        // Transform is applied per-vertex on the CPU, so no uniform binding
+        // is needed — the shader outputs input.position directly.
+        this._pipelineLayout = this._device.createPipelineLayout({
+            bindGroupLayouts: [],
+        });
+    }
+    onDisconnect() {
+        this.flush();
+        this._destroyBuffers();
+        this._pipelines.clear();
+        this._pipelineLayout = null;
+        this._shaderModule = null;
+        this._device = null;
+        this._backend = null;
+        this._drawCallCount = 0;
+    }
+    _writeShapeVertices(backend, shape, vertexStart) {
+        // Matrix.combine is `other * this` (see Matrix.rotate and
+        // SceneNode.getGlobalTransform, both of which chain via
+        // local.combine(parent.global) to yield parent.global * local).
+        //
+        // We need view * global applied to a local vertex, so start with
+        // global and combine with view — that gives
+        // _combinedTransform = view * global.
+        const matrix = this._combinedTransform
+            .copy(shape.getGlobalTransform())
+            .combine(backend.view.getTransform());
+        // Match the original uniform-based WGSL layout exactly.
+        //
+        // The shader packs the Matrix's 9 fields into a 4x4 mat (column-major
+        // in WGSL):
+        //   col 0 = [a, c, 0, 0]
+        //   col 1 = [b, d, 0, 0]
+        //   col 2 = [0, 0, 1, 0]
+        //   col 3 = [x, y, 0, z]
+        //
+        // Multiplied by vec4(px, py, 0, 1):
+        //   out = col0*px + col1*py + col2*0 + col3*1
+        //   out.x = a*px + b*py + x
+        //   out.y = c*px + d*py + y
+        //   out.z = 0
+        //   out.w = z
+        //
+        // The Matrix class represents the affine matrix in the order
+        //   [a b x]
+        //   [c d y]
+        //   [e f z]
+        // so a/b/c/d are rotation+scale (note: b on the TOP row, c on the
+        // LEFT column, not the other way around) and x/y/z the translation /
+        // w component. Matrix.toArray(false) confirms this layout.
+        const a = matrix.a;
+        const b = matrix.b;
+        const c = matrix.c;
+        const d = matrix.d;
+        const tx = matrix.x;
+        const ty = matrix.y;
+        const tw = matrix.z;
+        const color = shape.color.toRgba();
+        const vertices = shape.geometry.vertices;
+        const vertexCount = vertices.length / 2;
+        for (let i = 0; i < vertexCount; i++) {
+            const sourceIndex = i * 2;
+            const targetIndex = (vertexStart + i) * wordsPerVertex$1;
+            const px = vertices[sourceIndex];
+            const py = vertices[sourceIndex + 1];
+            this._float32View[targetIndex + 0] = a * px + b * py + tx;
+            this._float32View[targetIndex + 1] = c * px + d * py + ty;
+            this._float32View[targetIndex + 2] = 0;
+            this._float32View[targetIndex + 3] = tw;
+            this._uint32View[targetIndex + 4] = color;
+        }
+    }
+    _ensureVertexCapacity(vertexCount) {
+        const requiredBytes = vertexCount * vertexStrideBytes$2;
+        if (requiredBytes > this._vertexData.byteLength) {
+            const byteLength = Math.max(requiredBytes, this._vertexData.byteLength === 0 ? vertexStrideBytes$2 : this._vertexData.byteLength * 2);
+            this._vertexData = new ArrayBuffer(byteLength);
+            this._float32View = new Float32Array(this._vertexData);
+            this._uint32View = new Uint32Array(this._vertexData);
+        }
+        if (requiredBytes > this._vertexBufferCapacity) {
+            this._vertexBuffer?.destroy();
+            this._vertexBufferCapacity = Math.max(requiredBytes, this._vertexBufferCapacity === 0 ? vertexStrideBytes$2 : this._vertexBufferCapacity * 2);
+            this._vertexBuffer = this._device.createBuffer({
+                size: this._vertexBufferCapacity,
+                usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+            });
+        }
+    }
+    _ensureIndexCapacity(indexCount) {
+        const requiredBytes = indexCount * Uint16Array.BYTES_PER_ELEMENT;
+        if (requiredBytes > this._indexBufferCapacity) {
+            this._indexBuffer?.destroy();
+            this._indexBufferCapacity = Math.max(requiredBytes, this._indexBufferCapacity === 0 ? Uint16Array.BYTES_PER_ELEMENT : this._indexBufferCapacity * 2);
+            this._indexBuffer = this._device.createBuffer({
+                size: this._indexBufferCapacity,
+                usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+            });
+        }
+    }
+    _getPipeline(key) {
+        const pipelineKey = `${key.topology}:${key.usesStripIndex ? 1 : 0}:${key.blendMode}:${key.format}`;
+        const existingPipeline = this._pipelines.get(pipelineKey);
+        if (existingPipeline) {
+            return existingPipeline;
+        }
+        const pipeline = this._device.createRenderPipeline({
+            layout: this._pipelineLayout,
+            vertex: {
+                module: this._shaderModule,
+                entryPoint: 'vertexMain',
+                buffers: [{
+                        arrayStride: vertexStrideBytes$2,
+                        attributes: [{
+                                shaderLocation: 0,
+                                offset: 0,
+                                format: 'float32x4',
+                            }, {
+                                shaderLocation: 1,
+                                offset: 16,
+                                format: 'unorm8x4',
+                            }],
+                    }],
+            },
+            fragment: {
+                module: this._shaderModule,
+                entryPoint: 'fragmentMain',
+                targets: [{
+                        format: key.format,
+                        blend: getWebGpuBlendState(key.blendMode),
+                        writeMask: GPUColorWrite.ALL,
+                    }],
+            },
+            primitive: {
+                topology: key.topology,
+                stripIndexFormat: key.usesStripIndex ? 'uint16' : undefined,
+            },
+        });
+        this._pipelines.set(pipelineKey, pipeline);
+        return pipeline;
+    }
+    _getTopology(drawMode) {
+        switch (drawMode) {
+            case RenderingPrimitives.Points:
+                return 'point-list';
+            case RenderingPrimitives.Lines:
+                return 'line-list';
+            case RenderingPrimitives.LineLoop:
+            case RenderingPrimitives.LineStrip:
+                return 'line-strip';
+            case RenderingPrimitives.Triangles:
+            case RenderingPrimitives.TriangleFan:
+                return 'triangle-list';
+            case RenderingPrimitives.TriangleStrip:
+                return 'triangle-strip';
+            default:
+                throw new Error(`WebGPU primitive renderer does not support draw mode "${drawMode}" yet.`);
+        }
+    }
+    _resolveDrawCall(shape) {
+        const vertices = shape.geometry.vertices;
+        const vertexCount = vertices.length / 2;
+        if (vertexCount === 0) {
+            return null;
+        }
+        switch (shape.drawMode) {
+            case RenderingPrimitives.LineLoop:
+                return this._resolveLineLoopDrawCall(shape.geometry.indices, vertexCount);
+            case RenderingPrimitives.TriangleFan:
+                return this._resolveTriangleFanDrawCall(shape.geometry.indices, vertexCount);
+            default: {
+                const indices = shape.geometry.indices;
+                const topology = this._getTopology(shape.drawMode);
+                const indexCount = indices.length;
+                const usesStripIndex = indexCount > 0 && (shape.drawMode === RenderingPrimitives.LineStrip
+                    || shape.drawMode === RenderingPrimitives.TriangleStrip);
+                if (indexCount > 0) {
+                    return {
+                        topology,
+                        usesStripIndex,
+                        vertexCount,
+                        indices,
+                        indexCount,
+                    };
+                }
+                return {
+                    topology,
+                    usesStripIndex,
+                    vertexCount,
+                    indices: null,
+                    indexCount: 0,
+                };
+            }
+        }
+    }
+    _resolveLineLoopDrawCall(indices, vertexCount) {
+        const sourceIndices = indices.length > 0 ? indices : this._getSequentialIndices(vertexCount);
+        const sourceCount = sourceIndices.length;
+        if (sourceCount < 2) {
+            return null;
+        }
+        const loopIndexCount = sourceCount + 1;
+        const generatedIndices = this._ensureGeneratedIndexCapacity(loopIndexCount);
+        generatedIndices.set(sourceIndices.subarray(0, sourceCount), 0);
+        generatedIndices[sourceCount] = sourceIndices[0];
+        return {
+            topology: 'line-strip',
+            usesStripIndex: true,
+            vertexCount,
+            indices: generatedIndices,
+            indexCount: loopIndexCount,
+        };
+    }
+    _resolveTriangleFanDrawCall(indices, vertexCount) {
+        const sourceIndices = indices.length > 0 ? indices : this._getSequentialIndices(vertexCount);
+        const sourceCount = sourceIndices.length;
+        if (sourceCount < 3) {
+            return null;
+        }
+        const indexCount = (sourceCount - 2) * 3;
+        const generatedIndices = this._ensureGeneratedIndexCapacity(indexCount);
+        let targetIndex = 0;
+        for (let index = 1; index < sourceCount - 1; index++) {
+            generatedIndices[targetIndex++] = sourceIndices[0];
+            generatedIndices[targetIndex++] = sourceIndices[index];
+            generatedIndices[targetIndex++] = sourceIndices[index + 1];
+        }
+        return {
+            topology: 'triangle-list',
+            usesStripIndex: false,
+            vertexCount,
+            indices: generatedIndices,
+            indexCount,
+        };
+    }
+    _getSequentialIndices(vertexCount) {
+        if (vertexCount > this._sequentialIndexData.length) {
+            let nextLength = Math.max(1, this._sequentialIndexData.length);
+            while (nextLength < vertexCount) {
+                nextLength *= 2;
+            }
+            this._sequentialIndexData = new Uint16Array(nextLength);
+        }
+        for (let index = 0; index < vertexCount; index++) {
+            this._sequentialIndexData[index] = index;
+        }
+        return this._sequentialIndexData.subarray(0, vertexCount);
+    }
+    _ensureGeneratedIndexCapacity(indexCount) {
+        if (indexCount > this._generatedIndexData.length) {
+            let nextLength = Math.max(1, this._generatedIndexData.length);
+            while (nextLength < indexCount) {
+                nextLength *= 2;
+            }
+            this._generatedIndexData = new Uint16Array(nextLength);
+        }
+        return this._generatedIndexData.subarray(0, indexCount);
+    }
+    _destroyBuffers() {
+        this._vertexBuffer?.destroy();
+        this._indexBuffer?.destroy();
+        this._vertexBuffer = null;
+        this._indexBuffer = null;
+        this._vertexBufferCapacity = 0;
+        this._indexBufferCapacity = 0;
+    }
+}
+
+/// <reference types="@webgpu/types" />
+const spriteShaderSource = `
+struct ProjectionUniforms {
+    matrix: mat4x4<f32>,
+};
+
+@group(0) @binding(0)
+var<uniform> projection: ProjectionUniforms;
+
+@group(1) @binding(0)
+var spriteTexture0: texture_2d<f32>;
+@group(1) @binding(1)
+var spriteTexture1: texture_2d<f32>;
+@group(1) @binding(2)
+var spriteTexture2: texture_2d<f32>;
+@group(1) @binding(3)
+var spriteTexture3: texture_2d<f32>;
+@group(1) @binding(4)
+var spriteTexture4: texture_2d<f32>;
+@group(1) @binding(5)
+var spriteTexture5: texture_2d<f32>;
+@group(1) @binding(6)
+var spriteTexture6: texture_2d<f32>;
+@group(1) @binding(7)
+var spriteTexture7: texture_2d<f32>;
+
+@group(1) @binding(8)
+var spriteSampler0: sampler;
+@group(1) @binding(9)
+var spriteSampler1: sampler;
+@group(1) @binding(10)
+var spriteSampler2: sampler;
+@group(1) @binding(11)
+var spriteSampler3: sampler;
+@group(1) @binding(12)
+var spriteSampler4: sampler;
+@group(1) @binding(13)
+var spriteSampler5: sampler;
+@group(1) @binding(14)
+var spriteSampler6: sampler;
+@group(1) @binding(15)
+var spriteSampler7: sampler;
+
+// Per-instance vertex layout (56 bytes per sprite). The four corners
+// of the quad are derived from @builtin(vertex_index) 0..3 inside the
+// vertex shader — there is no per-vertex stream.
+struct VertexInput {
+    @location(0) localBounds: vec4<f32>,        // left, top, right, bottom (local space)
+    @location(1) transformAB: vec3<f32>,        // first  row of 2D affine
+    @location(2) transformCD: vec3<f32>,        // second row of 2D affine
+    @location(3) uvBounds: vec4<f32>,           // uMin, vMin, uMax, vMax (CPU pre-swaps for flipY)
+    @location(4) color: vec4<f32>,              // RGBA tint
+    @location(5) packedSlotFlags: u32,          // bits 0..7 = slot, bit 8 = premultiply
+};
+
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) texcoord: vec2<f32>,
+    @location(1) color: vec4<f32>,
+    @location(2) @interpolate(flat) premultiplySample: u32,
+    @location(3) @interpolate(flat) textureSlot: u32,
+};
+
+@vertex
+fn vertexMain(input: VertexInput, @builtin(vertex_index) vid: u32) -> VertexOutput {
+    var output: VertexOutput;
+
+    // vid 0..3 → corners in TL, TR, BR, BL order (matches the static index
+    // buffer [0,1,2,0,2,3] used for indexed triangle-list drawing).
+    let cornerX = ((vid + 1u) >> 1u) & 1u;
+    let cornerY = vid >> 1u;
+
+    let localX = select(input.localBounds.x, input.localBounds.z, cornerX == 1u);
+    let localY = select(input.localBounds.y, input.localBounds.w, cornerY == 1u);
+
+    let worldX = input.transformAB.x * localX + input.transformAB.y * localY + input.transformAB.z;
+    let worldY = input.transformCD.x * localX + input.transformCD.y * localY + input.transformCD.z;
+
+    output.position = projection.matrix * vec4<f32>(worldX, worldY, 0.0, 1.0);
+
+    let u = select(input.uvBounds.x, input.uvBounds.z, cornerX == 1u);
+    let v = select(input.uvBounds.y, input.uvBounds.w, cornerY == 1u);
+    output.texcoord = vec2<f32>(u, v);
+
+    output.color = vec4(input.color.rgb * input.color.a, input.color.a);
+    output.textureSlot = input.packedSlotFlags & 0xFFu;
+    output.premultiplySample = (input.packedSlotFlags >> 8u) & 1u;
+
+    return output;
+}
+
+fn sampleTexture(slot: u32, uv: vec2<f32>, ddx: vec2<f32>, ddy: vec2<f32>) -> vec4<f32> {
+    switch slot {
+        case 0u: {
+            return textureSampleGrad(spriteTexture0, spriteSampler0, uv, ddx, ddy);
+        }
+        case 1u: {
+            return textureSampleGrad(spriteTexture1, spriteSampler1, uv, ddx, ddy);
+        }
+        case 2u: {
+            return textureSampleGrad(spriteTexture2, spriteSampler2, uv, ddx, ddy);
+        }
+        case 3u: {
+            return textureSampleGrad(spriteTexture3, spriteSampler3, uv, ddx, ddy);
+        }
+        case 4u: {
+            return textureSampleGrad(spriteTexture4, spriteSampler4, uv, ddx, ddy);
+        }
+        case 5u: {
+            return textureSampleGrad(spriteTexture5, spriteSampler5, uv, ddx, ddy);
+        }
+        case 6u: {
+            return textureSampleGrad(spriteTexture6, spriteSampler6, uv, ddx, ddy);
+        }
+        default: {
+            return textureSampleGrad(spriteTexture7, spriteSampler7, uv, ddx, ddy);
+        }
+    }
+}
+
+@fragment
+fn fragmentMain(input: VertexOutput) -> @location(0) vec4<f32> {
+    // Compute screen-space derivatives in uniform control flow before the
+    // per-slot switch. WGSL requires textureSample (implicit LOD) to run in
+    // uniform control flow, which multi-texture batching breaks because the
+    // slot varies per fragment. textureSampleGrad takes explicit derivatives
+    // and is valid regardless of control-flow uniformity, while preserving
+    // mipmap-correct LOD when sprites use mipmapped textures.
+    let ddx = dpdx(input.texcoord);
+    let ddy = dpdy(input.texcoord);
+    let sample = sampleTexture(input.textureSlot, input.texcoord, ddx, ddy);
+    let resolvedSample = select(sample, vec4(sample.rgb * sample.a, sample.a), input.premultiplySample == 1u);
+
+    return resolvedSample * input.color;
+}
+`;
+const instanceStrideBytes$1 = 56;
+const wordsPerInstance = instanceStrideBytes$1 / Uint32Array.BYTES_PER_ELEMENT;
+const projectionByteLength = 64;
+const initialBatchCapacity = 32;
+const maxBatchTextures = 8;
+const indicesPerSprite = 6;
+// Static index buffer: two triangles forming a quad, vertex IDs 0..3 in
+// TL/TR/BR/BL order so the WGSL `cornerX/cornerY` derivation matches.
+const quadIndices = new Uint16Array([0, 1, 2, 0, 2, 3]);
+class WebGpuSpriteRenderer extends AbstractWebGpuRenderer {
+    _projectionData = new Float32Array(projectionByteLength / Float32Array.BYTES_PER_ELEMENT);
+    _device = null;
+    _shaderModule = null;
+    _uniformBindGroupLayout = null;
+    _textureBindGroupLayout = null;
+    _pipelineLayout = null;
+    _uniformBuffer = null;
+    _uniformBindGroup = null;
+    _indexBuffer = null;
+    _instanceBuffer = null;
+    _instanceCapacity = 0;
+    _instanceData = new ArrayBuffer(0);
+    _instanceFloat32 = new Float32Array(this._instanceData);
+    _instanceUint32 = new Uint32Array(this._instanceData);
+    _pipelines = new Map();
+    _activeTextures = new Array(maxBatchTextures).fill(null);
+    _textureSlots = new Map();
+    _slotCount = 0;
+    _instanceCount = 0;
+    _currentBlendMode = null;
+    onConnect(backend) {
+        if (this._device) {
+            return;
+        }
+        this._device = backend.device;
+        this._shaderModule = this._device.createShaderModule({ code: spriteShaderSource });
+        this._uniformBindGroupLayout = this._device.createBindGroupLayout({
+            entries: [{
+                    binding: 0,
+                    visibility: GPUShaderStage.VERTEX,
+                    buffer: {
+                        type: 'uniform',
+                    },
+                }],
+        });
+        this._textureBindGroupLayout = this._device.createBindGroupLayout({
+            entries: [
+                ...Array.from({ length: maxBatchTextures }, (_, index) => ({
+                    binding: index,
+                    visibility: GPUShaderStage.FRAGMENT,
+                    texture: {
+                        sampleType: 'float',
+                    },
+                })),
+                ...Array.from({ length: maxBatchTextures }, (_, index) => ({
+                    binding: maxBatchTextures + index,
+                    visibility: GPUShaderStage.FRAGMENT,
+                    sampler: {
+                        type: 'filtering',
+                    },
+                })),
+            ],
+        });
+        this._pipelineLayout = this._device.createPipelineLayout({
+            bindGroupLayouts: [this._uniformBindGroupLayout, this._textureBindGroupLayout],
+        });
+        this._uniformBuffer = this._device.createBuffer({
+            size: projectionByteLength,
+            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+        });
+        this._uniformBindGroup = this._device.createBindGroup({
+            layout: this._uniformBindGroupLayout,
+            entries: [{
+                    binding: 0,
+                    resource: {
+                        buffer: this._uniformBuffer,
+                    },
+                }],
+        });
+        // Static index buffer for the quad. Allocated once at connect; its
+        // contents never change.
+        this._indexBuffer = this._device.createBuffer({
+            size: quadIndices.byteLength,
+            usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+        });
+        this._device.queue.writeBuffer(this._indexBuffer, 0, quadIndices.buffer, quadIndices.byteOffset, quadIndices.byteLength);
+    }
+    onDisconnect() {
+        this._instanceBuffer?.destroy();
+        this._indexBuffer?.destroy();
+        this._uniformBuffer?.destroy();
+        this._pipelines.clear();
+        this._instanceBuffer = null;
+        this._indexBuffer = null;
+        this._uniformBindGroup = null;
+        this._uniformBuffer = null;
+        this._pipelineLayout = null;
+        this._textureBindGroupLayout = null;
+        this._uniformBindGroupLayout = null;
+        this._shaderModule = null;
+        this._device = null;
+        this._backend = null;
+        this._instanceCapacity = 0;
+        this._instanceData = new ArrayBuffer(0);
+        this._instanceFloat32 = new Float32Array(this._instanceData);
+        this._instanceUint32 = new Uint32Array(this._instanceData);
+        this._instanceCount = 0;
+        this._currentBlendMode = null;
+        this._resetSlots();
+    }
+    render(sprite) {
         const backend = this._backend;
-        if (backend === null) {
-            throw new Error('Renderer not connected');
-        }
-        if (shape.drawMode !== RenderingPrimitives.Points
-            && shape.drawMode !== RenderingPrimitives.Lines
-            && shape.drawMode !== RenderingPrimitives.LineLoop
-            && shape.drawMode !== RenderingPrimitives.LineStrip
-            && shape.drawMode !== RenderingPrimitives.Triangles
-            && shape.drawMode !== RenderingPrimitives.TriangleFan
-            && shape.drawMode !== RenderingPrimitives.TriangleStrip) {
-            throw new Error(`WebGPU primitive renderer does not support draw mode "${shape.drawMode}" yet.`);
-        }
-        backend.setBlendMode(shape.blendMode);
-        if (shape.geometry.vertices.length === 0) {
+        const texture = sprite.texture;
+        // Same early-out conditions as the deferred renderer used to apply.
+        if (backend === null
+            || (!(texture instanceof Texture) && !(texture instanceof RenderTexture))
+            || texture.width === 0
+            || texture.height === 0
+            || (texture instanceof Texture && texture.source === null)) {
             return;
         }
-        const drawCallIndex = this._drawCallCount++;
-        const drawCall = this._drawCalls[drawCallIndex];
-        if (drawCall) {
-            drawCall.shape = shape;
-            drawCall.blendMode = shape.blendMode;
+        const blendMode = sprite.blendMode;
+        // Flush triggers: blend-mode change, instance buffer full at current
+        // capacity (we'll grow on next render), or texture-slot exhaustion.
+        const blendModeChanged = this._currentBlendMode !== null && blendMode !== this._currentBlendMode;
+        const slotExhausted = !this._textureSlots.has(texture) && this._slotCount >= maxBatchTextures;
+        if (blendModeChanged || slotExhausted) {
+            this.flush();
         }
-        else {
-            this._drawCalls.push({
-                shape,
-                blendMode: shape.blendMode,
-            });
+        this._currentBlendMode = blendMode;
+        backend.setBlendMode(blendMode);
+        // Resolve / assign texture slot.
+        let slot = this._textureSlots.get(texture);
+        if (slot === undefined) {
+            slot = this._slotCount++;
+            this._textureSlots.set(texture, slot);
+            this._activeTextures[slot] = texture;
         }
+        const premultiplySample = backend.shouldPremultiplyTextureSample(texture) ? 1 : 0;
+        const packedSlotFlags = slot | (premultiplySample << 8);
+        // Ensure capacity covers the new entry BEFORE packing — otherwise the
+        // typed-array writes in _packInstance silently fall off the end of a
+        // too-small buffer.
+        this._ensureInstanceCapacity(this._instanceCount + 1);
+        this._packInstance(sprite, texture, packedSlotFlags);
+        this._instanceCount++;
     }
     flush() {
         const backend = this._backend;
         const device = this._device;
-        if (!backend || !device) {
-            return;
-        }
-        if (this._drawCallCount === 0 && !backend.clearRequested) {
+        const uniformBuffer = this._uniformBuffer;
+        const uniformBindGroup = this._uniformBindGroup;
+        if (!backend || !device || !uniformBuffer || !uniformBindGroup) {
             return;
         }
-        const scissor = backend.getScissorRect();
-        const maskClipsAll = scissor !== null && (scissor.width <= 0 || scissor.height <= 0);
-        // Phase 1: resolve drawcalls and record each one's offsets into the
-        // shared packed buffers. Transform gets baked into the vertex data
-        // during phase 2 so no per-drawcall uniform binding is needed.
-        const plan = [];
-        const resolvedDrawCalls = [];
-        let totalVertices = 0;
-        let totalIndices = 0;
-        if (this._drawCallCount > 0 && !maskClipsAll) {
-            for (let drawCallIndex = 0; drawCallIndex < this._drawCallCount; drawCallIndex++) {
-                const drawCall = this._drawCalls[drawCallIndex];
-                const shape = drawCall.shape;
-                const resolved = this._resolveDrawCall(shape);
-                resolvedDrawCalls.push(resolved);
-                if (resolved === null) {
-                    continue;
-                }
-                const pipeline = this._getPipeline({
-                    topology: resolved.topology,
-                    usesStripIndex: resolved.usesStripIndex,
-                    blendMode: drawCall.blendMode,
-                    format: backend.renderTargetFormat,
-                });
-                plan.push({
-                    pipeline,
-                    vertexByteOffset: totalVertices * vertexStrideBytes$1,
-                    vertexCount: resolved.vertexCount,
-                    indexByteOffset: totalIndices * Uint16Array.BYTES_PER_ELEMENT,
-                    indexCount: resolved.indexCount,
-                });
-                totalVertices += resolved.vertexCount;
-                totalIndices += resolved.indexCount;
-            }
-        }
-        // If nothing will actually render, still honor a pending clear with
-        // a single empty pass so createColorAttachment consumes the clear
-        // state exactly once.
-        if (plan.length === 0) {
-            if (backend.clearRequested) {
-                const encoder = device.createCommandEncoder();
-                const pass = encoder.beginRenderPass({
-                    colorAttachments: [backend.createColorAttachment()],
-                });
-                backend.stats.renderPasses++;
-                pass.end();
-                backend.submit(encoder.finish());
-            }
-            this._drawCallCount = 0;
+        if (this._instanceCount === 0 && !backend.clearRequested) {
             return;
         }
-        // Phase 2: size GPU buffers for the whole-frame totals, then pack
-        // every drawcall's CPU-side data. _writeShapeVertices applies
-        // (view * shape.globalTransform) per-vertex so the shader simply
-        // outputs input.position unchanged.
-        this._ensureVertexCapacity(totalVertices);
-        if (totalIndices > 0) {
-            this._ensureIndexCapacity(totalIndices);
-            if (this._packedIndexData.length < totalIndices) {
-                this._packedIndexData = new Uint16Array(Math.max(totalIndices, this._packedIndexData.length === 0 ? 1 : this._packedIndexData.length * 2));
-            }
-        }
-        {
-            let vOffset = 0;
-            let iOffset = 0;
-            for (let i = 0; i < this._drawCallCount; i++) {
-                const resolved = resolvedDrawCalls[i];
-                if (resolved === null) {
-                    continue;
-                }
-                const drawCall = this._drawCalls[i];
-                const shape = drawCall.shape;
-                this._writeShapeVertices(backend, shape, vOffset);
-                if (resolved.indices !== null && resolved.indexCount > 0) {
-                    this._packedIndexData.set(resolved.indices.subarray(0, resolved.indexCount), iOffset);
-                    iOffset += resolved.indexCount;
-                }
-                vOffset += resolved.vertexCount;
-            }
-        }
-        // Phase 3: single writeBuffer per GPU buffer covers the whole frame.
-        device.queue.writeBuffer(this._vertexBuffer, 0, this._vertexData, 0, totalVertices * vertexStrideBytes$1);
-        if (totalIndices > 0) {
-            device.queue.writeBuffer(this._indexBuffer, 0, this._packedIndexData.buffer, this._packedIndexData.byteOffset, totalIndices * Uint16Array.BYTES_PER_ELEMENT);
-        }
-        // Phase 4: single render pass. Per-draw state is just pipeline and
-        // vertex/index subrange offsets — the transform has already been
-        // baked into the vertex data.
+        const viewMatrix = backend.view.getTransform();
+        this._projectionData.set([
+            viewMatrix.a, viewMatrix.c, 0, 0,
+            viewMatrix.b, viewMatrix.d, 0, 0,
+            0, 0, 1, 0,
+            viewMatrix.x, viewMatrix.y, 0, viewMatrix.z,
+        ]);
+        device.queue.writeBuffer(uniformBuffer, 0, this._projectionData.buffer, this._projectionData.byteOffset, this._projectionData.byteLength);
         const encoder = device.createCommandEncoder();
         const pass = encoder.beginRenderPass({
             colorAttachments: [backend.createColorAttachment()],
         });
         backend.stats.renderPasses++;
-        if (scissor !== null) {
+        const scissor = backend.getScissorRect();
+        const maskClipsAll = scissor !== null && (scissor.width <= 0 || scissor.height <= 0);
+        if (scissor !== null && !maskClipsAll) {
             pass.setScissorRect(scissor.x, scissor.y, scissor.width, scissor.height);
         }
-        for (const planned of plan) {
-            pass.setPipeline(planned.pipeline);
-            pass.setVertexBuffer(0, this._vertexBuffer, planned.vertexByteOffset);
-            if (planned.indexCount > 0) {
-                pass.setIndexBuffer(this._indexBuffer, 'uint16', planned.indexByteOffset);
-                pass.drawIndexed(planned.indexCount);
-            }
-            else {
-                pass.draw(planned.vertexCount);
+        if (this._instanceCount > 0 && !maskClipsAll && this._instanceBuffer !== null && this._indexBuffer !== null && this._currentBlendMode !== null) {
+            device.queue.writeBuffer(this._instanceBuffer, 0, this._instanceData, 0, this._instanceCount * instanceStrideBytes$1);
+            const pipeline = this._getPipeline(this._currentBlendMode, backend.renderTargetFormat);
+            const textureBindGroup = this._createTextureBindGroup(device, backend);
+            pass.setPipeline(pipeline);
+            pass.setBindGroup(0, uniformBindGroup);
+            pass.setBindGroup(1, textureBindGroup);
+            pass.setVertexBuffer(0, this._instanceBuffer);
+            pass.setIndexBuffer(this._indexBuffer, 'uint16');
+            pass.drawIndexed(indicesPerSprite, this._instanceCount, 0, 0, 0);
+            backend.stats.batches++;
+            backend.stats.drawCalls++;
+        }
+        pass.end();
+        backend.submit(encoder.finish());
+        this._instanceCount = 0;
+        this._resetSlots();
+        this._currentBlendMode = null;
+    }
+    destroy() {
+        this.disconnect();
+    }
+    /**
+     * Pre-create render pipelines for every blend-mode × target-format
+     * combination this renderer can produce, asynchronously and in
+     * parallel. Called from the render manager's init path so by the time
+     * the first frame draws, all pipelines exist in cache.
+     *
+     * Without prewarm, the first draw of any new (blendMode, format)
+     * combination would fall back to the synchronous _getPipeline() path,
+     * which blocks while the WebGPU implementation compiles WGSL and
+     * sets up the pipeline state object — typically tens of milliseconds.
+     */
+    async prewarmPipelines(formats) {
+        const device = this._device;
+        if (!device || !this._shaderModule || !this._pipelineLayout) {
+            return;
+        }
+        if (typeof device.createRenderPipelineAsync !== 'function') {
+            return;
+        }
+        const blendModes = [
+            BlendModes.Normal,
+            BlendModes.Additive,
+            BlendModes.Subtract,
+            BlendModes.Multiply,
+            BlendModes.Screen,
+        ];
+        const promises = [];
+        for (const blendMode of blendModes) {
+            for (const format of formats) {
+                const pipelineKey = `${blendMode}:${format}`;
+                if (this._pipelines.has(pipelineKey)) {
+                    continue;
+                }
+                const promise = device
+                    .createRenderPipelineAsync(this._buildPipelineDescriptor(blendMode, format))
+                    .then((pipeline) => {
+                    this._pipelines.set(pipelineKey, pipeline);
+                });
+                promises.push(promise);
             }
-            backend.stats.batches++;
-            backend.stats.drawCalls++;
         }
-        pass.end();
-        backend.submit(encoder.finish());
-        this._drawCallCount = 0;
+        await Promise.all(promises);
     }
-    destroy() {
-        this.disconnect();
-        this._combinedTransform.destroy();
+    _packInstance(sprite, texture, packedSlotFlags) {
+        const offset = this._instanceCount * wordsPerInstance;
+        const f32 = this._instanceFloat32;
+        const u32 = this._instanceUint32;
+        const bounds = sprite.getLocalBounds();
+        f32[offset + 0] = bounds.left;
+        f32[offset + 1] = bounds.top;
+        f32[offset + 2] = bounds.right;
+        f32[offset + 3] = bounds.bottom;
+        const transform = sprite.getGlobalTransform();
+        f32[offset + 4] = transform.a;
+        f32[offset + 5] = transform.b;
+        f32[offset + 6] = transform.x;
+        f32[offset + 7] = transform.c;
+        f32[offset + 8] = transform.d;
+        f32[offset + 9] = transform.y;
+        // uvBounds: u16x4 normalised, packed into two u32 slots. The CPU
+        // applies the flipY swap so the shader stays orientation-agnostic.
+        const frame = sprite.textureFrame;
+        const texWidth = texture.width;
+        const texHeight = texture.height;
+        const uMin = ((frame.left / texWidth) * 0xFFFF) & 0xFFFF;
+        const uMax = ((frame.right / texWidth) * 0xFFFF) & 0xFFFF;
+        const vMinRaw = ((frame.top / texHeight) * 0xFFFF) & 0xFFFF;
+        const vMaxRaw = ((frame.bottom / texHeight) * 0xFFFF) & 0xFFFF;
+        const flipY = texture instanceof Texture && texture.flipY;
+        const vMin = flipY ? vMaxRaw : vMinRaw;
+        const vMax = flipY ? vMinRaw : vMaxRaw;
+        u32[offset + 10] = uMin | (vMin << 16);
+        u32[offset + 11] = uMax | (vMax << 16);
+        u32[offset + 12] = sprite.tint.toRgba();
+        u32[offset + 13] = packedSlotFlags;
     }
-    onConnect(backend) {
-        this._backend = backend;
-        this._device = this._backend.device;
-        this._shaderModule = this._device.createShaderModule({ code: primitiveShaderSource });
-        // Transform is applied per-vertex on the CPU, so no uniform binding
-        // is needed — the shader outputs input.position directly.
-        this._pipelineLayout = this._device.createPipelineLayout({
-            bindGroupLayouts: [],
+    _ensureInstanceCapacity(instanceCount) {
+        if (!this._device || instanceCount <= this._instanceCapacity) {
+            return;
+        }
+        let nextCapacity = Math.max(this._instanceCapacity, initialBatchCapacity);
+        while (nextCapacity < instanceCount) {
+            nextCapacity *= 2;
+        }
+        const oldData = this._instanceData;
+        // Preserve any already-packed instances. _instanceCount is bounded by
+        // the previous capacity, but oldData may be the initial 0-byte buffer
+        // — clamp to its actual byteLength to avoid out-of-range typed-array
+        // construction.
+        const carryBytes = Math.min(this._instanceCount * instanceStrideBytes$1, oldData.byteLength);
+        const instanceData = new ArrayBuffer(nextCapacity * instanceStrideBytes$1);
+        if (carryBytes > 0) {
+            new Uint8Array(instanceData).set(new Uint8Array(oldData, 0, carryBytes));
+        }
+        const instanceBuffer = this._device.createBuffer({
+            size: instanceData.byteLength,
+            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
         });
+        this._instanceBuffer?.destroy();
+        this._instanceCapacity = nextCapacity;
+        this._instanceData = instanceData;
+        this._instanceFloat32 = new Float32Array(instanceData);
+        this._instanceUint32 = new Uint32Array(instanceData);
+        this._instanceBuffer = instanceBuffer;
     }
-    onDisconnect() {
-        this.flush();
-        this._destroyBuffers();
-        this._pipelines.clear();
-        this._pipelineLayout = null;
-        this._shaderModule = null;
-        this._device = null;
-        this._backend = null;
-        this._drawCallCount = 0;
-    }
-    _writeShapeVertices(backend, shape, vertexStart) {
-        // Matrix.combine is `other * this` (see Matrix.rotate and
-        // SceneNode.getGlobalTransform, both of which chain via
-        // local.combine(parent.global) to yield parent.global * local).
-        //
-        // We need view * global applied to a local vertex, so start with
-        // global and combine with view — that gives
-        // _combinedTransform = view * global.
-        const matrix = this._combinedTransform
-            .copy(shape.getGlobalTransform())
-            .combine(backend.view.getTransform());
-        // Match the original uniform-based WGSL layout exactly.
-        //
-        // The shader packs the Matrix's 9 fields into a 4x4 mat (column-major
-        // in WGSL):
-        //   col 0 = [a, c, 0, 0]
-        //   col 1 = [b, d, 0, 0]
-        //   col 2 = [0, 0, 1, 0]
-        //   col 3 = [x, y, 0, z]
-        //
-        // Multiplied by vec4(px, py, 0, 1):
-        //   out = col0*px + col1*py + col2*0 + col3*1
-        //   out.x = a*px + b*py + x
-        //   out.y = c*px + d*py + y
-        //   out.z = 0
-        //   out.w = z
-        //
-        // The Matrix class represents the affine matrix in the order
-        //   [a b x]
-        //   [c d y]
-        //   [e f z]
-        // so a/b/c/d are rotation+scale (note: b on the TOP row, c on the
-        // LEFT column, not the other way around) and x/y/z the translation /
-        // w component. Matrix.toArray(false) confirms this layout.
-        const a = matrix.a;
-        const b = matrix.b;
-        const c = matrix.c;
-        const d = matrix.d;
-        const tx = matrix.x;
-        const ty = matrix.y;
-        const tw = matrix.z;
-        const color = shape.color.toRgba();
-        const vertices = shape.geometry.vertices;
-        const vertexCount = vertices.length / 2;
-        for (let i = 0; i < vertexCount; i++) {
-            const sourceIndex = i * 2;
-            const targetIndex = (vertexStart + i) * wordsPerVertex;
-            const px = vertices[sourceIndex];
-            const py = vertices[sourceIndex + 1];
-            this._float32View[targetIndex + 0] = a * px + b * py + tx;
-            this._float32View[targetIndex + 1] = c * px + d * py + ty;
-            this._float32View[targetIndex + 2] = 0;
-            this._float32View[targetIndex + 3] = tw;
-            this._uint32View[targetIndex + 4] = color;
+    _resetSlots() {
+        if (this._slotCount > 0) {
+            for (let i = 0; i < this._slotCount; i++) {
+                this._activeTextures[i] = null;
+            }
+            this._textureSlots.clear();
+            this._slotCount = 0;
         }
     }
-    _ensureVertexCapacity(vertexCount) {
-        const requiredBytes = vertexCount * vertexStrideBytes$1;
-        if (requiredBytes > this._vertexData.byteLength) {
-            const byteLength = Math.max(requiredBytes, this._vertexData.byteLength === 0 ? vertexStrideBytes$1 : this._vertexData.byteLength * 2);
-            this._vertexData = new ArrayBuffer(byteLength);
-            this._float32View = new Float32Array(this._vertexData);
-            this._uint32View = new Uint32Array(this._vertexData);
+    _createTextureBindGroup(device, backend) {
+        // Slots beyond the active count get the slot-0 texture as a filler so
+        // the bind-group layout always sees N valid texture views and samplers.
+        // The fragment shader's switch only ever dispatches to the active slot
+        // count, so unsampled fillers cost nothing visually.
+        const fallbackTexture = this._activeTextures[0] ?? Texture.empty;
+        const fallbackBinding = backend.getTextureBinding(fallbackTexture);
+        const resolvedBindings = new Array(maxBatchTextures);
+        for (let i = 0; i < maxBatchTextures; i++) {
+            const texture = this._activeTextures[i] ?? fallbackTexture;
+            resolvedBindings[i] = texture === fallbackTexture
+                ? fallbackBinding
+                : backend.getTextureBinding(texture);
         }
-        if (requiredBytes > this._vertexBufferCapacity) {
-            this._vertexBuffer?.destroy();
-            this._vertexBufferCapacity = Math.max(requiredBytes, this._vertexBufferCapacity === 0 ? vertexStrideBytes$1 : this._vertexBufferCapacity * 2);
-            this._vertexBuffer = this._device.createBuffer({
-                size: this._vertexBufferCapacity,
-                usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+        const entries = [];
+        for (let i = 0; i < maxBatchTextures; i++) {
+            entries.push({
+                binding: i,
+                resource: resolvedBindings[i].view,
             });
         }
-    }
-    _ensureIndexCapacity(indexCount) {
-        const requiredBytes = indexCount * Uint16Array.BYTES_PER_ELEMENT;
-        if (requiredBytes > this._indexBufferCapacity) {
-            this._indexBuffer?.destroy();
-            this._indexBufferCapacity = Math.max(requiredBytes, this._indexBufferCapacity === 0 ? Uint16Array.BYTES_PER_ELEMENT : this._indexBufferCapacity * 2);
-            this._indexBuffer = this._device.createBuffer({
-                size: this._indexBufferCapacity,
-                usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+        for (let i = 0; i < maxBatchTextures; i++) {
+            entries.push({
+                binding: maxBatchTextures + i,
+                resource: resolvedBindings[i].sampler,
             });
         }
+        return device.createBindGroup({
+            layout: this._textureBindGroupLayout,
+            entries,
+        });
     }
-    _getPipeline(key) {
-        const pipelineKey = `${key.topology}:${key.usesStripIndex ? 1 : 0}:${key.blendMode}:${key.format}`;
+    _getPipeline(blendMode, format) {
+        const pipelineKey = `${blendMode}:${format}`;
         const existingPipeline = this._pipelines.get(pipelineKey);
         if (existingPipeline) {
             return existingPipeline;
         }
-        const pipeline = this._device.createRenderPipeline({
+        if (!this._device || !this._shaderModule || !this._pipelineLayout || !this._backend) {
+            throw new Error('Renderer has to be connected first!');
+        }
+        const pipeline = this._device.createRenderPipeline(this._buildPipelineDescriptor(blendMode, format));
+        this._pipelines.set(pipelineKey, pipeline);
+        return pipeline;
+    }
+    _buildPipelineDescriptor(blendMode, format) {
+        if (!this._shaderModule || !this._pipelineLayout) {
+            throw new Error('Renderer has to be connected first!');
+        }
+        return {
             layout: this._pipelineLayout,
             vertex: {
                 module: this._shaderModule,
                 entryPoint: 'vertexMain',
                 buffers: [{
-                        arrayStride: vertexStrideBytes$1,
+                        arrayStride: instanceStrideBytes$1,
+                        stepMode: 'instance',
                         attributes: [{
                                 shaderLocation: 0,
                                 offset: 0,
@@ -8411,7 +9416,23 @@ class WebGpuPrimitiveRenderer extends AbstractWebGpuRenderer {
                             }, {
                                 shaderLocation: 1,
                                 offset: 16,
+                                format: 'float32x3',
+                            }, {
+                                shaderLocation: 2,
+                                offset: 28,
+                                format: 'float32x3',
+                            }, {
+                                shaderLocation: 3,
+                                offset: 40,
+                                format: 'unorm16x4',
+                            }, {
+                                shaderLocation: 4,
+                                offset: 48,
                                 format: 'unorm8x4',
+                            }, {
+                                shaderLocation: 5,
+                                offset: 52,
+                                format: 'uint32',
                             }],
                     }],
             },
@@ -8419,491 +9440,233 @@ class WebGpuPrimitiveRenderer extends AbstractWebGpuRenderer {
                 module: this._shaderModule,
                 entryPoint: 'fragmentMain',
                 targets: [{
-                        format: key.format,
-                        blend: getWebGpuBlendState(key.blendMode),
+                        format,
+                        blend: getWebGpuBlendState(blendMode),
                         writeMask: GPUColorWrite.ALL,
                     }],
             },
             primitive: {
-                topology: key.topology,
-                stripIndexFormat: key.usesStripIndex ? 'uint16' : undefined,
+                topology: 'triangle-list',
             },
-        });
-        this._pipelines.set(pipelineKey, pipeline);
-        return pipeline;
-    }
-    _getTopology(drawMode) {
-        switch (drawMode) {
-            case RenderingPrimitives.Points:
-                return 'point-list';
-            case RenderingPrimitives.Lines:
-                return 'line-list';
-            case RenderingPrimitives.LineLoop:
-            case RenderingPrimitives.LineStrip:
-                return 'line-strip';
-            case RenderingPrimitives.Triangles:
-            case RenderingPrimitives.TriangleFan:
-                return 'triangle-list';
-            case RenderingPrimitives.TriangleStrip:
-                return 'triangle-strip';
-            default:
-                throw new Error(`WebGPU primitive renderer does not support draw mode "${drawMode}" yet.`);
-        }
-    }
-    _resolveDrawCall(shape) {
-        const vertices = shape.geometry.vertices;
-        const vertexCount = vertices.length / 2;
-        if (vertexCount === 0) {
-            return null;
-        }
-        switch (shape.drawMode) {
-            case RenderingPrimitives.LineLoop:
-                return this._resolveLineLoopDrawCall(shape.geometry.indices, vertexCount);
-            case RenderingPrimitives.TriangleFan:
-                return this._resolveTriangleFanDrawCall(shape.geometry.indices, vertexCount);
-            default: {
-                const indices = shape.geometry.indices;
-                const topology = this._getTopology(shape.drawMode);
-                const indexCount = indices.length;
-                const usesStripIndex = indexCount > 0 && (shape.drawMode === RenderingPrimitives.LineStrip
-                    || shape.drawMode === RenderingPrimitives.TriangleStrip);
-                if (indexCount > 0) {
-                    return {
-                        topology,
-                        usesStripIndex,
-                        vertexCount,
-                        indices,
-                        indexCount,
-                    };
-                }
-                return {
-                    topology,
-                    usesStripIndex,
-                    vertexCount,
-                    indices: null,
-                    indexCount: 0,
-                };
-            }
-        }
-    }
-    _resolveLineLoopDrawCall(indices, vertexCount) {
-        const sourceIndices = indices.length > 0 ? indices : this._getSequentialIndices(vertexCount);
-        const sourceCount = sourceIndices.length;
-        if (sourceCount < 2) {
-            return null;
-        }
-        const loopIndexCount = sourceCount + 1;
-        const generatedIndices = this._ensureGeneratedIndexCapacity(loopIndexCount);
-        generatedIndices.set(sourceIndices.subarray(0, sourceCount), 0);
-        generatedIndices[sourceCount] = sourceIndices[0];
-        return {
-            topology: 'line-strip',
-            usesStripIndex: true,
-            vertexCount,
-            indices: generatedIndices,
-            indexCount: loopIndexCount,
-        };
-    }
-    _resolveTriangleFanDrawCall(indices, vertexCount) {
-        const sourceIndices = indices.length > 0 ? indices : this._getSequentialIndices(vertexCount);
-        const sourceCount = sourceIndices.length;
-        if (sourceCount < 3) {
-            return null;
-        }
-        const indexCount = (sourceCount - 2) * 3;
-        const generatedIndices = this._ensureGeneratedIndexCapacity(indexCount);
-        let targetIndex = 0;
-        for (let index = 1; index < sourceCount - 1; index++) {
-            generatedIndices[targetIndex++] = sourceIndices[0];
-            generatedIndices[targetIndex++] = sourceIndices[index];
-            generatedIndices[targetIndex++] = sourceIndices[index + 1];
-        }
-        return {
-            topology: 'triangle-list',
-            usesStripIndex: false,
-            vertexCount,
-            indices: generatedIndices,
-            indexCount,
         };
     }
-    _getSequentialIndices(vertexCount) {
-        if (vertexCount > this._sequentialIndexData.length) {
-            let nextLength = Math.max(1, this._sequentialIndexData.length);
-            while (nextLength < vertexCount) {
-                nextLength *= 2;
-            }
-            this._sequentialIndexData = new Uint16Array(nextLength);
-        }
-        for (let index = 0; index < vertexCount; index++) {
-            this._sequentialIndexData[index] = index;
-        }
-        return this._sequentialIndexData.subarray(0, vertexCount);
-    }
-    _ensureGeneratedIndexCapacity(indexCount) {
-        if (indexCount > this._generatedIndexData.length) {
-            let nextLength = Math.max(1, this._generatedIndexData.length);
-            while (nextLength < indexCount) {
-                nextLength *= 2;
-            }
-            this._generatedIndexData = new Uint16Array(nextLength);
-        }
-        return this._generatedIndexData.subarray(0, indexCount);
-    }
-    _destroyBuffers() {
-        this._vertexBuffer?.destroy();
-        this._indexBuffer?.destroy();
-        this._vertexBuffer = null;
-        this._indexBuffer = null;
-        this._vertexBufferCapacity = 0;
-        this._indexBufferCapacity = 0;
-    }
-}
-
-/// <reference types="@webgpu/types" />
-const spriteShaderSource = `
-struct ProjectionUniforms {
-    matrix: mat4x4<f32>,
-};
-
-@group(0) @binding(0)
-var<uniform> projection: ProjectionUniforms;
-
-@group(1) @binding(0)
-var spriteTexture0: texture_2d<f32>;
-@group(1) @binding(1)
-var spriteTexture1: texture_2d<f32>;
-@group(1) @binding(2)
-var spriteTexture2: texture_2d<f32>;
-@group(1) @binding(3)
-var spriteTexture3: texture_2d<f32>;
-@group(1) @binding(4)
-var spriteTexture4: texture_2d<f32>;
-@group(1) @binding(5)
-var spriteTexture5: texture_2d<f32>;
-@group(1) @binding(6)
-var spriteTexture6: texture_2d<f32>;
-@group(1) @binding(7)
-var spriteTexture7: texture_2d<f32>;
-
-@group(1) @binding(8)
-var spriteSampler0: sampler;
-@group(1) @binding(9)
-var spriteSampler1: sampler;
-@group(1) @binding(10)
-var spriteSampler2: sampler;
-@group(1) @binding(11)
-var spriteSampler3: sampler;
-@group(1) @binding(12)
-var spriteSampler4: sampler;
-@group(1) @binding(13)
-var spriteSampler5: sampler;
-@group(1) @binding(14)
-var spriteSampler6: sampler;
-@group(1) @binding(15)
-var spriteSampler7: sampler;
-
-// Per-instance vertex layout (56 bytes per sprite). The four corners
-// of the quad are derived from @builtin(vertex_index) 0..3 inside the
-// vertex shader — there is no per-vertex stream.
-struct VertexInput {
-    @location(0) localBounds: vec4<f32>,        // left, top, right, bottom (local space)
-    @location(1) transformAB: vec3<f32>,        // first  row of 2D affine
-    @location(2) transformCD: vec3<f32>,        // second row of 2D affine
-    @location(3) uvBounds: vec4<f32>,           // uMin, vMin, uMax, vMax (CPU pre-swaps for flipY)
-    @location(4) color: vec4<f32>,              // RGBA tint
-    @location(5) packedSlotFlags: u32,          // bits 0..7 = slot, bit 8 = premultiply
-};
-
-struct VertexOutput {
-    @builtin(position) position: vec4<f32>,
-    @location(0) texcoord: vec2<f32>,
-    @location(1) color: vec4<f32>,
-    @location(2) @interpolate(flat) premultiplySample: u32,
-    @location(3) @interpolate(flat) textureSlot: u32,
-};
-
-@vertex
-fn vertexMain(input: VertexInput, @builtin(vertex_index) vid: u32) -> VertexOutput {
-    var output: VertexOutput;
-
-    // vid 0..3 → corners in TL, TR, BR, BL order (matches the static index
-    // buffer [0,1,2,0,2,3] used for indexed triangle-list drawing).
-    let cornerX = ((vid + 1u) >> 1u) & 1u;
-    let cornerY = vid >> 1u;
-
-    let localX = select(input.localBounds.x, input.localBounds.z, cornerX == 1u);
-    let localY = select(input.localBounds.y, input.localBounds.w, cornerY == 1u);
-
-    let worldX = input.transformAB.x * localX + input.transformAB.y * localY + input.transformAB.z;
-    let worldY = input.transformCD.x * localX + input.transformCD.y * localY + input.transformCD.z;
-
-    output.position = projection.matrix * vec4<f32>(worldX, worldY, 0.0, 1.0);
-
-    let u = select(input.uvBounds.x, input.uvBounds.z, cornerX == 1u);
-    let v = select(input.uvBounds.y, input.uvBounds.w, cornerY == 1u);
-    output.texcoord = vec2<f32>(u, v);
-
-    output.color = vec4(input.color.rgb * input.color.a, input.color.a);
-    output.textureSlot = input.packedSlotFlags & 0xFFu;
-    output.premultiplySample = (input.packedSlotFlags >> 8u) & 1u;
-
-    return output;
 }
 
-fn sampleTexture(slot: u32, uv: vec2<f32>, ddx: vec2<f32>, ddy: vec2<f32>) -> vec4<f32> {
-    switch slot {
-        case 0u: {
-            return textureSampleGrad(spriteTexture0, spriteSampler0, uv, ddx, ddy);
-        }
-        case 1u: {
-            return textureSampleGrad(spriteTexture1, spriteSampler1, uv, ddx, ddy);
-        }
-        case 2u: {
-            return textureSampleGrad(spriteTexture2, spriteSampler2, uv, ddx, ddy);
-        }
-        case 3u: {
-            return textureSampleGrad(spriteTexture3, spriteSampler3, uv, ddx, ddy);
-        }
-        case 4u: {
-            return textureSampleGrad(spriteTexture4, spriteSampler4, uv, ddx, ddy);
-        }
-        case 5u: {
-            return textureSampleGrad(spriteTexture5, spriteSampler5, uv, ddx, ddy);
-        }
-        case 6u: {
-            return textureSampleGrad(spriteTexture6, spriteSampler6, uv, ddx, ddy);
-        }
-        default: {
-            return textureSampleGrad(spriteTexture7, spriteSampler7, uv, ddx, ddy);
-        }
-    }
+/// <reference types="@webgpu/types" />
+const meshShaderSource = `
+struct VertexInput {
+    @location(0) position: vec2<f32>,
+    @location(1) texcoord: vec2<f32>,
+    @location(2) color: vec4<f32>,
+};
+
+struct VertexOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) texcoord: vec2<f32>,
+    @location(1) color: vec4<f32>,
+    @location(2) @interpolate(flat) premultiplySample: u32,
+};
+
+struct TintUniform {
+    tint: vec4<f32>,
+    flags: vec4<f32>,
+};
+
+@group(0) @binding(0) var<uniform> uniforms: TintUniform;
+
+@group(1) @binding(0) var meshTexture: texture_2d<f32>;
+@group(1) @binding(1) var meshSampler: sampler;
+
+@vertex
+fn vertexMain(input: VertexInput) -> VertexOutput {
+    var output: VertexOutput;
+    output.position = vec4<f32>(input.position, 0.0, 1.0);
+    output.texcoord = input.texcoord;
+    output.color = input.color;
+    output.premultiplySample = u32(uniforms.flags.x);
+    return output;
 }
 
 @fragment
 fn fragmentMain(input: VertexOutput) -> @location(0) vec4<f32> {
-    // Compute screen-space derivatives in uniform control flow before the
-    // per-slot switch. WGSL requires textureSample (implicit LOD) to run in
-    // uniform control flow, which multi-texture batching breaks because the
-    // slot varies per fragment. textureSampleGrad takes explicit derivatives
-    // and is valid regardless of control-flow uniformity, while preserving
-    // mipmap-correct LOD when sprites use mipmapped textures.
-    let ddx = dpdx(input.texcoord);
-    let ddy = dpdy(input.texcoord);
-    let sample = sampleTexture(input.textureSlot, input.texcoord, ddx, ddy);
+    let sample = textureSample(meshTexture, meshSampler, input.texcoord);
     let resolvedSample = select(sample, vec4(sample.rgb * sample.a, sample.a), input.premultiplySample == 1u);
-
-    return resolvedSample * input.color;
+    let modulated = resolvedSample * input.color * uniforms.tint;
+    return vec4<f32>(modulated.rgb * modulated.a, modulated.a);
 }
 `;
-const instanceStrideBytes$1 = 56;
-const wordsPerInstance = instanceStrideBytes$1 / Uint32Array.BYTES_PER_ELEMENT;
-const projectionByteLength = 64;
-const initialBatchCapacity = 32;
-const maxBatchTextures = 8;
-const indicesPerSprite = 6;
-// Static index buffer: two triangles forming a quad, vertex IDs 0..3 in
-// TL/TR/BR/BL order so the WGSL `cornerX/cornerY` derivation matches.
-const quadIndices = new Uint16Array([0, 1, 2, 0, 2, 3]);
-class WebGpuSpriteRenderer extends AbstractWebGpuRenderer {
-    _projectionData = new Float32Array(projectionByteLength / Float32Array.BYTES_PER_ELEMENT);
+// Per-vertex layout (20 bytes): pos f32x2 + uv f32x2 + color u8x4-norm.
+// CPU bakes the (view * globalTransform) into position so the vertex
+// shader stays branchless and uniform-free except for the per-mesh tint.
+const vertexStrideBytes$1 = 20;
+const wordsPerVertex = vertexStrideBytes$1 / 4;
+const tintByteLength = 32; // vec4 tint + vec4 flags (only flags.x used)
+class WebGpuMeshRenderer extends AbstractWebGpuRenderer {
+    _combinedTransform = new Matrix();
+    _drawCalls = [];
+    _pipelines = new Map();
+    _textureBindGroups = new Map();
     _device = null;
     _shaderModule = null;
     _uniformBindGroupLayout = null;
     _textureBindGroupLayout = null;
     _pipelineLayout = null;
+    _vertexBuffer = null;
+    _indexBuffer = null;
     _uniformBuffer = null;
     _uniformBindGroup = null;
-    _indexBuffer = null;
-    _instanceBuffer = null;
-    _instanceCapacity = 0;
-    _instanceData = new ArrayBuffer(0);
-    _instanceFloat32 = new Float32Array(this._instanceData);
-    _instanceUint32 = new Uint32Array(this._instanceData);
-    _pipelines = new Map();
-    _activeTextures = new Array(maxBatchTextures).fill(null);
-    _textureSlots = new Map();
-    _slotCount = 0;
-    _instanceCount = 0;
-    _currentBlendMode = null;
-    onConnect(backend) {
-        if (this._device) {
-            return;
-        }
-        this._device = backend.device;
-        this._shaderModule = this._device.createShaderModule({ code: spriteShaderSource });
-        this._uniformBindGroupLayout = this._device.createBindGroupLayout({
-            entries: [{
-                    binding: 0,
-                    visibility: GPUShaderStage.VERTEX,
-                    buffer: {
-                        type: 'uniform',
-                    },
-                }],
-        });
-        this._textureBindGroupLayout = this._device.createBindGroupLayout({
-            entries: [
-                ...Array.from({ length: maxBatchTextures }, (_, index) => ({
-                    binding: index,
-                    visibility: GPUShaderStage.FRAGMENT,
-                    texture: {
-                        sampleType: 'float',
-                    },
-                })),
-                ...Array.from({ length: maxBatchTextures }, (_, index) => ({
-                    binding: maxBatchTextures + index,
-                    visibility: GPUShaderStage.FRAGMENT,
-                    sampler: {
-                        type: 'filtering',
-                    },
-                })),
-            ],
-        });
-        this._pipelineLayout = this._device.createPipelineLayout({
-            bindGroupLayouts: [this._uniformBindGroupLayout, this._textureBindGroupLayout],
-        });
-        this._uniformBuffer = this._device.createBuffer({
-            size: projectionByteLength,
-            usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
-        });
-        this._uniformBindGroup = this._device.createBindGroup({
-            layout: this._uniformBindGroupLayout,
-            entries: [{
-                    binding: 0,
-                    resource: {
-                        buffer: this._uniformBuffer,
-                    },
-                }],
-        });
-        // Static index buffer for the quad. Allocated once at connect; its
-        // contents never change.
-        this._indexBuffer = this._device.createBuffer({
-            size: quadIndices.byteLength,
-            usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
-        });
-        this._device.queue.writeBuffer(this._indexBuffer, 0, quadIndices.buffer, quadIndices.byteOffset, quadIndices.byteLength);
-    }
-    onDisconnect() {
-        this._instanceBuffer?.destroy();
-        this._indexBuffer?.destroy();
-        this._uniformBuffer?.destroy();
-        this._pipelines.clear();
-        this._instanceBuffer = null;
-        this._indexBuffer = null;
-        this._uniformBindGroup = null;
-        this._uniformBuffer = null;
-        this._pipelineLayout = null;
-        this._textureBindGroupLayout = null;
-        this._uniformBindGroupLayout = null;
-        this._shaderModule = null;
-        this._device = null;
-        this._backend = null;
-        this._instanceCapacity = 0;
-        this._instanceData = new ArrayBuffer(0);
-        this._instanceFloat32 = new Float32Array(this._instanceData);
-        this._instanceUint32 = new Uint32Array(this._instanceData);
-        this._instanceCount = 0;
-        this._currentBlendMode = null;
-        this._resetSlots();
-    }
-    render(sprite) {
+    _uniformAlignment = 256;
+    _vertexBufferCapacity = 0;
+    _indexBufferCapacity = 0;
+    _uniformBufferCapacity = 0;
+    _vertexData = new ArrayBuffer(0);
+    _float32View = new Float32Array(this._vertexData);
+    _uint32View = new Uint32Array(this._vertexData);
+    _packedIndexData = new Uint16Array(0);
+    _drawCallCount = 0;
+    render(mesh) {
         const backend = this._backend;
-        const texture = sprite.texture;
-        // Same early-out conditions as the deferred renderer used to apply.
-        if (backend === null
-            || (!(texture instanceof Texture) && !(texture instanceof RenderTexture))
-            || texture.width === 0
-            || texture.height === 0
-            || (texture instanceof Texture && texture.source === null)) {
-            return;
+        if (backend === null) {
+            throw new Error('WebGpuMeshRenderer is not connected to a backend.');
         }
-        const blendMode = sprite.blendMode;
-        // Flush triggers: blend-mode change, instance buffer full at current
-        // capacity (we'll grow on next render), or texture-slot exhaustion.
-        const blendModeChanged = this._currentBlendMode !== null && blendMode !== this._currentBlendMode;
-        const slotExhausted = !this._textureSlots.has(texture) && this._slotCount >= maxBatchTextures;
-        if (blendModeChanged || slotExhausted) {
-            this.flush();
+        const vertexCount = mesh.vertexCount;
+        if (vertexCount === 0) {
+            return;
         }
-        this._currentBlendMode = blendMode;
+        const blendMode = mesh.blendMode;
         backend.setBlendMode(blendMode);
-        // Resolve / assign texture slot.
-        let slot = this._textureSlots.get(texture);
-        if (slot === undefined) {
-            slot = this._slotCount++;
-            this._textureSlots.set(texture, slot);
-            this._activeTextures[slot] = texture;
-        }
-        const premultiplySample = backend.shouldPremultiplyTextureSample(texture) ? 1 : 0;
-        const packedSlotFlags = slot | (premultiplySample << 8);
-        // Ensure capacity covers the new entry BEFORE packing — otherwise the
-        // typed-array writes in _packInstance silently fall off the end of a
-        // too-small buffer.
-        this._ensureInstanceCapacity(this._instanceCount + 1);
-        this._packInstance(sprite, texture, packedSlotFlags);
-        this._instanceCount++;
+        const meshTexture = mesh.texture ?? Texture.white;
+        // Texture.white is a 1x1 canvas-backed Texture; backend.shouldPremultiplyTextureSample
+        // expects RenderTexture-or-Texture. Both branches are valid here.
+        const premultiplySample = backend.shouldPremultiplyTextureSample(meshTexture);
+        const indexCount = mesh.indexCount;
+        // Plan offsets within the shared per-frame buffers; actual data
+        // packing happens in flush() after all drawcalls are known so a
+        // single writeBuffer per resource covers the whole frame.
+        const drawCall = {
+            mesh,
+            blendMode,
+            texture: meshTexture,
+            premultiplySample,
+            vertexByteOffset: 0,
+            vertexCount,
+            indexByteOffset: 0,
+            indexCount,
+        };
+        // Use mutable record (interface readonly is for type safety against
+        // callers; the renderer fills these slots in flush()).
+        this._drawCalls[this._drawCallCount++] = drawCall;
     }
     flush() {
         const backend = this._backend;
         const device = this._device;
-        const uniformBuffer = this._uniformBuffer;
-        const uniformBindGroup = this._uniformBindGroup;
-        if (!backend || !device || !uniformBuffer || !uniformBindGroup) {
+        if (!backend || !device) {
             return;
         }
-        if (this._instanceCount === 0 && !backend.clearRequested) {
+        if (this._drawCallCount === 0 && !backend.clearRequested) {
             return;
         }
-        const viewMatrix = backend.view.getTransform();
-        this._projectionData.set([
-            viewMatrix.a, viewMatrix.c, 0, 0,
-            viewMatrix.b, viewMatrix.d, 0, 0,
-            0, 0, 1, 0,
-            viewMatrix.x, viewMatrix.y, 0, viewMatrix.z,
-        ]);
-        device.queue.writeBuffer(uniformBuffer, 0, this._projectionData.buffer, this._projectionData.byteOffset, this._projectionData.byteLength);
+        const scissor = backend.getScissorRect();
+        const maskClipsAll = scissor !== null && (scissor.width <= 0 || scissor.height <= 0);
+        if (this._drawCallCount === 0 || maskClipsAll) {
+            // Honor a pending clear with an empty pass so createColorAttachment
+            // consumes the clear-state once.
+            if (backend.clearRequested) {
+                const encoder = device.createCommandEncoder();
+                const pass = encoder.beginRenderPass({
+                    colorAttachments: [backend.createColorAttachment()],
+                });
+                backend.stats.renderPasses++;
+                pass.end();
+                backend.submit(encoder.finish());
+            }
+            this._drawCallCount = 0;
+            return;
+        }
+        // Phase 1: compute layout offsets for the whole frame.
+        let totalVertices = 0;
+        let totalIndices = 0;
+        for (let i = 0; i < this._drawCallCount; i++) {
+            const dc = this._drawCalls[i];
+            dc.vertexByteOffset = totalVertices * vertexStrideBytes$1;
+            dc.indexByteOffset = totalIndices * Uint16Array.BYTES_PER_ELEMENT;
+            totalVertices += dc.vertexCount;
+            totalIndices += dc.indexCount;
+        }
+        // Phase 2: ensure capacities for the totals.
+        this._ensureVertexCapacity(totalVertices);
+        this._ensureIndexCapacity(totalIndices);
+        this._ensureUniformCapacity(this._drawCallCount);
+        // Phase 3: pack vertex + index + uniform CPU-side data.
+        const uniformBytes = this._drawCallCount * this._uniformAlignment;
+        const uniformData = new ArrayBuffer(uniformBytes);
+        const uniformF32 = new Float32Array(uniformData);
+        for (let i = 0; i < this._drawCallCount; i++) {
+            const dc = this._drawCalls[i];
+            this._writeMeshVertices(backend, dc.mesh, dc.vertexByteOffset / vertexStrideBytes$1);
+            if (dc.mesh.indices !== null) {
+                this._packedIndexData.set(dc.mesh.indices, dc.indexByteOffset / Uint16Array.BYTES_PER_ELEMENT);
+            }
+            else {
+                const start = dc.indexByteOffset / Uint16Array.BYTES_PER_ELEMENT;
+                for (let j = 0; j < dc.indexCount; j++) {
+                    this._packedIndexData[start + j] = j;
+                }
+            }
+            const uniformOffsetWords = (i * this._uniformAlignment) / Float32Array.BYTES_PER_ELEMENT;
+            const tint = dc.mesh.tint;
+            uniformF32[uniformOffsetWords + 0] = tint.red;
+            uniformF32[uniformOffsetWords + 1] = tint.green;
+            uniformF32[uniformOffsetWords + 2] = tint.blue;
+            uniformF32[uniformOffsetWords + 3] = tint.alpha;
+            uniformF32[uniformOffsetWords + 4] = dc.premultiplySample ? 1 : 0;
+            uniformF32[uniformOffsetWords + 5] = 0;
+            uniformF32[uniformOffsetWords + 6] = 0;
+            uniformF32[uniformOffsetWords + 7] = 0;
+        }
+        // Phase 4: single writeBuffer per resource for the whole frame.
+        device.queue.writeBuffer(this._vertexBuffer, 0, this._vertexData, 0, totalVertices * vertexStrideBytes$1);
+        device.queue.writeBuffer(this._indexBuffer, 0, this._packedIndexData.buffer, this._packedIndexData.byteOffset, totalIndices * Uint16Array.BYTES_PER_ELEMENT);
+        device.queue.writeBuffer(this._uniformBuffer, 0, uniformData, 0, uniformBytes);
+        // Phase 5: single render pass with one drawIndexed per mesh.
         const encoder = device.createCommandEncoder();
         const pass = encoder.beginRenderPass({
             colorAttachments: [backend.createColorAttachment()],
         });
         backend.stats.renderPasses++;
-        const scissor = backend.getScissorRect();
-        const maskClipsAll = scissor !== null && (scissor.width <= 0 || scissor.height <= 0);
-        if (scissor !== null && !maskClipsAll) {
+        if (scissor !== null) {
             pass.setScissorRect(scissor.x, scissor.y, scissor.width, scissor.height);
         }
-        if (this._instanceCount > 0 && !maskClipsAll && this._instanceBuffer !== null && this._indexBuffer !== null && this._currentBlendMode !== null) {
-            device.queue.writeBuffer(this._instanceBuffer, 0, this._instanceData, 0, this._instanceCount * instanceStrideBytes$1);
-            const pipeline = this._getPipeline(this._currentBlendMode, backend.renderTargetFormat);
-            const textureBindGroup = this._createTextureBindGroup(device, backend);
-            pass.setPipeline(pipeline);
-            pass.setBindGroup(0, uniformBindGroup);
-            pass.setBindGroup(1, textureBindGroup);
-            pass.setVertexBuffer(0, this._instanceBuffer);
-            pass.setIndexBuffer(this._indexBuffer, 'uint16');
-            pass.drawIndexed(indicesPerSprite, this._instanceCount, 0, 0, 0);
+        let lastBlendMode = null;
+        let lastFormat = null;
+        let lastTexture = null;
+        const renderTargetFormat = backend.renderTargetFormat;
+        for (let i = 0; i < this._drawCallCount; i++) {
+            const dc = this._drawCalls[i];
+            if (dc.blendMode !== lastBlendMode || renderTargetFormat !== lastFormat) {
+                lastBlendMode = dc.blendMode;
+                lastFormat = renderTargetFormat;
+                pass.setPipeline(this._getPipeline({ blendMode: dc.blendMode, format: renderTargetFormat }));
+            }
+            pass.setBindGroup(0, this._uniformBindGroup, [i * this._uniformAlignment]);
+            if (dc.texture !== lastTexture) {
+                lastTexture = dc.texture;
+                pass.setBindGroup(1, this._getTextureBindGroup(backend, dc.texture));
+            }
+            pass.setVertexBuffer(0, this._vertexBuffer, dc.vertexByteOffset);
+            pass.setIndexBuffer(this._indexBuffer, 'uint16', dc.indexByteOffset);
+            pass.drawIndexed(dc.indexCount);
             backend.stats.batches++;
             backend.stats.drawCalls++;
         }
-        pass.end();
-        backend.submit(encoder.finish());
-        this._instanceCount = 0;
-        this._resetSlots();
-        this._currentBlendMode = null;
-    }
-    destroy() {
-        this.disconnect();
-    }
-    /**
-     * Pre-create render pipelines for every blend-mode × target-format
-     * combination this renderer can produce, asynchronously and in
-     * parallel. Called from the render manager's init path so by the time
-     * the first frame draws, all pipelines exist in cache.
-     *
-     * Without prewarm, the first draw of any new (blendMode, format)
-     * combination would fall back to the synchronous _getPipeline() path,
-     * which blocks while the WebGPU implementation compiles WGSL and
-     * sets up the pipeline state object — typically tens of milliseconds.
-     */
+        pass.end();
+        backend.submit(encoder.finish());
+        this._drawCallCount = 0;
+    }
+    destroy() {
+        this.disconnect();
+        this._combinedTransform.destroy();
+    }
     async prewarmPipelines(formats) {
         const device = this._device;
         if (!device || !this._shaderModule || !this._pipelineLayout) {
@@ -8922,173 +9685,121 @@ class WebGpuSpriteRenderer extends AbstractWebGpuRenderer {
         const promises = [];
         for (const blendMode of blendModes) {
             for (const format of formats) {
-                const pipelineKey = `${blendMode}:${format}`;
-                if (this._pipelines.has(pipelineKey)) {
+                const key = `${blendMode}:${format}`;
+                if (this._pipelines.has(key))
                     continue;
-                }
-                const promise = device
-                    .createRenderPipelineAsync(this._buildPipelineDescriptor(blendMode, format))
+                promises.push(device.createRenderPipelineAsync(this._buildPipelineDescriptor(blendMode, format))
                     .then((pipeline) => {
-                    this._pipelines.set(pipelineKey, pipeline);
-                });
-                promises.push(promise);
+                    this._pipelines.set(key, pipeline);
+                }));
             }
         }
         await Promise.all(promises);
     }
-    _packInstance(sprite, texture, packedSlotFlags) {
-        const offset = this._instanceCount * wordsPerInstance;
-        const f32 = this._instanceFloat32;
-        const u32 = this._instanceUint32;
-        const bounds = sprite.getLocalBounds();
-        f32[offset + 0] = bounds.left;
-        f32[offset + 1] = bounds.top;
-        f32[offset + 2] = bounds.right;
-        f32[offset + 3] = bounds.bottom;
-        const transform = sprite.getGlobalTransform();
-        f32[offset + 4] = transform.a;
-        f32[offset + 5] = transform.b;
-        f32[offset + 6] = transform.x;
-        f32[offset + 7] = transform.c;
-        f32[offset + 8] = transform.d;
-        f32[offset + 9] = transform.y;
-        // uvBounds: u16x4 normalised, packed into two u32 slots. The CPU
-        // applies the flipY swap so the shader stays orientation-agnostic.
-        const frame = sprite.textureFrame;
-        const texWidth = texture.width;
-        const texHeight = texture.height;
-        const uMin = ((frame.left / texWidth) * 0xFFFF) & 0xFFFF;
-        const uMax = ((frame.right / texWidth) * 0xFFFF) & 0xFFFF;
-        const vMinRaw = ((frame.top / texHeight) * 0xFFFF) & 0xFFFF;
-        const vMaxRaw = ((frame.bottom / texHeight) * 0xFFFF) & 0xFFFF;
-        const flipY = texture instanceof Texture && texture.flipY;
-        const vMin = flipY ? vMaxRaw : vMinRaw;
-        const vMax = flipY ? vMinRaw : vMaxRaw;
-        u32[offset + 10] = uMin | (vMin << 16);
-        u32[offset + 11] = uMax | (vMax << 16);
-        u32[offset + 12] = sprite.tint.toRgba();
-        u32[offset + 13] = packedSlotFlags;
-    }
-    _ensureInstanceCapacity(instanceCount) {
-        if (!this._device || instanceCount <= this._instanceCapacity) {
+    onConnect(backend) {
+        if (this._device) {
             return;
         }
-        let nextCapacity = Math.max(this._instanceCapacity, initialBatchCapacity);
-        while (nextCapacity < instanceCount) {
-            nextCapacity *= 2;
-        }
-        const oldData = this._instanceData;
-        // Preserve any already-packed instances. _instanceCount is bounded by
-        // the previous capacity, but oldData may be the initial 0-byte buffer
-        // — clamp to its actual byteLength to avoid out-of-range typed-array
-        // construction.
-        const carryBytes = Math.min(this._instanceCount * instanceStrideBytes$1, oldData.byteLength);
-        const instanceData = new ArrayBuffer(nextCapacity * instanceStrideBytes$1);
-        if (carryBytes > 0) {
-            new Uint8Array(instanceData).set(new Uint8Array(oldData, 0, carryBytes));
-        }
-        const instanceBuffer = this._device.createBuffer({
-            size: instanceData.byteLength,
-            usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+        this._device = backend.device;
+        this._shaderModule = this._device.createShaderModule({ code: meshShaderSource });
+        this._uniformBindGroupLayout = this._device.createBindGroupLayout({
+            entries: [{
+                    binding: 0,
+                    visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+                    buffer: { type: 'uniform', hasDynamicOffset: true },
+                }],
+        });
+        this._textureBindGroupLayout = this._device.createBindGroupLayout({
+            entries: [
+                {
+                    binding: 0,
+                    visibility: GPUShaderStage.FRAGMENT,
+                    texture: { sampleType: 'float' },
+                },
+                {
+                    binding: 1,
+                    visibility: GPUShaderStage.FRAGMENT,
+                    sampler: { type: 'filtering' },
+                },
+            ],
+        });
+        this._pipelineLayout = this._device.createPipelineLayout({
+            bindGroupLayouts: [this._uniformBindGroupLayout, this._textureBindGroupLayout],
         });
-        this._instanceBuffer?.destroy();
-        this._instanceCapacity = nextCapacity;
-        this._instanceData = instanceData;
-        this._instanceFloat32 = new Float32Array(instanceData);
-        this._instanceUint32 = new Uint32Array(instanceData);
-        this._instanceBuffer = instanceBuffer;
     }
-    _resetSlots() {
-        if (this._slotCount > 0) {
-            for (let i = 0; i < this._slotCount; i++) {
-                this._activeTextures[i] = null;
-            }
-            this._textureSlots.clear();
-            this._slotCount = 0;
-        }
+    onDisconnect() {
+        this.flush();
+        this._vertexBuffer?.destroy();
+        this._indexBuffer?.destroy();
+        this._uniformBuffer?.destroy();
+        this._pipelines.clear();
+        this._textureBindGroups.clear();
+        this._vertexBuffer = null;
+        this._indexBuffer = null;
+        this._uniformBuffer = null;
+        this._uniformBindGroup = null;
+        this._pipelineLayout = null;
+        this._textureBindGroupLayout = null;
+        this._uniformBindGroupLayout = null;
+        this._shaderModule = null;
+        this._device = null;
+        this._backend = null;
+        this._drawCallCount = 0;
+        this._vertexBufferCapacity = 0;
+        this._indexBufferCapacity = 0;
+        this._uniformBufferCapacity = 0;
     }
-    _createTextureBindGroup(device, backend) {
-        // Slots beyond the active count get the slot-0 texture as a filler so
-        // the bind-group layout always sees N valid texture views and samplers.
-        // The fragment shader's switch only ever dispatches to the active slot
-        // count, so unsampled fillers cost nothing visually.
-        const fallbackTexture = this._activeTextures[0] ?? Texture.empty;
-        const fallbackBinding = backend.getTextureBinding(fallbackTexture);
-        const resolvedBindings = new Array(maxBatchTextures);
-        for (let i = 0; i < maxBatchTextures; i++) {
-            const texture = this._activeTextures[i] ?? fallbackTexture;
-            resolvedBindings[i] = texture === fallbackTexture
-                ? fallbackBinding
-                : backend.getTextureBinding(texture);
-        }
-        const entries = [];
-        for (let i = 0; i < maxBatchTextures; i++) {
-            entries.push({
-                binding: i,
-                resource: resolvedBindings[i].view,
-            });
-        }
-        for (let i = 0; i < maxBatchTextures; i++) {
-            entries.push({
-                binding: maxBatchTextures + i,
-                resource: resolvedBindings[i].sampler,
-            });
+    _writeMeshVertices(backend, mesh, vertexStart) {
+        // Bake (view * globalTransform) into vertex positions on the CPU,
+        // matching the primitive renderer's no-uniforms approach.
+        const matrix = this._combinedTransform
+            .copy(mesh.getGlobalTransform())
+            .combine(backend.view.getTransform());
+        const a = matrix.a;
+        const b = matrix.b;
+        const c = matrix.c;
+        const d = matrix.d;
+        const tx = matrix.x;
+        const ty = matrix.y;
+        const vertices = mesh.vertices;
+        const uvs = mesh.uvs;
+        const colors = mesh.colors;
+        const vertexCount = mesh.vertexCount;
+        for (let i = 0; i < vertexCount; i++) {
+            const sourceIndex = i * 2;
+            const targetIndex = (vertexStart + i) * wordsPerVertex;
+            const px = vertices[sourceIndex];
+            const py = vertices[sourceIndex + 1];
+            this._float32View[targetIndex + 0] = a * px + b * py + tx;
+            this._float32View[targetIndex + 1] = c * px + d * py + ty;
+            this._float32View[targetIndex + 2] = uvs !== null ? uvs[sourceIndex] : 0;
+            this._float32View[targetIndex + 3] = uvs !== null ? uvs[sourceIndex + 1] : 0;
+            this._uint32View[targetIndex + 4] = colors !== null ? colors[i] : 0xFFFFFFFF;
         }
-        return device.createBindGroup({
-            layout: this._textureBindGroupLayout,
-            entries,
-        });
     }
-    _getPipeline(blendMode, format) {
-        const pipelineKey = `${blendMode}:${format}`;
-        const existingPipeline = this._pipelines.get(pipelineKey);
-        if (existingPipeline) {
-            return existingPipeline;
-        }
-        if (!this._device || !this._shaderModule || !this._pipelineLayout || !this._backend) {
-            throw new Error('Renderer has to be connected first!');
+    _getPipeline(key) {
+        const cacheKey = `${key.blendMode}:${key.format}`;
+        let pipeline = this._pipelines.get(cacheKey);
+        if (!pipeline) {
+            pipeline = this._device.createRenderPipeline(this._buildPipelineDescriptor(key.blendMode, key.format));
+            this._pipelines.set(cacheKey, pipeline);
         }
-        const pipeline = this._device.createRenderPipeline(this._buildPipelineDescriptor(blendMode, format));
-        this._pipelines.set(pipelineKey, pipeline);
         return pipeline;
     }
     _buildPipelineDescriptor(blendMode, format) {
-        if (!this._shaderModule || !this._pipelineLayout) {
-            throw new Error('Renderer has to be connected first!');
-        }
         return {
             layout: this._pipelineLayout,
             vertex: {
                 module: this._shaderModule,
                 entryPoint: 'vertexMain',
                 buffers: [{
-                        arrayStride: instanceStrideBytes$1,
-                        stepMode: 'instance',
-                        attributes: [{
-                                shaderLocation: 0,
-                                offset: 0,
-                                format: 'float32x4',
-                            }, {
-                                shaderLocation: 1,
-                                offset: 16,
-                                format: 'float32x3',
-                            }, {
-                                shaderLocation: 2,
-                                offset: 28,
-                                format: 'float32x3',
-                            }, {
-                                shaderLocation: 3,
-                                offset: 40,
-                                format: 'unorm16x4',
-                            }, {
-                                shaderLocation: 4,
-                                offset: 48,
-                                format: 'unorm8x4',
-                            }, {
-                                shaderLocation: 5,
-                                offset: 52,
-                                format: 'uint32',
-                            }],
+                        arrayStride: vertexStrideBytes$1,
+                        stepMode: 'vertex',
+                        attributes: [
+                            { shaderLocation: 0, offset: 0, format: 'float32x2' },
+                            { shaderLocation: 1, offset: 8, format: 'float32x2' },
+                            { shaderLocation: 2, offset: 16, format: 'unorm8x4' },
+                        ],
                     }],
             },
             fragment: {
@@ -9102,9 +9813,74 @@ class WebGpuSpriteRenderer extends AbstractWebGpuRenderer {
             },
             primitive: {
                 topology: 'triangle-list',
+                cullMode: 'none',
             },
         };
     }
+    _getTextureBindGroup(backend, texture) {
+        let group = this._textureBindGroups.get(texture);
+        if (!group) {
+            const binding = backend.getTextureBinding(texture);
+            group = this._device.createBindGroup({
+                layout: this._textureBindGroupLayout,
+                entries: [
+                    { binding: 0, resource: binding.view },
+                    { binding: 1, resource: binding.sampler },
+                ],
+            });
+            this._textureBindGroups.set(texture, group);
+        }
+        return group;
+    }
+    _ensureVertexCapacity(vertexCount) {
+        const requiredBytes = vertexCount * vertexStrideBytes$1;
+        if (requiredBytes > this._vertexData.byteLength) {
+            const byteLength = Math.max(requiredBytes, this._vertexData.byteLength === 0 ? vertexStrideBytes$1 : this._vertexData.byteLength * 2);
+            this._vertexData = new ArrayBuffer(byteLength);
+            this._float32View = new Float32Array(this._vertexData);
+            this._uint32View = new Uint32Array(this._vertexData);
+        }
+        if (requiredBytes > this._vertexBufferCapacity) {
+            this._vertexBuffer?.destroy();
+            this._vertexBufferCapacity = Math.max(requiredBytes, this._vertexBufferCapacity === 0 ? vertexStrideBytes$1 : this._vertexBufferCapacity * 2);
+            this._vertexBuffer = this._device.createBuffer({
+                size: this._vertexBufferCapacity,
+                usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
+            });
+        }
+    }
+    _ensureIndexCapacity(indexCount) {
+        const requiredBytes = indexCount * Uint16Array.BYTES_PER_ELEMENT;
+        if (this._packedIndexData.length < indexCount) {
+            this._packedIndexData = new Uint16Array(Math.max(indexCount, this._packedIndexData.length === 0 ? 1 : this._packedIndexData.length * 2));
+        }
+        if (requiredBytes > this._indexBufferCapacity) {
+            this._indexBuffer?.destroy();
+            this._indexBufferCapacity = Math.max(requiredBytes, this._indexBufferCapacity === 0 ? Uint16Array.BYTES_PER_ELEMENT : this._indexBufferCapacity * 2);
+            this._indexBuffer = this._device.createBuffer({
+                size: this._indexBufferCapacity,
+                usage: GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST,
+            });
+        }
+    }
+    _ensureUniformCapacity(drawCallCount) {
+        const requiredBytes = drawCallCount * this._uniformAlignment;
+        if (requiredBytes > this._uniformBufferCapacity) {
+            this._uniformBuffer?.destroy();
+            this._uniformBufferCapacity = Math.max(requiredBytes, this._uniformBufferCapacity === 0 ? this._uniformAlignment : this._uniformBufferCapacity * 2);
+            this._uniformBuffer = this._device.createBuffer({
+                size: this._uniformBufferCapacity,
+                usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+            });
+            this._uniformBindGroup = this._device.createBindGroup({
+                layout: this._uniformBindGroupLayout,
+                entries: [{
+                        binding: 0,
+                        resource: { buffer: this._uniformBuffer, size: tintByteLength },
+                    }],
+            });
+        }
+    }
 }
 
 /// <reference types="@webgpu/types" />
@@ -9844,6 +10620,7 @@ class WebGpuBackend {
         }
         this.rendererRegistry.registerRenderer(DrawableShape, new WebGpuPrimitiveRenderer());
         this.rendererRegistry.registerRenderer(Sprite, new WebGpuSpriteRenderer());
+        this.rendererRegistry.registerRenderer(Mesh, new WebGpuMeshRenderer());
         this.rendererRegistry.registerRenderer(ParticleSystem, new WebGpuParticleRenderer());
         this.resize(width, height);
     }
@@ -18208,5 +18985,5 @@ const createRapierPhysicsWorld = async (options = {}) => {
     return await RapierPhysicsWorld.create(options);
 };
 
-export { AbstractAssetFactory, AbstractMedia, AbstractWebGl2BatchedRenderer, AbstractWebGl2Renderer, AbstractWebGpuRenderer, AnimatedSprite, Application, ApplicationStatus, ArcadeStickGamepadMapping, AudioAnalyser, BinaryFactory, BlendModes, BlurFilter, Bounds, BufferTypes, BufferUsage, BundleLoadError, CacheFirstStrategy, CallbackRenderPass, ChannelOffset, ChannelSize, Circle, CircleGeometry, Clock, CollisionType, Color, ColorAffector, ColorFilter, Container, Drawable, DrawableShape, Ellipse, FactoryRegistry, Filter, Flags, FontFactory, ForceAffector, GameCubeGamepadMapping, Gamepad, GamepadChannel, GamepadControl, GamepadMapping, GamepadMappingFamily, GamepadPromptLayouts, GenericDualAnalogGamepadMapping, Geometry, Graphics, ImageFactory, IndexedDbDatabase, IndexedDbStore, Input, InputManager, Interval, JoyConLeftGamepadMapping, JoyConRightGamepadMapping, Json, JsonFactory, Keyboard, Line, Loader, Matrix, Music, MusicFactory, NetworkOnlyStrategy, ObservableSize, ObservableVector, Particle, ParticleOptions, ParticleSystem, PlayStationGamepadMapping, Pointer, PointerState, PointerStateFlag, PolarVector, Polygon, Quadtree, Random, RapierPhysicsBinding, RapierPhysicsWorld, Rectangle, RenderBackendType, RenderNode, RenderTarget, RenderTargetPass, RenderTexture, RendererRegistry, RenderingPrimitives, Sampler, ScaleAffector, ScaleModes, Scene, SceneManager, SceneNode, Segment, Shader, ShaderAttribute, ShaderPrimitives, ShaderUniform, Signal, Size, Sound, SoundFactory, Sprite, SpriteFlags, Spritesheet, SteamControllerGamepadMapping, SvgAsset, SvgFactory, SwitchProGamepadMapping, Text, TextAsset, TextFactory, TextStyle, Texture, TextureFactory, Time, Timer, TorqueAffector, UniversalEmitter, Vector, Video, VideoFactory, View, ViewFlags, VoronoiRegion, VttAsset, VttFactory, WasmFactory, WebGl2Backend, WebGl2ParticleRenderer, WebGl2PrimitiveRenderer, WebGl2RenderBuffer, WebGl2ShaderBlock, WebGl2SpriteRenderer, WebGl2VertexArrayObject, WebGpuBackend, WebGpuParticleRenderer, WebGpuPrimitiveRenderer, WebGpuSpriteRenderer, WrapModes, XboxGamepadMapping, bezierCurveTo, buildCircle, buildEllipse, buildLine, buildPath, buildPolygon, buildRectangle, buildStar, builtInGamepadDefinitions, canvasSourceToDataUrl, clamp, createRapierPhysicsWorld, createRenderStats, createWebGl2ShaderProgram, decodeAudioData, defineAssetManifest, degreesPerRadian, degreesToRadians, determineMimeType, emptyArrayBuffer, getAudioContext, getCanvasSourceSize, getCollisionCircleCircle, getCollisionCircleRectangle, getCollisionPolygonCircle, getCollisionRectangleRectangle, getCollisionSat, getDistance, getOfflineAudioContext, getPreciseTime, getTextureSourceSize, getVoronoiRegion$1 as getVoronoiRegion, getWebGpuBlendState, hours, inRange, intersectionCircleCircle, intersectionCircleEllipse, intersectionCirclePoly, intersectionEllipseEllipse, intersectionEllipsePoly, intersectionLineCircle, intersectionLineEllipse, intersectionLineLine, intersectionLinePoly, intersectionLineRect, intersectionPointCircle, intersectionPointEllipse, intersectionPointLine, intersectionPointPoint, intersectionPointPoly, intersectionPointRect, intersectionPolyPoly, intersectionRectCircle, intersectionRectEllipse, intersectionRectPoly, intersectionRectRect, intersectionSat, isAudioContextReady, isPowerOfTwo, lerp, matchesIds, milliseconds, minutes, noop$1 as noop, normalizeIds, onAudioContextReady, parseGamepadDescriptor, quadraticCurveTo, radiansPerDegree, radiansToDegrees, rand, removeArrayItems, resetRenderStats, resolveDefinition, resolveGamepadDefinition, seconds, sign$1 as sign, stopEvent, supportsCodec, supportsEventOptions, supportsIndexedDb, supportsPointerEvents, supportsTouchEvents, supportsWebAudio, tau, trimRotation, webGl2PrimitiveArrayConstructors, webGl2PrimitiveByteSizeMapping, webGl2PrimitiveTypeNames };
+export { AbstractAssetFactory, AbstractMedia, AbstractWebGl2BatchedRenderer, AbstractWebGl2Renderer, AbstractWebGpuRenderer, AnimatedSprite, Application, ApplicationStatus, ArcadeStickGamepadMapping, AudioAnalyser, BinaryFactory, BlendModes, BlurFilter, Bounds, BufferTypes, BufferUsage, BundleLoadError, CacheFirstStrategy, CallbackRenderPass, ChannelOffset, ChannelSize, Circle, CircleGeometry, Clock, CollisionType, Color, ColorAffector, ColorFilter, Container, Drawable, DrawableShape, Ellipse, FactoryRegistry, Filter, Flags, FontFactory, ForceAffector, GameCubeGamepadMapping, Gamepad, GamepadChannel, GamepadControl, GamepadMapping, GamepadMappingFamily, GamepadPromptLayouts, GenericDualAnalogGamepadMapping, Geometry, Graphics, ImageFactory, IndexedDbDatabase, IndexedDbStore, Input, InputManager, Interval, JoyConLeftGamepadMapping, JoyConRightGamepadMapping, Json, JsonFactory, Keyboard, Line, Loader, Matrix, Mesh, Music, MusicFactory, NetworkOnlyStrategy, ObservableSize, ObservableVector, Particle, ParticleOptions, ParticleSystem, PlayStationGamepadMapping, Pointer, PointerState, PointerStateFlag, PolarVector, Polygon, Quadtree, Random, RapierPhysicsBinding, RapierPhysicsWorld, Rectangle, RenderBackendType, RenderNode, RenderTarget, RenderTargetPass, RenderTexture, RendererRegistry, RenderingPrimitives, Sampler, ScaleAffector, ScaleModes, Scene, SceneManager, SceneNode, Segment, Shader, ShaderAttribute, ShaderPrimitives, ShaderUniform, Signal, Size, Sound, SoundFactory, Sprite, SpriteFlags, Spritesheet, SteamControllerGamepadMapping, SvgAsset, SvgFactory, SwitchProGamepadMapping, Text, TextAsset, TextFactory, TextStyle, Texture, TextureFactory, Time, Timer, TorqueAffector, UniversalEmitter, Vector, Video, VideoFactory, View, ViewFlags, VoronoiRegion, VttAsset, VttFactory, WasmFactory, WebGl2Backend, WebGl2MeshRenderer, WebGl2ParticleRenderer, WebGl2PrimitiveRenderer, WebGl2RenderBuffer, WebGl2ShaderBlock, WebGl2SpriteRenderer, WebGl2VertexArrayObject, WebGpuBackend, WebGpuMeshRenderer, WebGpuParticleRenderer, WebGpuPrimitiveRenderer, WebGpuSpriteRenderer, WrapModes, XboxGamepadMapping, bezierCurveTo, buildCircle, buildEllipse, buildLine, buildPath, buildPolygon, buildRectangle, buildStar, builtInGamepadDefinitions, canvasSourceToDataUrl, clamp, createRapierPhysicsWorld, createRenderStats, createWebGl2ShaderProgram, decodeAudioData, defineAssetManifest, degreesPerRadian, degreesToRadians, determineMimeType, emptyArrayBuffer, getAudioContext, getCanvasSourceSize, getCollisionCircleCircle, getCollisionCircleRectangle, getCollisionPolygonCircle, getCollisionRectangleRectangle, getCollisionSat, getDistance, getOfflineAudioContext, getPreciseTime, getTextureSourceSize, getVoronoiRegion$1 as getVoronoiRegion, getWebGpuBlendState, hours, inRange, intersectionCircleCircle, intersectionCircleEllipse, intersectionCirclePoly, intersectionEllipseEllipse, intersectionEllipsePoly, intersectionLineCircle, intersectionLineEllipse, intersectionLineLine, intersectionLinePoly, intersectionLineRect, intersectionPointCircle, intersectionPointEllipse, intersectionPointLine, intersectionPointPoint, intersectionPointPoly, intersectionPointRect, intersectionPolyPoly, intersectionRectCircle, intersectionRectEllipse, intersectionRectPoly, intersectionRectRect, intersectionSat, isAudioContextReady, isPowerOfTwo, lerp, matchesIds, milliseconds, minutes, noop$1 as noop, normalizeIds, onAudioContextReady, parseGamepadDescriptor, quadraticCurveTo, radiansPerDegree, radiansToDegrees, rand, removeArrayItems, resetRenderStats, resolveDefinition, resolveGamepadDefinition, seconds, sign$1 as sign, stopEvent, supportsCodec, supportsEventOptions, supportsIndexedDb, supportsPointerEvents, supportsTouchEvents, supportsWebAudio, tau, trimRotation, webGl2PrimitiveArrayConstructors, webGl2PrimitiveByteSizeMapping, webGl2PrimitiveTypeNames };
 //# sourceMappingURL=exo.esm.js.map