Most effective use of many Graphics objects?

[allnamesrtaken]

Hi,

I have created a nice little top down snow and rain simulator which goes fast in code pen on PIXI v6 but a bit slower on my real project using V5 (for now).

Naturally the project has alot more going on, layers and large images etc. I draw the rain and snow using simple Graphics objects and .drawLine.

For the code pen I seem to be able to scale it to thousands of drops without issue but in my real project it is smooth with like 50 drops but at 500, the snow is smooth but the rest of the interaction events begin to stutter.

I currently just create a Graphics object per drop/flake and add those to the background and set their layers.

Is there a faster way of doing it, such as drawing all the flakes as one large Graphics object with 500 lines, use sprites, shaders  or some other magic chop I can do to relieve the stress?

I use layers to have drops fall on top and splash below among things.

 

Many thanks. 

[ivan.popelyshev]

we have new package for graphics with lines: https://github.com/pixijs/graphics-smooth

as for general issue of "there are 500 of them!!!" , that's a big topic. 

Did you by change found any of my explanations regarding "high-level vs low-level algorithms? ? I'm not feeling well enough to post all that again.

> Is there a faster way of doing it, such as drawing all the flakes as one large Graphics object with 500 lines, use sprites, shaders  or some other magic chop I can do to relieve the stress?

The best way is if you know how to make mesh geometry that you modify every frame, and shader that does good work on AA and stuff for your elements. If you dont know how to do that - well, you have to use whatever you can

500 is not big amount, just put them in our new graphics, clear&refill each frame.

Edited June 23, 2021 by ivan.popelyshev

[ivan.popelyshev]

People usually use sprites inside a particleContainer, it has limitations, you need single texture (or texture atlas) for everything, and you have to smooth the texture in image editor, dont rely on webgl AA on edges.

Threre are many ways to solve your case, i dont even know which one to suggest first

Edited June 23, 2021 by ivan.popelyshev

[allnamesrtaken]

Thank you @ivan.popelyshev

Just drawing them as a single graphics object made it fast enought for now. I guess I will see how I can limit calculations in JS next.

Thanks again.