CODEWITHSUNDEEP
three.jswebglshader
Ricardo Masao Shigeoka
Ricardo Masao Shigeoka

Reputation: 266

WEBGL Draw pixels inside vertices position

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.

2D Positions

Vertices positions

Fill

Vertices Fill

Could someone give me a direction? Thanks!

Upvotes: 0

Views: 1146

Answers (2)

user128511
user128511

Reputation:

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

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

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

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

Drawing parametric shapes in webGL (without three.js)

Or you might prefer some tutorials

Upvotes: 3

WacławJasper
WacławJasper

Reputation: 3384

There is a simple triangulation (mesh generation) for your case. First sort all your vertices into CCW order. Then calculate the middle point of all vertices. Then iterate over your sorted vertices, and push a triangle made of the middle point, the point at vertices[index] and the point at vertices[index+1] to the mesh.

Upvotes: 0

Related Questions