Raycaster not intersecting with custom vertex shader

Questions
,
1

Hi

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.

2

Hi!

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

3

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…

4

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

5

Indeed, Thanks

6

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.

Picture:

изображение
изображение789×649 97.7 KB

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

2 Likes
7

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!

Cheers

1 Like