WebGL 插入计算的顶点值

Question

我正在尝试使用 WebGL 来获得基本的理解。

我有一个由 6 个三角形组成的模型，我想创建另外 3 个三角形，它们共享每个三角形内部的特定点。具体点将是父三角形的 center/focus （对不起，我不知道哪个术语是正确的）。问题是，我不知道如何插入值来渲染模型。

//This is my function to set the vertex-points for each triangle
function setGeometry(gl) {
  gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([
          //vorne links (clockwise)
          -60, -52, 0,
          0, 52, 0,
          0, 0, 60,
          //vorne rechts (clockwise)
          0, 0, 60,
          0, 52, 0,
          60, -52, 0,
          //vorne mitte (clockwise)
          60, -52, 0,
          -60, -52, 0,
          0, 0, 60,
          //Front mid inner mid (clockwise)
          60, -52, 0,
          -60, -52, 0,
          getCenter([60, -52, 0], //This is where I call the function to get the Center of the parent
          [-60, -52, 0],          //and return the values as a concatinated string
          [0, 0, 60]),
          //hinten links (counter-clockwise)
          -60, -52, 0,
          0, 0, -60,
          0, 52, 0,
          //hinten rechts (counter-clockwise)
          0, 52, 0,
          0, 0, -60,
          60, -52, 0,
          //hinten mitte (counter-clockwise)
          60, -52, 0,
          0, 0, -60,
          -60, -52, 0,
          ]),
      gl.STATIC_DRAW);
}

//And this is the corresponding function to get the center. 
function getCenter(A,B,C){
    var center = [];
    for(var i = 0; i < A.length; ++i){
        center[i] = (A[i] + B[i] + C[i])/3;
    }
    return Math.round(center[0]) + "," + Math.round(center[1]) + "," + Math.round(center[2]);
}

我认为问题在于，这些值将作为字符串而不是单独的整数返回。

出现以下错误消息：

glDrawArrays: attempt to access out of range vertices in attribute 0

我想不出合适的方法来获取其中的值。

如有任何正确方向的提示，我将不胜感激。

Answer 1

是的，部分问题是您的 getCenter 函数 returns 是一个字符串。我建议返回一个三元素数组：

function getCenter(A,B,C){
    var center = [];
    for(var i = 0; i < A.length; ++i){
        center[i] = Math.round((A[i] + B[i] + C[i])/3);
    }
    return center;
}

现在您需要将这三个值插入到您的坐标数组中。如果您使用的是现代浏览器，则可以使用 ... "spread" syntax...

[-60, -52, 0, ...getCenter(A, B, C), -60, -52, 0]

...否则您将不得不使用 concat()...

[-60, -52, 0].concat(getCenter(A, B, C)).concat([-60, -52, 0])

WebGL 插入计算的顶点值

WebGL inserting calculated vertex-values

javascript

webgl