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.
Related
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.
My problem involves matching a set of 2d points to a set of 3d points, with known correspondence between the two. Basically I have points on an image, and I need the optimal translation and rotation to fit the points to a known 3d point cloud. Kabsch algorithm is originally meant for finding the best fit of 3d points to another point cloud, and there are implementations out there for 2d to 2d, but not something I can use. I do know it's possible, but just don't know how to go about it. I searched for code out there and came up empty. I'm programming in matlab at the moment, but any language would do.
Thank you.
Edit: The goal is getting a rotation and translation of the 3d point cloud to best match the 2d points when it is projected onto an image plane.
I should also mention that the 3d to 2d projection is done using a weak perspective.
So basically, you have a "plane" or a "line" of points, like the third dimension was 0. You could threat them like this, and use the tipicall kabsh algorithm of squared distance minimisation, don't you?
EDIT: maybe it's a nonsense, but what about projecting the 3d body to 2d coordinates, and do a 2d comparison? Computationally is expensive, so it includes exploring all the angles of the 3d object + projection, but it's easier losing one dimension by applying a projection, that adding a new dimenssion to a 2d point.
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
I've got a bunch of overlapping triangles from a 3D model projected into a 2D plane. I need to merge each island of touching triangles into a closed, non-convex polygon.
The resultant polygons shouldn't have any holes in them (since the source data doesn't).
Many of the source triangles share (floating point identical) edges with other triangles in the source data.
What's the easiest way to do this? Performance isn't particularly important, since this will be done at design time.
Try gpc, or the General Polygon Clipper Library.
Imagine the projection onto a plane as a "view" of the model (i.e. the direction of projection is the line of sight, and the projection is what you see). In that case, the borders of the polygons you want to compute correspond to the silhouette of the model.
The silhouette, in turn, is a set of edges in the model. For each edge in the silhouette, the adjacent faces will have normals that either point away from the plane or toward the plane. You can check this be taking the dot product of the face normal with the plane normal -- look for edges whose adjacent face normals have dot products of opposite signs with the projection direction.
Once you have found all the silhouette edges you can join them together into the boundaries of the desired polygons.
Generally, you can find more about silhouette detection and extraction by googling terms like mesh silouette finding detection. Maybe a good place to start is here.
I've also found this[1] approach, which I will be trying next.
[1] 2d outline algorithm for projected 3D mesh
I have a point (Lat/Lon) and a heading in degrees (true north) for which this point is traveling along. I have numerous stationary polygons (Points defined in Lat/Lon) which may or may not be convex.
My question is, how do I calculate the closest intersection point, if any, with a polygon. I have seen several confusing posts about Ray Tracing but they seem to all relate to 3D when the Ray and Polygon are not on the same Plane and also the Polygons must be convex.
sounds like you should be able to do a simple 2d line intersection...
However I have worked with Lat/Long before and know that they aren't exactly true to any 2d coordinate system.
I would start with a general "IsPointInPolygon" function, you can find a million of them by googling, and then test it on your poly's to see how well it works. If they are accurate enough, just use that. But it is possible that due to the non-square nature of lat/long coordinates, you may have to do some modifications using Spherical geometry.
In 2D, the calculations are fairly simple...
You could always start by checking to make sure the ray's endpoint is not inside the polygon (since that's the intersection point in that case).
If the endpoint is out of the line, you could do a ray/line segment intersection with each of the boundary features of the polygon, and use the closest found location. That handles convex/concave features, etc.
Compute whether the ray intersects each line segment in the polygon using this technique.
The resulting scaling factor in (my accepted) answer (which I called h) is "How far along the ray is the intersection." You're looking for a value between 0 and 1.
If there are multiple intersection points, that's fine! If you want the "first," use the one with the smallest value of h.
The answer on this page seems to be the most accurate.
Question 1.E GodeGuru