时间戳

首页 > 解决方案 > Javascript 数组在某些情况下不适用于 WebGL

javascript - Javascript 数组在某些情况下不适用于 WebGL

问题描述

我正在为 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. 我在render函数里面打印了数组内容TriangleCluster，数据还是可以的

这是我的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?

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

标签： javascriptwebgl

解决方案

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

推荐阅读