How do I draw a custom 3d surface using three.js? - math

What functions/math do I use to draw a 3d surface? For example, how do I generate z = sin(x+y)? How are the points calculated and drawn? I couldn't find any examples.

Following examples are linked from three.js website:
http://stemkoski.github.io/Three.js/Graphulus-Function.html
http://stemkoski.github.io/Three.js/Graphulus-Surface.html
both of these examples are using THREE.ParametricGeometry

https://threejs.org/docs/#api/en/geometries/PlaneGeometry
Something like this contains vertices. If a vertex consists of [x,y,z] you can apply your function there by looping through all the vertices.
http://aerotwist.com/tutorials/an-introduction-to-shaders-part-1/
this tutorial is an example how you can use shaders to do the same thing MUCH faster
I believe that this tutorial is a great starting point for all things realtime 3d:
http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/

Related

How to create 2D slices of 3D object model in Qt?

I'm currently rendering a 3D model (Wavefront .obj format) in my Qt program. Right now, I'm rendering the model using Scene3D in QML, and I'm able to get it to display in the viewing area. What I would like to do is have a user click on the model and generate a 2D cross section of the slice that I would like to plot on a different window. I'm quite new to 3D rendering, and a lot of Qt documentation isn't very descriptive. I've been reading Qt documentation, experimenting, and searching online with no luck. How can I create 2D slices of a 3D object Model in Qt 3D, preferably in QML? What Qt libraries or classes can I use to achieve this?
Unfortunately, the fact that models are stored as a set of surfaces makes this hard. QT probably doesn't have a built in method for this.
Consider, for example, that a model made of faces might be missing a face. What now? can you interpolate across that gap consistently from different angles? What about the fact that a cross-section probably won't contain any vertices?
But, of course, it can be solved. First, just don't allow un-closed surfaces (meshes with holes). Second, for finding the vertices of your cross-section, perform an intersection between every edge in your model and the plane you're using, and if there's an intersection, there's a point there. Third, to find the edges, look at the list of vertices, and any two that are from an edge on the same polygon in the mesh should be connected by an edge in the cross section. To find which direction the edge should go, project the normal of the polygon onto the plane your using. For filling, I don't really know what to do. I guess that's whatever you want it to be.

I'm trying to detect a square using Point cloud library. I have pcl data from a 3D lidar in which I need to find squares

I'm trying to detect squares using Point cloud library. I have pcl data from a 3D lidar in which I need to find squares. Ransac doesn't have a model for square. I wish to know what can be the most efficient method for square detection.
If you are looking for a filled square, the SACMODEL_PLANE should be able to find it. You may need to cluster the inliers of the plane model, and filter the clusters to find the location of the square.
If you are looking for the outline of a square, the SACMODEL_LINE should be able to find the 4 sides separately. You will then need some logic to filter out lines that do not belong, as well as to combine the inliners of the correct lines.

Creating a 3d graph using VivaGraphJS and using a particle system

I'm trying to create a force directed graph layout with the data of nodes and edges I have.I want to use VivaGRaphJS for this. I want to integrate it into a particle cloud in ThreeJS. I know how to do them individually, but i'm lost when it comes to using them together.
You could use ngraph.pixel, which combines three.js renderer with 3d layout engine from ngraph family. See more demos here.
Both VivaGraph and ngraph.pixel are sharing the same primitive structures.
What you would need to do is to mix the three.js render loop with the VivaGraphJS render loop. But it doesnt look like VivaGraphJS exposes the simulation step. If it did, you could just grab the (x,y) coords of your nodes and pass them to your three.js particle cloud.
Also, did you look at the WebGL option of VivaGraphJS?

Getting scan lines of arbitrary 2d triangle

How would one go about retrieving scan lines for all the lines in a 2D triangle?
I'm attempting to implement the most basic feature of a 2D software renderer, that of texture mapping triangles. I've done this more times than i can count using OpenGL, but i find myself limping when trying to do it myself.
I see a number of articles saying that in order to fill a triangle (whose three vertices each have texture coordinates clamped to [0, 1]), i need to linearly interpolate between the three points. What? I thought interpolation was between two n-dimensional values.
NOTE; This is not for 3D, it's strictly 2D, all the triangles are arbitrary (not axis-aligned in any way). I just need to fill the screen with their textures the way OpenGL would. I cannot use OpenGL as a solution.
An excellent answer and description can be found here: http://sol.gfxile.net/tri/index.html
You can use the Bresenham algorithm to draw/find the sides.
One way to handle it is to interpolate in two steps if you use scanline algorithm. First you interpolate the value on the edges of the triangle and when you start drawing the scanline you interpolate between the start and end value of that scanline.
Since you are working in 2d you can also use a matrix transformation to obtain the screen coordinate to texture coordinate. Yesterday I answered a similar question here. The technique is called change of basis in mathematics.

How to construct a mesh from given edge points?

I have some points on the edge(left image), and I want to construct a mesh(right), Is there any good algorithm to achieve it? many thanks!
image can see here http://ww3.sinaimg.cn/large/6a2c8e2bjw1dk8jr3t7eaj.jpg
To begin with, see Delauney triangulation. Look at this project: http://people.sc.fsu.edu/~jburkardt/c_src/triangulate/triangulate.html.
Edited because my original had too few details on edge-flipping, and when I tried to provided those details I found the TRIANGULATE project.
If the region is flat or quasi-flat look for Ear Clipping approach (http://www.geometrictools.com/Documentation/TriangulationByEarClipping.pdf). In the case of curved surface you need point inside the region and therefore you may need Constrained Delaunay Triangulation (otherwise some edges may not be included in the triangulation).
There is delaunayn function in geometry package for R language (see doc)
It takes an array of boundary points (as in your case) to create a Delaunay mesh on it.
You could also save your geometry into some well-known format, and use one of mesh generators.

Resources