@codexo/exojs 0.4.0 → 0.6.1

package/dist/esm/rendering/webgl2/WebGl2MaskCompositor.js

@@ -0,0 +1,186 @@
+import { Shader } from '../shader/Shader.js';
+import { createWebGl2ShaderProgram } from './WebGl2ShaderProgram.js';
+import { WebGl2VertexArrayObject } from './WebGl2VertexArrayObject.js';
+import { WebGl2RenderBuffer } from './WebGl2RenderBuffer.js';
+import { BufferTypes, BufferUsage } from '../types.js';
+import vertexSource from './glsl/mask-compose.vert.js';
+import fragmentSource from './glsl/mask-compose.frag.js';
+
+// 4 floats per vertex: position(x, y) + texcoord(u, v).
+const vertexStrideBytes = 16;
+const quadIndices = 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);
+    _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, 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, 0)
+            .addAttribute(vertexBuffer, this._shader.getAttribute('a_texcoord'), gl.FLOAT, false, vertexStrideBytes, 8)
+            .connect(this._createVaoRuntime(gl, vaoHandle));
+        this._connection = { gl, vaoHandle, vao, indexBuffer, vertexBuffer, bufferHandles };
+    }
+    disconnect() {
+        const connection = this._connection;
+        if (connection === null) {
+            return;
+        }
+        connection.indexBuffer.destroy();
+        connection.vertexBuffer.destroy();
+        connection.vao.destroy();
+        this._shader.disconnect();
+        this._connection = null;
+    }
+    compose(backend, content, mask, x, y, width, height, blendMode) {
+        const connection = this._connection;
+        if (connection === null) {
+            throw new Error('WebGl2MaskCompositor: not connected.');
+        }
+        // Update the quad vertices for this destination rect. UVs are 0..1
+        // mapped over (left, top) → (right, bottom) with an explicit Y-flip
+        // for render-texture sampling: the mask path samples textures
+        // already authored as RGBA in render-texture orientation.
+        this._writeQuadVertices(x, y, x + width, y + height);
+        // Bind the compositor program. Setting projection + sampler uniforms
+        // each call because they need to match the current render target.
+        backend.bindShader(this._shader);
+        const view = backend.view;
+        const projection = view.getTransform().toArray(false);
+        this._shader.getUniform('u_projection').setValue(projection);
+        this._shader.getUniform('u_content').setValue(this._contentSamplerSlot);
+        this._shader.getUniform('u_mask').setValue(this._maskSamplerSlot);
+        this._shader.sync();
+        backend.bindTexture(content, 0);
+        backend.bindTexture(mask, 1);
+        backend.setBlendMode(blendMode);
+        backend.bindVertexArrayObject(connection.vao);
+        connection.vertexBuffer.upload(this._float32View);
+        connection.vao.draw(6, 0);
+        backend.stats.batches++;
+        backend.stats.drawCalls++;
+        // Reset the active texture unit to 0 to avoid leaking unit 1 into
+        // subsequent renderer state.
+        backend.bindTexture(null, 1);
+    }
+    _writeQuadVertices(left, top, right, bottom) {
+        const view = this._float32View;
+        // Vertex 0: top-left (UV 0, 0)
+        view[0] = left;
+        view[1] = top;
+        view[2] = 0;
+        view[3] = 0;
+        // Vertex 1: top-right (UV 1, 0)
+        view[4] = right;
+        view[5] = top;
+        view[6] = 1;
+        view[7] = 0;
+        // Vertex 2: bottom-right (UV 1, 1)
+        view[8] = right;
+        view[9] = bottom;
+        view[10] = 1;
+        view[11] = 1;
+        // Vertex 3: bottom-left (UV 0, 1)
+        view[12] = left;
+        view[13] = bottom;
+        view[14] = 0;
+        view[15] = 1;
+    }
+    _createBufferRuntime(gl, handles) {
+        const handle = gl.createBuffer();
+        if (handle === null) {
+            throw new Error('WebGl2MaskCompositor: could not create render buffer.');
+        }
+        return {
+            bind: (buffer) => {
+                gl.bindBuffer(buffer.type, handle);
+            },
+            upload: (buffer) => {
+                const data = buffer.data;
+                gl.bindBuffer(buffer.type, handle);
+                gl.bufferData(buffer.type, data, buffer.usage);
+                handles.set(buffer, handle);
+            },
+            destroy: (buffer) => {
+                gl.deleteBuffer(handle);
+                handles.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();
+            },
+        };
+    }
+}
+
+export { WebGl2MaskCompositor };
+//# sourceMappingURL=WebGl2MaskCompositor.js.map

package/dist/esm/rendering/webgl2/WebGl2MaskCompositor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebGl2MaskCompositor.js","sources":["../../../../../src/rendering/webgl2/WebGl2MaskCompositor.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/esm/rendering/webgl2/WebGl2ParticleRenderer.d.ts

@@ -1,11 +1,42 @@
-import type { WebGl2RenderBuffer } from './WebGl2RenderBuffer';
-import { WebGl2VertexArrayObject } from './WebGl2VertexArrayObject';
+import { AbstractWebGl2Renderer } from './AbstractWebGl2Renderer';
 import type { ParticleSystem } from '@/particles/ParticleSystem';
-import { AbstractWebGl2BatchedRenderer } from './AbstractWebGl2BatchedRenderer';
-import type { View } from '../View';
-export declare class WebGl2ParticleRenderer extends AbstractWebGl2BatchedRenderer {
+import type { WebGl2Backend } from './WebGl2Backend';
+export declare class WebGl2ParticleRenderer extends AbstractWebGl2Renderer<ParticleSystem> {
+    private readonly _shader;
+    private readonly _batchSize;
+    private readonly _instanceData;
+    private readonly _instanceFloat32;
+    private readonly _instanceUint32;
+    private _instanceCount;
+    private _currentTexture;
+    private _currentBlendMode;
+    private _currentView;
+    private _currentViewId;
+    private _instanceBuffer;
+    private _indexBuffer;
+    private _vao;
+    private _connection;
     constructor(batchSize: number);
     render(system: ParticleSystem): this;
-    protected createVao(gl: WebGL2RenderingContext, indexBuffer: WebGl2RenderBuffer, vertexBuffer: WebGl2RenderBuffer): WebGl2VertexArrayObject;
-    protected updateView(view: View): this;
+    flush(): void;
+    protected onConnect(backend: WebGl2Backend): void;
+    protected onDisconnect(): void;
+    destroy(): void;
+    /**
+     * Convert the system's per-corner packed-u32 texCoords into the
+     * (uMin, vMin, uMax, vMax) bounds the new vertex shader expects.
+     * Already accounts for flipY (the system's `texCoords` baked it in).
+     *
+     * The four packed u32s, by corner index, are:
+     *   [0] TL = (uMin/uMax | vMin/vMax depending on flipY)
+     *   [1] TR
+     *   [2] BR
+     *   [3] BL
+     * We need (uMin, vMin, uMax, vMax) — the corner-extreme values.
+     */
+    private _uvBoundsScratch;
+    private _unpackUvBounds;
+    private _createConnection;
+    private _createBufferRuntime;
+    private _createVaoRuntime;
 }

package/dist/esm/rendering/webgl2/WebGl2ParticleRenderer.js

@@ -1,108 +1,299 @@
+import { AbstractWebGl2Renderer } from './AbstractWebGl2Renderer.js';
+import { Shader } from '../shader/Shader.js';
+import { createWebGl2ShaderProgram } from './WebGl2ShaderProgram.js';
+import { WebGl2RenderBuffer } from './WebGl2RenderBuffer.js';
 import { WebGl2VertexArrayObject } from './WebGl2VertexArrayObject.js';
+import { RenderingPrimitives, BufferTypes, BufferUsage } from '../types.js';
 import vertexSource from './glsl/particle.vert.js';
 import fragmentSource from './glsl/particle.frag.js';
-import { AbstractWebGl2BatchedRenderer } from './AbstractWebGl2BatchedRenderer.js';
 
-class WebGl2ParticleRenderer extends AbstractWebGl2BatchedRenderer {
+/**
+ * Instanced particle renderer for WebGL2.
+ *
+ * One ParticleSystem = one batch. Each `render(system)` flushes any
+ * pending batch, sets the system-level uniforms (transform, local
+ * bounds, UV bounds, texture), and packs every active particle into
+ * the per-instance buffer. The next `flush()` issues a single
+ * `drawElementsInstanced` for that system.
+ *
+ * Per-instance layout (24 bytes per particle, 4 attributes):
+ * ```
+ *   translation  f32x2  (offset  0,  8 bytes)  particle position (system-local)
+ *   scale        f32x2  (offset  8,  8 bytes)
+ *   rotation     f32    (offset 16,  4 bytes)  degrees
+ *   color        u8x4   (offset 20,  4 bytes)  RGBA tint, normalised
+ * ```
+ *
+ * vs the previous per-vertex layout (36 bytes per vertex × 4 verts =
+ * 144 bytes per particle), this is an 83% bandwidth reduction and
+ * roughly 80% fewer CPU writes per particle (one pack call vs four
+ * duplicated vertex writes plus per-corner UV coords).
+ *
+ * The system transform stays as a uniform — mixing systems in one
+ * batch would require either a per-instance transform matrix (more
+ * bandwidth) or per-particle texture-slot indexing (multi-texture
+ * support similar to the sprite renderer). Both are follow-ups; the
+ * current pattern keeps the renderer focused on the per-particle win.
+ */
+const instanceStrideBytes = 24;
+const wordsPerInstance = instanceStrideBytes / Uint32Array.BYTES_PER_ELEMENT;
+const indicesPerQuad = 6;
+const quadIndices = new Uint16Array([0, 1, 2, 0, 2, 3]);
+class WebGl2ParticleRenderer extends AbstractWebGl2Renderer {
+    _shader;
+    _batchSize;
+    _instanceData;
+    _instanceFloat32;
+    _instanceUint32;
+    _instanceCount = 0;
+    _currentTexture = null;
+    _currentBlendMode = null;
+    _currentView = null;
+    _currentViewId = -1;
+    _instanceBuffer = null;
+    _indexBuffer = null;
+    _vao = null;
+    _connection = null;
     constructor(batchSize) {
-        /**
-         * 4 x 9 Attributes:
-         * 2 = vertexPos     (x, y) +
-         * 1 = texCoord (packed uv) +
-         * 2 = position      (x, y) +
-         * 2 = scale         (x, y) +
-         * 1 = rotation      (x, y) +
-         * 1 = color         (ARGB int)
-         */
-        super(batchSize, 36, vertexSource, fragmentSource);
+        super();
+        this._batchSize = batchSize;
+        this._shader = new Shader(vertexSource, fragmentSource);
+        this._instanceData = new ArrayBuffer(batchSize * instanceStrideBytes);
+        this._instanceFloat32 = new Float32Array(this._instanceData);
+        this._instanceUint32 = new Uint32Array(this._instanceData);
     }
     render(system) {
-        const { texture, vertices, texCoords, particles, blendMode } = system;
-        const textureChanged = (texture !== this.currentTexture);
-        const blendModeChanged = (blendMode !== this.currentBlendMode);
-        const float32View = this.float32View;
-        const uint32View = this.uint32View;
-        const runtime = this.getRuntime();
-        // System transform is a uniform, so mixing systems in one batch is invalid.
+        const backend = this.getBackend();
+        const { texture, particles, blendMode } = system;
+        const textureChanged = texture !== this._currentTexture;
+        const blendModeChanged = blendMode !== this._currentBlendMode;
+        // System transform / texture / UV / local-bounds are uniforms, so
+        // mixing systems in one batch is invalid. Flush any prior system
+        // before setting up this one.
         this.flush();
-        if (textureChanged || blendModeChanged) {
-            if (textureChanged) {
-                this.currentTexture = texture;
-            }
-            if (blendModeChanged) {
-                this.currentBlendMode = blendMode;
-                runtime.setBlendMode(blendMode);
-            }
-        }
         if (textureChanged) {
-            runtime.bindTexture(texture);
+            this._currentTexture = texture;
+            backend.bindTexture(texture);
+        }
+        if (blendModeChanged) {
+            this._currentBlendMode = blendMode;
+            backend.setBlendMode(blendMode);
         }
-        this.shader
-            .getUniform('u_translation')
+        // System-level uniforms are set before packing so the eventual
+        // flush() can sync them in one go.
+        const localBounds = system.vertices;
+        const uvBounds = this._unpackUvBounds(system);
+        this._shader
+            .getUniform('u_systemTransform')
             .setValue(system.getGlobalTransform().toArray(false));
-        for (const particle of particles) {
-            if (this.batchIndex >= this.batchSize) {
-                this.flush();
-            }
-            const { position, scale, rotation, tint } = particle;
-            const index = (this.batchIndex * this.attributeCount);
-            float32View[index + 0] = float32View[index + 27] = vertices[0];
-            float32View[index + 1] = float32View[index + 10] = vertices[1];
-            float32View[index + 9] = float32View[index + 18] = vertices[2];
-            float32View[index + 19] = float32View[index + 28] = vertices[3];
-            uint32View[index + 2] = texCoords[0];
-            uint32View[index + 11] = texCoords[1];
-            uint32View[index + 20] = texCoords[2];
-            uint32View[index + 29] = texCoords[3];
-            float32View[index + 3]
-                = float32View[index + 12]
-                    = float32View[index + 21]
-                        = float32View[index + 30]
-                            = position.x;
-            float32View[index + 4]
-                = float32View[index + 13]
-                    = float32View[index + 22]
-                        = float32View[index + 31]
-                            = position.y;
-            float32View[index + 5]
-                = float32View[index + 14]
-                    = float32View[index + 23]
-                        = float32View[index + 32]
-                            = scale.x;
-            float32View[index + 6]
-                = float32View[index + 15]
-                    = float32View[index + 24]
-                        = float32View[index + 33]
-                            = scale.y;
-            float32View[index + 7]
-                = float32View[index + 16]
-                    = float32View[index + 25]
-                        = float32View[index + 34]
-                            = rotation;
-            uint32View[index + 8]
-                = uint32View[index + 17]
-                    = uint32View[index + 26]
-                        = uint32View[index + 35]
-                            = tint.toRgba();
-            this.batchIndex++;
+        this._shader
+            .getUniform('u_localBounds')
+            .setValue(localBounds);
+        this._shader
+            .getUniform('u_uvBounds')
+            .setValue(uvBounds);
+        const f32 = this._instanceFloat32;
+        const u32 = this._instanceUint32;
+        const limit = Math.min(particles.length, this._batchSize);
+        for (let i = 0; i < limit; i++) {
+            const particle = particles[i];
+            const offset = i * wordsPerInstance;
+            f32[offset + 0] = particle.position.x;
+            f32[offset + 1] = particle.position.y;
+            f32[offset + 2] = particle.scale.x;
+            f32[offset + 3] = particle.scale.y;
+            f32[offset + 4] = particle.rotation;
+            u32[offset + 5] = particle.tint.toRgba();
         }
+        this._instanceCount = limit;
         return this;
     }
-    createVao(gl, indexBuffer, vertexBuffer) {
-        return new WebGl2VertexArrayObject()
-            .addIndex(indexBuffer)
-            .addAttribute(vertexBuffer, this.shader.getAttribute('a_position'), gl.FLOAT, false, this.attributeCount, 0)
-            .addAttribute(vertexBuffer, this.shader.getAttribute('a_texcoord'), gl.UNSIGNED_SHORT, true, this.attributeCount, 8)
-            .addAttribute(vertexBuffer, this.shader.getAttribute('a_translation'), gl.FLOAT, false, this.attributeCount, 12)
-            .addAttribute(vertexBuffer, this.shader.getAttribute('a_scale'), gl.FLOAT, false, this.attributeCount, 20)
-            .addAttribute(vertexBuffer, this.shader.getAttribute('a_rotation'), gl.FLOAT, false, this.attributeCount, 28)
-            .addAttribute(vertexBuffer, this.shader.getAttribute('a_color'), gl.UNSIGNED_BYTE, true, this.attributeCount, 32);
+    flush() {
+        const backend = this.getBackendOrNull();
+        const instanceBuffer = this._instanceBuffer;
+        const indexBuffer = this._indexBuffer;
+        const vao = this._vao;
+        if (this._instanceCount === 0 || backend === null || instanceBuffer === null || indexBuffer === null || vao === null) {
+            return;
+        }
+        const view = backend.view;
+        if (this._currentView !== view || this._currentViewId !== view.updateId) {
+            this._currentView = view;
+            this._currentViewId = view.updateId;
+            this._shader
+                .getUniform('u_projection')
+                .setValue(view.getTransform().toArray(false));
+        }
+        this._shader.sync();
+        backend.bindVertexArrayObject(vao);
+        instanceBuffer.upload(this._instanceFloat32.subarray(0, this._instanceCount * wordsPerInstance));
+        vao.drawInstanced(indicesPerQuad, 0, this._instanceCount, RenderingPrimitives.Triangles);
+        backend.stats.batches++;
+        backend.stats.drawCalls++;
+        this._instanceCount = 0;
     }
-    updateView(view) {
-        this.shader
-            .getUniform('u_projection')
-            .setValue(view.getTransform().toArray(false));
-        return this;
+    onConnect(backend) {
+        const gl = backend.context;
+        this._shader.connect(createWebGl2ShaderProgram(gl));
+        this._connection = this._createConnection(gl);
+        this._indexBuffer = new WebGl2RenderBuffer(BufferTypes.ElementArrayBuffer, quadIndices, BufferUsage.StaticDraw)
+            .connect(this._createBufferRuntime(this._connection));
+        this._instanceBuffer = new WebGl2RenderBuffer(BufferTypes.ArrayBuffer, this._instanceData, BufferUsage.DynamicDraw)
+            .connect(this._createBufferRuntime(this._connection));
+        this._shader.sync();
+        this._vao = new WebGl2VertexArrayObject()
+            .addIndex(this._indexBuffer)
+            .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_translation'), gl.FLOAT, false, instanceStrideBytes, 0, false, 1)
+            .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_scale'), gl.FLOAT, false, instanceStrideBytes, 8, false, 1)
+            .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_rotation'), gl.FLOAT, false, instanceStrideBytes, 16, false, 1)
+            .addAttribute(this._instanceBuffer, this._shader.getAttribute('a_color'), gl.UNSIGNED_BYTE, true, instanceStrideBytes, 20, false, 1)
+            .connect(this._createVaoRuntime(this._connection));
+    }
+    onDisconnect() {
+        this._shader.disconnect();
+        this._instanceBuffer?.destroy();
+        this._instanceBuffer = null;
+        this._indexBuffer?.destroy();
+        this._indexBuffer = null;
+        this._vao?.destroy();
+        this._vao = null;
+        this._connection = null;
+        this._currentTexture = null;
+        this._currentBlendMode = null;
+        this._currentView = null;
+        this._currentViewId = -1;
+        this._instanceCount = 0;
+    }
+    destroy() {
+        this.disconnect();
+        this._shader.destroy();
+    }
+    /**
+     * Convert the system's per-corner packed-u32 texCoords into the
+     * (uMin, vMin, uMax, vMax) bounds the new vertex shader expects.
+     * Already accounts for flipY (the system's `texCoords` baked it in).
+     *
+     * The four packed u32s, by corner index, are:
+     *   [0] TL = (uMin/uMax | vMin/vMax depending on flipY)
+     *   [1] TR
+     *   [2] BR
+     *   [3] BL
+     * We need (uMin, vMin, uMax, vMax) — the corner-extreme values.
+     */
+    _uvBoundsScratch = new Float32Array(4);
+    _unpackUvBounds(system) {
+        const texCoords = system.texCoords;
+        // Each packed u32: low 16 bits = U normalised to 0..65535,
+        //                  high 16 bits = V normalised.
+        const uTopLeft = (texCoords[0] & 0xFFFF) / 0xFFFF;
+        const vTopLeft = ((texCoords[0] >>> 16) & 0xFFFF) / 0xFFFF;
+        const uBottomRight = (texCoords[2] & 0xFFFF) / 0xFFFF;
+        const vBottomRight = ((texCoords[2] >>> 16) & 0xFFFF) / 0xFFFF;
+        // For flipY: TL.v becomes vMax (was minY → maxY). The shader picks
+        // (cornerY == 0 ? vMin : vMax); writing TL.v into vMin and BR.v into
+        // vMax matches the original per-corner ordering whether or not flipY
+        // was applied at texCoords pack time.
+        this._uvBoundsScratch[0] = uTopLeft;
+        this._uvBoundsScratch[1] = vTopLeft;
+        this._uvBoundsScratch[2] = uBottomRight;
+        this._uvBoundsScratch[3] = vBottomRight;
+        return this._uvBoundsScratch;
+    }
+    _createConnection(gl) {
+        const vaoHandle = gl.createVertexArray();
+        if (vaoHandle === null) {
+            throw new Error('WebGl2ParticleRenderer: could not create vertex array object.');
+        }
+        return {
+            gl,
+            buffers: new Map(),
+            vaoHandle,
+        };
+    }
+    _createBufferRuntime(connection) {
+        const handle = connection.gl.createBuffer();
+        if (handle === null) {
+            throw new Error('WebGl2ParticleRenderer: could not create render buffer.');
+        }
+        return {
+            bind: (buffer) => {
+                connection.gl.bindBuffer(buffer.type, handle);
+            },
+            upload: (buffer, offset) => {
+                const gl = connection.gl;
+                const data = buffer.data;
+                const state = connection.buffers.get(buffer);
+                gl.bindBuffer(buffer.type, handle);
+                if (state && state.dataByteLength >= data.byteLength) {
+                    gl.bufferSubData(buffer.type, offset, data);
+                    state.dataByteLength = data.byteLength;
+                }
+                else {
+                    gl.bufferData(buffer.type, data, buffer.usage);
+                    connection.buffers.set(buffer, { handle, dataByteLength: data.byteLength });
+                }
+            },
+            destroy: (buffer) => {
+                connection.gl.deleteBuffer(handle);
+                connection.buffers.delete(buffer);
+                buffer.disconnect();
+            },
+        };
+    }
+    _createVaoRuntime(connection) {
+        let appliedVersion = -1;
+        return {
+            bind: (vao) => {
+                const gl = connection.gl;
+                gl.bindVertexArray(connection.vaoHandle);
+                if (appliedVersion !== vao.version) {
+                    let lastBuffer = null;
+                    for (const attribute of vao.attributes) {
+                        if (lastBuffer !== attribute.buffer) {
+                            attribute.buffer.bind();
+                            lastBuffer = attribute.buffer;
+                        }
+                        if (attribute.integer) {
+                            gl.vertexAttribIPointer(attribute.location, attribute.size, attribute.type, attribute.stride, attribute.start);
+                        }
+                        else {
+                            gl.vertexAttribPointer(attribute.location, attribute.size, attribute.type, attribute.normalized, attribute.stride, attribute.start);
+                        }
+                        gl.enableVertexAttribArray(attribute.location);
+                        gl.vertexAttribDivisor(attribute.location, attribute.divisor);
+                    }
+                    if (vao.indexBuffer) {
+                        vao.indexBuffer.bind();
+                    }
+                    appliedVersion = vao.version;
+                }
+            },
+            unbind: () => {
+                connection.gl.bindVertexArray(null);
+            },
+            draw: (vao, size, start, type) => {
+                const gl = connection.gl;
+                if (vao.indexBuffer) {
+                    gl.drawElements(type, size, gl.UNSIGNED_SHORT, start);
+                }
+                else {
+                    gl.drawArrays(type, start, size);
+                }
+            },
+            drawInstanced: (vao, count, start, instanceCount, type) => {
+                const gl = connection.gl;
+                if (vao.indexBuffer) {
+                    gl.drawElementsInstanced(type, count, gl.UNSIGNED_SHORT, start, instanceCount);
+                }
+                else {
+                    gl.drawArraysInstanced(type, start, count, instanceCount);
+                }
+            },
+            destroy: (vao) => {
+                connection.gl.deleteVertexArray(connection.vaoHandle);
+                vao.disconnect();
+            },
+        };
     }
 }