GPU particles - start to end animation

Questions
1

Hi all,

I’m a scientist trying to create a fancy animated plot using babylon.js.

Basically I have two sets of x,y,z coordinate data for 1,000,000 data points, let’s call them position A and position B.

I’d like to create a 3d scatter plot and animate the movement of each point (particle?) from position A to position B.

Due to the large number of points the animation should use the GPU. I can see that it’s possible to define a start position for each point/particle (Customize Particle System - Babylon.js Documentation). If I could add an end position then it should be possible to animate the points moving from A to B on the GPU? Is this supported? If not, could you kindly consider adding the functionality? For science.

Thanks :slight_smile:

1 Like
2

Hello and welcome!

it is definitely easy with CPU particles but 1 million is a big number

For GPU particles unfortunately we do not support end position (yet) but if you want to play with it I can help you hack your way around :slight_smile:

3

Thanks for the welcome and quick reply!

I’m here after trying ThreeJS and finding that animating this many CPU particles is quite painful – it really needs to happen on the GPU for a smooth experience.

I’m new to this (some d3.js only), so I worry that if I tried to hack together / implement my own start->end GPU tweening algorithm it would take an unreasonable amount of time!

Thanks though, I’ll watch the thread for any updates. It seems from a couple of previous posts on the forums here that there may be some demand for this feature… fingers crossed somebody can implement it!

4

I could work on that for you (maybe not immediately but soon)

Do you mind creating an issue for it on our repo?

1 Like
5

have you tried the Point Cloud Particle System ?
https://doc.babylonjs.com/how_to/point_cloud_particles

1 Like
6

Done: Particles - Babylon.js Documentation

4 Likes
7

Thanks to some help from Evgeni_Popov here are two PGs based on @jerome’s suggestion. Both have 1 million points, the first uses the CPU, the second a shader. You can see the difference

CPU - https://www.babylonjs-playground.com/#U2C1Q6#6
Shader - https://www.babylonjs-playground.com/#U2C1Q6#5

Of course @Deltakosh’s change to GPU particles gives a more straightforward approach.

3 Likes
8

@Deltakosh Thanks for the amazingly quick turnaround.
And thanks @JohnK @jerome @Evgeni_Popov it’s great to have different options – the PG’s are also a clear illustration of the advantage of animating with a GPU shader vs CPU.

Would appreciate any pointers on matching the functionality of the shader GPU PG (i.e. XYZ ->XYZ, https://www.babylonjs-playground.com/#U2C1Q6#5) using the new custom emitter, if at all possible? My initial attempt was to specify ManualEmitCount = n_particles with an “infinite” minLifeTime; however, ManualEmitCount isn’t supported with GPU. Is there another way?

9

For the GPU you may need to have a timer aligned with a static lifetime and when the timer is done you can kill the current particle system and replace it with a static one (where destiation = intial position)