Improving PIXI Graphics Performance When Rendering Huge Number of Objects.

[Amansaxena001]

Hi guys,
I have an app that renders a huge number of Pixi graphics and these graphics are just like HTML div which can hold children, you can expand/collapse them, etc by this what I mean here is the graphics are dynamic in nature and we change the dimensions of them on the go depending upon what kind event was fired and also depending upon their children each graphics will be different in size.
I have mainComponent that is basically a PIXI.Container where all the elements are drawn.

The problem starts to come when I am adding borders on these graphics objects then the FPS heavily drops as now we are doing two draw calls because of which extra work needs to be done by GPU in order to render those.

I have seen a few examples using RenderTexture ( medium ), and Sprites to improve the performance but I am not able to understand how would those work in my scenario.

I need help here in determining the right approach for this use case

[Amansaxena001]

@bigtimebuddy Here is the detailed explanation of the problem that I was trying to explain to you here. I saw your reply and thanks but to be very sure can you please go through the above description so that Im sure you understood the problem correctly🙏🏼

[Amansaxena001]

@ivanpopelyshev can you pls help here? its urgent

[ivanpopelyshev]

I'm working on my own project and doing pixi only in spare time. If you have specific problem, please tal;k to @bigtimebuddy and post a bounty. Polygonal shapes can be defeinitely speed-up even without renderTexture, just sprites, but it requires writing shaders, thats brain time, and i couldnt even port graphics-smooth to v8 yet

In current situation with pixi dev priorities, i really cant help, please help by talking to guys

[RecursiveVoid]

@Amansaxena001 How does the shapes look like? Here is my tip:

Replace simple rectangles and lines with Sprite(1x1 texture) where you can basically adjust the width and height for the desired size. and use particle container (not yet avaliable in v8 but u can downgrade to v7)

The border you mean stroke? Are those Webgl native lines or default triangulated lines, will of course come with a cost. (native lines are not yet in v8 i guess, but still you can downgrade to v7)

How many active shapes do you have in your scene? Do you have a viewport where you can zoom in and out?

[Amansaxena001]

@RecursiveVoid This is how the shapes are like and these can expand or collapse. ( I am not going into detail how we do that ). Each of these shapes can have a border: 1px solid like what we do in HTML. In pixi we use lineStyle to draw a solid line around them. The lineStyle is available on Graphics object only so nothing special I am doing here.

About the active shapes even though I ve enabled culling that does gives some performance boost but the shapes could easily go 5k-10k. And yes we have a Viewport which has a container where all the elements are put and rendered and you can zoom-in/out too.

[RecursiveVoid]

is this a mock-up or this how it should look with the background with a lot of diagonal lines?

[Amansaxena001]

@RecursiveVoid its just a mock to explain how my graphics look like currently with parent child relationship

[RecursiveVoid]

Did you try using Sprites and pushing them to ParticleContainer? because what you show me looks bunch of Graphics rectangles. And those can be easily replaceable with Sprites

[RecursiveVoid]

Another question, on zoom level/scale change do you want to keep the stroke width constant? or re-scalable?