Sign in to follow this  
Komarara

Poor Performance on panning

Recommended Posts

 

Hi,

 

I'm trying to make an interactive polygon map with pixi js but panning gets dreadful stuttering on panning with over 6000 polygons. I made a screen record.

https://streamable.com/qexxv

When I reduce my Polyongs to 1000, panning gets smooth.

This is how I add my Polygons to Canvas

var g = new PIXI.Graphics();
                        g.beginFill(1);
                        g.lineColor = 0xffffff;
                        g.lineStyle(1, 0xffffff);
                        g.drawPolygon(
                            arrCoordinates
                        );

                        g.endFill();
                        app.stage.addChild(g);

and this is my pan function:

var lastPos = null
        $(canvas)
            .mousewheel(function (e) {
                zoom(e.deltaY, e.offsetX, e.offsetY)
            }).mousedown(function (e) {
                lastPos = { x: e.offsetX, y: e.offsetY };
            }).mouseup(function (event) {
                lastPos = null;
            }).mousemove(function (e) {
                if (lastPos) {

                    app.stage.x += (e.offsetX - lastPos.x);
                    app.stage.y += (e.offsetY - lastPos.y);
                    lastPos = { x: e.offsetX, y: e.offsetY };
                }

            });

Could someone tell what I can do to increase performance, please note that I need to interact with almost every polygon.
And is it possible to store customs values for each polygon, so when I click on one of them, I would like to display these values, etc?

I'm currently working with SVG and it's fine but it gets also very laggy on mobile devices when panning, so I thought pixel graphic would be better.

Share this post


Link to post
Share on other sites

Hello! Welcome to pixijs community!

There are many ways to improve performance of certain elements : graphics/sprites/meshes/whatever. 

Lags can be two types in this case:

1) your polygon coords are too big and shader precision is not good enough to pan properly. in this case use small coords, move big part to "graphics.position"

2) FPS is low. drawcalls/shader change/other stuff.  Its fixable but it requires long lectures or a demo.

3) its interaction lags. I dont remember if anyone had that , but maybe its possible. PixiJS actually checks ALL polygons, it doesnt matter if they on screen or not, there's no vertex/shape culling in pixijs.

Please give us more information or demo.

Share this post


Link to post
Share on other sites

Thank you for your answer. I will cut my decimal places, I have 14 of them. 

There is a culling library on GitHub for pixi js, I think I will give it a try. 

I will post a demo later, thank you for your help спасибо :)

Share this post


Link to post
Share on other sites

there are culling libraries on github for pixijs.

The complexity of implementation depends on whether you need to move those polygons later, or they are static. Simple FOR with checking all the bounds maybe enough in your case, if you dont run it EVERY frame. Store a "loaded" part of the map, and if camera hits the edge, re-calculate which polygons should be "renderable" and remember which rectangle did you "load" this time.

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.