I would like to draw graphs with Three.js and wonder what is the best way for it.
This framework here https://github.com/davidpiegza/Graph-Visualization solves it in using spheres as nodes and lines as edges.
I would need to add labels to the edges or alternatively can select the edges.
What other ways are there to draw graphs? Does anyone have an idea?
You should check out MathBox http://acko.net/blog/making-mathbox/ (which is based on three.js and the author's shader library ShaderGraph.js). The MathBox uses his library for many of this interactive 3d Math examples found on his blog. http://acko.net/blog/
Related
I'm developing a software that can display 3D IFC building models. I'm using Xbim, and Helix toolkit for that.
I managed to display the geometry correctly, but there is something off with the shading as far as I can tell.
Can I alter the calculation of shading either during Xbim triangulation, or in Helix toolkit? The goal is to have sharp edges, and remove the ugly shading lines from the flat surfaces which appear on the border between 2 triangles in the mesh.
I already did some research, and what I found out, that shading calculation may be based around the vertices: If they are shared by 2 polygons, the shading will be smooth, and if you have 2 vertices in the same place, each belonging to a separate polygon, there will be a hard edge. Is this theory correct?
EDIT: I think this may be more related to Xbim, and not to helix toolkit. So The question is, how to tell Xbim, that you want sharp edges, like the ones you get in Xbim.WindowsUI?
I am a newbie in both OpenGL as well as Three.js, I am working on a streaming based "on-line" viewer which uses websockets to transmit points (with surface normals) from one system application to a remote web interface. Long story short, I have modified BufferGeometry and use THREE.PointsMaterial to visualize incoming data with points.
Since I already am sending points locations [xyz], color [rgb] and normals [abc] so I would love to use technique such as surface-splatting Splatting. Unfortunately due to my limited knowledge and lack of internet resources can any one guide me to implement a very basic surface splatting technique using three.js?
Question: How to draw elliptical surfaces instead of points in three.js
Any help will be highly appreciated.
it would probably work using points if you compute the point-size per point such that the whole ellipsis fits in there and use the fragment-shader to compute the area of the ellipsis based on the viewing-angle (i suppose this is what you want to do, right?).
Alternatively, you can use instancing based on a simple quad and use instance-attributes for position and orientation of the quads. In this case, you just need to render a circle into each of the quads.
I created a model in Blender of a block with a hole in it:
I export it as an .obj file, and import it in ThreeJS with the OBJLoader add-on.
When I use it in my app, it appears to draw a face over the sides of the hole:
Is there a setting I need to use in ThreeJS to avoid having it close over gaps like this? Or is the problem in how I'm creating the model? I'm totally lost here, any guidance appreciated.
EDIT: I discovered through trial-and-error that the problem is having irregularly-shaped faces, like the ones adjacent to the hole. I "solved" my problem by triangulating the model; while this changes its shape slightly, it ensures that every vertex in the hole is part of a triangle face, which seems to be the magic answer.
I'm still very curious about why this is, especially since the triangulation has made the corners of the box a bit weird.
EDIT 2: Sorry for the delay. Here's the blender file: https://gofile.io/?c=EoxH1r
The problem you are having is because of ngons (polygons with more than 4 sides).
Modelling for three.js is just like modelling for games, so it is best to avoid polygons with more than 4 sides because when the renderer (or video card, I dunno) tries to render the model, it has to apply triangulation and may do it in an unexpected way.
As you said, applying triangulation to the model fixed the issue, but automatically applying triangulation in your modelling app may also yield unexpected results. So your best bet is to alter the model so you get the results you expect.
Here is a youtube video I found that seems to explain a lot about ngons.
https://www.youtube.com/watch?v=BjnCV2PIkKA
(though I only watched the first minute or so)
Here is an example of how I would do it, red lines representing added edges. Remember to do it all the way around on both sides and apply your smoothing groups before exporting.
Is it possible in Three.js to interpolate two meshes like this? At the area where they intersect should have a nice smooth transition.
I think I've seen it somewhere, but I can't find it.
EDIT
The metaball/cube concept is much closer to what I'd like to achieve:
https://www.youtube.com/watch?v=f42zr__yW_Q
http://threejs.org/examples/webgl_marchingcubes.html
I found the way to do it. It's called raymarching distance fields.
Here's an example:
https://www.shadertoy.com/view/4dsGRl
Also a presentation:
http://www.iquilezles.org/www/material/nvscene2008/rwwtt.pdf
I want to create a simple shape, let's say, a circle, it might have transparency, colors, etc. but it's still a simple circle.
In every tutorial I see, people use sprites. I am not sure what should I use for my case.
Should I use a sprite with a circle or should I try and draw the shape myself?
What are the advantages of each method?
Is there a line dividing them or is it just experience to know which one to use?
GPU geometry is composed of triangles or line segments so it'll be inefficient to draw a circle in this way, it'll require too many triangles for it to look smooth.
The two more efficient ways to do that are:
Use a sprite
Use a shader and draw the circle. Check ShaderToy, more specifically the "Shapes" preset.