Optimizing pixi viewport layout

[grosjardin]

I am using pixi.js to create an interactive grid. This grid is composed of PIXI Graphics rectangles. I am now creating a layout of 25000 rectangles and the browser is having a hard time to process it (code sandbox below)

This is my setup :

setup() {
                // making a 30 x 13 grid of tiles
                for (let i = 0; i < 25000; i++) {
                    let square = new PIXI.Graphics();
                    square.beginFill(0xF2F2F2);
                    square.drawRect(0, 0, 25, 25);
                    square.endFill();
                    // Opt-in to interactivity
                    square.interactive = true;
                    square.buttonMode = true;

                    square.on('pointerdown', this.onButtonDown);
                    // square.on('pointerover', this.onButtonOver);
                    // square.on('mouseout', this.onButtonOut);

                    square.x = (i % 30) * 32;
                    square.y = Math.floor(i / 30) * 32;
                    // add squares to stage
                    this.viewport.addChild(square);
                }
            }

Is there a way to optimize this or have I maxed out Canvas capacities ?

 

https://codesandbox.io/s/zen-flower-5q09u?file=/src/App.vue

[ivan.popelyshev]

ParticleContainer with sprites can survive this. For statics you can also put everything in several graphics instead of 10000. For real static small images you can use pixi-tilemap.

I recommend to go through https://webglfundamentals.org/ if you want to understand canvas capacities  No, we dont have pixi version of it yet

Edited May 28, 2020 by ivan.popelyshev

[grosjardin]

7 minutes ago, ivan.popelyshev said:

ParticleContainer with sprites can survive this. For statics you can also put everything in several graphics instead of 10000. For real static small images you can use pixi-tilemap.

I recommend to go through https://webglfundamentals.org/ if you want to understand canvas capacities  No, we dont have pixi version of it yet

Thank you I will see if Particle Container does the trick even if it lacks the most advanced functionalities. I'm not sure I undertand your second sentence. What do you mean by statics and having several graphics? Isn't it already what I am using?

Thanks again.

[ivan.popelyshev]

100 graphics, each of 250 rects.

[grosjardin]

I am trying with the Particles Container. Any idea why I get :

Quote

Uncaught (in promise) Event {isTrusted: true, type: "error", target: null, currentTarget: null, eventPhase: 0, …}

Some PIXI event get a null error but I dont know where its coming from. 

https://codesandbox.io/s/zen-flower-5q09u?file=/src/App.vue

Edited May 29, 2020 by grosjardin

[ivan.popelyshev]

No one answered in a day? Its possible that you'll have to wait even more. Maybe actually debug where exactly that even is spawned?

Also, particle container + interaction probably wont work, it has limitations , it doesnt update transforms. Without hacking interaction, making your own "containsPoint" for big objects collections I doubt you can get what you want

Edited May 31, 2020 by ivan.popelyshev

[grosjardin]

Well the only interaction I need is being able to get the target x, y and save those positions into an array, and draw new Sprites on them.

It looks possible if I am not mistaken https://pixijs.download/dev/docs/PIXI.ParticleContainer.html

Although I am still trying to debug this.

Edited June 1, 2020 by grosjardin

[grosjardin]

Taking a step back, having event listener on 250 000 tiles dosent look feasible. Maybe the best strategy would be to get the world x,y coordinates after mouse click and draw any shape on the canvas according to those.   

Edited June 1, 2020 by grosjardin

[ivan.popelyshev]

It wont be easy to do it without actually looking how interaction works. There are methods that you can override in your "tilemap" container that will decrease number of lines significantly

[grosjardin]

Yes, well I'm learning about it over time while trying things ?

Since I only need interaction on what is being drawn I implemented this : 

   this.viewport.on("clicked", (e) => {
                if (e.world.x > 0 && e.world.y > 0) {
                    const x = Math.floor(e.world.x / 32) * 32
                    const y = Math.floor(e.world.y / 32) * 32
                    this.drawNewTile(x,y)
                }
            })

    methods: {
            drawNewTile(x,y) {
                let square = new PIXI.Graphics();
                square.beginFill(0xC1DBE3);
                square.drawRect(x, y, 25, 25);
                square.endFill();
                // Opt-in to interactivity
                square.interactive = true;
                square.buttonMode = true;
                this.viewport.addChild(square);
            }}

 

[grosjardin]

On 5/28/2020 at 6:55 PM, ivan.popelyshev said:

100 graphics, each of 250 rects.

About that, do you know if its possible to add a Container inside a Particle Container ? To make the grid, looping over 250k + Sprites and adding them in on Particle Container is way too heavy. I'm trying to find a way to pack multiples 10x10 sprites in a container and then loop over that container so I can reduce the iterations. 

Having that 10x10 shape drawn to a  PIXI.Graphics is tough to manage, or impossible. 

[ivan.popelyshev]

@grosjardin

The answer was posted many times:  use many rects per one graphics, use pixi-tilemap, or use a RenderTexture if you have static content. Please search for "pixi-tilemap" in this subforum to look at those discussions. I'm sorry that I still didnt make general article on how to handle 100k+ objects. Yes, its possible, but nobody made that kind of article in WebGL community, there are only pieces of information across forums.

No, its not possible to add a Container inside ParticleContainer, read its code and you'll see how it works. Performance means restriction on the code.