WebGL实例化无显示且报GL_INVALID_OPERATION错误求助

问题现象 #

使用twgl.js实现多实例圆形绘制时，出现如下WebGL错误：

[.WebGL-000031BC01680600] GL_INVALID_OPERATION: Must have element array buffer bound.

屏幕无任何内容显示，但twgl官方实例化示例可正常运行。

核心原因 #

代码中使用了drawElementsInstanced()方法，但未提供**索引缓冲区（Element Array Buffer）**数据。drawElements系列方法必须依赖索引指定顶点绘制顺序，而当前代码的points数组是直接按三角形顶点依次排列的（无索引），因此不适合用该方法绘制，应改用drawArraysInstanced()。

此外代码还存在两处冗余/不合理逻辑：

1. 每次渲染时重复创建缓冲区和VAO，造成性能浪费
2. 画布尺寸设置重复，twgl.resizeCanvasToDisplaySize已包含宽高设置逻辑

修复步骤及代码修改 #

1. 调整缓冲区创建时机 #

将缓冲区创建逻辑从render()方法中移出，仅在数据初始化完成后调用一次，避免重复创建。

修改index.cjs：

const Renderer = require("./src/renderer.cjs")

const canvas = document.querySelector("canvas")

function main() {
    const renderer = new Renderer(canvas)

    renderer.setCircleSides(8)

    for (let i = 0; i < 100; ++i) {
        // 调整随机范围适配屏幕
        renderer.addCircle(Math.random() * innerWidth, Math.random() * innerHeight, Math.random() * 30 + 10)
    }

    renderer.updateBuffers() // 仅初始化时创建一次缓冲区
    renderer.render()
}
main()

2. 修改渲染方法的绘制逻辑 #

替换绘制方法为drawArraysInstanced()，同时移除重复的画布尺寸设置。

修改renderer.cjs中的render()方法：

render() {
    // 由twgl统一处理画布尺寸适配
    twgl.resizeCanvasToDisplaySize(this.gl.canvas)
    this.gl.viewport(0, 0, this.gl.canvas.width, this.gl.canvas.height)

    this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT)

    const uniforms = {
        resolution: [this.gl.canvas.width, this.gl.canvas.height]
    }

    this.gl.useProgram(this.programInfo.program)
    twgl.setBuffersAndAttributes(this.gl, this.programInfo, this.vertexArrayInfo)
    twgl.setUniforms(this.programInfo, uniforms)
    // 使用drawArraysInstanced，参数说明：
    // 绘制模式：TRIANGLES，起始顶点索引：0，每个实例的顶点数：sides*3（每个三角形3个顶点），实例数量：size数组长度
    this.gl.drawArraysInstanced(this.gl.TRIANGLES, 0, this.sides * 3, this.arrays.size.data.length)
}

3. 移除render()中的重复缓冲区创建 #

删除render()方法内的this.updateBuffers()调用。

修复后原理说明 #

• drawArraysInstanced()直接按顶点数组的顺序绘制，无需索引缓冲区，匹配当前points数组的结构（每个三角形的3个顶点连续存储）
• 缓冲区仅在数据初始化后创建一次，避免不必要的WebGL对象创建开销
• 利用twgl的resizeCanvasToDisplaySize统一处理画布尺寸，避免重复代码

内容的提问来源于stack exchange，提问作者ITDW2