I am using the Constructive Solid Geomery library for Three.js, made by Chandler Prall.
https://github.com/chandlerprall/ThreeCSG
The resulting meshes are accurate, but they are very fragmented (lots and lots of unnecessary triangles), and they break some functionality in Three.js, for example the EdgesHelper class is not able to find the edges anymore. This problem is also mentioned here:
http://moczys.com/2014/01/13/three-js-experiment-3-additive-geometry/
Is there a mesh simplification library for Three.js that can take care of this? Perhaps there already is a polygon union function (merge all co-planar adjacent triangles into a 2D Shape), which then can be triangulated back into 3D again?
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've read that Three.js triangulates all mesh faces, is that correct?
Then I realized that most of the gltf models I've been using have quad faces. It's very easy to triangulate faces in Blender so I'm curious if pre-triangulating the faces will result in quicker load of the mesh?
Thanks in advance, and if you have any other performance tips on three.js and gltf's (besides those listed at https://discoverthreejs.com/tips-and-tricks/) that would be super helpful!
glTF, in its current form, does not support quad faces, only triangles. Current glTF exporters (including Blender) triangulate the model when creating the glTF file. Some will automatically try to merge things back together on import.
By design, glTF stores its data in a similar manner to WebGL's vertex attributes, such that it can render efficiently, with minimal pre-processing. But there are some things you can do when creating a model, to help it reach these goals:
Combine materials when possible, to reduce the number of draw calls.
Combine meshes/primitives when possible, also to reduce draw calls.
Be aware that discontinuous normals/UVs increase vertex count (again because of vertex attributes).
Avoid creating textures filled with solid colors. Use Blender's default color/value node inputs instead.
Keep texture sizes web-friendly, and power-of-two. Mobile clients sometimes can't handle anything larger than 2048x2048. Might also try 1024x1024, etc.
I am setting up a particle system in threejs by adapting the buffer geometry drawcalls example in threejs. I want to create a series of points, but I want them to be round.
The documentation for threejs points says it accepts geometry or buffer geometry, but I also noticed there is a circleBufferGeometry. Can I use this?
Or is there another way to make the points round besides using sprites? I'm not sure, but it seems like loading an image for each particle would cause a lot of unnecessary overhead.
So, in short, is there a more performant or simple way to make a particle system of round particles (spheres or discs) in threejs without sprites?
If you want to draw each "point"/"particle" as a geometric circle, you can use THREE.InstancedBufferGeometry or take a look at this
The geometry of a Points object defines where the points exist in 3D space. It does not define the shape of the points. Points are also drawn as quads, so they're always going to be a square, though they don't have to appear that way.
Your first option is to (as you pointed out) load a texture for each point. I don't really see how this would introduce "a lot" of overhead, because the texture would only be loaded once, and would be applied to all points. But, I'm sure you have your reasons.
Your other option is to create your own shader to draw the point as a circle. This method takes the point as a square, and discards any fragments (multiple fragments make up a pixel) outside the circle.
In Blender, or any multitude of modeling software you can add vertices on the fly.
However in Three.js this is would be an very expensive operation. You would have to replace the geometry with a new one every time.
What is the difference?
Blender ultimately does the same thing. When adding geometry (vertex, faces, edges, etc) you effectively have to re-upload a buffer containing the vertices / faces / texture UV coordinates to the GPU when they are changed. This is why it seems complex. You can easily wrap these concepts in functions to make it easier on yourself.
What I'm trying to do is to "drape" some points on a PlaneGeometry. I have the planar coordinates of the points in the same coordinate system of my plane geometry, what I need i sto get the "height" from the plane to position the points on top of it.
What's the best way to achieve it? Querying the planar mesh in Javascript would be to heavy. Should it be done (and could it be done) using the vertex shader?
EDIT
Probably using a ray caster is the right solution, something like shown in this example: http://threejs.org/examples/#webgl_geometry_terrain_raycast
EDIT2
Raycasting does the job, but it's quite slow for a lot of objects. I suppose there are more efficient ways to do that...
https://dl.dropboxusercontent.com/u/13861666/2014-01-17%2011_27_15-firenze.png