How to render large amount of complex polygonal shapes efficiently

[RecursiveVoid]

Hi, my first question here heh.. quite exited... Anyways, i will hop on to my issue here:

I want to render around 100k of complex polygonal shapes (closed shapes with filling and stroke) , arcs etc..

I already experimented and amazed by the power of the pre-rendered sprites. I was using Sprites for rectangle shapes, referencing only one 1x1 texture which i created. Then pushing them to the ParticleContainer. Amazing performance.

Unfortunately when it comes to complex polygonal shapes it gets more complicated. Using Graphics is very costly, same with rendering Mesh (compared to sprites) (unless you cache them as bitmaps).

Caching as bitmap is an issue in this case because i want to use viewport and zoom in and out and preserve the scaling of the objects. Which, it works pretty good with basic rectangles and lines in this case. (I recalculate only the height and width and update the shape)

Any suggestions & tips?

[bigtimebuddy]

Rendering Fast Graphics with PixiJS https://medium.com/@bigtimebuddy/rendering-fast-graphics-with-pixijs-6f547895c08c

Maybe this article I wrote can help you.

[RecursiveVoid]

Exactly like in your article, I should consider about culling. And also maybe an intelligent layering system in container where it stops rendering the overlapping Shaders and textures which are not visible from first place.

Alright, i will mark this as the Answer since it was super helpful.
Thank you Matt.

[Amansaxena001]

@bigtimebuddy Even If we enable culling ( which I ve enabled on my app ) which does give some boost but when we have a scenario of many unique shapes ( more importantly the shapes can be changed on the fly ) that are being drawn using Pixi.Graphics and if you add borders to that then its a mess as the FPS drops are huge.

Any suggestions from your side on what can be done here?

[bigtimebuddy]

Consider rendering Graphics to a RenderTexture. Adding stokes can dramatically increase the geometry making it more sensitive to performance with a large number of shapes. Using a RenderTexture basically treats it like a Sprite (rectangle with 4 vertices). Alternative option, that you should read the article above if you haven't already, is to draw the Graphics at a smaller size and then scale up. This will reduce the number of point for triangulating. Good luck.

[Amansaxena001]

I am having a hard time using RenderTexture to render dynamic graphics. When I use renderTexture and use the sprite to dynamically set the x, y, width, height of the container the sprite is scaled too much especially when setting width & height. For eg the calculated layout values are

  const pixiComp: PIXI.Sprite = new PIXI.Sprite(commonTexture); -> commonTexture is a `RenderTexture`( ref your blog )
  
  const { x, y, width, height } = calculatedLayoutValues

// these are getting set correctly
    pixiComp.x = x;
    pixiComp.y = y;
    pixiComp.tint = some color

// when I set these the whole sprite is scaled too much instead the expectation was to look like exactly how the graphics would look like if pass same props.
    pixiComp.width = width
    pixiComp.height = height;

Note- This exact implementation works fine when using graphics but when using sprites instead of graphics its not working as expected.

@bigtimebuddy

[bigtimebuddy]

Seems like you need more help @Amansaxena001 with your project than we are able to support on these forums. We unfortunately cannot help all users debug their specific code. I would suggest you join the Discord (link on readme), you're more likely to get helpful community members there. Also, please make sure to read the guides on PixiJS.com as well as https://www.pixijselementals.com/#introduction. When in doubt try ChatGPT, StackOverflow and Google.