Closed paulers closed 5 months ago
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.Path
s 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
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!
Cool, the way that it works is that it uses 1000 cached Two.Path
s to draw 1M objects over the course of a few seconds.
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?
Yeah, you would use Two.Path
and set the vertices property to a new array of Two.Anchor
s based on your data array.
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.
I'm attempting to render around 250,000 polygons with various node counts (3-35) in Two.JS. Read a few open questions here already and it seems that the canvas is the best rendering mode for such a large amount of items. A problem I'm running into is that it's taking forever to render, hanging the UI thread in the browser.
Here's the code to generate just triangles, so only 3 points and 3 lines:
This creates a file that looks like this (with obviously a lot more polygon data points in it):
I then instantiate Two, create a group and iterate over the dataset above (flatData) to add shapes to the group. Fill and stroke are pulled in from some variables I omitted for brevity's sake.
This is where I run into trouble. The above loop takes somewhere in the vicinity of 8 minutes on a modern laptop. Is there a better way to approach this?
Environment (please select one):
Desktop (please complete the following information):
Additional context The Two.JS canvas is rendered as an overlay on top of OpenSeadragon, but this issue occurs without OSD too. Creating a canvas manually and rendering the triangles on the canvas inside a loop takes a second or two compared to Two.js so I feel like I'm missing something.
Thank you