在某些情况下，WebGL Javascript数组不起作用

Question

我正在为WebGL开发OBJ文件阅读器，但在呈现读取的三角形时遇到了问题。当我尝试绘制三角形时，出现以下错误：[Error] WebGL: INVALID_OPERATION: drawArrays: attempt to access out of bounds arrays这是我的源代码：

function ObjModel(filename, shader, gl) {
  var readVertices = {}, readUVs = {}, readNormals = {};
  var verticesIdx = 0, uvIndices = 0, normalIndices = 0;

  var tmpVertices = {}, tmpUVs = {}, tmpNormals = {};
  var tmpVerticesIdx = 0;

  this.components = {};

  loadFileAsText(filename, (result) => {
    if(lines[i][0] == "v" && lines[i][1] == " ") {
        var floats = lines[i].split(" ");

        readVertices[verticesIdx + 0] = parseFloat(floats[1]);
        readVertices[verticesIdx + 1] = parseFloat(floats[2]);
        readVertices[verticesIdx + 2] = parseFloat(floats[3]);

        verticesIdx += 3;
      }

      if(lines[i][0] == "f") {
        var points = lines[i].split(" ");
        var point1 = points[1].split("/");
        var point2 = points[2].split("/");
        var point3 = points[3].split("/");


        tmpVertices[tmpVerticesIdx + 0] = readVertices[parseInt(point1[0]) - 1];
        tmpVertices[tmpVerticesIdx + 1] = readVertices[parseInt(point2[0]) - 1];
        tmpVertices[tmpVerticesIdx + 2] = readVertices[parseInt(point3[0]) - 1];

        tmpUVs[tmpVerticesIdx + 0] = readUVs[parseInt(point1[1]) - 1];
        tmpUVs[tmpVerticesIdx + 1] = readUVs[parseInt(point2[1]) - 1];
        tmpUVs[tmpVerticesIdx + 2] = readUVs[parseInt(point3[1]) - 1];

        tmpNormals[tmpVerticesIdx + 0] = readNormals[parseInt(point1[2]) - 1];
        tmpNormals[tmpVerticesIdx + 1] = readNormals[parseInt(point2[2]) - 1];
        tmpNormals[tmpVerticesIdx + 2] = readNormals[parseInt(point3[2]) - 1];

        tmpVerticesIdx += 3;
      }
    }


    this.components[0] = new ObjComponent(tmpVertices, tmpUVs, tmpNormals);


    this.cluster = new TriangleCluster(this.components[0].vertices, this.components[0].uvs, this.components[0].normals, 1, shader, gl);
  });
}

有趣的部分是最后两行。 ObjComponent是这个简单的类：

function ObjComponent(vertices, uvs, normals) {
  this.vertices = vertices;
  this.uvs = uvs;
  this.normals = normals;
}

仅包含顶点，uns和法线的数组。 TriangleCluster是绘制三角形的类。有了这段代码，我从上面得到了错误消息，但是我自己将数组设置为某些值是可行的，因此数组无法正常工作。但是我可以访问tmpVertices的元素。我在TriangleCluster的render函数中打印了数组内容，数据仍然可以

这是我的TriangleCluster类：

function TriangleCluster(vertices, uvs, normals, triangleNumber, shader, gl) {
  shader.use();


  this.vertices = vertices;
  this.uvs = uvs;
  this.normals = normals;


  var verticesBuffer = new ArrayBufferFloat(this.vertices, gl);
  var verticesAttribLocation = new VertexAttribPointerFloat(shader.getProgram(), "vertex", 3, 3, 0, gl);

  var uvsBuffer = new ArrayBufferFloat(this.uvs, gl);
  var uvsAttribLocation = new VertexAttribPointerFloat(shader.getProgram(), "uv", 2, 2, 0, gl);

  var normalsBuffer = new ArrayBufferFloat(this.normals, gl);
  var normalsAttribLocation = new VertexAttribPointerFloat(shader.getProgram(), "normal", 3, 3, 0, gl);

  this.render = function() {
    verticesBuffer.bind();
    verticesAttribLocation.bind();
    uvsBuffer.bind();
    uvsAttribLocation.bind();
    normalsBuffer.bind();
    normalsAttribLocation.bind();

    this.texture.activate(gl.TEXTURE0);

    gl.drawArrays(gl.TRIANGLES, 0, triangleNumber * 3);
  }
}

此行为是否可能来自我的ArrayBuffer类，在该类中我创建了一个与new Float32Array不兼容的parseFloat？

那么问题出在哪里，在代码中？

Answer 1

问题是，由于某种原因，JS不喜欢数组转换。