WebGL：在同一绘制调用中绘制不同的几何图元？

Question

我有一个WebGL场景想要绘制点和线图元，并且想知道：是否可以在一个绘制调用中绘制多个WebGL图元？

我的直觉是不可能的，但是WebGL总是以一种技巧来使我感到惊讶，这些技巧可以完成奇怪的边缘情况，而搜索并没有让我确认这是否可行。

对于其他人可以在此问题上提供的任何见解，我将不胜感激。

Answer 1

您不能在同一绘制调用中绘制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数学，在3d空间中基于三角形的点将随着距相机的距离而缩放。 WebGL点要求您计算该点的大小，以便可以设置gl_PointSize，因此，如果要使其随场景缩放，则需要额外的工作。

在一次绘制调用中混合点，线和三角形并不常见，但绝不是不可能。