Particles system
coal September 20th, 2020

1. Hello again. I've made on your editor lovely demos last year, here you can see it from very simple to very professional at the end of demos list (raytracing, dynamic lightning, e.t.c, all in shaders). All since Wade12 demo are pure shaders  

http://foresttrumps.mygamesonline.org/

 

2. Now I want to ask you again - please implement particles system. It is really need for all to draw weather effects: clouds, rain, snow, smoke, leafs on wind, waterfalls, dynamic fire, dynamic fluids and so on, what makes game very beautiful and professional.

3. Why I can't draw all of this now? Because of breakes. When I try to draw snow by sprites with moveTo - I can draw only 1500 (!) snowflakes. More snowflakes make brakes.

4. When I try to draw snow in post-effect shader by raytracing - I can draw only 1000 (!) snowflakes (because of loop 1000 for each pixel because I don't know particle index and ought to loop all and test 1000 times for each pixel).

But particles systems allows to draw 1 000 000 (!!!) sprites/billboards with no brakes. Please watch this demo 

https://www.yuichiroharai.com/wgl/15_one_million_particles/

every point on that demo - can be individually textured sprite (billboard) of any size, with the same rendering speed (!)

Any particle can be fully controlled from shader and can be drawn individually (different position, size, rotation, speed, any user attribute, that user defines and shader implements).

5. How it works? Keyword: instancing.

For example, shader must know about index of particle - this is minimal information. From that information I can draw in shader the whole world by math and texture, with extreme speed. For example one million falling leafs, each falls individually and drawn individually (red, greed, from different tree). That is the power of particles and shaders, which I need for professional effects.

6. Please describe place in wade.js where you prepare buffers for shaders. Or any place to start for myself patching. I'll try to examine it and do smth by myself (but I doubt in success).

7. Please tell what version of shaders are supported by editor. Is WebGL2 supported?

All 3 Comments
coal September 20th, 2020

Here is great tutorial how to implement instancing (particles system)

https://webglfundamentals.org/webgl/lessons/webgl-instanced-drawing.html

you can scroll to end of this tutorial and set in snippet such code

  // setup matrixes, one per instance

  const numInstances = 100000;

then press run, and it will works well, displaying 100 000 unique animated sprites! This is great and pretty simple tutorial. I think you can implement that by 2-3 evenings. Please, please, make this. And I make for you great demo shaders with power of instancing.

coal September 20th, 2020

The only thing, that is really needed in instanced pixel shader - is instance index. So, it need to add in editor's shader: checkbox "instanced", plus textbox "count of instances" and system-defined variable in shader: gl_InstanceID (it is already defined in vertex shader, so it needs to pass it to pixel shader additionally).

When you will have implemented that - I take this gl_InstanceID in pixel shader, then calc sprite's position/size/rotation/color by math - and then sample it with texture. This is the minimal, what I need. 

With it I'll be able to draw waterfall for example, or dynamic snow with gravity and wind of 100000 snowflakes with no brakes. And only by power of math and one texture. Example of pure shader math you can see in my demos (first link upper) in demo Wade39 - pure post-effect shader code and 6 textures. No sprites, no js. But very gpu expensive without instancing (1000 times more expensive that could be)

coal September 21st, 2020

If there is question how particle index could be helpful... I can get particle position from index by noise texture or by fbm function or simply by sin(time).

In my own webgl demos (without editor) I've send to shader only one point (and nothing else!) and get such page with fps 60

 

I don't need such result in wade, but this shows power of shader math. Only one point sended to gpu - can extract all the endless world with scrolling, scaling and so on. And with water, clouds, animals, trees. All from one simple abstract point (and noise functions or noise textures for speed).

All what I need in wade with instancing - are beautiful weather effects. Plus other power of current wade editor. But currently no deal with effects...

Post a reply
Add Attachment
Submit Reply
Login to Reply