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
Fill
Could someone give me a direction? Thanks!
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
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.
Related
I got an outline (list of points) for a plane I want to generate. The plane is quite big and I need evenly distributed vertices inside the outline. Each vertex has a color value from red to green to visualize some data in the plane. I need to visualize the data as precise as possible in real time.
My idea was to simply create a grid and adjust all the vertices outside of the outline. This turned out to be quite complex.
This is a quick example what I want to achieve.
Is there any algorithm that solves this problem?
Is there another way to generate a mesh from an outline with evenly distributed vertices?
It sounds like you want to do something like this:
1) First generate a triangulate your polygon to create a mesh. There are plenty of options: https://en.wikipedia.org/wiki/Polygon_triangulation
2) Then while any of the edges in the mesh are too long (meaning that the points at either end might be too far apart), add the midpoint of the longest edge to the mesh, dividing the adjacent triangles into 2.
The results is a mesh with every point within a limited distance of other points in every direction. The resulting mesh will not necessarily be optimal, in that it may have more points than are strictly required, but it will probably satisfy your needs.
If you need to reduce the number of points and thin triangles, you can apply Delaunay Triangulation flipping around each candidate edge first: https://en.wikipedia.org/wiki/Delaunay_triangulation#Visual_Delaunay_definition:_Flipping
Although not totally clear from the question, the marching cubes algorithm, adapted to two dimensions, comes to mind. A detailed descriptione of the two-dimensional version can be found here.
Delaunay meshing can create evenly distributed vertices inside a shape. The image below shows a combined grid- and Delaunay-mesh. You may have a look here.
What would be an efficient approach for constraining an object so that it's always at least partially intersecting the view frustum?
The use case is that when viewing a model I want to clamp camera panning, as well as model translation, so that the view frustum is never looking at empty space.
One approach I tried was to wrap the model objects in bounding volumes, then enforce the constraint when those fall outside the frustum. I've tried bounding boxes so far, but am considering using a minimal convex hull.
The problem is that that when you zoom in close enough, it's still possible to be looking at empty space within the boundary, as shown in the attached diagram.
This is for a WebGL application, so needs to be fairly efficient in JavaScript, and also for thousand of vertices.
Ideally you would have a aabb tree of your mesh, and then you can recursively project on camea/screen until you get an intersection ?
http://www.codersnotes.com/algorithms/projected-area-of-an-aabb
edit: it's just frustum culling algo against aabtree does anyway, so looking for optimized solution, is looking for optimized frustum culling things
https://fgiesen.wordpress.com/2010/10/17/view-frustum-culling/
http://www2.in.tu-clausthal.de/~zach/teaching/cg_literatur/vfc_bbox.pdf
As general approximation is possible I would try the point cloud. First create a list of points - either by every Nth mesh vertex or every Nth face centre. With N being for example 10. Once you have this point array all you do is check if any of points is in frustum while updating its orientation. If not then this means that user moved or rotated the camera too much and you need to restore last acceptable orientation.
I know that this may seem quite ridiculous but I think that it is fairly easy to implement and frustum checking of vertex is just couple of multiplications per plane. It will be not perfect though.
You can also make frustum a little smaller to ensure that there is some border around the object.
I have surfed the web looking for 3D worlds triangulate code for use with three.js. I know there is the shape object, but it only can use 2D and paths. I'd have outer polygon, points, holes and 'forced' polylines.
How to deal with this and three? Do I have to use another JS framework?
Ideas would be appreciated, thanks.
Are you trying to triangulate a near-planar or planar 3d polygon?
If you have a near-planar or planar 3d-polygon, it can be triangulated by 'projecting' it down to 2d, running the triangulation, then 'de-projecting' back to 3d. Many libraries (such as CGAL, http://www.cgal.org ) do this by choosing one simple 'plane', the xy, yz, or xz plane, projecting down, doing the triangulation, and then 'projecting back up'.
The trick is that if you aren't adding any new points, you don't actually have to 'project back up', you just have to list your old 3d points in a new data structure, indicating which belong to which triangles. And if your code is very clever, you don't even need to 'convert' to 2d, you just need to fool your triangulation algorithm into thinking, for example, that y is x and z is y, (assuming you have projected onto the yz plane).
Thus, if you have a near-planar 3d polygon, and a good 2d-triangulation algorithm (three.js' shape might be sufficient, but if not, maybe some combination of Angus Johnson's Clipper might help, especially if you want to integrate stray points, lines, etc.), you just need to write a bit of 'glue' code to do the projection 3d->2d, and de-projection 2d->3d. Orientation (clockwise vs counterclockwise) of output can be a bit tricky, but it's not the most difficult thing in the world to program.
Good luck.
I haven't done much research on this yet, but i'm just asking around in case this has been done before.
Here's my problem:
I have a set of cubes of an arbitrary height, width and depth. These are either filled or empty. What i'm looking to do is develop an algorithm that is going to create an optimal mesh for this set of cubes by combining the faces of neighboring cubes into one.
My current idea is to step through the set 6 times(twice along each axis, once forwards and once back), and look at the set in cross section. Ignoring cubes that won't be visible from the outside, i'd like to build polygonal face for those cubes in that section. At the end of this, i should have (x+y+z)*2 of these faces. Combining them should give me the resulting optimized mesh for the voxel set.
I'm stumped on the triangulation process however.
If you want to create a mesh from voxel data, the most commonly used algorithm is marching cubes. However I suggest you search the net for iso-surface extraction for more advanced methods.
Starting with a 3D mesh, how would you give a rounded appearance to the edges and corners between the polygons of that mesh?
Without wishing to discourage other approaches, here's how I'm currently approaching the problem:
Given the mesh for a regular polyhedron, I can give the mesh's edges a rounded appearance by scaling each polygon along its plane and connecting the edges using cylinder segments such that each cylinder is tangent to each polygon where it meets that polygon.
Here's an example involving a cube:
Here's the cube after scaling its polygons:
Here's the cube after connecting the polygons' edges using cylinders:
What I'm having trouble with is figuring out how to deal with the corners between polygons, especially in cases where more than three edges meet at each corner. I'd also like an algorithm that works for all closed polyhedra instead of just those that are regular.
I post this as an answer because I can't put images into comments.
Sattle point
Here's an image of two brothers camping:
They placed their simple tents right beside each other in the middle of a steep walley (that's one bad place for tents, but thats not the point), so one end of each tent points upwards. At the point where the four squares meet you have a sattle point. The two edges on top of each tent can be rounded normally as well as the two downward edges. But at the sattle point you have different curvature in both directions and therefore its not possible to use a sphere. This rules out Svante's solution.
Selfintersection
The following image shows some 3D polygons if viewed from the side. Its some sharp thing with a hole drilled into it from the other side. The left image shows it before, the right after rounding.
.
The mass thats get removed from the sharp edge containts the end of the drill hole.
There is someething else to see here. The drill holes sides might be very large polygons (lets say it's not a hole but a slit). Still you only get small radii at the top. you can't just scale your polygons, you have to take into account the neighboring polygon.
Convexity
You say you're only removing mass, this is only true if your geometry is convex. Look at the image you posted. But now assume that the viewer is inside the volume. The radii turn away from you and therefore add mass.
NURBS
I'm not a nurbs specialist my self. But the constraints would look something like this:
The corners of the nurbs patch must be at the same position as the corners of the scaled-down polygons. The normal vectors of the nurb surface at the corners must be equal to the normal of the polygon. This should be sufficent to gurarantee that the nurb edge will be a straight line following the polygon edge. The normals also ensure that no visible edges will result at the border between polygon and nurbs patch.
I'd just do the math myself. nurbs are just polygons. You'll have some unknown coefficients and your constraints. This gives you a system of equations (often linear) that you can solve.
Is there any upper bound on the number of faces, that meet at that corner?
You might you might employ concepts from CAGD, especially Non-Uniform Rational B-Splines (NURBS) might be of interest for you.
Your current approach - glueing some fixed geometrical primitives might be too inflexible to solve the problem. NURBS require some mathematical work to get used to, but might be more suitable for your needs.
Extrapolating your cylinder-edge approach, the corners should be spheres, resp. sphere segments, that have the same radius as the cylinders meeting there and the centre at the intersection of the cylinders' axes.
Here we have a single C++ header for generating triangulated rounded 3D boxes. The code is in C++ but also easy to transplant to other coding languages. Also it's easy to be modified for other primitives like quads.
https://github.com/nepluno/RoundCornerBox
As #Raymond suggests, I also think that the nepluno repo provides a very good implementation to solve this issue; efficient and simple.
To complete his answer, I just wrote a solution to this issue in JS, based on the BabylonJS 3D engine. This solution can be found here, and can be quite easily replaced by another 3D engine:
https://playground.babylonjs.com/#AY7B23