[Question] Best way to render ~250k polygons about two.js HOT 6 CLOSED

Thanks for your response. I don't need animation or interaction right now. I do however need to be able to render hundreds of thousands of polygons. Thanks for your example, I will apply it to my use case and report back!

from two.js.

If you're going to render 10s of thousands of objects in real-time and be able to zoom in-and-out as the interaction model, then something like Three.js will suit you much better.

If you still want to move forward with Two.js then on initialization you'll want to defer how many Two.Paths you make per frame. This is a snippet how you'd be able to run the loop asynchronously:

let perFrame = 250;
let i = 0;

function add() {
  if (i >= flatData.length) {
    console.log('complete');
  }
  const p = new Two.Path(flatData[i]);
  scene.add(p);
  requestAnimationFrame(add);
}

Though, if you only need to render a static image (one that isn't interactive and animating in real-time). As hinted by the use of two.update() at the end of your snippet. Then you can combine this async logic and only use a handful of paths to keep the application running without hiccups. This example demonstrates that: https://codepen.io/jonobr1/pen/xxBqQxB

from two.js.

Cool, the way that it works is that it uses 1000 cached Two.Paths to draw 1M objects over the course of a few seconds.

from two.js.

Am I able to use the same strategy with drawing multi-vertex polygons? That is, I see the Two.Path constructor takes in vertices as an array, but it also has a vertices property (like stroke, fill, etc). Can I use the same strategy to reuse 1000 cached Two.Paths to update vertices and render the polygons I need?

from two.js.

Yeah, you would use Two.Path and set the vertices property to a new array of Two.Anchors based on your data array.

from two.js.

Ended up going with manual canvas population for my specific scenario. Ends up taking ~50-200ms painting half a million non-complex polygons, which is acceptable.

from two.js.