WEBGL在顶点位置绘制像素

Question

我是WebGL和着色器世界的新手，我想知道对于我来说只绘制路径中像素的最佳方式是什么。我有每个点的2d位置，我想在路径中填充一种颜色。

2D位置

填充

有人能指点我吗？谢谢！

Answer 1

与在WebGL中执行此操作的画布2d API不同，您需要对路径进行三角测量。 WebGL仅绘制点（正方形），线条和三角形。其他所有内容（圆圈，路径，3D模型）由您自己创造性地使用这3个原语。

在您的情况下，您需要将您的路径转换为一组三角形。 There are tons of algorithms to do that。每一个都有权衡，一些只处理凸路径，一些不处理孔，一些在中间添加更多点，有些则没有。有些比其他人快。还有像this one for example

这样的库

这是一个很大的话题，可以说太大了，不能详细介绍。 Other SO questions about it already have answers

一旦你将路径转换成三角形，那么将这些三角形传递给WebGL并将它们绘制起来非常简单。

关于SO的大量答案已经涵盖了这一点。实例

Drawing parametric shapes in webGL (without three.js)

或者您可能更喜欢some tutorials

Answer 2

您的案例有一个简单的三角测量（网格生成）。首先将所有顶点排序为CCW顺序。然后计算所有顶点的中点。然后迭代已排序的顶点，并将由中间点构成的三角形，顶点处的点[index]和顶点处的点[index + 1]推送到网格。