WEBGL 在顶点位置内绘制像素 [英] WEBGL Draw pixels inside vertices position

问题描述

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

I am new to the WebGL and shaders world, and I was wondering what the best way for me to paint only the pixels within a path. I have the positions 2d of each point and I would like to fill with a color inside the path.

二维位置

填充

有人可以给我一个方向吗?谢谢！

Could someone give me a direction? Thanks!

推荐答案

与 canvas 2d API 不同，在 WebGL 中执行此操作需要您对路径进行三角测量.WebGL 只绘制点(正方形)、线和三角形.其他一切(圆圈、路径、3d 模型)都由您来创造性地使用这 3 个基元.

Unlike the canvas 2d API to do this in WebGL requires you to triangulate the path. WebGL only draws points (squares), lines, and triangles. Everything else (circles, paths, 3d models) is up to you to creatively use those 3 primitives.

在您的情况下，您需要将路径变成一组三角形.有很多算法可以做到这一点.每个都有权衡，有些只处理凸路径，有些不处理孔，有些在中间添加更多点，有些不处理.有些比其他更快.还有一些库可以像 这个例如

In your case you need turn your path into a set of triangles. 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

这是一个很大的话题，可以说太大了，无法在这里详细介绍.关于它的其他 SO 问题已经有了答案.

It's kind of a big topic arguably too big to go into detail here. Other SO questions about it already have answers.

一旦您将路径变成三角形，那么将这些三角形传递到 WebGL 并绘制它们就非常简单了.

Once you do have the path turned into triangles then it's pretty straightforward to pass those triangles into WebGL and have them drawn.

关于 SO 的大量答案也已经涵盖了这一点.例子

Plenty of answers on SO already cover that as well. Examples

在 webGL 中绘制参数形状(没有three.js)

或者您可能更喜欢一些教程

这篇关于WEBGL 在顶点位置内绘制像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！