Raycaster not intersecting with custom vertex shader


I’m implementing a particules systems with dedicated Vertex shader. Here a code example: https://jsfiddle.net/dthevenin/7arntcog/

I do use a Raycaster to do mouse picking and make possible to interact with one particule.

The code works as expected until I try to change the position of a vertex from the Vertex Shader. For instance in that example, I do pass a time value as an Uniform, and modify the x position with that time’s value.

    vec4 mvPosition = modelViewMatrix * vec4(position.x + time, position.y, position.z, 1.0);

Then the Raycaster failed to calculate the intersection.

To see the issue, uncomment the line 86, then clicking on a particule does not work.

What is wrong with that code / that solution?

PS: I could tweak the Mouse position with the opposite time translation; but that solution is not very generic and will not work with a complex position transformation in the Vertex shader.


Everything’s okay. Except that THREE.Raycaster doesn’t know what’s going on GPU, it works with the data you provided in JS.

Thanks for your answer.
That’s what I was suspecting after having quickly read the code of the Raycaster.

It seems that I have to implement my own raycaster!

In that case, is there a proper solution to have access, from JS side, to the final vertices position?
Or I could implement my own picking system, based on a offscreen rendering and texture reading…

You can start with this example: three.js examples
It does exactly the things you need.

Indeed, Thanks

Tried it myself.
Made it use the same object of points for both picking and main renderings.
Seems, it works okay :slight_smile: Feel free to modify it at your needs.


Example: https://jsfiddle.net/prisoner849/q4b0mog8/


Thanks a lot for your last example.
I was able to implement the picking based on an offscreen texture rendering.
The API is quite easy to use!


1 Like