Jump to content

Pure GPU particle system


Recommended Posts

I'm looking at trying to incorporate this, a webgl particle wind effect, into a project but am somewhat stuck on how to do so. The wind effect there uses the idea outlined here regarding using textures to store particle positions, and using shaders to update these each frame.

What seemed like the obvious solution was to render the final result to a texture (keeping the module self contained, rendering to its own framebuffers and just using the final result in the scene), but I can't seem to find how to do that in Babylon.js. I'm guessing the solution has something to do with render targets, but I couldn't find much documentation.

The alternative would be to port the whole thing to Babylon, which again I think would involve rendering to textures (render target texture?).

Any pointers on the above would be greatly appreciated.


Link to comment
Share on other sites

hmm :)


for make dynamic wind effect (in GPU side  ) for any geometry it take a lot time but we can make some special 

anyway if you wanna make that in cpu side i think @jerome can help you 

but for GPU side maybe you define special requirement about effect i try make it but for general GUP-particle system  i think you need wait for next version of BJS


Link to comment
Share on other sites

This would be nice and already thought about this. But the SPS is designed to provide no default behaviour, this means that the user must implement his own one.

It's design like this in purpose : to give the ability to everyone to do (animate or not, merge, digest, etc) what one needs. This is different from the standard particle system what is designed to usually "emit" particles and then to manage their life cycle.

In the SPS, the user can/must implement his own logic CPU side with updateParticle(particle) . This part of user code is called for each particle and I have no idea about how this part could easily (for the user) transfered GPU side unless the user accepts to code his own Vertex shader.

Or with ShaderBuilder of course ;)

But this is still GLSL programmation

Link to comment
Share on other sites

that is correct but we have a big limitation ( user don't like GlSl programming at all )

 is that useful if we make particle system for now  or not ?

 i like start that stuff actually after CustomMaterial we don't need a lot ShaderBuilder for this stuff and geometryBuilder Can make any geometry and can repeat that so i think i have all i need for make that (Cpu side and GPU side  both) but i start BABYLONHx rewriting too so i most choose one of them 

or start both with some partners



Link to comment
Share on other sites

Thanks for that demo @NasimiAsl
Is there some documentation on geometry builder somewhere; looks really useful. Can each face have only exactly four vertices?

What I'm mainly after is the particle trails, as seen here, along with the ability to pass the output texture back into the shader as an input (I believe this is known as the ping-pong technique, or at least that is what it is referred to as here. I can see from the source how this is implemented in webgl, but am having trouble translating that into the babylonjs framework.

@Deltakosh that looks interesting, though I think for what I'm looking for transform feedback isn't necessary, as I should just be able to pass back a texture.

Link to comment
Share on other sites

9 hours ago, sable said:

Is there some documentation on geometry builder somewhere; looks really useful. Can each face have only exactly four vertices?

hi it is alpha version and just core is completed now i make a sample and explain it for you to night (iran night :D )

and yes this can take any structure four face


Link to comment
Share on other sites

BABYLONX.GeometryBuilder  Babylon Extensions > GeometryBuilder

structure    : 

Builder : function that take setting and Append Vertex and make face

geoBuilder1 : Convert Buffer To Babylon Js Geometry

   var geoBuilder1 = function (op) {

              var builder  = function (setting , geo) { 
                   // use geometryBuilder function for make face and vertex

              return new BABYLONX.Geometry(GB.GeometryBase(op, builder, null )); 



how this work :

step 1. Make Type Geometry Buffers inside the Builder Function Defined by User

         1 - 1 : use GeometryBuilder.PushVertex(   geometry ,  vector 3 point  ) for add New Vertex demo

         1 - 2 : use GeometryBuilder.MakeFace(  geometry ,  vector 3 points array  or vertex indexes  ,option ) for Add New Face (with or without vertex demo

           Make face can make 3 point face and 4 point face

         option :  

       export interface IVertexPushOption {

                   faceUVMap: string,   

                   uvStart: UV,

                  uvEnd:  UV,

                 Face3Point: boolean,

                 flip: boolean 


         1 - 3 : you access the geometry buffer for manage any info like uv and others

step 2. Make Babylon Geometry Used by BABYLONX.Geometry

step 3. call GeoBuilder for make your mesh


sample : http://www.babylonjs-playground.com/#IX1082#2

sample vertex push : http://www.babylonjs-playground.com/#IX1082#3

faceUVMap Sample :  http://www.babylonjs-playground.com/#IX1082#5

flip sample : http://www.babylonjs-playground.com/#IX1082#6 (make 2 side plan use with flip)

get point from path : http://www.babylonjs-playground.com/#IX1082#7

marge multi geometry : http://www.babylonjs-playground.com/#IX1082#8


Link to comment
Share on other sites

gpu particles system

How We Can Make GPU particles System With Geometry Builder :

Step 1 : Make Grid of Single faces (any face be part of particles )

http://www.babylonjs-playground.com/#IX1082#10 625 parts (seg:25)

http://www.babylonjs-playground.com/#IX1082#11 16 part (seg:4)

Step 2 : make them Special Uv and Position for Detect that in Shader


Step 3 : detect any part in Vertex Shader

http://www.babylonjs-playground.com/#IX1082#15 move 2 column 


Step 4: make Scale - rotation - Move in Shader Vertex for any Part


http://www.babylonjs-playground.com/#IX1082#23 add noise

http://www.babylonjs-playground.com/#IX1082#25 final result




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