Jump to content

Rendering very large number of polygons


Recommended Posts

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 = 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


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

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 by gmiliotis
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.

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.


  • Recently Browsing   0 members

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