Is it currently possible to display the intersection of a mesh and a plane as below in THREEJS:
Display in red, green, yellow the intersection of meshes with a back plane with a texture on it.
If not, which would the best approach be:
compute a "line geometry" at the intersection of the mesh and the plane in JavaScript, then renderer it
apply a custom shader material to the mesh (with the plane parameters as a uniform) that only colors a pixel if the current triangle intersects the plane
For option #2 are there some demos online already of such shaders?
Thanks,
Nicolas
=== UPDATE 2022 ===
THREE-Mesh-BVH provides new efficient ways to create contours. That is how I currently do it:
Adjust you geomeotry to a BVH tree
Compute each triangle to pllane intersection as it is super fast thanks to the BVH tree.
Live example: https://gkjohnson.github.io/three-mesh-bvh/example/bundle/clippedEdges.html
====
AMI now supports it (https://fnndsc.github.io/ami/#viewers_quadview)
The steps are:
Display intersection between a mesh and a plane
Post process the intersection to display the contours.
There are different techniques to display mesh/plane intersection:
With a stencil buffer (https://github.com/daign/clipping-with-caps)
Playing the the mesh opacity (https://github.com/FNNDSC/ami/tree/dev/examples/viewers_quadview)
All those techniques are computationally expensive at it requires 3 renders pass to display contours of 1 mesh and there may be a better approach but not sure what would be the best alternative.
HTH
Related
How can I adapt a geometry (a box geometry to start with) to another one? I am looking for an effect like the one in the picture
where the cyan part was originally a box and then it got "adapted" to the plane and over the red part.
This is possible in some software packages (Modo, for example) but I'd like to do it in webGL/three.js
Consider modifying mesh geometry.
That implies for good results mesh will need to have high polygon count.
If you want to hug a simple shape (box, sphere) - vertex displacement can be sufficient:
Pass your red shape's parameters as uniforms when drawing blue shape
For any blue shape vertex find if it is inside or red shape and offset vertex position if needed
Choosing offset direction as closest face normal of red shape should be ok
That will give just visuals, if you need more robust solution - generate new geometry entirely on cpu on demand.
For example:
Loop through all vertices and offset them, mark offseted vertices
Additionally loop to relax hard edges
I suspect real algorithms from 3d modelling software are more complex.
I'm implementing area light in my ray tracer. In a simple sphere obj model (i.e. it's the sphere that consists of triangles) squared patches are displayed. How can I make sphere surface smooth?
I suspect that surface normals calculation must be fixed.
Currently for each triangle single normal is computed for all points it contains.
Here's the sphere:
The square patches are displayed because you are simply seeing the triangles that make up the obj model. Either find an obj model with more triangles or use texture mapping to smooth the surface. If you are looking for a computationally effective method for drawing spheres, you can create a collision algorithm for spheres. I do not know how low-level you went on your ray-tracing project, but if you defined the reflection algorithm for the triangle, you can pretty easily do one for a sphere. I have created a visualization here:
https://www.geogebra.org/m/g9rrhttp
You can check that out if you want. If you do not want to implement this new algorithm, you can look for an obj model with a texture. the texture is what will make it appear smooth.
In a THREE.js scene with a Geometry object containing a triangle mesh, I want to achieve smooth phong shading. This seems to require making sure the triangles are added with the correct orientation.
Here's a Code Pen showing the issue. The same surface is rendered twice, on the left with varying triangle orientations, and on the right with consistent triangle orientations:
In my real code, because of how I am generating the triangle geometry, it is hard to know what the correct orientation should be. How can I achieve smooth shading independent of the triangle orientation?
I am just using a simple phong material:
let material = new THREE.MeshPhongMaterial({
color: new THREE.Color('#FFAA44'),
side: THREE.DoubleSide,
flatShading: false
});
You're running into issues with the winding order of vertices.
Counter-clockwise:
1
/ \
2———3
Clockwise:
1
/ \
3———2
When you use counter-clockwise winding order, the geometry.computeVertexNormals() makes all normals point away in the direction the triangle is facing, let's call it "forward". However, when you use clockwise winding order, it makes the normals point away in the opposite direction, so they're pointing "backward".
The phong material you're using relies on these normals to give you smooth shading. When you flip-flop between forward- and backward-facing normals, the possibility for smooth shading goes out the window, and you get the checkered look you see in your example. Actually all meshes, by convention, have all triangles follow a uniform winding order. You could solve your unique problem by looking at your vertex positions, and swapping two if you find they're winding in a clockwise manner:
Since you're using something similar to a plane grid, you could use a simple if statement. Based on my diagram above, you could do:
if (v2.x > v3.x) {
// Clockwise winding order! Must flip verts 2 & 3
}
It might vary which vertices you're comparing, based on how you're building them, but once all triangles are uniform, you can call computeVertexNormals();
I am using the open source program triangle.c (A Two-Dimensional Quality Mesh Generator and Delaunay Triangulator) which can be found here. I have to use this program to mesh a 2d circle and then rotate it to get 3d mesh of a sphere. Once I specify the points on the boundary, the program adds additional nodes inside the region and generates triangular meshes. However I would like to avoid adding nodes on the axis about which I want to rotate. Is there a good way to achieve this?
the 2d geometry i want to mesh
I am trying to create a terrain solution in ThreeJS and I'm running into some trouble with the generation of the normals. I am approaching the problem by creating a number of mesh objects using the THREE.PlaneGeometry class. Once all of the tiles have been created I go through each and set the UV's so that each tile represents a part of the whole. I also generate a height value of the vertex Y positions to create some hills. I then call the geometry functions
geometry.computeFaceNormals();
geometry.computeVertexNormals();
This is just so that I have some default face and vertex normals for each tile.
I then go through each tile and try to average out the normals on each corner.
The problem is (I think) with the normals, but I don't really know what to call this problem. Each of the normals on the plane's corners point in the same direction as the face when created. This makes the terrain look like a flat shaded object. To prevent this I thought perhaps what I needed to do was make sure each vertext normal (each corner) had the same averaged normal as its immediate neighbours normals. I.E each corner of each tile has the same normal as all the immediate normals around it from the adjacent planes.
figure A
Here I am visualising each of the 4 normals on the mesh. You can see that at each corner the normals are the same (On top of eachother)
figure B
EDIT
figure C
EDIT
Figure D
Except even when the verts all share the same normals it still comes up all blocky <:/
I don't know how to do this... I think my understanding of what needs to be done is incorrect...?
Any help would be greatly appreciated.
You're basically right about what should happen. The shading you're getting is not consistent with continuous normals. If each all the vertex-faces at a given location have the same normal you should not see the clear shading discontinuities in your second image. However the image doesn't look like simple face normals either, at least not to my eye.
A couple of things to look at:
1) I note that your quads themselves are not planar. Is it possible your algorithm is assuming that they are? the non-planar quad meshes don't have real 'face normal' to use as a base.
2) Are your normalized normalized after you average them? That is, do they have a vector length of 1?
3) Are you confident that the normal averaging code is actually using the correct normals to average? The shading in this does not look like completely flat shaded image where each vertex-face normal in a quad is the same - if that were the case you'd get consistent shading across each quad although the quads would not be continuous. This it possible your original vertex-face normals are not in fact lined up with the face normals?
4) Try turning off the bump maps to debug. Depending on how the bump is being done in your shader you may have incorrect binormals/bitangents rather than bad vert normals.
Instead of averaging at each vertex / corner the neighborhood normals you should average the four normals that each vertex has (4 tiles meet at each vertex).