Jump to content

Optimizing pixi viewport layout


grosjardin
 Share

Recommended Posts

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

Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Quote

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 by grosjardin
Link to comment
Share on other sites

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 by ivan.popelyshev
Link to comment
Share on other sites

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 by grosjardin
Link to comment
Share on other sites

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);
            }}

 

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...