Pure GPU particle system

[sable]

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.

Cheers

[NasimiAsl]

hmm

http://www.babylonjs-playground.com/#1QC9DP#155

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

 

[jerome]

superb demo

[NasimiAsl]

thanks : http://www.babylonjs-playground.com/#1QC9DP#156

[NasimiAsl]

@jerome if you like we can start a project in BABYLON js About GPU SPS 

[jerome]

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

[NasimiAsl]

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

 

 

[GameMonetize]

Real GPU particles will be available with a future version of BJS (https://github.com/BabylonJS/Babylon.js/issues/2033)

 

Realy nice demo @NasimiAsl!!

[sable]

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.

[NasimiAsl]

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  )

and yes this can take any structure four face

 

[NasimiAsl]

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

 

[NasimiAsl]

i work on Editor for help to make geometry 

http://editor.5kb.me/

 

[NasimiAsl]

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

http://www.babylonjs-playground.com/#IX1082#13

Step 3 : detect any part in Vertex Shader

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

http://www.babylonjs-playground.com/#IX1082#17

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

http://www.babylonjs-playground.com/#IX1082#22

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

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