two.js icon indicating copy to clipboard operation
two.js copied to clipboard

Can two handle thousands of svg path elements and hundreds of thousands of points?

Open mydudechris opened this issue 1 year ago • 1 comments

We've been building a web app using paperJS specifically for lasso painting and have hit a wall. After about a thousand path objects, which sounds like a lot but is not when you're painting, the app slows down tremendously. We're looking at ways to improve the performance and have considered using two.js. While the desired output is SVG, users will be able to export as rasters as well. However, we want to maintain the ability to select, delete, transform the path elements in addition to giving the user the control to rasterize vs doing it for them. Additionally, we want to maintain visual clarity as much as possible, and raster gets funky when you scale it.

I've run some tests with the examples from your site, the zoom/pan and the particle generator, and it seems like two can handle many svg paths. However, that's just rendering the same shape, not custom shapes with varying points per shape. How does Two handle this situation? I see that it's render agnostic, so could we tap into hardware acceleration?

Example I have a hosted example I can share but it's not public yet. I'd be happy do DM it to whomever is interested in helping with this

Screenshots lassoh-painting 2023-03-11 11-25-17

Environment (please select one):

  • [ X] Packaged software (e.g: ES6 imports, react, angular, vue.js)

If applicable:

Desktop (please complete the following information):

  • OS: Ventura
  • Browser: Chrome
  • Version: Latest as of 22/03/11

Smartphone (please complete the following information):

  • Device: ipad
  • OS: Latest as of 22/03/11
  • Browser: Chrome
  • Version: Latest as of 22/03/11

mydudechris avatar Mar 11 '23 17:03 mydudechris