WEBGL 在顶点位置内绘制像素答案

【问题标题】：WEBGL Draw pixels inside vertices positionWEBGL 在顶点位置内绘制像素
【发布时间】：2016-04-15 00:42:41
【问题描述】：

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

二维位置

填充

谁能给我一个方向？谢谢！

【问题讨论】：

【解决方案1】：

与在 WebGL 中执行此操作的 canvas 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 的大量答案也已经涵盖了这一点。例子

或者你可能更喜欢some tutorials

【讨论】：

【解决方案2】：

您的案例有一个简单的三角剖分（网格生成）。首先将所有顶点排序为 CCW 顺序。然后计算所有顶点的中点。然后遍历排序的顶点，并将由中间点、顶点[index] 处的点和顶点[index+1] 处的点组成的三角形推到网格中。

【讨论】：