javascript - WebGL INVALID OPERATION 缓冲区大小不足

问题描述

我正在尝试用 WebGL 和 javascript 编写一个简单的程序来从 .obj 文件中绘制一个简单的对象。我正在使用 npm 的 webgl-obj-loader 来加载对象。正如标题所说，我不断收到缓冲区大小不足（边缘）和索引缓冲区太小（FF）。我使用了 gl.geterror 函数，我得到 1282 错误代码，这意味着 INVALID_OPERATION。

window.onload = function () {
            OBJ.downloadMeshes(
            {
                'dragon_vrip': 'models/dragon_vrip.obj',
                'cube2': 'models/cube2.obj'
            }, webGLStart);
}

这是我用来加载 obj 文件的方式。

        app.meshes = meshes;

        OBJ.initMeshBuffers(gl, app.meshes.dragon_vrip);
        OBJ.initMeshBuffers(gl, app.meshes.cube2);

        vertArray = app.meshes.cube2.vertices.slice();
        normArray = app.meshes.cube2.vertexNormals.slice();
        indicesArray = app.meshes.cube2.indices.slice();
        texCoord = app.meshes.cube2.textures.slice();

            var myMesh=app.meshes.cube2;

            var pointsBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, pointsBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, vertArray, gl.STATIC_DRAW);
            gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(0);

            var textureBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, textureBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, texCoord, gl.STATIC_DRAW);
            gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(1);

            var normalBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, normArray, gl.STATIC_DRAW);
            gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(2);

            var indices = gl.createBuffer();
            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indices);
            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indicesArray, gl.STATIC_DRAW);
            console.log(indices.size);

第二步：初始化缓冲区。

                function drawFunc() {
                    rotateAngleX += 0.01;
                    rotateAngleY += 0.02;

                    mat4.fromXRotation(rotateXMatrix, rotateAngleX);
                    mat4.fromYRotation(rotateYMatrix, rotateAngleY);
                    mat4.multiply(modelMatrix, rotateXMatrix, rotateYMatrix);

                    gl.uniformMatrix4fv(modelMatrixLocation, false, modelMatrix);

                    gl.clear(gl.COLOR_BUFFER_BIT);
                    gl.drawElements(gl.TRIANGLES, indicesArray.length, gl.UNSIGNED_SHORT, 0);

                    requestAnimationFrame(drawFunc);

                }
                requestAnimationFrame(drawFunc);

在这里，我正在尝试绘制一个简单的立方体。

数组大小为：顶点：72 索引：36 texCoords：48 法线：72

考虑到顶点是 x,y,z 点的三元组，顶点缓冲区包含 24 个点（vertex[0]=x, vertex[1]=y, vertex[2]=z, ...），并且索引数组没有包含高于 23 的数字，所以我不明白错误发生在哪里。还有什么方法可以调试缓冲区吗？我尝试了 spector.js，但没有太大帮助，因为绘图调用由于错误而无济于事。

标签： javascriptwebglobjloader

javascript - WebGL INVALID OPERATION 缓冲区大小不足

问题描述

解决方案

推荐阅读