Comments (6)
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.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
from two.js.
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.
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.Anchor
s 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.
Related Issues (20)
- [Question] Woscope integration HOT 3
- How to animate millions of points on browser canvas using two.js HOT 12
- wrong type in getPointAT declaration in path class HOT 2
- "Dom-less" start for just generating result svg [Enhancement] HOT 1
- Can two handle thousands of svg path elements and hundreds of thousands of points? HOT 1
- [Enhancement] Add Path.Compound Static Method
- How to check if an object is currently being hovered by the mouse whilst taking rotation into account? HOT 3
- Two.Utils.read.path throws an error HOT 3
- Smooth out lines and Round Corners HOT 2
- [Bug] WebGL Renderer Blurry HOT 5
- Partial Ellipse HOT 6
- Text `BoundingClientRect` in nested groups HOT 2
- compile error typescript[Bug] HOT 2
- svg fill-opacity [Bug] HOT 12
- Issues with Zoom and ZUI when upgrading from version 8.1.1 to 8.11 (latest) HOT 3
- creating curve path using anchors and make path not working ! HOT 2
- Text Baseline in SVG Backend HOT 5
- [Bug] Negative scale does not work, with webgl mode only HOT 1
- Can i add events to shapes if renderer is Two.CanvasRenderer HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from two.js.