Javascript WebGL无效操作缓冲区大小不足

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

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();

第二步：初始化缓冲区

                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个点（顶点[0]=x，顶点[1]=y，顶点[2]=z，…），索引数组的数目不超过23，因此我不知道错误发生在哪里。还有什么方法可以调试缓冲区吗？我尝试了spector.js，但没有多大帮助，因为draw调用由于错误而无效。

好的，出于某种原因，我不得不在bufferdata函数中添加新类型的数组，如下所示

var indices = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indices);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint32Array(indicesArray),gl.STATIC_DRAW);

---

其余的缓冲区也是如此。

请参见此处的完整示例

                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);

---

你能举个有效的例子吗？对于像这样的obj文件->我使用了你的代码和着色器来创建我的模型，它们工作得很好。所以现在我假设它是着色器或摄影机投影，因为我的模型没有被绘制。但至少我修复了缓冲区错误OK让我发布，作为回答，如果你喜欢，欢迎接受：）

   <script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
<script src="https://webglfundamentals.org/webgl/resources/webgl-lessons-helper.js"></script>
<script src="https://webglfundamentals.org/webgl/lessons/resources/3d-math.js"></script>
<!-- vertex shader -->
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec4 a_position;
uniform mat4 u_worldViewProjection;

void main() {
   gl_Position = u_worldViewProjection * a_position;
}
</script>
<!-- fragment shader -->
<script id="2d-fragment-shader" type="x-shader/x-fragment">
void main() {
   gl_FragColor = vec4(0,0,0,1);
}
</script>
<canvas id="c"></canvas>

"use strict";

var m = ThreeDMath;

function main() {
  var cubeVertices = [
    -1, -1, -1,
     1, -1, -1,
     1,  1, -1,
    -1,  1, -1,
    -1, -1,  1,
     1, -1,  1,
     1,  1,  1,
    -1,  1,  1,
  ];
  var indices = [
    0, 1,
    1, 2,
    2, 3,
    3, 0,
    4, 5,
    5, 6,
    6, 7,
    7, 4,
    0, 4,
    1, 5,
    2, 6,
    3, 7,
  ];

  var canvas = document.getElementById("c");
  var gl = canvas.getContext("webgl");
  if (!gl) {
    alert("no webgl");
    return;
  }

  var program = webglUtils.createProgramFromScripts(
      gl, ["2d-vertex-shader", "2d-fragment-shader"]);
  gl.useProgram(program);

  var positionLoc = gl.getAttribLocation(program, "a_position");
  var worldViewProjectionLoc =
      gl.getUniformLocation(program, "u_worldViewProjection");

  var buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array(cubeVertices),
      gl.STATIC_DRAW);
  gl.enableVertexAttribArray(positionLoc);
  gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 0, 0);

  var buffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
  gl.bufferData(
      gl.ELEMENT_ARRAY_BUFFER,
      new Uint16Array(indices),
      gl.STATIC_DRAW);

  function render(clock) {
    clock *= 0.001;

    var scale = 4;

    webglUtils.resizeCanvasToDisplaySize(gl.canvas, window.devicePixelRatio);

    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    gl.clear(gl.COLOR_BUFFER_BIT);

    var fieldOfView = Math.PI * 0.25;
    var aspect = canvas.clientWidth / canvas.clientHeight;
    var projection = m.perspective(fieldOfView, aspect, 0.0001, 500);
    var radius = 5;
    var eye = [
        Math.sin(clock) * radius,
        1,
        Math.cos(clock) * radius,
    ];
    var target = [0, 0, 0];
    var up = [0, 1, 0];
    var view = m.lookAt(eye, target, up);

    var worldViewProjection = m.multiplyMatrix(view, projection);
    gl.uniformMatrix4fv(worldViewProjectionLoc, false, worldViewProjection);

    gl.drawElements(gl.LINES, indices.length, gl.UNSIGNED_SHORT, 0);
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}

main();