SPS on the go !

[jerome]

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)

[jerome]

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 !

[jerome]

Thanks for the merges, DK

So SPS documentation : https://github.com/BabylonJS/Documentation/blob/master/content/tutorials/03_Advanced/Solid_Particle_System.md

 

You can now start to play once it is pushed in the PG. Have fun

[GameMonetize]

This is a REALLLLY COOL feature:)

 

think about adding credits and links to doc and sample in the readme.md. You deserve your credits my amigo!

[Dad72]

Big and great working on this feature.

[jerome]

thank you guys

 

PG demos coming soon 

[jerome]

ASTEROIDS !

 

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

[jerome]

If someone gentle could please add some sybox with stars or galaxies in the distance, this would be great ...

[GameMonetize]

I love it!

[GameMonetize]

And I confirm the vertices count  

[jerome]

So why are we sometimes speaking about a 65K vertices limit ?

I don't get this ...

[jerome]

I guess I should recode this example because it hardly works at home on my pushcart computer 

[jerome]

here is it : http://www.babylonjs-playground.com/#1X7SUN#2

less sphere segments, less spheres

 

not that impressive as a result, tsss

[GameMonetize]

The limit can be overridden if your browser support 32 bits indices extension. (babylon.js does it automatically for you). It is still a problem if you want to be cross-compatible

[jerome]

What if we pass explicitly Float32 arrays to updateVerticesData() ?

Do we force it for anyone or is this still a pure browser constraint anyway ?

[GameMonetize]

You can use both number[] and FLoat32Array with updateVerticesData

 

float32Array is just more efficient

[jerome]

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. 

[GameMonetize]

vertices limit is just based on number of vertices (independently of storage solution you want to use)

[jerome]

Okay

 

But what sets this limit when it exists :

the implementation of the WebGL API of a given browser version ?

the WebGL version itself ?

the GPU firmware ?

[Wingnut]

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.    (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.)

 

http://stackoverflow.com/questions/4998278/is-there-a-limit-of-vertices-in-webgl

  (looks somewhat informative, too)

 

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

[jerome]

 

 

I just don't trust what it's written in the newspapers 

[MarianG]

Hi, playgrounds from this topic don't work.

http://prntscr.com/8svx21

 

Thanks.

 

 

PS:

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);

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

[jerome]

yep

it seems something went wrong on the PG this last night as everything used to work until yesterday

[jerome]

Well done Bulisor !

that's it

[jerome]

rotation fixed

note the SPS oprimizer boolean properties changed (again) their names from SPS.setParticleXXX to SPS.computeParticleXXX

The adding of getters/setters in the code made these formers names very confusing