Jump to content

SPS on the go !


Recommended Posts

Hi people,


The Solid Particle System, also know as SPS, is nearly ready in the core... just waiting for PR now.


It is a port from the BJSX experimental version.

Some things have changed :


1 ) There are no longer any shape dedicated methods like addTriangles(), addQuads(), addTetrahedrons(), etc.

Now you just create a classical BJS mesh with CreateXXX() methods or import it and then you add it to the SPS.

var torus = BABYLON.Mesh.CreateTorus("t", {}, scene);var sps = new BABYLON.SolidParticleSystem("sps", scene);sps.addShape(torus, 50);           // adds 50 torus particlesvar spsMesh = sps.buildMesh();     // build the SPS meshtorus.dispose();

the same for any wanted shape.


2 ) Each particle is now double linked to its previous and next ones

var next = particle.next;var prev = particle.previous;

This can be useful to manage particles one by one : recycling, etc


3 ) setParticles(), beforeUpdateParticles() and afterUpdateParticles() have now three optional parameters

  • start : start index to start iterating over the particles (default = 0)
  • end : end index to stop iterating over the particles (default = nbParticles - 1)
  • update : boolean, if the mesh must be updated (default = true)

This is useful if you call setParticles() , or also the two others functions, each frame but you don't want, for performance reasons, to compute everything for all the particles at once or you don't want to update the mesh (VBO) each frame.


Example : you have, say, 30K particles.
frame 1 : compute positions for particles from 0 to 9999, don't update the mesh
frame 2 : compute positions for particles from 10000 to 19999, don't update the mesh
frame 3 : compute positions for particles from 20000 to 29999 and update the mesh


The documentation is also already started in the documentation github repo here : https://github.com/BabylonJS/Documentation/tree/master/content/tutorials/03_Advanced  (PR awating)

Link to comment
Share on other sites

first stress test here of new core-SPS :


chrome displaying a fountain (my emitter) of 25000 quad particles : addShape(plane, 25000);

with per particle color and texture, each changing randomly on recycleParticle(particle) call + billboardmode and whole mesh rotating, but no per particle rotation

=> 60 fps



same test with enabling the optimizers (no color, rotation or texture change after init) with 40K particles => 60 fps


iiiiihhaaaaa !

Link to comment
Share on other sites



First example : http://www.babylonjs-playground.com/#1X7SUN#1

Or the same outside the PG : http://jerome.bousquie.fr/BJS/test/solidparticlesAsteroid.html


This is a non-animated SPS : the particles are set once and don't change after. This runs at 60 FPS in my Chrome browser.



As you can see, the code is quite short :


line 26, I create the SPS, add 1000 spheres to it and build the SPS mesh. Please reduce the sphere number if you have a pushcart computer ;)


line 39 : I set initially the particles at random positions, with a random rotation and a random grey level for each.


line 66 : I define the advanced function updateParticleVertex() which is called per particle vertex, so a huge number of times ! Beware when using the function in a the render loop since we've got 2 415 000 vertices here according to the debug layer.

What ??? 2,5 millions of vertices and 60 FPS ?!?   Wadaf$*%k !!!


check and uncomment the line 78

there must be a bug in the debug layer counter ...


So this function "creases" each spherical particle by displacing just a little each vertex. So each particle will have then its own geometry, different from the other ones => 1000 different particles.


line 71 : I call init to compute each particle initial property values.


line 74 : I enable the (disabled by default for performance reasons) the call to updateParticleVertex() from setParticle(), then I just call setParticle(). This function does the magic : it updates the SPS.mesh from the particle values and renders it.


line 80 : the render loop is quite simple ... the mesh just rotates and slowly waves on Y axis like we were floating in the space looking for Sandra Bullock.



2,5M vertices (if really true ?), 14M indices (!!!), 1000 different flying objects, 80 LOC (including the boilerplate, lights, etc), 1 texture and 1 draw call for 60 FPS :)

I love this framework !




documentation in progress here : https://github.com/BabylonJS/Documentation/blob/master/content/tutorials/03_Advanced/Solid_Particle_System.md

Link to comment
Share on other sites

Yep, I know

But my question is : 

is using the float32Array a way to go over the 65K vertices limit or is this limit bound to the browser only ?




[EDIT] same example with higher sphere distorsion : http://www.babylonjs-playground.com/#1X7SUN#3


[EDIT2] : I think there is still a bug on particle rotations, I'll check next week. 

Link to comment
Share on other sites

Hey Jerome... they make a software app called a "web browser" that computers can run, and webpages can be "browsed" with this software.  Once browsed, you can read the information contained on that webpage.  :D  (Just having some condescending fun with you, of course)


OES_element_index_uint is an interesting search term... even when searching our "What's New" doc.   (Just thought I'd give you some pre-"Breakfast with Deltakosh" goods.)



  (looks somewhat informative, too)


Ok, sorry for butting-in... continue-on, guys.  Your demos are excellent, J-man!

Link to comment
Share on other sites

Hi, playgrounds from this topic don't work.







I found it :)


It's because  BABYLON.MeshBuilder;


It should be 

var sphere = BABYLON.MeshBuilder.CreateSphere("s", {diameter: 6}, scene);

instead of

var sphere = BABYLON.Mesh.CreateSphere("s", {diameter: 6}, scene);


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...