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

问题描述 投票:0回答:1

我正在为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

那么问题出在哪里,在代码中?

javascript webgl
1个回答
0
投票

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

热门问题
推荐问题
最新问题