WEBGL 在顶点位置内绘制像素
WEBGL Draw pixels inside vertices position
我是 WebGL 和着色器世界的新手，我想知道什么是仅绘制路径内像素的最佳方法。我有每个点的位置 2d，我想在路径内填充一种颜色。
二维位置
填充
有人可以给我指路吗？谢谢！
您的情况有一个简单的三角剖分（网格生成）。首先将所有顶点排序为 CCW 顺序。然后计算所有顶点的中点。然后迭代排序的顶点，并将由中点、vertices[index] 处的点和 vertices[index+1] 处的点组成的三角形推入网格。
与 canvas 2d API 不同，在 WebGL 中执行此操作需要您对路径进行三角测量。 WebGL 只绘制点（正方形）、线和三角形。其他一切（圆圈、路径、3d 模型）都取决于您创造性地使用这 3 个基元。
在你的情况下，你需要把你的路径变成一组三角形。 There are tons of algorithms to do that. Each one has tradeoffs, some only handle convex paths, some don't handle holes, some add more points in the middle and some don't. Some are faster than others. There are also libraries that do it like this one for example
这是一个很大的话题，可以说太大了，无法在这里详述。 Other SO questions about it already have answers.
一旦你将路径变成三角形，那么将这些三角形传递到 WebGL 并绘制它们就非常简单了。
很多关于 SO 的答案也已经涵盖了这一点。例子
或者您可能更喜欢some tutorials
我是 WebGL 和着色器世界的新手，我想知道什么是仅绘制路径内像素的最佳方法。我有每个点的位置 2d，我想在路径内填充一种颜色。
二维位置
填充
有人可以给我指路吗？谢谢！
您的情况有一个简单的三角剖分（网格生成）。首先将所有顶点排序为 CCW 顺序。然后计算所有顶点的中点。然后迭代排序的顶点，并将由中点、vertices[index] 处的点和 vertices[index+1] 处的点组成的三角形推入网格。
与 canvas 2d API 不同，在 WebGL 中执行此操作需要您对路径进行三角测量。 WebGL 只绘制点（正方形）、线和三角形。其他一切（圆圈、路径、3d 模型）都取决于您创造性地使用这 3 个基元。
在你的情况下，你需要把你的路径变成一组三角形。 There are tons of algorithms to do that. Each one has tradeoffs, some only handle convex paths, some don't handle holes, some add more points in the middle and some don't. Some are faster than others. There are also libraries that do it like this one for example
这是一个很大的话题，可以说太大了，无法在这里详述。 Other SO questions about it already have answers.
一旦你将路径变成三角形，那么将这些三角形传递到 WebGL 并绘制它们就非常简单了。
很多关于 SO 的答案也已经涵盖了这一点。例子
或者您可能更喜欢some tutorials