WebGL - 设置多个顶点

Question

我正在尝试将一些TypeScript代码转换为顶点着色器以与WebGL一起使用。我的目标是绘制两个圆圈的切线。我有一个函数在这里计算切点，https://jsfiddle.net/Zanchi/4xnp1n8x/2/在第27行。基本上，它返回一个带有x和y值的点元组。

// First circle bottom tangent point
const t1 = {
  x: x1 + r1 * cos(PI/2 - alpha),
  y: y1 + r1 * sin(PI/2 - alpha)
}; //... and so on

我知道我可以在JS中进行计算并通过属性将值传递给着色器，但我想利用GPU来进行点计算。

是否可以在单个顶点着色器调用中设置多个顶点，或者在后续调用中使用在着色器的第一次调用中计算的多个值？

Answer 1

  

是否可以在单个顶点着色器调用中设置多个顶点

没有

  

或使用在后续调用中第一次调用着色器时计算的多个值？

没有

顶点着色器每次迭代/调用输出1个顶点。您在调用gl.drawArrays时设置迭代次数（gl.drawElements更复杂）

我不确定你是通过将值放在属性中获得多少收益。在顶点着色器中生成它们可能很有趣，但它可能不具备高性能。

在WebGL1中，没有简单的方法可以使用顶点着色器生成数据。首先，您需要某种计数或每次迭代都会发生变化，如果您不提供至少一个属性，则没有任何变化。您可以提供仅具有计数[0, 1, 2, 3, ...]的一个属性，并使用该计数生成顶点。这就是vertexshaderart.com所做的事情，但这一切都是为了好玩，而不是为了这一点。

在WebGL2中有gl_VertexID内置变量，这意味着您可以免费获得计数，无需提供属性。在WebGL2中，您还可以使用变换反馈将顶点着色器的输出写入缓冲区。通过这种方式，您可以将一些顶点生成到缓冲区中，然后使用该缓冲区中生成的顶点（因此可能比每次生成它们的性能更好）。