Poor Performance on panning

[Komarara]

 

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.

[ivan.popelyshev]

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.

[Komarara]

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 спасибо

[ivan.popelyshev]

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.

[Komarara]

Here is a demo. It's an HTML-file and a JSON file with my Polygons. So if anyone could just take a look, I would be grateful.

PS: I can't attach files here, so here is a link: https://ufile.io/lfcq3sja