Trouble finding pointer position in 3D space on move relative to Solid Particles

Questions
1

Hi, I’m relatively new to 3D in JS, and very new to Babylon. I understand the concepts with 2D vs 3D and mouse events not having depth, but I would like to figure out how it would be possible to manipulate SPS particles around the cursor with only a move observer.

At a minimum, without getting into how I’d like to animate the particles after figuring out the position, I’d like to determine the following:

  • Is it possible to get x/y coordinates on a particle to match the cursor position when hovered over it, when the z is obviously 0 for the cursor, but is going to be greater when it’s a particle in order to provide depth?
  • If so, how do I determine the cursor position in the 3D space? I’ve currently tried a few methods, including ray (albeit, I didn’t know much of what I was doing), as well as examples from a couple of forum posts - but these revolved around having a distance between a click and a drag, in order to calculate 3D position - these examples are in the PG below.

Here is what I have so far and recreated it within a PG and added some comments around where these questions are mostly isolated (pointer move for determining position in lines 44-79, and future particle position changes in 260-270)
https://playground.babylonjs.com/#YQT4ZR#4

Any help would be greatly appreciated as I am a few pages of purple links deep, but it’s possible I’m not knowledgeable enough yet to even know how to properly search :slight_smile:

2

Hello! You can make the particles in the SPS pickable, which means you can discover which one corresponds to the mouse position when you click: Picking Solid Particles | Babylon.js Documentation (babylonjs.com)

3

Thanks @carolhmj, but I’m not looking to have a user pick them. Think of it like moving the cursor through water - on move, the water particles push away from the object. In this case, it would be the cursor pushing SPS particles when it gets close.

I’m going to try something different today that may solve this - I’ll try moving all the bubbles/balls to 0 on z, then having a new sphere created and tracked with the cursor, but made invisible. Then provide collision detection to somewhat make it how I envisioned. The only issue then is that depth will be no longer present.

1 Like
5

Ok, here’s what I ended up going with. I just created separate spheres (unfortunately RE performance), then use an applyImpulse on the onPointerOverTrigger registered action for each sphere.

https://playground.babylonjs.com/#YQT4ZR#12

Not exactly what I was going for, but this suffices for my PoC. If there is any additional comment to help with performance on lower-end machines, I’d still appreciate it.

Thanks!

2 Likes
6

Figured out why just setting onPointerMove wasn’t working, I had to set SPS.mesh.enablePointerMoveEvents as true first. :smiley: Makes sense, since enabling picking on pointerMove by default would be really costly.
QAZ | Babylon.js Playground (babylonjs.com)

There are some general tips on optimizing SPS here: Optimizing Solid Particle Systems | Babylon.js Documentation (babylonjs.com)

Another approach that might be more efficient is using Instancing instead of the SPS, since the only difference in your objects is the color. I modified this simple thin instances example to randomly move the spheres when the mouse goes over them:
Thin instances simple example | Babylon.js Playground (babylonjs.com)

2 Likes