@codexo/exojs 0.6.4 → 0.6.5

package/dist/exo.esm.js

@@ -3642,37 +3642,117 @@ class Drawable extends RenderNode {
     }
 }
 
-class DrawableShape extends Drawable {
-    geometry;
-    drawMode;
-    color;
-    constructor(geometry, color, drawMode = RenderingPrimitives.Triangles) {
+/**
+ * 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();
-        this.geometry = geometry;
-        this.color = color.clone();
-        this.drawMode = drawMode;
+        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();
     }
-    destroy() {
-        super.destroy();
-        this.color.destroy();
+    get vertexCount() {
+        return this.vertices.length / 2;
     }
-}
-
-class Geometry {
-    vertices;
-    indices;
-    points;
-    constructor({ vertices = [], indices = [], points = [], } = {}) {
-        this.vertices = new Float32Array(vertices);
-        this.indices = new Uint16Array(indices);
-        this.points = points;
+    get indexCount() {
+        return this.indices?.length ?? this.vertexCount;
     }
-    destroy() {
-        // todo - check if destroy is needed
+    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 TransitionOverlayShape extends DrawableShape {
+class TransitionOverlayMesh extends Mesh {
     render(backend) {
         if (this.visible) {
             backend.draw(this);
@@ -3680,16 +3760,16 @@ class TransitionOverlayShape extends DrawableShape {
         return this;
     }
 }
-const createOverlayGeometry = () => new Geometry({
-    vertices: [0, 0, 1, 0, 0, 1, 1, 1],
-    indices: [0, 1, 2, 3],
-    points: [0, 0, 1, 0, 0, 1, 1, 1],
+const createOverlayMesh = () => new TransitionOverlayMesh({
+    // 4 vertices (TL, TR, BL, BR) with 2 indexed triangles forming a screen quad.
+    vertices: new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]),
+    indices: new Uint16Array([0, 1, 2, 1, 3, 2]),
 });
 const defaultFadeTransitionDuration = 220;
 class SceneManager {
     _app;
     _stack = [];
-    _transitionOverlay = new TransitionOverlayShape(createOverlayGeometry(), Color.black, RenderingPrimitives.TriangleStrip);
+    _transitionOverlay = createOverlayMesh();
     _transition = null;
     onChangeScene = new Signal();
     onStartScene = new Signal();
@@ -4052,7 +4132,8 @@ class SceneManager {
         const overlayColor = transition ? transition.color : Color.black;
         const backend = this._app.backend;
         const bounds = backend.view.getBounds();
-        const vertices = this._transitionOverlay.geometry.vertices;
+        const overlay = this._transitionOverlay;
+        const vertices = overlay.vertices;
         vertices[0] = bounds.left;
         vertices[1] = bounds.top;
         vertices[2] = bounds.right;
@@ -4061,8 +4142,8 @@ class SceneManager {
         vertices[5] = bounds.bottom;
         vertices[6] = bounds.right;
         vertices[7] = bounds.bottom;
-        this._transitionOverlay.color.set(overlayColor.r, overlayColor.g, overlayColor.b, Math.max(0, Math.min(1, alpha)));
-        this._transitionOverlay.render(backend);
+        overlay.tint.set(overlayColor.r, overlayColor.g, overlayColor.b, Math.max(0, Math.min(1, alpha)));
+        overlay.render(backend);
     }
 }
 
@@ -5834,9 +5915,9 @@ class WebGl2VertexArrayObject {
     }
 }
 
-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 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 fragmentSource$4 = "#version 300 es\nprecision lowp float;\nprecision lowp int;\n\n// Multi-texture sprite batching: up to 8 textures bound per draw call,\n// each fragment selects its source via a flat-interpolated slot index.\n//\n// GLSL ES 3.0 forbids non-constant array-of-sampler indexing unless the\n// expression is dynamically uniform — which a per-vertex slot is not\n// once different triangles in the same batch carry different slots. The\n// if/else chain below dispatches statically and dodges that constraint.\n\nuniform sampler2D u_texture0;\nuniform sampler2D u_texture1;\nuniform sampler2D u_texture2;\nuniform sampler2D u_texture3;\nuniform sampler2D u_texture4;\nuniform sampler2D u_texture5;\nuniform sampler2D u_texture6;\nuniform sampler2D u_texture7;\n\nin vec2 v_texcoord;\nin vec4 v_color;\nflat in uint v_textureSlot;\n\nlayout(location = 0) out vec4 fragColor;\n\nvoid main(void) {\n    vec4 sampleColor;\n\n    if (v_textureSlot == 0u) {\n        sampleColor = texture(u_texture0, v_texcoord);\n    } else if (v_textureSlot == 1u) {\n        sampleColor = texture(u_texture1, v_texcoord);\n    } else if (v_textureSlot == 2u) {\n        sampleColor = texture(u_texture2, v_texcoord);\n    } else if (v_textureSlot == 3u) {\n        sampleColor = texture(u_texture3, v_texcoord);\n    } else if (v_textureSlot == 4u) {\n        sampleColor = texture(u_texture4, v_texcoord);\n    } else if (v_textureSlot == 5u) {\n        sampleColor = texture(u_texture5, v_texcoord);\n    } else if (v_textureSlot == 6u) {\n        sampleColor = texture(u_texture6, v_texcoord);\n    } else {\n        sampleColor = texture(u_texture7, v_texcoord);\n    }\n\n    fragColor = sampleColor * v_color;\n}\n";
+var fragmentSource$3 = "#version 300 es\nprecision lowp float;\nprecision lowp int;\n\n// Multi-texture sprite batching: up to 8 textures bound per draw call,\n// each fragment selects its source via a flat-interpolated slot index.\n//\n// GLSL ES 3.0 forbids non-constant array-of-sampler indexing unless the\n// expression is dynamically uniform — which a per-vertex slot is not\n// once different triangles in the same batch carry different slots. The\n// if/else chain below dispatches statically and dodges that constraint.\n\nuniform sampler2D u_texture0;\nuniform sampler2D u_texture1;\nuniform sampler2D u_texture2;\nuniform sampler2D u_texture3;\nuniform sampler2D u_texture4;\nuniform sampler2D u_texture5;\nuniform sampler2D u_texture6;\nuniform sampler2D u_texture7;\n\nin vec2 v_texcoord;\nin vec4 v_color;\nflat in uint v_textureSlot;\n\nlayout(location = 0) out vec4 fragColor;\n\nvoid main(void) {\n    vec4 sampleColor;\n\n    if (v_textureSlot == 0u) {\n        sampleColor = texture(u_texture0, v_texcoord);\n    } else if (v_textureSlot == 1u) {\n        sampleColor = texture(u_texture1, v_texcoord);\n    } else if (v_textureSlot == 2u) {\n        sampleColor = texture(u_texture2, v_texcoord);\n    } else if (v_textureSlot == 3u) {\n        sampleColor = texture(u_texture3, v_texcoord);\n    } else if (v_textureSlot == 4u) {\n        sampleColor = texture(u_texture4, v_texcoord);\n    } else if (v_textureSlot == 5u) {\n        sampleColor = texture(u_texture5, v_texcoord);\n    } else if (v_textureSlot == 6u) {\n        sampleColor = texture(u_texture6, v_texcoord);\n    } else {\n        sampleColor = texture(u_texture7, v_texcoord);\n    }\n\n    fragColor = sampleColor * v_color;\n}\n";
 
 /**
  * Instanced sprite renderer for WebGL2.
@@ -5884,7 +5965,7 @@ class WebGl2SpriteRenderer extends AbstractWebGl2Renderer {
     constructor(batchSize) {
         super();
         this._batchSize = batchSize;
-        this._shader = new Shader(vertexSource$4, fragmentSource$4);
+        this._shader = new Shader(vertexSource$3, fragmentSource$3);
         this._instanceData = new ArrayBuffer(batchSize * instanceStrideBytes$3);
         this._instanceFloat32 = new Float32Array(this._instanceData);
         this._instanceUint32 = new Uint32Array(this._instanceData);
@@ -6309,26 +6390,26 @@ class Texture {
     }
 }
 
-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 vertexSource$2 = "#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";
+var fragmentSource$2 = "#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 vertexStrideBytes$3 = 20;
+const vertexStrideWords = vertexStrideBytes$3 / 4;
 const initialVertexCapacity = 64;
 const initialIndexCapacity = 192;
 const defaultVertexColor = 0xFFFFFFFF; // white, full alpha
 class WebGl2MeshRenderer extends AbstractWebGl2Renderer {
-    _shader = new Shader(vertexSource$3, fragmentSource$3);
+    _shader = new Shader(vertexSource$2, fragmentSource$2);
     _tintScratch = new Float32Array(4);
     _textureUnitScratch = new Int32Array([0]);
     _vertexCapacity = initialVertexCapacity;
     _indexCapacity = initialIndexCapacity;
-    _vertexData = new ArrayBuffer(initialVertexCapacity * vertexStrideBytes$5);
+    _vertexData = new ArrayBuffer(initialVertexCapacity * vertexStrideBytes$3);
     _float32View = new Float32Array(this._vertexData);
     _uint32View = new Uint32Array(this._vertexData);
     _indexData = new Uint16Array(initialIndexCapacity);
@@ -6375,7 +6456,7 @@ class WebGl2MeshRenderer extends AbstractWebGl2Renderer {
         const uvs = mesh.uvs;
         const colors = mesh.colors;
         for (let i = 0; i < vertexCount; i++) {
-            const word = i * vertexStrideWords$1;
+            const word = i * vertexStrideWords;
             const pair = i * 2;
             this._float32View[word] = positions[pair];
             this._float32View[word + 1] = positions[pair + 1];
@@ -6401,7 +6482,7 @@ class WebGl2MeshRenderer extends AbstractWebGl2Renderer {
         }
         this._shader.sync();
         backend.bindVertexArrayObject(connection.vao);
-        connection.vertexBuffer.upload(this._float32View.subarray(0, vertexCount * vertexStrideWords$1));
+        connection.vertexBuffer.upload(this._float32View.subarray(0, vertexCount * vertexStrideWords));
         connection.indexBuffer.upload(this._indexData.subarray(0, indexCount));
         connection.vao.draw(indexCount, 0, RenderingPrimitives.Triangles);
         backend.stats.batches++;
@@ -6434,9 +6515,9 @@ class WebGl2MeshRenderer extends AbstractWebGl2Renderer {
         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)
+            .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)
+            .addAttribute(vertexBuffer, this._shader.getAttribute('a_color'), gl.UNSIGNED_BYTE, true, vertexStrideBytes$3, 16)
             .connect(this._createVaoRuntime(gl, vaoHandle));
         this._connection = { gl, vao, vertexBuffer, indexBuffer };
     }
@@ -6461,7 +6542,7 @@ class WebGl2MeshRenderer extends AbstractWebGl2Renderer {
         while (this._vertexCapacity < vertexCount) {
             this._vertexCapacity *= 2;
         }
-        this._vertexData = new ArrayBuffer(this._vertexCapacity * vertexStrideBytes$5);
+        this._vertexData = new ArrayBuffer(this._vertexCapacity * vertexStrideBytes$3);
         this._float32View = new Float32Array(this._vertexData);
         this._uint32View = new Uint32Array(this._vertexData);
     }
@@ -6543,9 +6624,9 @@ class WebGl2MeshRenderer 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 vertexSource$1 = "#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\nprecision lowp float;\n\nuniform sampler2D u_texture;\n\nin vec2 v_texcoord;\nin vec4 v_color;\n\nlayout(location = 0) out vec4 fragColor;\n\nvoid main(void) {\n    fragColor = texture(u_texture, v_texcoord) * v_color;\n}\n";
+var fragmentSource$1 = "#version 300 es\nprecision lowp float;\n\nuniform sampler2D u_texture;\n\nin vec2 v_texcoord;\nin vec4 v_color;\n\nlayout(location = 0) out vec4 fragColor;\n\nvoid main(void) {\n    fragColor = texture(u_texture, v_texcoord) * v_color;\n}\n";
 
 /**
  * Instanced particle renderer for WebGL2.
@@ -6597,7 +6678,7 @@ class WebGl2ParticleRenderer extends AbstractWebGl2Renderer {
     constructor(batchSize) {
         super();
         this._batchSize = batchSize;
-        this._shader = new Shader(vertexSource$2, fragmentSource$2);
+        this._shader = new Shader(vertexSource$1, fragmentSource$1);
         this._instanceData = new ArrayBuffer(batchSize * instanceStrideBytes$2);
         this._instanceFloat32 = new Float32Array(this._instanceData);
         this._instanceUint32 = new Uint32Array(this._instanceData);
@@ -6837,315 +6918,100 @@ class WebGl2ParticleRenderer extends AbstractWebGl2Renderer {
     }
 }
 
-var vertexSource$1 = "#version 300 es\nprecision lowp float;\n\nlayout(location = 0) in vec2 a_position;\nlayout(location = 1) in vec4 a_color;\n\nuniform mat3 u_projection;\nuniform mat3 u_translation;\n\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_color = vec4(a_color.rgb * a_color.a, a_color.a);\n}\n";
-
-var fragmentSource$1 = "#version 300 es\nprecision lowp float;\n\nlayout(location = 0) out vec4 fragColor;\n\nin vec4 v_color;\n\nvoid main(void) {\n    fragColor = v_color;\n}\n";
-
-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);
+var vertexSource = "#version 300 es\nprecision lowp float;\n\nlayout(location = 0) in vec2 a_position;\nlayout(location = 1) in vec2 a_texcoord;\n\nuniform mat3 u_projection;\n\nout vec2 v_texcoord;\n\nvoid main(void) {\n    gl_Position = vec4((u_projection * vec3(a_position, 1.0)).xy, 0.0, 1.0);\n    v_texcoord = a_texcoord;\n}\n";
+
+var fragmentSource = "#version 300 es\nprecision lowp float;\n\nuniform sampler2D u_content;\nuniform sampler2D u_mask;\n\nin vec2 v_texcoord;\n\nlayout(location = 0) out vec4 fragColor;\n\nvoid main(void) {\n    vec4 contentColor = texture(u_content, v_texcoord);\n    float maskAlpha = texture(u_mask, v_texcoord).a;\n\n    fragColor = vec4(contentColor.rgb * maskAlpha, contentColor.a * maskAlpha);\n}\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]);
     _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) {
+    connect(backend) {
+        if (this._connection !== null) {
             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('Could not create vertex array object.');
+            throw new Error('WebGl2MaskCompositor: 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));
+        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, 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".
+            .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$4, 0)
-            .addAttribute(vertexBuffer, this._shader.getAttribute('a_color'), gl.UNSIGNED_BYTE, true, vertexStrideBytes$4, 8)
+            .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)
             .connect(this._createVaoRuntime(gl, vaoHandle));
-        this._connection = { gl, buffers, vaoHandle, vao, indexBuffer, vertexBuffer };
+        this._connection = { gl, vaoHandle, vao, indexBuffer, vertexBuffer, bufferHandles };
     }
-    onDisconnect() {
+    disconnect() {
         const connection = this._connection;
-        if (!connection) {
+        if (connection === null) {
             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;
     }
-    _ensureVertexCapacity(vertexCount) {
-        if (vertexCount <= this._vertexCapacity) {
-            return;
-        }
-        while (this._vertexCapacity < vertexCount) {
-            this._vertexCapacity *= 2;
+    compose(backend, content, mask, x, y, width, height, blendMode) {
+        const connection = this._connection;
+        if (connection === null) {
+            throw new Error('WebGl2MaskCompositor: not connected.');
         }
-        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\nprecision lowp float;\n\nlayout(location = 0) in vec2 a_position;\nlayout(location = 1) in vec2 a_texcoord;\n\nuniform mat3 u_projection;\n\nout vec2 v_texcoord;\n\nvoid main(void) {\n    gl_Position = vec4((u_projection * vec3(a_position, 1.0)).xy, 0.0, 1.0);\n    v_texcoord = a_texcoord;\n}\n";
-
-var fragmentSource = "#version 300 es\nprecision lowp float;\n\nuniform sampler2D u_content;\nuniform sampler2D u_mask;\n\nin vec2 v_texcoord;\n\nlayout(location = 0) out vec4 fragColor;\n\nvoid main(void) {\n    vec4 contentColor = texture(u_content, v_texcoord);\n    float maskAlpha = texture(u_mask, v_texcoord).a;\n\n    fragColor = vec4(contentColor.rgb * maskAlpha, contentColor.a * maskAlpha);\n}\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);
+        // 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;
@@ -7393,134 +7259,24 @@ 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();
+class Particle {
+    _totalLifetime = Time.oneSecond.clone();
+    _elapsedLifetime = Time.zero.clone();
+    _position = Vector.zero.clone();
+    _velocity = Vector.zero.clone();
+    _scale = Vector.one.clone();
+    _rotation = 0;
+    _rotationSpeed = 0;
+    _textureIndex = 0;
+    _tint = Color.white.clone();
+    get totalLifetime() {
+        return this._totalLifetime;
     }
-    get vertexCount() {
-        return this.vertices.length / 2;
+    set totalLifetime(totalLifetime) {
+        this._totalLifetime.copy(totalLifetime);
     }
-    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();
-    _position = Vector.zero.clone();
-    _velocity = Vector.zero.clone();
-    _scale = Vector.one.clone();
-    _rotation = 0;
-    _rotationSpeed = 0;
-    _textureIndex = 0;
-    _tint = Color.white.clone();
-    get totalLifetime() {
-        return this._totalLifetime;
-    }
-    set totalLifetime(totalLifetime) {
-        this._totalLifetime.copy(totalLifetime);
-    }
-    get elapsedLifetime() {
-        return this._elapsedLifetime;
+    get elapsedLifetime() {
+        return this._elapsedLifetime;
     }
     set elapsedLifetime(elapsedLifetime) {
         this._elapsedLifetime.copy(elapsedLifetime);
@@ -7945,7 +7701,7 @@ class WebGl2Backend {
     _boundFramebuffer = null;
     _stats = createRenderStats();
     constructor(app) {
-        const { width, height, clearColor, webglAttributes, debug, spriteRendererBatchSize, particleRendererBatchSize, primitiveRendererBatchSize, } = app.options;
+        const { width, height, clearColor, webglAttributes, debug, spriteRendererBatchSize, particleRendererBatchSize, } = app.options;
         this._canvas = app.canvas;
         const gl = this._createContext(webglAttributes);
         if (!gl) {
@@ -7969,7 +7725,6 @@ class WebGl2Backend {
         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);
         this._bindRenderTarget(this._renderTarget);
         this.setBlendMode(BlendModes.Normal);
@@ -8384,719 +8139,238 @@ class WebGl2Backend {
             this._boundFramebuffer = state.framebuffer;
             state.version = target.version;
         }
-        if (this._clipPixelStack.length > 0) {
-            this._applyClipState();
-        }
-    }
-    _setActiveRenderer(renderer) {
-        if (this._renderer !== renderer) {
-            this._flushActiveRenderer();
-            this._renderer = renderer;
-        }
-    }
-    _flushActiveRenderer() {
-        if (this._renderer && !this._contextLost) {
-            this._bindRenderTarget(this._renderTarget);
-            this._renderer.flush();
-        }
-    }
-    _prepareRenderTarget(target) {
-        const state = this._getRenderTargetState(target);
-        if (target instanceof RenderTexture && state.framebuffer) {
-            const previousFramebuffer = this._boundFramebuffer;
-            const textureState = this._syncTexture(target);
-            if (state.attachedTexture !== textureState.handle) {
-                const gl = this._context;
-                gl.bindFramebuffer(gl.FRAMEBUFFER, state.framebuffer);
-                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, textureState.handle, 0);
-                gl.bindFramebuffer(gl.FRAMEBUFFER, previousFramebuffer);
-                state.attachedTexture = textureState.handle;
-            }
-        }
-        return state;
-    }
-    _syncTexture(texture) {
-        const gl = this._context;
-        const state = this._getTextureState(texture);
-        const version = texture instanceof RenderTexture ? texture.textureVersion : texture.version;
-        gl.bindTexture(gl.TEXTURE_2D, state.handle);
-        if (state.version !== version) {
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, texture.wrapMode);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, texture.wrapMode);
-            gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultiplyAlpha);
-            if (texture instanceof RenderTexture) {
-                if (state.version === -1 || state.width !== texture.width || state.height !== texture.height || texture.source === null) {
-                    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, texture.width, texture.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
-                }
-                else {
-                    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, texture.width, texture.height, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
-                }
-            }
-            else if (texture.source) {
-                if (state.version === -1 || state.width !== texture.width || state.height !== texture.height) {
-                    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
-                }
-                else {
-                    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
-                }
-            }
-            if (texture.generateMipMap && (texture instanceof RenderTexture || texture.source !== null)) {
-                gl.generateMipmap(gl.TEXTURE_2D);
-            }
-            state.version = version;
-            state.width = texture.width;
-            state.height = texture.height;
-        }
-        return state;
-    }
-    _toClipPixels(bounds) {
-        const topLeft = this._renderTarget.mapCoordsToPixel(this._clipPointA.set(bounds.left, bounds.top));
-        const bottomRight = this._renderTarget.mapCoordsToPixel(this._clipPointB.set(bounds.right, bounds.bottom));
-        const minX = Math.min(topLeft.x, bottomRight.x);
-        const maxX = Math.max(topLeft.x, bottomRight.x);
-        const minY = Math.min(topLeft.y, bottomRight.y);
-        const maxY = Math.max(topLeft.y, bottomRight.y);
-        const targetWidth = this._renderTarget.width;
-        const targetHeight = this._renderTarget.height;
-        const x = Math.max(0, Math.min(targetWidth, Math.floor(minX)));
-        const right = Math.max(0, Math.min(targetWidth, Math.ceil(maxX)));
-        const yTop = Math.max(0, Math.min(targetHeight, Math.floor(minY)));
-        const bottom = Math.max(0, Math.min(targetHeight, Math.ceil(maxY)));
-        const width = Math.max(0, right - x);
-        const height = Math.max(0, bottom - yTop);
-        const y = Math.max(0, targetHeight - bottom);
-        return {
-            x,
-            y,
-            width,
-            height,
-        };
-    }
-    _intersectClips(first, second) {
-        const left = Math.max(first.x, second.x);
-        const bottom = Math.max(first.y, second.y);
-        const right = Math.min(first.x + first.width, second.x + second.width);
-        const top = Math.min(first.y + first.height, second.y + second.height);
-        return {
-            x: left,
-            y: bottom,
-            width: Math.max(0, right - left),
-            height: Math.max(0, top - bottom),
-        };
-    }
-    _applyClipState() {
-        const gl = this._context;
-        if (this._clipPixelStack.length === 0) {
-            gl.disable(gl.SCISSOR_TEST);
-            return;
-        }
-        const clip = this._clipPixelStack[this._clipPixelStack.length - 1];
-        gl.enable(gl.SCISSOR_TEST);
-        gl.scissor(clip.x, clip.y, clip.width, clip.height);
-    }
-}
-
-/// <reference types="@webgpu/types" />
-/**
- * Base class for WebGPU renderers.
- *
- * Manages the connect/disconnect lifecycle and provides a safe
- * `getBackend()` accessor that throws if the renderer is not connected.
- *
- * Subclasses must implement:
- * - onConnect(backend): set up GPU resources (shader modules, pipelines, buffers)
- * - onDisconnect(): tear down GPU resources
- * - render(drawable): collect draw call data for the given drawable
- * - flush(): encode and submit command buffers for all collected draw calls
- */
-class AbstractWebGpuRenderer {
-    backendType = RenderBackendType.WebGpu;
-    _backend = null;
-    connect(backend) {
-        if (this._backend !== null) {
-            return;
-        }
-        if (backend.backendType !== RenderBackendType.WebGpu) {
-            throw new Error(`${this.constructor.name} requires a WebGPU backend, `
-                + `but received backendType ${String(backend.backendType)}.`);
-        }
-        this._backend = backend;
-        this.onConnect(backend);
-    }
-    disconnect() {
-        if (this._backend === null) {
-            return;
-        }
-        this.flush();
-        this.onDisconnect();
-        this._backend = null;
-    }
-    getBackend() {
-        if (this._backend === null) {
-            throw new Error(`${this.constructor.name} is not connected to a backend.`);
-        }
-        return this._backend;
-    }
-    getBackendOrNull() {
-        return this._backend;
-    }
-}
-
-/// <reference types="@webgpu/types" />
-/**
- * Returns the GPUBlendState for a given ExoJS blend mode.
- * Shared by all WebGPU renderers to avoid duplication.
- */
-function getWebGpuBlendState(blendMode) {
-    switch (blendMode) {
-        case BlendModes.Additive:
-            return {
-                color: {
-                    operation: 'add',
-                    srcFactor: 'one',
-                    dstFactor: 'one',
-                },
-                alpha: {
-                    operation: 'add',
-                    srcFactor: 'one',
-                    dstFactor: 'one',
-                },
-            };
-        case BlendModes.Subtract:
-            return {
-                color: {
-                    operation: 'add',
-                    srcFactor: 'zero',
-                    dstFactor: 'one-minus-src',
-                },
-                alpha: {
-                    operation: 'add',
-                    srcFactor: 'zero',
-                    dstFactor: 'one-minus-src-alpha',
-                },
-            };
-        case BlendModes.Multiply:
-            return {
-                color: {
-                    operation: 'add',
-                    srcFactor: 'dst',
-                    dstFactor: 'one-minus-src-alpha',
-                },
-                alpha: {
-                    operation: 'add',
-                    srcFactor: 'dst-alpha',
-                    dstFactor: 'one-minus-src-alpha',
-                },
-            };
-        case BlendModes.Screen:
-            return {
-                color: {
-                    operation: 'add',
-                    srcFactor: 'one',
-                    dstFactor: 'one-minus-src',
-                },
-                alpha: {
-                    operation: 'add',
-                    srcFactor: 'one',
-                    dstFactor: 'one-minus-src-alpha',
-                },
-            };
-        default:
-            return {
-                color: {
-                    operation: 'add',
-                    srcFactor: 'one',
-                    dstFactor: 'one-minus-src-alpha',
-                },
-                alpha: {
-                    operation: 'add',
-                    srcFactor: 'one',
-                    dstFactor: 'one-minus-src-alpha',
-                },
-            };
-    }
-}
-
-/// <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;
+        if (this._clipPixelStack.length > 0) {
+            this._applyClipState();
+        }
     }
-    _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.`);
+    _setActiveRenderer(renderer) {
+        if (this._renderer !== renderer) {
+            this._flushActiveRenderer();
+            this._renderer = renderer;
         }
     }
-    _resolveDrawCall(shape) {
-        const vertices = shape.geometry.vertices;
-        const vertexCount = vertices.length / 2;
-        if (vertexCount === 0) {
-            return null;
+    _flushActiveRenderer() {
+        if (this._renderer && !this._contextLost) {
+            this._bindRenderTarget(this._renderTarget);
+            this._renderer.flush();
         }
-        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,
-                };
+    }
+    _prepareRenderTarget(target) {
+        const state = this._getRenderTargetState(target);
+        if (target instanceof RenderTexture && state.framebuffer) {
+            const previousFramebuffer = this._boundFramebuffer;
+            const textureState = this._syncTexture(target);
+            if (state.attachedTexture !== textureState.handle) {
+                const gl = this._context;
+                gl.bindFramebuffer(gl.FRAMEBUFFER, state.framebuffer);
+                gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, textureState.handle, 0);
+                gl.bindFramebuffer(gl.FRAMEBUFFER, previousFramebuffer);
+                state.attachedTexture = textureState.handle;
             }
         }
+        return state;
     }
-    _resolveLineLoopDrawCall(indices, vertexCount) {
-        const sourceIndices = indices.length > 0 ? indices : this._getSequentialIndices(vertexCount);
-        const sourceCount = sourceIndices.length;
-        if (sourceCount < 2) {
-            return null;
+    _syncTexture(texture) {
+        const gl = this._context;
+        const state = this._getTextureState(texture);
+        const version = texture instanceof RenderTexture ? texture.textureVersion : texture.version;
+        gl.bindTexture(gl.TEXTURE_2D, state.handle);
+        if (state.version !== version) {
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, texture.scaleMode);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, texture.scaleMode);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, texture.wrapMode);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, texture.wrapMode);
+            gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultiplyAlpha);
+            if (texture instanceof RenderTexture) {
+                if (state.version === -1 || state.width !== texture.width || state.height !== texture.height || texture.source === null) {
+                    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, texture.width, texture.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
+                }
+                else {
+                    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, texture.width, texture.height, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
+                }
+            }
+            else if (texture.source) {
+                if (state.version === -1 || state.width !== texture.width || state.height !== texture.height) {
+                    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
+                }
+                else {
+                    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, texture.source);
+                }
+            }
+            if (texture.generateMipMap && (texture instanceof RenderTexture || texture.source !== null)) {
+                gl.generateMipmap(gl.TEXTURE_2D);
+            }
+            state.version = version;
+            state.width = texture.width;
+            state.height = texture.height;
         }
-        const loopIndexCount = sourceCount + 1;
-        const generatedIndices = this._ensureGeneratedIndexCapacity(loopIndexCount);
-        generatedIndices.set(sourceIndices.subarray(0, sourceCount), 0);
-        generatedIndices[sourceCount] = sourceIndices[0];
+        return state;
+    }
+    _toClipPixels(bounds) {
+        const topLeft = this._renderTarget.mapCoordsToPixel(this._clipPointA.set(bounds.left, bounds.top));
+        const bottomRight = this._renderTarget.mapCoordsToPixel(this._clipPointB.set(bounds.right, bounds.bottom));
+        const minX = Math.min(topLeft.x, bottomRight.x);
+        const maxX = Math.max(topLeft.x, bottomRight.x);
+        const minY = Math.min(topLeft.y, bottomRight.y);
+        const maxY = Math.max(topLeft.y, bottomRight.y);
+        const targetWidth = this._renderTarget.width;
+        const targetHeight = this._renderTarget.height;
+        const x = Math.max(0, Math.min(targetWidth, Math.floor(minX)));
+        const right = Math.max(0, Math.min(targetWidth, Math.ceil(maxX)));
+        const yTop = Math.max(0, Math.min(targetHeight, Math.floor(minY)));
+        const bottom = Math.max(0, Math.min(targetHeight, Math.ceil(maxY)));
+        const width = Math.max(0, right - x);
+        const height = Math.max(0, bottom - yTop);
+        const y = Math.max(0, targetHeight - bottom);
         return {
-            topology: 'line-strip',
-            usesStripIndex: true,
-            vertexCount,
-            indices: generatedIndices,
-            indexCount: loopIndexCount,
+            x,
+            y,
+            width,
+            height,
         };
     }
-    _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];
-        }
+    _intersectClips(first, second) {
+        const left = Math.max(first.x, second.x);
+        const bottom = Math.max(first.y, second.y);
+        const right = Math.min(first.x + first.width, second.x + second.width);
+        const top = Math.min(first.y + first.height, second.y + second.height);
         return {
-            topology: 'triangle-list',
-            usesStripIndex: false,
-            vertexCount,
-            indices: generatedIndices,
-            indexCount,
+            x: left,
+            y: bottom,
+            width: Math.max(0, right - left),
+            height: Math.max(0, top - bottom),
         };
     }
-    _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);
+    _applyClipState() {
+        const gl = this._context;
+        if (this._clipPixelStack.length === 0) {
+            gl.disable(gl.SCISSOR_TEST);
+            return;
+        }
+        const clip = this._clipPixelStack[this._clipPixelStack.length - 1];
+        gl.enable(gl.SCISSOR_TEST);
+        gl.scissor(clip.x, clip.y, clip.width, clip.height);
+    }
+}
+
+/// <reference types="@webgpu/types" />
+/**
+ * Base class for WebGPU renderers.
+ *
+ * Manages the connect/disconnect lifecycle and provides a safe
+ * `getBackend()` accessor that throws if the renderer is not connected.
+ *
+ * Subclasses must implement:
+ * - onConnect(backend): set up GPU resources (shader modules, pipelines, buffers)
+ * - onDisconnect(): tear down GPU resources
+ * - render(drawable): collect draw call data for the given drawable
+ * - flush(): encode and submit command buffers for all collected draw calls
+ */
+class AbstractWebGpuRenderer {
+    backendType = RenderBackendType.WebGpu;
+    _backend = null;
+    connect(backend) {
+        if (this._backend !== null) {
+            return;
         }
-        for (let index = 0; index < vertexCount; index++) {
-            this._sequentialIndexData[index] = index;
+        if (backend.backendType !== RenderBackendType.WebGpu) {
+            throw new Error(`${this.constructor.name} requires a WebGPU backend, `
+                + `but received backendType ${String(backend.backendType)}.`);
         }
-        return this._sequentialIndexData.subarray(0, vertexCount);
+        this._backend = backend;
+        this.onConnect(backend);
     }
-    _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);
+    disconnect() {
+        if (this._backend === null) {
+            return;
+        }
+        this.flush();
+        this.onDisconnect();
+        this._backend = null;
+    }
+    getBackend() {
+        if (this._backend === null) {
+            throw new Error(`${this.constructor.name} is not connected to a backend.`);
         }
-        return this._generatedIndexData.subarray(0, indexCount);
+        return this._backend;
     }
-    _destroyBuffers() {
-        this._vertexBuffer?.destroy();
-        this._indexBuffer?.destroy();
-        this._vertexBuffer = null;
-        this._indexBuffer = null;
-        this._vertexBufferCapacity = 0;
-        this._indexBufferCapacity = 0;
+    getBackendOrNull() {
+        return this._backend;
+    }
+}
+
+/// <reference types="@webgpu/types" />
+/**
+ * Returns the GPUBlendState for a given ExoJS blend mode.
+ * Shared by all WebGPU renderers to avoid duplication.
+ */
+function getWebGpuBlendState(blendMode) {
+    switch (blendMode) {
+        case BlendModes.Additive:
+            return {
+                color: {
+                    operation: 'add',
+                    srcFactor: 'one',
+                    dstFactor: 'one',
+                },
+                alpha: {
+                    operation: 'add',
+                    srcFactor: 'one',
+                    dstFactor: 'one',
+                },
+            };
+        case BlendModes.Subtract:
+            return {
+                color: {
+                    operation: 'add',
+                    srcFactor: 'zero',
+                    dstFactor: 'one-minus-src',
+                },
+                alpha: {
+                    operation: 'add',
+                    srcFactor: 'zero',
+                    dstFactor: 'one-minus-src-alpha',
+                },
+            };
+        case BlendModes.Multiply:
+            return {
+                color: {
+                    operation: 'add',
+                    srcFactor: 'dst',
+                    dstFactor: 'one-minus-src-alpha',
+                },
+                alpha: {
+                    operation: 'add',
+                    srcFactor: 'dst-alpha',
+                    dstFactor: 'one-minus-src-alpha',
+                },
+            };
+        case BlendModes.Screen:
+            return {
+                color: {
+                    operation: 'add',
+                    srcFactor: 'one',
+                    dstFactor: 'one-minus-src',
+                },
+                alpha: {
+                    operation: 'add',
+                    srcFactor: 'one',
+                    dstFactor: 'one-minus-src-alpha',
+                },
+            };
+        default:
+            return {
+                color: {
+                    operation: 'add',
+                    srcFactor: 'one',
+                    dstFactor: 'one-minus-src-alpha',
+                },
+                alpha: {
+                    operation: 'add',
+                    srcFactor: 'one',
+                    dstFactor: 'one-minus-src-alpha',
+                },
+            };
     }
 }
 
@@ -10746,8 +10020,7 @@ class WebGpuMaskCompositor {
     }
     _writeProjectionMatrix(viewMatrix) {
         // Pack the 3x3 affine view matrix into a 4x4 column-major mat4x4
-        // for WGSL, mirroring the layout used by WebGpuPrimitiveRenderer
-        // (see `_writeShapeVertices` in that file for the rationale).
+        // for WGSL.
         const m = this._projectionMatrix.copy(viewMatrix);
         const data = this._projectionData;
         // col 0
@@ -10814,7 +10087,6 @@ class WebGpuBackend {
         if (clearColor) {
             this._clearColor.copy(clearColor);
         }
-        this.rendererRegistry.registerRenderer(DrawableShape, new WebGpuPrimitiveRenderer());
         this.rendererRegistry.registerRenderer(Sprite, new WebGpuSpriteRenderer());
         this.rendererRegistry.registerRenderer(Mesh, new WebGpuMeshRenderer());
         this.rendererRegistry.registerRenderer(ParticleSystem, new WebGpuParticleRenderer());
@@ -14815,7 +14087,6 @@ const defaultAppSettings = {
     debug: false,
     spriteRendererBatchSize: 4096, // ~ 262kb
     particleRendererBatchSize: 8192, // ~ 1.18mb
-    primitiveRendererBatchSize: 65536, // ~ 786kb
     gamepadDefinitions: [],
     pointerDistanceThreshold: 10,
     webglAttributes: {
@@ -16347,24 +15618,30 @@ function signedArea(data, start, end, dim) {
     return sum;
 }
 
-const buildLine = (startX, startY, endX, endY, width, vertices = [], indices = []) => {
+const buildLine = (startX, startY, endX, endY, width) => {
     const points = [startX, startY, endX, endY];
     const distance = width / 2;
-    const index = vertices.length / 6;
     const perpA = new Vector(startX - endX, startY - endY).perp().normalize().multiply(distance);
     const perpB = new Vector(endX - startX, endY - startY).perp().normalize().multiply(distance);
-    vertices.push(startX - perpA.x, startY - perpA.y);
-    vertices.push(startX + perpA.x, startY + perpA.y);
-    vertices.push(endX - perpB.x, endY - perpB.y);
-    vertices.push(endX + perpB.x, endY + perpB.y);
-    indices.push(index, index, index + 1, index + 2, index + 3, index + 3);
-    return new Geometry({ vertices, indices, points });
+    const vertices = new Float32Array([
+        startX - perpA.x, startY - perpA.y, // 0: start-left
+        startX + perpA.x, startY + perpA.y, // 1: start-right
+        endX - perpB.x, endY - perpB.y, // 2: end-left
+        endX + perpB.x, endY + perpB.y, // 3: end-right
+    ]);
+    perpA.destroy();
+    perpB.destroy();
+    const indices = new Uint16Array([0, 1, 3, 0, 3, 2]);
+    return { vertices, indices, points };
 };
-const buildPath = (points, width, vertices = [], indices = []) => {
+const buildPath = (points, width) => {
     if (points.length < 4) {
         throw new Error('At least two X/Y pairs are required to build a line.');
     }
-    const lineWidth = width / 2, firstPoint = new Vector(points[0], points[1]), lastPoint = new Vector(points[points.length - 2], points[points.length - 1]);
+    const lineWidth = width / 2;
+    const firstPoint = new Vector(points[0], points[1]);
+    const lastPoint = new Vector(points[points.length - 2], points[points.length - 1]);
+    const outlinePoints = points;
     if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y) {
         points = points.slice();
         points.pop();
@@ -16375,9 +15652,10 @@ const buildPath = (points, width, vertices = [], indices = []) => {
         points.unshift(midPointX, midPointY);
         points.push(midPointX, midPointY);
     }
+    firstPoint.destroy();
+    lastPoint.destroy();
     const length = points.length / 2;
-    let indexCount = points.length;
-    let indexStart = vertices.length / 6;
+    const stripVertices = [];
     let p1x = points[0];
     let p1y = points[1];
     let p2x = points[2];
@@ -16395,8 +15673,8 @@ const buildPath = (points, width, vertices = [], indices = []) => {
     perpy /= dist;
     perpx *= lineWidth;
     perpy *= lineWidth;
-    vertices.push(p1x - perpx, p1y - perpy);
-    vertices.push(p1x + perpx, p1y + perpy);
+    stripVertices.push(p1x - perpx, p1y - perpy);
+    stripVertices.push(p1x + perpx, p1y + perpy);
     for (let i = 1; i < length - 1; i++) {
         p1x = points[(i - 1) * 2];
         p1y = points[((i - 1) * 2) + 1];
@@ -16427,8 +15705,8 @@ const buildPath = (points, width, vertices = [], indices = []) => {
         let denom = (a1 * b2) - (a2 * b1);
         if (Math.abs(denom) < 0.1) {
             denom += 10.1;
-            vertices.push(p2x - perpx, p2y - perpy);
-            vertices.push(p2x + perpx, p2y + perpy);
+            stripVertices.push(p2x - perpx, p2y - perpy);
+            stripVertices.push(p2x + perpx, p2y + perpy);
             continue;
         }
         const px = ((b1 * c2) - (b2 * c1)) / denom;
@@ -16442,14 +15720,13 @@ const buildPath = (points, width, vertices = [], indices = []) => {
             perp3y /= dist;
             perp3x *= lineWidth;
             perp3y *= lineWidth;
-            vertices.push(p2x - perp3x, p2y - perp3y);
-            vertices.push(p2x + perp3x, p2y + perp3y);
-            vertices.push(p2x - perp3x, p2y - perp3y);
-            indexCount++;
+            stripVertices.push(p2x - perp3x, p2y - perp3y);
+            stripVertices.push(p2x + perp3x, p2y + perp3y);
+            stripVertices.push(p2x - perp3x, p2y - perp3y);
         }
         else {
-            vertices.push(px, py);
-            vertices.push(p2x - (px - p2x), p2y - (py - p2y));
+            stripVertices.push(px, py);
+            stripVertices.push(p2x - (px - p2x), p2y - (py - p2y));
         }
     }
     p1x = points[(length - 2) * 2];
@@ -16463,70 +15740,112 @@ const buildPath = (points, width, vertices = [], indices = []) => {
     perpy /= dist;
     perpx *= lineWidth;
     perpy *= lineWidth;
-    vertices.push(p2x - perpx, p2y - perpy);
-    vertices.push(p2x + perpx, p2y + perpy);
-    indices.push(indexStart);
-    for (let i = 0; i < indexCount; i++) {
-        indices.push(indexStart++);
-    }
-    indices.push(indexStart - 1);
-    return new Geometry({ vertices, indices, points });
+    stripVertices.push(p2x - perpx, p2y - perpy);
+    stripVertices.push(p2x + perpx, p2y + perpy);
+    // Convert strip-style vertex sequence to triangle-list indices.
+    // For N strip vertices (N = stripVertices.length / 2), each i in [0, N-3]
+    // produces a triangle. Even i: (i, i+1, i+2). Odd i: (i+1, i, i+2).
+    // This preserves the same winding the original triangle-strip pipeline saw.
+    const stripVertexCount = stripVertices.length / 2;
+    const vertices = new Float32Array(stripVertices);
+    const triangleCount = stripVertexCount >= 3 ? stripVertexCount - 2 : 0;
+    const indices = new Uint16Array(triangleCount * 3);
+    for (let i = 0; i < triangleCount; i++) {
+        const base = i * 3;
+        if ((i & 1) === 0) {
+            indices[base] = i;
+            indices[base + 1] = i + 1;
+            indices[base + 2] = i + 2;
+        }
+        else {
+            indices[base] = i + 1;
+            indices[base + 1] = i;
+            indices[base + 2] = i + 2;
+        }
+    }
+    return { vertices, indices, points: outlinePoints };
 };
-const buildCircle = (centerX, centerY, radius, vertices = [], indices = []) => {
-    const length = Math.floor(15 * Math.sqrt(radius + radius)), segment = (Math.PI * 2) / length, points = [];
-    let index = vertices.length / 6;
-    indices.push(index);
-    for (let i = 0; i < length + 1; i++) {
-        const segmentX = centerX + (Math.sin(segment * i) * radius), segmentY = centerY + (Math.cos(segment * i) * radius);
+const buildCircle = (centerX, centerY, radius) => {
+    const length = Math.floor(15 * Math.sqrt(radius + radius));
+    const segment = (Math.PI * 2) / length;
+    const points = [];
+    // 1 center vertex + N perimeter vertices.
+    const vertices = new Float32Array((length + 1) * 2);
+    vertices[0] = centerX;
+    vertices[1] = centerY;
+    for (let i = 0; i < length; i++) {
+        const segmentX = centerX + (Math.sin(segment * i) * radius);
+        const segmentY = centerY + (Math.cos(segment * i) * radius);
         points.push(segmentX, segmentY);
-        vertices.push(centerX, centerY);
-        vertices.push(segmentX, segmentY);
-        indices.push(index++, index++);
+        const offset = (i + 1) * 2;
+        vertices[offset] = segmentX;
+        vertices[offset + 1] = segmentY;
+    }
+    const indices = new Uint16Array(length * 3);
+    for (let i = 0; i < length; i++) {
+        const base = i * 3;
+        indices[base] = 0;
+        indices[base + 1] = i + 1;
+        indices[base + 2] = i + 2 > length ? 1 : i + 2;
     }
-    indices.push(index - 1);
-    return new Geometry({ vertices, indices, points });
+    return { vertices, indices, points };
 };
-const buildEllipse = (centerX, centerY, radiusX, radiusY, vertices = [], indices = []) => {
-    const length = Math.floor(15 * Math.sqrt(radiusX + radiusY)), segment = (Math.PI * 2) / length, points = [];
-    let index = vertices.length / 6;
-    indices.push(index);
-    for (let i = 0; i < length + 1; i++) {
-        const segmentX = centerX + (Math.sin(segment * i) * radiusX), segmentY = centerY + (Math.cos(segment * i) * radiusY);
+const buildEllipse = (centerX, centerY, radiusX, radiusY) => {
+    const length = Math.floor(15 * Math.sqrt(radiusX + radiusY));
+    const segment = (Math.PI * 2) / length;
+    const points = [];
+    const vertices = new Float32Array((length + 1) * 2);
+    vertices[0] = centerX;
+    vertices[1] = centerY;
+    for (let i = 0; i < length; i++) {
+        const segmentX = centerX + (Math.sin(segment * i) * radiusX);
+        const segmentY = centerY + (Math.cos(segment * i) * radiusY);
         points.push(segmentX, segmentY);
-        vertices.push(centerX, centerY);
-        vertices.push(segmentX, segmentY);
-        indices.push(index++, index++);
+        const offset = (i + 1) * 2;
+        vertices[offset] = segmentX;
+        vertices[offset + 1] = segmentY;
+    }
+    const indices = new Uint16Array(length * 3);
+    for (let i = 0; i < length; i++) {
+        const base = i * 3;
+        indices[base] = 0;
+        indices[base + 1] = i + 1;
+        indices[base + 2] = i + 2 > length ? 1 : i + 2;
     }
-    indices.push(index - 1);
-    return new Geometry({ vertices, indices, points });
+    return { vertices, indices, points };
 };
-const buildPolygon = (points, vertices = [], indices = []) => {
+const buildPolygon = (points) => {
     if (points.length < 6) {
         throw new Error('At least three X/Y pairs are required to build a polygon.');
     }
-    const index = vertices.length / 6, length = points.length / 2, triangles = earcut(points, [], 2);
-    if (triangles) {
-        for (let i = 0; i < triangles.length; i += 3) {
-            indices.push(triangles[i] + index);
-            indices.push(triangles[i] + index);
-            indices.push(triangles[i + 1] + index);
-            indices.push(triangles[i + 2] + index);
-            indices.push(triangles[i + 2] + index);
-        }
-        for (let i = 0; i < length; i++) {
-            vertices.push(points[i * 2], points[(i * 2) + 1]);
-        }
+    const length = points.length / 2;
+    const triangles = earcut(points, [], 2);
+    const vertices = new Float32Array(points.length);
+    for (let i = 0; i < length; i++) {
+        vertices[i * 2] = points[i * 2];
+        vertices[(i * 2) + 1] = points[(i * 2) + 1];
     }
-    return new Geometry({ vertices, indices, points });
+    const indices = triangles ? new Uint16Array(triangles) : new Uint16Array(0);
+    return { vertices, indices, points };
 };
-const buildRectangle = (x, y, width, height, vertices = [], indices = []) => {
-    const points = [x, y, x + width, y, x, y + height, x + width, y + height], index = vertices.length / 6;
-    vertices.push(...points);
-    indices.push(index, index, index + 1, index + 2, index + 3, index + 3);
-    return new Geometry({ vertices, indices, points });
+const buildRectangle = (x, y, width, height) => {
+    // 4 vertices: TL, TR, BL, BR. Triangles [0, 1, 2,  1, 3, 2] (clockwise).
+    const vertices = new Float32Array([
+        x, y, // 0 TL
+        x + width, y, // 1 TR
+        x, y + height, // 2 BL
+        x + width, y + height, // 3 BR
+    ]);
+    const indices = new Uint16Array([0, 1, 2, 1, 3, 2]);
+    // Outline points walk the perimeter (TL -> TR -> BR -> BL).
+    const points = [x, y, x + width, y, x + width, y + height, x, y + height];
+    return { vertices, indices, points };
 };
 const buildStar = (centerX, centerY, points, radius, innerRadius = radius / 2, rotation = 0) => {
-    const startAngle = (Math.PI / -2) + rotation, length = points * 2, delta = tau / length, path = [];
+    const startAngle = (Math.PI / -2) + rotation;
+    const length = points * 2;
+    const delta = tau / length;
+    const path = [];
     for (let i = 0; i < length; i++) {
         const angle = startAngle + (i * delta);
         const rad = i % 2 ? innerRadius : radius;
@@ -17369,23 +16688,6 @@ class UniversalEmitter {
     }
 }
 
-class CircleGeometry extends Geometry {
-    constructor(centerX, centerY, radius) {
-        const length = Math.floor(15 * Math.sqrt(radius + radius)), segment = (Math.PI * 2) / length, vertices = [], indices = [], points = [];
-        let index = vertices.length / 6;
-        indices.push(index);
-        for (let i = 0; i < length + 1; i++) {
-            const segmentX = centerX + (Math.sin(segment * i) * radius), segmentY = centerY + (Math.cos(segment * i) * radius);
-            points.push(segmentX, segmentY);
-            vertices.push(centerX, centerY);
-            vertices.push(segmentX, segmentY);
-            indices.push(index++, index++);
-        }
-        indices.push(index - 1);
-        super({ vertices, indices, points });
-    }
-}
-
 class Graphics extends Container {
     _lineWidth = 0;
     _lineColor = new Color();
@@ -17416,14 +16718,14 @@ class Graphics extends Container {
         return super.getChildAt(index);
     }
     addChild(child) {
-        if (!(child instanceof DrawableShape)) {
-            throw new Error('Graphics can only contain DrawableShape children.');
+        if (!(child instanceof Mesh)) {
+            throw new Error('Graphics can only contain Mesh children.');
         }
         return super.addChild(child);
     }
     addChildAt(child, index) {
-        if (!(child instanceof DrawableShape)) {
-            throw new Error('Graphics can only contain DrawableShape children.');
+        if (!(child instanceof Mesh)) {
+            throw new Error('Graphics can only contain Mesh children.');
         }
         return super.addChildAt(child, index);
     }
@@ -17519,50 +16821,52 @@ class Graphics extends Container {
         return this;
     }
     drawLine(startX, startY, endX, endY) {
-        this.addChild(new DrawableShape(buildLine(startX, startY, endX, endY, this._lineWidth), this._lineColor, RenderingPrimitives.TriangleStrip));
+        const data = buildLine(startX, startY, endX, endY, this._lineWidth);
+        this.addChild(this._createMesh(data, this._lineColor));
         return this;
     }
     drawPath(path) {
-        this.addChild(new DrawableShape(buildPath(path, this._lineWidth), this._lineColor, RenderingPrimitives.TriangleStrip));
+        const data = buildPath(path, this._lineWidth);
+        this.addChild(this._createMesh(data, this._lineColor));
         return this;
     }
     drawPolygon(path) {
-        const polygon = buildPolygon(path);
-        this.addChild(new DrawableShape(polygon, this._fillColor, RenderingPrimitives.TriangleStrip));
+        const data = buildPolygon(path);
+        this.addChild(this._createMesh(data, this._fillColor));
         if (this._lineWidth > 0) {
-            this.drawPath(polygon.points);
+            this.drawPath(data.points);
         }
         return this;
     }
     drawCircle(centerX, centerY, radius) {
-        const circle = new CircleGeometry(centerX, centerY, radius);
-        this.addChild(new DrawableShape(circle, this._fillColor, RenderingPrimitives.TriangleStrip));
+        const data = buildCircle(centerX, centerY, radius);
+        this.addChild(this._createMesh(data, this._fillColor));
         if (this._lineWidth > 0) {
-            this.drawPath(circle.points);
+            this.drawPath(data.points);
         }
         return this;
     }
     drawEllipse(centerX, centerY, radiusX, radiusY) {
-        const ellipse = buildEllipse(centerX, centerY, radiusX, radiusY);
-        this.addChild(new DrawableShape(ellipse, this._fillColor, RenderingPrimitives.TriangleStrip));
+        const data = buildEllipse(centerX, centerY, radiusX, radiusY);
+        this.addChild(this._createMesh(data, this._fillColor));
         if (this._lineWidth > 0) {
-            this.drawPath(ellipse.points);
+            this.drawPath(data.points);
         }
         return this;
     }
     drawRectangle(x, y, width, height) {
-        const rectangle = buildRectangle(x, y, width, height);
-        this.addChild(new DrawableShape(rectangle, this._fillColor, RenderingPrimitives.TriangleStrip));
+        const data = buildRectangle(x, y, width, height);
+        this.addChild(this._createMesh(data, this._fillColor));
         if (this._lineWidth > 0) {
-            this.drawPath(rectangle.points);
+            this.drawPath(data.points);
         }
         return this;
     }
     drawStar(centerX, centerY, points, radius, innerRadius = radius / 2, rotation = 0) {
-        const star = buildStar(centerX, centerY, points, radius, innerRadius, rotation);
-        this.addChild(new DrawableShape(star, this._fillColor, RenderingPrimitives.TriangleStrip));
+        const data = buildStar(centerX, centerY, points, radius, innerRadius, rotation);
+        this.addChild(this._createMesh(data, this._fillColor));
         if (this._lineWidth > 0) {
-            this.drawPath(star.points);
+            this.drawPath(data.points);
         }
         return this;
     }
@@ -17581,6 +16885,14 @@ class Graphics extends Container {
         this._fillColor.destroy();
         this._currentPoint.destroy();
     }
+    _createMesh(data, color) {
+        const mesh = new Mesh({
+            vertices: data.vertices,
+            indices: data.indices,
+        });
+        mesh.tint = color;
+        return mesh;
+    }
 }
 
 class Spritesheet {
@@ -19197,5 +18509,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, Capabilities, 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 };
+export { AbstractAssetFactory, AbstractMedia, AbstractWebGl2BatchedRenderer, AbstractWebGl2Renderer, AbstractWebGpuRenderer, AnimatedSprite, Application, ApplicationStatus, ArcadeStickGamepadMapping, AudioAnalyser, BinaryFactory, BlendModes, BlurFilter, Bounds, BufferTypes, BufferUsage, BundleLoadError, CacheFirstStrategy, CallbackRenderPass, Capabilities, ChannelOffset, ChannelSize, Circle, Clock, CollisionType, Color, ColorAffector, ColorFilter, Container, Drawable, Ellipse, FactoryRegistry, Filter, Flags, FontFactory, ForceAffector, GameCubeGamepadMapping, Gamepad, GamepadChannel, GamepadControl, GamepadMapping, GamepadMappingFamily, GamepadPromptLayouts, GenericDualAnalogGamepadMapping, 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, WebGl2RenderBuffer, WebGl2ShaderBlock, WebGl2SpriteRenderer, WebGl2VertexArrayObject, WebGpuBackend, WebGpuMeshRenderer, WebGpuParticleRenderer, 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