WebGL - 设置多个顶点
WebGL - Set multiple vertices
我正在尝试将一些 TypeScript 代码转换为顶点着色器以与 WebGL 一起使用。我的目标是绘制两个圆的双切线。我这里有一个计算切点的函数，第 27 行 https://jsfiddle.net/Zanchi/4xnp1n8x/2/。本质上，它 returns 具有 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?
没有
顶点着色器每个 iteration/call 输出 1 个顶点。你在调用gl.drawArrays时设置迭代次数（gl.drawElements比较复杂）
我不确定您不只是将值放在属性中会有多大收获。在顶点着色器中生成它们可能很有趣，但可能性能不佳。
在 WebGL1 中，没有简单的方法可以使用顶点着色器生成数据。首先，您需要某种计数或每次迭代都会更改的内容，如果您不提供至少一个属性，则不会发生任何更改。您可以只提供一个带有计数 [0, 1, 2, 3, ...] 的属性，并使用该计数生成顶点。这就是 vertexshaderart.com 所做的，但这完全是为了好玩，而不是为了性能。
在 WebGL2 中有 gl_VertexID 内置变量，这意味着您可以免费获得计数，无需提供属性。在 WebGL2 中，您还可以使用 transform feedback 将顶点着色器的输出写入缓冲区。通过这种方式，您可以在缓冲区中生成一些顶点，然后使用该缓冲区中生成的顶点（因此可能比每次都生成它们获得更好的性能）。
我正在尝试将一些 TypeScript 代码转换为顶点着色器以与 WebGL 一起使用。我的目标是绘制两个圆的双切线。我这里有一个计算切点的函数，第 27 行 https://jsfiddle.net/Zanchi/4xnp1n8x/2/。本质上，它 returns 具有 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?
没有
顶点着色器每个 iteration/call 输出 1 个顶点。你在调用gl.drawArrays时设置迭代次数（gl.drawElements比较复杂）
我不确定您不只是将值放在属性中会有多大收获。在顶点着色器中生成它们可能很有趣，但可能性能不佳。
在 WebGL1 中，没有简单的方法可以使用顶点着色器生成数据。首先，您需要某种计数或每次迭代都会更改的内容，如果您不提供至少一个属性，则不会发生任何更改。您可以只提供一个带有计数 [0, 1, 2, 3, ...] 的属性，并使用该计数生成顶点。这就是 vertexshaderart.com 所做的，但这完全是为了好玩，而不是为了性能。
在 WebGL2 中有 gl_VertexID 内置变量，这意味着您可以免费获得计数，无需提供属性。在 WebGL2 中，您还可以使用 transform feedback 将顶点着色器的输出写入缓冲区。通过这种方式，您可以在缓冲区中生成一些顶点，然后使用该缓冲区中生成的顶点（因此可能比每次都生成它们获得更好的性能）。