In ThreeJS, how can I update the bounding box/sphere after changing vertex positions in a shader?
Edit:
I should've clarified I'm using a particle buffer geometry and changing the vertex positions in the shader. I'm not calling geometry.attributes.position.needsUpdate = true;
If you are updating vertices in the shader, it is typical to do this, instead:
object.frustumCulled = false;
three.js r.98
geometry.computeBoundingBox() and geometry.computeBoundingSphere()
Related
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 implemented a particle system using BufferGeometry and to make things efficient I pass the velocity and acceleration information of each vertex (particle) to the vertex shader and I calculate the position of vertices inside the vertex shader. I need a way to get the world coordinates of a given vertex in the Javasript code but I could not find any except maybe passing FBO from the shader. Is there a better or easier way to achieve this?
Thanks!
Update:
Well, I ended up applying the motion formula of the vertex to the initial position of the vertex and then applying the matrixWorld of the parent mesh to the vector to get the final position. It works but I'm still looking for a better solution.
I would like to create a vertex shader in Three.js to render the faces of a textured geometry so that all the triangles are face-on to the camera.
This is to emulate the functionality and performance of Three.js Points, but without the size limitation of gl_PointSize.
I'm not really sure what calculation to perform in the vertex shader. Any help appreciated.
you will have to add custom attribute to your geometry, easiest one to use would be a vector to the center of the triangle
in vertex shader you will have to calculate how to move each vertex, you now have
vertex position
vector to center
vertex normal == face normal
camera orientation (from matrices)
from that you can calculate the triangle center, which be static and calculate the rotation vertex has to make around the triangle center around axis perpendicular to the vector to center so that normal will come out as inverse of the camera orientation
the math is not very complicated, but writing shader code is tedious because of the non-existent debug - i advise you to first write a code that rotates the positions of geometry(using only the same parametres) and port it to shader
How check collision with terrain mesh in this example http://stemkoski.github.io/Three.js/Shader-Heightmap-Textures.html
All intersection as plane
Can't check for collision using raycaster as usual because the geometric object is actually a plane, which just appears different because of the shader code. The best work-around is to write a method that generates geometry object based on image texture, then you can remove shader code, and check for intersections as usual.
In three.js:
I have a problem. I have an object (plane) with a shader material that changes the position of the vertices in the vertex shader. I need to render the plane but is behind the camera and not rendered. How I can do?
Thanks you for your help!
Just set the frustumCulled property to false on the plane which will make sure it doesn't get frustum culled.
plane.frustumCulled = false