@codexo/exojs 0.9.0 → 0.10.0

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

@@ -1,7 +1,8 @@
-import { RenderingPrimitives, BufferTypes, BufferUsage } from '../types.js';
+import { RenderEntryKind } from '../plan/RenderCommand.js';
 import { Shader } from '../shader/Shader.js';
 import { RenderTexture } from '../texture/RenderTexture.js';
 import { Texture } from '../texture/Texture.js';
+import { BlendModes, BufferTypes, BufferUsage, RenderingPrimitives } from '../types.js';
 import { AbstractWebGl2Renderer } from './AbstractWebGl2Renderer.js';
 import fragmentSource from './glsl/mesh.frag.js';
 import vertexSource from './glsl/mesh.vert.js';
@@ -17,22 +18,29 @@ const vertexStrideBytes = 20;
 const vertexStrideWords = vertexStrideBytes / 4;
 const initialVertexCapacity = 64;
 const initialIndexCapacity = 192;
+const initialNodeIndexCapacity = 64;
 const defaultVertexColor = 0xffffffff; // white, full alpha
 const maxCustomTextureSlots = 8;
+const transformTextureUnit = 8;
 class WebGl2MeshRenderer extends AbstractWebGl2Renderer {
     _defaultShader = new Shader(vertexSource, fragmentSource);
     _customShaders = new Map();
-    _tintScratch = new Float32Array(4);
+    _compatibilityCache = new Map();
     _textureUnitScratch = new Int32Array([0]);
+    _transformUnitScratch = new Int32Array([transformTextureUnit]);
     // Pre-built texture-unit indices used for custom-shader sampler bindings;
     // pre-allocated so the per-frame uniform path stays allocation-free.
-    _slotScratches = Array.from({ length: maxCustomTextureSlots }, (_, i) => new Int32Array([i]));
+    _slotScratches = Array.from({ length: Math.max(transformTextureUnit + 1, maxCustomTextureSlots + 1) }, (_, i) => new Int32Array([i]));
     _vertexCapacity = initialVertexCapacity;
     _indexCapacity = initialIndexCapacity;
+    _nodeIndexCapacity = initialNodeIndexCapacity;
     _vertexData = new ArrayBuffer(initialVertexCapacity * vertexStrideBytes);
     _float32View = new Float32Array(this._vertexData);
     _uint32View = new Uint32Array(this._vertexData);
     _indexData = new Uint16Array(initialIndexCapacity);
+    _nodeIndexData = new Uint32Array(initialNodeIndexCapacity);
+    _pendingDraws = [];
+    _staticGeometryCache = new Map();
     _connection = null;
     _currentBlendMode = null;
     render(mesh) {
@@ -40,85 +48,52 @@ class WebGl2MeshRenderer extends AbstractWebGl2Renderer {
         if (!connection) {
             throw new Error('WebGl2MeshRenderer is not connected to a backend.');
         }
-        const vertexCount = mesh.vertexCount;
-        if (vertexCount === 0) {
+        if (mesh.vertexCount === 0) {
             return;
         }
         const backend = this.getBackend();
-        const blendMode = mesh.blendMode;
-        if (blendMode !== this._currentBlendMode) {
-            this._currentBlendMode = blendMode;
-            backend.setBlendMode(blendMode);
-        }
-        const shader = mesh.shader === null ? this._defaultShader : this._getOrCreateCustomShader(mesh.shader, connection.gl);
-        const view = backend.view;
-        // Auto-bound uniforms are set unconditionally if the (possibly custom)
-        // shader declares them. Custom shaders that ignore one of these still
-        // see the cycles from has(), but the GL call is skipped.
-        if (shader.uniforms.has('u_projection')) {
-            shader.getUniform('u_projection').setValue(view.getTransform().toArray(false));
-        }
-        if (shader.uniforms.has('u_translation')) {
-            shader.getUniform('u_translation').setValue(mesh.getGlobalTransform().toArray(false));
-        }
-        if (shader.uniforms.has('u_tint')) {
-            const tint = mesh.tint;
-            this._tintScratch[0] = tint.r;
-            this._tintScratch[1] = tint.g;
-            this._tintScratch[2] = tint.b;
-            this._tintScratch[3] = tint.a;
-            shader.getUniform('u_tint').setValue(this._tintScratch);
-        }
-        // The default fragment shader samples u_texture branchlessly; meshes
-        // without an explicit texture get the engine's 1×1 white default. Only
-        // bind+set if the active shader actually consumes u_texture.
-        if (shader.uniforms.has('u_texture')) {
-            const meshTexture = mesh.texture ?? Texture.white;
-            shader.getUniform('u_texture').setValue(this._textureUnitScratch);
-            backend.bindTexture(meshTexture, 0);
-        }
-        if (mesh.shader?.uniforms !== undefined) {
-            this._bindCustomUniforms(shader, mesh.shader.uniforms, backend);
-        }
-        this._ensureVertexCapacity(vertexCount);
-        const positions = mesh.vertices;
-        const uvs = mesh.uvs;
-        const colors = mesh.colors;
-        for (let i = 0; i < vertexCount; i++) {
-            const word = i * vertexStrideWords;
-            const pair = i * 2;
-            this._float32View[word] = positions[pair];
-            this._float32View[word + 1] = positions[pair + 1];
-            if (uvs !== null) {
-                this._float32View[word + 2] = uvs[pair];
-                this._float32View[word + 3] = uvs[pair + 1];
-            }
-            else {
-                this._float32View[word + 2] = 0;
-                this._float32View[word + 3] = 0;
-            }
-            this._uint32View[word + 4] = colors !== null ? colors[i] : defaultVertexColor;
-        }
-        const indexCount = mesh.indexCount;
-        this._ensureIndexCapacity(indexCount);
-        if (mesh.indices !== null) {
-            this._indexData.set(mesh.indices, 0);
+        const material = mesh.material;
+        const shader = material === null ? this._defaultShader : this._getOrCreateCustomShader(material, connection.gl);
+        // The material owns its blend mode; the mesh's own blendMode overrides it
+        // when set away from the default (Normal). Default-path meshes keep their
+        // own blendMode verbatim.
+        const blendMode = material !== null && mesh.blendMode === BlendModes.Normal ? material.blendMode : mesh.blendMode;
+        const texture = mesh.texture ?? Texture.white;
+        const command = backend.activeDrawCommand;
+        const supportsInstancing = material === null ? true : this._isInstancingCompatible(shader);
+        this._pendingDraws.push({
+            mesh,
+            command,
+            material,
+            shader,
+            blendMode,
+            texture,
+            supportsInstancing,
+        });
+    }
+    flush() {
+        const backend = this.getBackendOrNull();
+        const connection = this._connection;
+        if (backend === null || connection === null || this._pendingDraws.length === 0) {
+            this._pendingDraws.length = 0;
+            return;
         }
-        else {
-            for (let i = 0; i < indexCount; i++) {
-                this._indexData[i] = i;
+        for (let i = 0; i < this._pendingDraws.length; i++) {
+            const draw = this._pendingDraws[i];
+            if (this._canBatchStatic(draw)) {
+                let end = i + 1;
+                while (end < this._pendingDraws.length && this._isSameBatch(this._pendingDraws[end - 1], this._pendingDraws[end])) {
+                    end++;
+                }
+                if (end - i >= 2) {
+                    this._drawStaticBatch(this._pendingDraws.slice(i, end), backend, connection);
+                    i = end - 1;
+                    continue;
+                }
             }
+            this._drawSingle(draw, backend, connection);
         }
-        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, RenderingPrimitives.Triangles);
-        backend.stats.batches++;
-        backend.stats.drawCalls++;
-    }
-    flush() {
-        // Mesh draws are immediate per-mesh; nothing to batch.
+        this._pendingDraws.length = 0;
     }
     destroy() {
         this.disconnect();
@@ -127,34 +102,40 @@ class WebGl2MeshRenderer extends AbstractWebGl2Renderer {
             shader.destroy();
         }
         this._customShaders.clear();
-        this._currentBlendMode = null;
+        this._compatibilityCache.clear();
     }
     onConnect(backend) {
         const gl = backend.context;
-        const vaoHandle = gl.createVertexArray();
-        if (vaoHandle === null) {
-            throw new Error('Could not create vertex array object.');
-        }
         this._defaultShader.connect(createWebGl2ShaderProgram(gl));
-        const buffers = new Map();
-        const indexBuffer = new WebGl2RenderBuffer(BufferTypes.ElementArrayBuffer, this._indexData, BufferUsage.DynamicDraw).connect(this._createBufferRuntime(gl, buffers));
-        const vertexBuffer = new WebGl2RenderBuffer(BufferTypes.ArrayBuffer, this._vertexData, BufferUsage.DynamicDraw).connect(this._createBufferRuntime(gl, buffers));
-        // Force the shader's first finalize so attribute locations are
-        // available immediately (the async-compile path defers extraction
-        // to first sync(), but we need attributes here for VAO setup).
         this._defaultShader.sync();
         // Custom shaders compiled before connect() get connected here too.
         for (const customShader of this._customShaders.values()) {
             customShader.connect(createWebGl2ShaderProgram(gl));
             customShader.sync();
         }
-        const vao = new WebGl2VertexArrayObject()
-            .addIndex(indexBuffer)
-            .addAttribute(vertexBuffer, this._defaultShader.getAttribute('a_position'), gl.FLOAT, false, vertexStrideBytes, 0)
-            .addAttribute(vertexBuffer, this._defaultShader.getAttribute('a_texcoord'), gl.FLOAT, false, vertexStrideBytes, 8)
-            .addAttribute(vertexBuffer, this._defaultShader.getAttribute('a_color'), gl.UNSIGNED_BYTE, true, vertexStrideBytes, 16)
-            .connect(this._createVaoRuntime(gl, vaoHandle));
-        this._connection = { gl, vao, vertexBuffer, indexBuffer };
+        const buffers = new Map();
+        const dynamicIndexBuffer = new WebGl2RenderBuffer(BufferTypes.ElementArrayBuffer, this._indexData, BufferUsage.DynamicDraw).connect(this._createBufferRuntime(gl, buffers));
+        const dynamicVertexBuffer = new WebGl2RenderBuffer(BufferTypes.ArrayBuffer, this._vertexData, BufferUsage.DynamicDraw).connect(this._createBufferRuntime(gl, buffers));
+        const dynamicNodeIndexBuffer = new WebGl2RenderBuffer(BufferTypes.ArrayBuffer, this._nodeIndexData, BufferUsage.DynamicDraw).connect(this._createBufferRuntime(gl, buffers));
+        const dynamicVaoHandle = gl.createVertexArray();
+        if (dynamicVaoHandle === null) {
+            throw new Error('Could not create vertex array object.');
+        }
+        const dynamicVao = new WebGl2VertexArrayObject()
+            .addIndex(dynamicIndexBuffer)
+            .addAttribute(dynamicVertexBuffer, this._defaultShader.getAttribute('a_position'), gl.FLOAT, false, vertexStrideBytes, 0)
+            .addAttribute(dynamicVertexBuffer, this._defaultShader.getAttribute('a_texcoord'), gl.FLOAT, false, vertexStrideBytes, 8)
+            .addAttribute(dynamicVertexBuffer, this._defaultShader.getAttribute('a_color'), gl.UNSIGNED_BYTE, true, vertexStrideBytes, 16)
+            .addAttribute(dynamicNodeIndexBuffer, this._defaultShader.getAttribute('a_nodeIndex'), gl.UNSIGNED_INT, false, Uint32Array.BYTES_PER_ELEMENT, 0, true, 1)
+            .connect(this._createVaoRuntime(gl, dynamicVaoHandle));
+        this._connection = {
+            gl,
+            buffers,
+            dynamicVao,
+            dynamicVertexBuffer,
+            dynamicIndexBuffer,
+            dynamicNodeIndexBuffer,
+        };
     }
     onDisconnect() {
         const connection = this._connection;
@@ -165,11 +146,262 @@ class WebGl2MeshRenderer extends AbstractWebGl2Renderer {
         for (const customShader of this._customShaders.values()) {
             customShader.disconnect();
         }
-        connection.indexBuffer.destroy();
-        connection.vertexBuffer.destroy();
-        connection.vao.destroy();
+        for (const entry of this._staticGeometryCache.values()) {
+            for (const vao of entry.vaos.values()) {
+                vao.destroy();
+            }
+            entry.vaos.clear();
+            entry.indexBuffer.destroy();
+            entry.vertexBuffer.destroy();
+        }
+        this._staticGeometryCache.clear();
+        connection.dynamicNodeIndexBuffer.destroy();
+        connection.dynamicIndexBuffer.destroy();
+        connection.dynamicVertexBuffer.destroy();
+        connection.dynamicVao.destroy();
         this._connection = null;
         this._currentBlendMode = null;
+        this._pendingDraws.length = 0;
+    }
+    _drawSingle(draw, backend, connection) {
+        if (this._canBatchStatic(draw)) {
+            this._drawStaticBatch([draw], backend, connection);
+            return;
+        }
+        if (draw.supportsInstancing && draw.material === null) {
+            this._drawDynamicInstancedSingle(draw, backend, connection);
+            return;
+        }
+        this._drawLegacyImmediate(draw, backend, connection);
+    }
+    _drawDynamicInstancedSingle(draw, backend, connection) {
+        this._setBlendMode(draw.blendMode, backend);
+        this._bindInstancedShaderState(draw.shader, draw.texture, draw.material, backend, draw.command?.nodeIndex ?? 0);
+        this._ensureVertexCapacity(draw.mesh.vertexCount);
+        this._ensureIndexCapacity(draw.mesh.indexCount);
+        this._ensureNodeIndexCapacity(1);
+        this._packVertices(draw.mesh, 0);
+        this._packIndices(draw.mesh, 0);
+        const nodeIndex = draw.command?.nodeIndex ?? 0;
+        if (draw.command === null) {
+            backend._prepareDrawCommand({
+                ...this._createSyntheticCommand(draw.mesh, nodeIndex),
+            });
+        }
+        this._nodeIndexData[0] = nodeIndex >>> 0;
+        backend.bindVertexArrayObject(connection.dynamicVao);
+        connection.dynamicVertexBuffer.upload(this._float32View.subarray(0, draw.mesh.vertexCount * vertexStrideWords));
+        connection.dynamicIndexBuffer.upload(this._indexData.subarray(0, draw.mesh.indexCount));
+        connection.dynamicNodeIndexBuffer.upload(this._nodeIndexData.subarray(0, 1));
+        connection.dynamicVao.drawInstanced(draw.mesh.indexCount, 0, 1, RenderingPrimitives.Triangles);
+        backend.stats.batches++;
+        backend.stats.drawCalls++;
+    }
+    _drawStaticBatch(batch, backend, connection) {
+        const first = batch[0];
+        const geometry = first.mesh.geometry;
+        const cacheEntry = this._getOrCreateStaticGeometryEntry(geometry, first.mesh, connection);
+        const vao = this._getOrCreateStaticGeometryVao(cacheEntry, first.shader, connection.gl, connection.dynamicNodeIndexBuffer);
+        this._setBlendMode(first.blendMode, backend);
+        let maxNodeIndex = 0;
+        this._ensureNodeIndexCapacity(batch.length);
+        for (let i = 0; i < batch.length; i++) {
+            const command = batch[i].command;
+            const nodeIndex = command.nodeIndex >>> 0;
+            this._nodeIndexData[i] = nodeIndex;
+            if (nodeIndex > maxNodeIndex) {
+                maxNodeIndex = nodeIndex;
+            }
+        }
+        this._bindInstancedShaderState(first.shader, first.texture, first.material, backend, maxNodeIndex);
+        backend.bindVertexArrayObject(vao);
+        connection.dynamicNodeIndexBuffer.upload(this._nodeIndexData.subarray(0, batch.length));
+        vao.drawInstanced(cacheEntry.indexCount, 0, batch.length, RenderingPrimitives.Triangles);
+        backend.stats.batches++;
+        backend.stats.drawCalls++;
+    }
+    _drawLegacyImmediate(draw, backend, connection) {
+        const mesh = draw.mesh;
+        const shader = draw.shader;
+        this._setBlendMode(draw.blendMode, backend);
+        if (shader.uniforms.has('u_projection')) {
+            shader.getUniform('u_projection').setValue(backend.view.getTransform().toArray(false));
+        }
+        if (shader.uniforms.has('u_translation')) {
+            shader.getUniform('u_translation').setValue(mesh.getGlobalTransform().toArray(false));
+        }
+        if (shader.uniforms.has('u_tint')) {
+            shader.getUniform('u_tint').setValue(mesh.tint.toArray(false));
+        }
+        if (shader.uniforms.has('u_texture')) {
+            shader.getUniform('u_texture').setValue(this._textureUnitScratch);
+            backend.bindTexture(draw.texture, 0);
+        }
+        if (draw.material !== null) {
+            this._bindCustomUniforms(shader, draw.material, backend);
+        }
+        this._ensureVertexCapacity(mesh.vertexCount);
+        this._ensureIndexCapacity(mesh.indexCount);
+        this._packVertices(mesh, 0);
+        this._packIndices(mesh, 0);
+        shader.sync();
+        backend.bindVertexArrayObject(connection.dynamicVao);
+        connection.dynamicVertexBuffer.upload(this._float32View.subarray(0, mesh.vertexCount * vertexStrideWords));
+        connection.dynamicIndexBuffer.upload(this._indexData.subarray(0, mesh.indexCount));
+        connection.dynamicVao.draw(mesh.indexCount, 0, RenderingPrimitives.Triangles);
+        backend.stats.batches++;
+        backend.stats.drawCalls++;
+    }
+    _bindInstancedShaderState(shader, texture, material, backend, maxNodeIndex) {
+        if (shader.uniforms.has('u_projection')) {
+            shader.getUniform('u_projection').setValue(backend.view.getTransform().toArray(false));
+        }
+        if (shader.uniforms.has('u_transforms')) {
+            backend.bindTransformBufferTexture(transformTextureUnit, maxNodeIndex + 1);
+            shader.getUniform('u_transforms').setValue(this._transformUnitScratch);
+        }
+        if (shader.uniforms.has('u_texture')) {
+            shader.getUniform('u_texture').setValue(this._textureUnitScratch);
+            backend.bindTexture(texture, 0);
+        }
+        if (material !== null) {
+            this._bindCustomUniforms(shader, material, backend);
+        }
+        shader.sync();
+    }
+    _canBatchStatic(draw) {
+        if (!draw.supportsInstancing) {
+            return false;
+        }
+        if (draw.command?.groupIndex === undefined) {
+            return false;
+        }
+        const geometry = draw.mesh.geometry;
+        if (geometry?.usage !== 'static') {
+            return false;
+        }
+        return true;
+    }
+    _isSameBatch(left, right) {
+        if (!this._canBatchStatic(left) || !this._canBatchStatic(right)) {
+            return false;
+        }
+        return (left.command.groupIndex === right.command.groupIndex &&
+            left.mesh.geometry === right.mesh.geometry &&
+            left.shader === right.shader &&
+            left.material === right.material &&
+            left.blendMode === right.blendMode &&
+            left.texture === right.texture &&
+            left.command.material.pipelineKey === right.command.material.pipelineKey &&
+            left.command.material.bindKey === right.command.material.bindKey);
+    }
+    _isInstancingCompatible(shader) {
+        const cached = this._compatibilityCache.get(shader);
+        if (cached !== undefined) {
+            return cached;
+        }
+        const compatible = shader.attributes.has('a_nodeIndex') && shader.uniforms.has('u_transforms') && !shader.uniforms.has('u_translation') && !shader.uniforms.has('u_tint');
+        this._compatibilityCache.set(shader, compatible);
+        return compatible;
+    }
+    _getOrCreateStaticGeometryEntry(geometry, mesh, connection) {
+        const existing = this._staticGeometryCache.get(geometry);
+        if (existing !== undefined) {
+            return existing;
+        }
+        const vertexCount = mesh.vertexCount;
+        const indexCount = mesh.indexCount;
+        const interleaved = new ArrayBuffer(vertexCount * vertexStrideBytes);
+        const floatView = new Float32Array(interleaved);
+        const uintView = new Uint32Array(interleaved);
+        this._packVertices(mesh, 0, floatView, uintView);
+        const indexData = new Uint16Array(indexCount);
+        this._packIndices(mesh, 0, indexData);
+        const vertexBuffer = new WebGl2RenderBuffer(BufferTypes.ArrayBuffer, floatView, BufferUsage.StaticDraw).connect(this._createBufferRuntime(connection.gl, connection.buffers));
+        const indexBuffer = new WebGl2RenderBuffer(BufferTypes.ElementArrayBuffer, indexData, BufferUsage.StaticDraw).connect(this._createBufferRuntime(connection.gl, connection.buffers));
+        vertexBuffer.upload(floatView);
+        indexBuffer.upload(indexData);
+        const disposeListener = () => {
+            const entry = this._staticGeometryCache.get(geometry);
+            if (entry === undefined) {
+                return;
+            }
+            for (const vao of entry.vaos.values()) {
+                vao.destroy();
+            }
+            entry.vaos.clear();
+            entry.indexBuffer.destroy();
+            entry.vertexBuffer.destroy();
+            this._staticGeometryCache.delete(geometry);
+        };
+        geometry._onDispose(disposeListener);
+        const created = {
+            geometry,
+            vertexBuffer,
+            indexBuffer,
+            vaos: new Map(),
+            disposeListener,
+            indexCount,
+        };
+        this._staticGeometryCache.set(geometry, created);
+        return created;
+    }
+    _getOrCreateStaticGeometryVao(entry, shader, gl, nodeIndexBuffer) {
+        const existing = entry.vaos.get(shader);
+        if (existing !== undefined) {
+            return existing;
+        }
+        const vaoHandle = gl.createVertexArray();
+        if (vaoHandle === null) {
+            throw new Error('Could not create vertex array object.');
+        }
+        const nodeAttribute = shader.getAttribute('a_nodeIndex');
+        const vao = new WebGl2VertexArrayObject()
+            .addIndex(entry.indexBuffer)
+            .addAttribute(entry.vertexBuffer, shader.getAttribute('a_position'), gl.FLOAT, false, vertexStrideBytes, 0)
+            .addAttribute(entry.vertexBuffer, shader.getAttribute('a_texcoord'), gl.FLOAT, false, vertexStrideBytes, 8)
+            .addAttribute(entry.vertexBuffer, shader.getAttribute('a_color'), gl.UNSIGNED_BYTE, true, vertexStrideBytes, 16)
+            .addAttribute(nodeIndexBuffer, nodeAttribute, gl.UNSIGNED_INT, false, Uint32Array.BYTES_PER_ELEMENT, 0, true, 1)
+            .connect(this._createVaoRuntime(gl, vaoHandle));
+        entry.vaos.set(shader, vao);
+        return vao;
+    }
+    _setBlendMode(next, backend) {
+        if (this._currentBlendMode !== next) {
+            this._currentBlendMode = next;
+            backend.setBlendMode(next);
+        }
+    }
+    _packVertices(mesh, vertexStart, floatView = this._float32View, uintView = this._uint32View) {
+        const positions = mesh.vertices;
+        const uvs = mesh.uvs;
+        const colors = mesh.colors;
+        const vertexCount = mesh.vertexCount;
+        for (let i = 0; i < vertexCount; i++) {
+            const word = (vertexStart + i) * vertexStrideWords;
+            const pair = i * 2;
+            floatView[word] = positions[pair];
+            floatView[word + 1] = positions[pair + 1];
+            if (uvs !== null) {
+                floatView[word + 2] = uvs[pair];
+                floatView[word + 3] = uvs[pair + 1];
+            }
+            else {
+                floatView[word + 2] = 0;
+                floatView[word + 3] = 0;
+            }
+            uintView[word + 4] = colors !== null ? colors[i] : defaultVertexColor;
+        }
+    }
+    _packIndices(mesh, indexStart, target = this._indexData) {
+        const indexCount = mesh.indexCount;
+        if (mesh.indices !== null) {
+            target.set(mesh.indices, indexStart);
+            return;
+        }
+        for (let i = 0; i < indexCount; i++) {
+            target[indexStart + i] = i;
+        }
     }
     _ensureVertexCapacity(vertexCount) {
         if (vertexCount <= this._vertexCapacity) {
@@ -191,6 +423,15 @@ class WebGl2MeshRenderer extends AbstractWebGl2Renderer {
         }
         this._indexData = new Uint16Array(this._indexCapacity);
     }
+    _ensureNodeIndexCapacity(instanceCount) {
+        if (instanceCount <= this._nodeIndexCapacity) {
+            return;
+        }
+        while (this._nodeIndexCapacity < instanceCount) {
+            this._nodeIndexCapacity *= 2;
+        }
+        this._nodeIndexData = new Uint32Array(this._nodeIndexCapacity);
+    }
     _createBufferRuntime(gl, buffers) {
         const handle = gl.createBuffer();
         if (handle === null) {
@@ -232,8 +473,14 @@ class WebGl2MeshRenderer extends AbstractWebGl2Renderer {
                             attribute.buffer.bind();
                             lastBuffer = attribute.buffer;
                         }
-                        gl.vertexAttribPointer(attribute.location, attribute.size, attribute.type, attribute.normalized, attribute.stride, attribute.start);
+                        if (attribute.integer) {
+                            gl.vertexAttribIPointer(attribute.location, attribute.size, attribute.type, attribute.stride, attribute.start);
+                        }
+                        else {
+                            gl.vertexAttribPointer(attribute.location, attribute.size, attribute.type, attribute.normalized, attribute.stride, attribute.start);
+                        }
                         gl.enableVertexAttribArray(attribute.location);
+                        gl.vertexAttribDivisor(attribute.location, attribute.divisor);
                     }
                     if (vao.indexBuffer) {
                         vao.indexBuffer.bind();
@@ -252,39 +499,50 @@ class WebGl2MeshRenderer extends AbstractWebGl2Renderer {
                     gl.drawArrays(type, start, size);
                 }
             },
+            drawInstanced: (vao, count, start, instanceCount, type) => {
+                if (vao.indexBuffer) {
+                    gl.drawElementsInstanced(type, count, gl.UNSIGNED_SHORT, start, instanceCount);
+                }
+                else {
+                    gl.drawArraysInstanced(type, start, count, instanceCount);
+                }
+            },
             destroy: (vao) => {
                 gl.deleteVertexArray(vaoHandle);
                 vao.disconnect();
             },
         };
     }
-    _getOrCreateCustomShader(config, gl) {
-        const cached = this._customShaders.get(config);
+    _getOrCreateCustomShader(material, gl) {
+        const cached = this._customShaders.get(material);
         if (cached !== undefined) {
             return cached;
         }
-        if (config.glsl === null) {
-            throw new Error('MeshShader has no `glsl` source; cannot render through the WebGL2 backend.');
+        const glsl = material.shader.glsl;
+        if (glsl === null) {
+            throw new Error('Mesh material shader has no `glsl` source; cannot render through the WebGL2 backend.');
         }
-        const shader = new Shader(config.glsl.vertex, config.glsl.fragment);
+        const shader = new Shader(glsl.vertex, glsl.fragment);
         shader.connect(createWebGl2ShaderProgram(gl));
         // Force first finalize so getUniform()/uniforms.has() are usable below.
         shader.sync();
-        this._customShaders.set(config, shader);
-        // Wire shader.destroy() through to evict + dispose the cached program.
-        config._onDispose(() => {
-            const stored = this._customShaders.get(config);
+        this._customShaders.set(material, shader);
+        // Wire material.destroy() through to evict + dispose the cached program.
+        material._onDispose(() => {
+            const stored = this._customShaders.get(material);
             if (stored !== undefined) {
                 stored.destroy();
-                this._customShaders.delete(config);
+                this._customShaders.delete(material);
             }
         });
         return shader;
     }
-    _bindCustomUniforms(shader, uniforms, backend) {
-        // Texture uniforms take consecutive slots starting at 1 (slot 0 belongs
-        // to the mesh's own `u_texture` binding).
+    _bindCustomUniforms(shader, material, backend) {
+        // Texture bindings take consecutive slots starting at 1 (slot 0 belongs to
+        // the mesh's own `u_texture`). Texture-valued uniforms bind first, then the
+        // entries of the material's dedicated `textures` map.
         let textureSlot = 1;
+        const uniforms = material.uniforms;
         for (const name in uniforms) {
             if (!shader.uniforms.has(name)) {
                 continue;
@@ -293,7 +551,7 @@ class WebGl2MeshRenderer extends AbstractWebGl2Renderer {
             const uniform = shader.getUniform(name);
             if (value instanceof Texture || value instanceof RenderTexture) {
                 if (textureSlot >= maxCustomTextureSlots) {
-                    throw new Error(`Mesh custom shader requested more than ${maxCustomTextureSlots - 1} texture uniforms.`);
+                    throw new Error(`Mesh material requested more than ${maxCustomTextureSlots - 1} texture bindings.`);
                 }
                 backend.bindTexture(value, textureSlot);
                 uniform.setValue(this._slotScratches[textureSlot]);
@@ -303,6 +561,18 @@ class WebGl2MeshRenderer extends AbstractWebGl2Renderer {
                 uniform.setValue(this._marshalUniformValue(value));
             }
         }
+        const textures = material.textures;
+        for (const name in textures) {
+            if (!shader.uniforms.has(name)) {
+                continue;
+            }
+            if (textureSlot >= maxCustomTextureSlots) {
+                throw new Error(`Mesh material requested more than ${maxCustomTextureSlots - 1} texture bindings.`);
+            }
+            backend.bindTexture(textures[name], textureSlot);
+            shader.getUniform(name).setValue(this._slotScratches[textureSlot]);
+            textureSlot++;
+        }
     }
     _marshalUniformValue(value) {
         if (value instanceof Float32Array || value instanceof Int32Array) {
@@ -314,6 +584,28 @@ class WebGl2MeshRenderer extends AbstractWebGl2Renderer {
         // readonly tuple [a, b], [a, b, c], [a, b, c, d]
         return new Float32Array(value);
     }
+    _createSyntheticCommand(mesh, nodeIndex) {
+        return {
+            kind: RenderEntryKind.Draw,
+            drawable: mesh,
+            nodeIndex,
+            seq: 0,
+            zIndex: mesh.zIndex,
+            material: {
+                rendererId: 0,
+                blendMode: mesh.blendMode,
+                textureId: -1,
+                shaderId: -1,
+                pipelineKey: 0,
+                bindKey: 0,
+            },
+            minX: 0,
+            minY: 0,
+            maxX: 0,
+            maxY: 0,
+            groupIndex: 0,
+        };
+    }
 }
 
 export { WebGl2MeshRenderer };