我正在尝试将一些 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 来进行点计算。
是否可以在单个顶点着色器调用中设置多个顶点，或者在后续调用中使用着色器第一次调用中计算出的多个值？
最佳答案
Is it possible to set multiple vertices in a single vertex shader call
没有
or use multiple values calculated in the first call of the shader in subsequent calls?
没有
顶点着色器每次迭代/调用输出 1 个顶点。您可以在调用gl.drawArrays时设置迭代次数(gl.drawElements更复杂)
我不确定不只是将值放入属性中您会获得多少 yield 。在顶点着色器中生成它们可能很有趣，但可能性能不高。
在 WebGL1 中，没有简单的方法可以使用顶点着色器来生成数据。首先，您需要某种计数或每次迭代都会更改的内容，如果您不提供至少一个属性，则不会发生任何更改。您可以仅为一个属性提供一个计数[0, 1, 2, 3, ...]，并使用该计数来生成顶点。这就是vertexshaderart.com确实如此，但这一切都是为了好玩，而不是为了性能。
在 WebGL2 中，有内置变量 gl_VertexID，这意味着您可以免费获得计数，无需提供属性。在 WebGL2 中，您还可以使用变换反馈将顶点着色器的输出写入缓冲区。通过这种方式，您可以在缓冲区中生成一些顶点，然后使用从该缓冲区生成的顶点(因此可能比每次生成它们获得更好的性能)。
关于javascript - WebGL - 设置多个顶点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44445074/