javascript - 是什么导致对我的绘制数组调用无效的操作？

我正在尝试使用WebGL从头开始绘制一个简单的三角形。

我有用C ++编写openGL应用程序的经验，并且看过webGL参考卡来翻译我的代码。

但是，我在调试应用程序时遇到困难。
我收到的特定错误消息是：


  GL错误：GL_INVALID_OPERATION：glDrawArrays：尝试访问属性0中超出范围的顶点


整个代码在这里：https://github.com/gheshu/webGL_experiments

将顶点数据布置为3个浮点数的3个向量。
存在三个属性：位置，法线和颜色，并应绑定到索引0、1、2。

一些重要的摘要：

网格类别：

class Mesh{
    constructor(){
        this.num_vertices = 0;
        this.vbo = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
        gl.enableVertexAttribArray(0);
        gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 4*3*3, 0);
        gl.enableVertexAttribArray(1);
        gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 4*3*3, 4*3);
        gl.enableVertexAttribArray(2);
        gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 4*3*3, 4*3*2);
    }
    upload(buffer){
        console.log(buffer);
        gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
        gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW);
        this.num_vertices = buffer.length / 9;
    }
    draw(){
        gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
        gl.drawArrays(gl.TRIANGLES, 0, this.num_vertices);
    }
    destroy(){
        gl.deleteBuffer(this.vbo);
    }
}

程序类别：

class GLProgram{
    constructor(vertShader, fragShader){
        this.prog = gl.createProgram();
        gl.attachShader(this.prog, vertShader.id);
        gl.attachShader(this.prog, fragShader.id);
        gl.bindAttribLocation(this.prog, 0, "position");
        gl.bindAttribLocation(this.prog, 1, "normal");
        gl.bindAttribLocation(this.prog, 2, "color");
        gl.linkProgram(this.prog);
        var log = gl.getProgramInfoLog(this.prog);
        if(log.length){
            console.log();
        }
        gl.detachShader(this.prog, vertShader.id);
        vertShader.destroy();
        gl.detachShader(this.prog, fragShader.id);
        fragShader.destroy();
    }
    bind(){
        gl.useProgram(this.prog);
    }
    destroy(){
        gl.deleteProgram(this.prog);
    }
}

顶点着色器：

attribute vec3 position;
attribute vec3 normal;
attribute vec3 color;

varying vec3 vColor;

void main(){
    gl_Position = vec4(position, 1.0);
    vColor = color;
}

片段着色器：

precision mediump float;

varying vec3 vColor;

void main(){
    gl_FragColor = vec4(vColor, 1.0);
}

非常感谢您在解决此问题方面所提供的任何帮助或技巧。

最佳答案

在draw.js文件的底部，销毁mesh和prog：

mesh.destroy();
prog.destroy();

在JavaScript中，window.requestAnimationFrame(onFrame);实际上会在调用那些onFrame方法之后调用destroy。因此，在执行onFrame时，mesh和prog都不存在。我建议您阅读有关requestAnimationFrame的更多信息，以便以后可以销毁这些内容（例如，在动画循环停止运行之后）。

您只需删除这些destroy行即可验证该行为，它将很好地呈现。