Rendering very large number of polygons

[gmiliotis]

Hi all

I want to render a very big number of polygons. Currently and broadly speaking I am drawing each polygon in a similar manner to this

 var shape = new PIXI.Polygon(poly[0].map(function (point) {
     var proj = project([point[1], point[0]]);
     return new PIXI.Point(proj.x, proj.y);
 }));
 mycontainer.beginFill(color, alpha);
 mycontainer.drawShape(shape);
 }

where 

mycontainer = new PIXI.Graphics();

is the object that holds all my polygons. Also, these polygons come in different irregular shapes and sizes, ie they do not have the same rectangular shape. My browser looks to be happy with something like 100,000 of these polygons. However having 200,000 polygons looks to slow it down. Panning, zooming etc comes with noticeably lag.

Is there something like the PIXI.particles.ParticleContainer object that I could use to attach my polygons please (or some other approach that I might be missing). To my understanding I cannot use the ParticleContainer here because my polygons have different (and to some extend random) shape.

Any ideas highly appreciated

Regards

[Exca]

Do you need to have the shapes update per frame? If not, you could draw them to a rendertexture and use that on the scene. Drawing that a bit larger than the viewport would alllow movement and then you would need to do update draw whenever enought movement has happened.

If the points update on the fly, then that solution wont help as you would still end up drawing them every frame.

Another option would be to draw your polygons with meshes. Might be faster or slower depending on how things update.

There's also one way to make everything really fast with webgl2 using transform feedback shader. Though that requires plenty of knowledge on webgl/opengl and that the point update can be determined mathematically. With that techinique you could calculate positions for millions of points without an issue.

[ivan.popelyshev]

Yes, usual Pixi Graphics spams many objects if you refill it every frame

if your polygons are always convex, or have the same trignaulation -  you can use Mesh instead

if "project" is just usual linear affine stuff - just change the transform of container. If you care about line width/height - use nativeLine or other (complicated) tricks  to avoid projecting each frame.

[gmiliotis]

Thanks Exca and Ivan

To add more light, my application looks like a geographical map and you can imagine the polygons as the postcode area boundaries. Once drawn they are not going to change shape (or color or any other property...). However if you pan or zoom the map then they will get redrawn. Also, convexity does not always hold.

Edited July 3, 2020 by gmiliotis

[ivan.popelyshev]

Its possible. https://exponenta.games/games/map/

But its a huge work on optimizations.

[gmiliotis]

Yes, thanks! I just bumped onto that while I was looking at PixiJS issues tab on GitHub. He mentions 2million triangles. I dont think there is a link to the source code, although I reckon it is going to be too advanced for my level...

Edited July 3, 2020 by gmiliotis

[ivan.popelyshev]

Well, you know how it is, from one side we are trying to make actual app examples and bring new API's to people, from other you can dig too and find something suitable for your case without our stuff.. One day it all will be easy