Question

我正在尝试使用WebGL进行基本了解。

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

//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：尝试访问属性0中超出范围的顶点

我想不出一种适当的方法来获取值。

我希望能向正确的方向提供提示。

Answer 1

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

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插入计算的顶点值

1 个答案: