Three.js: Change vertex position in vertex shader? - three.js

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

Related

Computing Bounding Box After Moving Vertices in Shader

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()

Getting the vertex coordinate of a BufferGeometry transformed in vertex shader

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.

Three.js - sending ray from object to camera

Thanks for the helps in advance.
Three.js Raycaster class allows sending rays from camera to the object. I want to achieve a reverse operation. Imagine that we have a plane in the scene which represents our screen for projection. We also have an object (mesh) to be projected. I'm trying to find where would a vertex be projected on the screen.
Practically, for a vertex, if we project a ray from vertex to camera, we need to find its intersection with the screen plane. Note that everything is in 3D here. So my screen(camera) plane is in 3D coordinates too.
Any advise to solve this problem?

I think what you are looking for is projection of an object3d to screen position.
It was answered here:
answer
then you will have vector2d with x,y screen coordinates.
if you want the point on an actual 3d plane, you can then make a ray from the camera to that position on the screen, add to the ray intersection only that plane you locate infront of the camera, and then get the intersection point:
rayCaster.setFromCamera(vector2d, camera);
var aIntersects = rayCaster.intersectObject(planeInFrontOfCamera);
if (aIntersects.length > 0) {
var positionOnPlane = aIntersects[0].point.
}

Three.js vertex shader to render all geometry triangles so they face camera

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

Three.js how check collision with shader heightmap

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.

Resources