WebGL:在同一个绘制调用中绘制不同的几何图元?

WebGL: Draw different geometric primitives within same draw call?

我有一个 WebGL 场景想要同时绘制点和线图元,我想知道:是否可以在单个绘制调用中绘制多个 WebGL 图元?

我的直觉是这是不可能的,但 WebGL 不断给我惊喜,人们可以用一些技巧来完成奇怪的边缘情况,搜索并没有让我确认这是否可能。

如果其他人可以就此问题提供任何见解,我将不胜感激。

您不能在同一个绘制调用中绘制 WebGL 线、点和三角形。您可以从三角形生成点和线,然后只在一次绘制调用中绘制三角形,恰好有三角形构成点,三角形绘制线,三角形绘制其他东西,所有一次绘制调用。

不是很好的例子,但很有趣here's a vertex shader than generates points and lines from triangles on the fly

还有this for an example of making lines from triangles

你想用你的着色器获得多少创意与在 CPU 上做事取决于你,但正如上一篇文章指出的那样,用三角形绘制线条是很常见的,因为 WebGL 线条通常只能是单像素厚。

开始,用三角形画点也很常见
  • WebGL 只需要支持大小为 1 的点

    用三角形画图,去掉了限制

  • WebGL 点始终与屏幕对齐

    基于三角形的点要灵活得多。例如,您可以旋转点和/或在 3D 中定向它们。 Here's a bunch of points made from triangles

  • 无需额外工作即可在 3D 中缩放基于三角形的点

    换句话说,3d 中基于三角形的点 space 将使用标准 3D 数学根据与相机的距离进行缩放。 WebGL 点要求您计算点的大小,以便您可以设置 gl_PointSize,因此如果您希望它随场景缩放,则需要额外的工作。

在单个绘图调用中混合点、线和三角形并不常见,但无论如何也不是不可能。