Fastest way to render 50k circles of varying radius and colors

[warrior19]

I want to render 50k circles of varying radius and colors. The radius can vary from 1 to 1000. I want to show it in a scatterplot chart where there are circles of different sizes and colors.

I have made this codepen sample where I am drawing 10k circles and changing the radius and color of circles by clearing the graphics and rerendering it. The frame rate drops to 4fps.

https://codepen.io/ranajitbanerjee/full/abNRRXN

How can I make it faster?

[b10b]

Many ways, here's one ...

Draw a single big white circle (2048x2048) into a RenderTexture (or use a Bitmap asset if preferred).  Then use that Texture for each new Circle (as a Sprite) ... x 50,000.  Add them to a Container, then Position, Scale, and Tint the 50k Sprites accordingly.  Cache the container to save redrawing it every update (e.g. cacheAsBitmap).

On my quick test I was able to draw 50,000 Circles between 0...1024 pixels radius, randomly tinted and positioned in approx 120ms (on Desktop).  Once cached fps returned to 60fps.

Other methods may be faster again, but this approach is likely "fast enough", while being easy to implement, understand, and extend?

[warrior19]

@b10b

Thanks man will try this method

[warrior19]

@b10b How to get fast performance for  rendering lines with more than 30k points ? Also, the lines will be updated in realtime and can have linewidth more than 1. So, can't use the nativeLine method. Is there any way to use this kind of texture and sprite method here also or any other way to get the best performance?

[ivan.popelyshev]

Here are lines:

https://www.pixiplayground.com/#/edit/wu4-HcklTXNsrTiE6y9O7

requirements: proficiency with mesh & shaders.

[b10b]

7 hours ago, warrior19 said:

@b10b How to get fast performance for  rendering lines with more than 30k points ? Also, the lines will be updated in realtime and can have linewidth more than 1. So, can't use the nativeLine method. Is there any way to use this kind of texture and sprite method here also or any other way to get the best performance?

Undoubtedly @ivan.popelyshev shader approach is going to be fastest - if performance is everything, or realtime transitions are needed, you gotta dig into custom shaders and his example is a great place to start.

Whereas ... if you are ok with another "fast enough" approach (that's easy to understand, implement, and extend) ... use the same Sprite method as explained for Circles.  Swap the Circle Bitmap texture to a Rectangular white fill texture.  Then adjust the X scale for length, Y scale for linewidth, move the anchor to (0,.5), then move and rotate the Sprite based on start and end point (Math.atan for angle).  In my quick test this is faster than the Circle test.  So 50,000 circles + 30,000 lines in under 200ms on desktop.  Then cache!

Edit: for reference, these are the "kludgey" approaches we used when drawing lines with Flash before the draw API was introduced in "Flash MX" (pre 2004).  So ... in 2020 learn shaders XD

Edited September 20, 2020 by b10b