I wrote a custom exporter for CAD software to export geometry data to ThreeJS editor. Now, of course in ThreeJS I wrote a correct loader which is loading all the geometry correctly.
There is just one problem; In wireframe view in ThreeJS I have triangles from each vertex. With what technique can I remove the triangulation and diagonals ? How can I show wireframe without diagonals ?
Source 3D:
ThreeJS 3D: (see the triangles and diagonales)
it looks like you are drawing all points/polygons as single polyline
that is not correct you should process each polygon as line loop
if your mesh is triangulated or quaded then you need to extract the perimeter line
extracting perimeter line
if your mesh is not defined by polygons then you need to group all connected primitives as single polygon
take all lines from single polygon in a list
find duplicate lines and remove them all
so all lines that uses the same points (in any order) are duplicate
joined primitives share the same edge
so this is enough for properly triangulated polygons
some triangulations can be joined by line only not by points
for these you need to compare all remaining lines
take all parallel lines (the same or opposite angle)
and test if they lies on the same line
if yes and are connected (overlapping)
then cut the lines so the overlapped part will be deleted
Bad triangulation
if primitives are overlapping instead of joined
then draw single polygon to cleared buffer
then process all lines
compute midle point for each
and test if the coordinate is filled in the buffer or not
if it is remove the line
this is not 100% bullet proof
you should test more points along each line
and if some are in and some out then find the intersections and cut the inside part only
you can also use vector approach for the inside test but you have to handle multiple overlaps
Related
I have a code that generates cylinders based on an array of 3d vectors.
The problem is that they have those ugly spaces between them:
Does any one know how I can fill them in the newest version of three.js?
Thanks in advance!!
To fill the gaps, I'd suggest you just use a sphere with the same radius as the cylinders, centered at the point the two cylinders meet.
Set height & width segment counts to match the cylinders so it all looks consistent.
The parts that aren't filling the gap will just get hidden inside the cylinders, and won't be visible.
If you want to keep the vertex count down, you could use the theta parameters on the Sphere Geometry to only generate the parts that you actually need to fill the gap.
https://threejs.org/docs/?q=sphere#api/en/geometries/SphereGeometry
Alternatively, if what you are really trying to achieve is a curved object with a circular cross-section, you could drop the cylinders altogether, and extrude a circle along a curve to achieve the shape that you want.
https://threejs.org/docs/?q=extrude#api/en/geometries/ExtrudeGeometry
https://threejs.org/examples/webgl_geometry_extrude_shapes.html
Consider the following polygon (an agricultural plot)
From this polygon, I would like to extract the "headlands" of the plot, being the consecutive lines (sides) of the polygon (Wikipedia) used for turning on the field. While often only the rows running perpendicular to the lay of the field are considered, I need all sides of the polygon.
Here, a consecutive line means any set of coordinates, where the angle between any two coordinates of the set is not larger than a value X (e.g 30 degrees).
For the given example, the resulting headlands should look like the following:
I wrote a small algorithm trying to accomplish this, basically checking the angle between two coordinates and either pushing the given coordinate to the existing lineString if the angle is below X degrees or creating a new lineString (headland) if not.
Check out the following Gist
However, in some cases corners of a field are rounded, therefore may consist of many coordinates within small distances of each other. The relative angles then may be less than the value X, even though the corner is too sharp to actually be cultivated without turning.
In order to overcome that issue, I added an index that increases whenever a coordinate is too close for comparison, so that the next coordinate will be checked against the initial coordinate. Check out the following Gist.
This works for simple plots like the one in the example, however I am struggling with more complex ones as the following.
Here, the bottom headland is recognised as one lineString together with the headland on the right, even though optically a sharp corner is given. Also, two coordinates in the upper right corner were found to be a separate headland even though they should be connected to the right headland. The result should therefore yield in the following:
What I would like to know is if there is an approach that efficiently decomposes any polygon into it's headlands, given a specific turning angle. I set up a repo for the code here, and an online testing page with many examples here if that helps.
I have randomly generated some points on a JavaScript canvas I was wondering what the most efficient method would be to draw triangles connecting the points in a uniform fashion. The goal is to have the triangles fill the entire canvas without overlapping.
For a visual representation, here is an image of the points I have randomly generated across a canvas. As you can see I may have to modify the way I randomly place the points on the canvas.
And this is how I wish to draw the triangles.
Thanks to #Phorgz & #GabeRogan for pointing me in the right direction. Delaunay Triangulation was definitely the way to go and it ended up being very fast, even when updating the canvas as an animation.
I did end up using the npm package faster-delaunay which uses the divide and conquer algorithm to triangulate the randomly generated points.
Here is a result of what I have drawn on the canvas that updates as the points move around the plane:
I have seen apps, and wondered how can I programmatically take a picture of image. Define how it needs to be transformed so that it looks parallel to camera and not skewed perspective wise.
Then combine multiple photos to create a pdf file. For example this app does it: https://play.google.com/store/apps/details?id=com.appxy.tinyscan&hl=en
I do not use books for such trivial things so sorry I can not recommend any (especially in English). What you need to do is this:
input image
find main contours
ideally whole grid but even outer contour will suffice (in case no grid is present). You need to divide the contour into horizontal (Red) and vertical (Green) curves (or set of points).
sample contour curves by 4 "equidistant" points
as the image is distorted (not just rotated) then we need to use at least bi-cubic interpolation. For that we need 16 points (Aqua) per patch.
add mirror points to cover whole grid
on the image are mirrored (Yellow) points only for horizontal contours you should do this also for vertical contours (did not fit me in the image and did not want to enlarge resolution just for that) and also for the corner points so you got 6x6 control points. The mirror can be done linearly (like I did).
Now the transformation is done like this:
Process all pixels dst(x0,y0) of target image
Handle x,y as parameter for cubic interpolation
if xs,ys is target image resolution then:
u=(3.0*x)/xs
v=(3.0*y)/ys
Now cubic interpolation is usually done on parameter t=<0.0,1.0) so
if u=<0.0,1.0> use t=u and control points 0,1,2,3.
if u=<1.0,2.0) use t=u-1.0 and control points 1,2,3,4
if u=<2.0,3.0> use t=u-2.0 and control points 2,3,4,5
The same goes for vertical contours and v. Compute xi,yi as bi cubic interpolation of (u,v). And copy pixel:
dst(x,y)=src(xi,yi);
This is just nearest neighbor but you can also use bilinear for this ... As cubic curve I would use this polynomial.
The idea behind bi-cubic interpolation is easy. compute point corresponding to parameter u on 4 horizontal contours. That will give you 4 control points for the final cubic interpolation in vertical direction and v as parameter. Resulting coordinate is your source pixel position.
For more info see:
How can i produce multi point linear interpolation?
Bicubic interpolation
OpenCV Birdseye view without loss of data
In case you do not have a grid use any info that can be used as one. For example lines of text can be considered a contour for this ...
I am still working on my "javascript 3d engine" (link inside stackoverflow).
at First, all my polygons were faces of cubes, so sorting them by average Z was working fine.
but now I've "evolved" and I want to draw my polygons (which may contain more than 4 vertices)
in the right order, namely, those who are close to the camera will be drawn last.
basically,
I know how to rotate them and "perspective"-ize them into 2D,
but don't know how to draw them in the right order.
just to clarify:
//my 3d shape = array of polygons
//polygon = array of vertices
//vertex = point with x,y,z
//rotation is around (0,0,0) and my view point is (0,0,something) I guess.
can anyone help?
p.s: some "catch phrases" I came up with, looking for the solution: z-buffering, ray casting (?!), plane equations, view vector, and so on - guess I need a simple to understand answer so that's why I asked this one. thanks.
p.s2: i don't mind too much about overlapping or intersecting polygons... so maybe the painter's algorthm indeed might be good. but: what is it exactly? how do I decide the distance of a polygon?? a polygon has many points.
The approach of sorting polygons and then drawing them bottom-to-top is called the "Painter's algorithm". Unfortunately the sorting step is in general an unsolvable problem, because it's possible for 3 polygons to overlap each other:
Thus there is not necessarily any polygon that is "on top". Alternate approaches such as using a Z buffer or BSP tree (which involves splitting polygons) don't suffer from this problem.
how do I decide the distance of a polygon?? a polygon has many points.
Painter's algorithm is the simplest to implement, but it works only in very simple cases because it assumes that there is only a single "distance" or z-value for each polygon (which you could approximate to be the average of z-values of all points in the polygon). Of course, this will produce wrong results if two polygons intersect each other.
In reality, there isn't a single distance value for a polygon -- each point on the surface of a polygon can be at a different distance from the viewer, so each point has its own "distance" or depth.
You already mentioned Z-buffering, and that is one way of doing this. I don't think you can implement this efficiently on a HTML canvas, but here's the general idea:
You need to maintain an additional canvas, the "z-buffer", where each pixel's colour represents the z-depth of the corresponding pixel on the main canvas.
To draw a polygon, you go through each point on its surface and draw only those points which are closer to the viewer than any previous objects, as indicated by the z-buffer.
I think you will have some ideas by investigating BSP tree ( binary spaces partition tree ), even if the algo will require to split some of your polygon in two.
Some example could be find here http://www.devmaster.net/articles/bsp-trees/ or by google for BSP tree. Posting some code as a reply is, in my opinion, not serious since is a complex topic.