Raycasting after transform position in vertex shader

Hi, I have a simple PlaneBufferGeometry with a MeshStandardMaterial.
I edit its shape in an arc editing its vertex onBeforeCompile.
Everything works well except the raycasting that only fire on its previous shape.
How could I say to the renderer that my vertices are changed so that the raycaster could find the new shape?

By applying the same transformation on the geometry in js, which makes the shader part obsolete, but what you can also do is approximate this with a SDF mathematical equivalent on JS side which works well for many cases, you would have to overwrite the raycast method on the mesh with this approach if you familiar with raymarching and how to do it, otherwise i would recommend transforming the vertices on JS side.

1 Like

Thank you!
Transforming the vertices on JS side would have been great, but I forgot to mention that this new shape change by the time uniform, like a wave.
So if there are any other easy solutions to tell where the new vertices are, I’m forced to try reymarching technique.
Are there any examples?

Yes you can do transformations per frame on the buffer of the THREE.BufferGeometry, though avoid using THREE.Geometry it would convert and create objects each frame. This works ok for quite large geometries depending on how expensive the transformations are, you just flag the attributes you change on the geometry with needsUpdate = true and it will update the buffer in a clean way.

For raymarching you can look at https://www.shadertoy.com some examples show basic shapes like cube, sphere, plane, torus etc, you can ignore the camera setups and all, you would only use the ray direction and origin and sample with your equation to determine how far the ray is from the surface. It is a bite more advanced if you never heard of it i would rather stick to just transforming the vertices on JS side if there aren’t too many triangles, raycasting will work as usual.

2 Likes