search

paperjs / paper.js

The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey
http://paperjs.org
Other
14.44k stars 1.22k forks source link

Performance issue with zooming on complex shapes #1644

Open jsbroks opened 5 years ago

jsbroks commented 5 years ago

Description/Steps to reproduce

  1. Create a path on the sketch (clicking and dragging)
  2. Zoom in on shape
  3. As you zoom in, frames drop and can potentially crash browser

Link to reproduction test-case

Sketch

Expected result

Smooth transitions well zooming in on complex shapes

What options do we have for rendering only objects in view? Does anyone have work arounds for this?

sasensi commented 5 years ago

Hi, I can't reproduce the issue, this seems pretty smooth to me (Windows 10/Chrome 72). What device/browser are you using ? Can you try to make the reproduction case more obvious by including the shape drawing in the code instead of asking us to draw it ?

jsbroks commented 5 years ago

Test the issue in Windows 10/Ubuntu 18.04 on both FireFox 65.0.1 and Chrome 72.0.3626.121 .

Here is one with an example path once you get to around 0.3 on the scale it starts to freeze up

Video

Edit: Strokes causes the issue to occur earlier, but if you add enough shapes it will persist

jsbroks commented 5 years ago

@sasensi So I figured out what the problem is for my use case, which is probably related to the issue above.

I have many CompoundPath's inside a group and when zooming in it calls the draw function on each Item. This includes the Group class its self... and because the group object does not have the function _canCompose() defined, it defaults to false. This causes the process function to be called which has huge performance implications on large scales.

Is it safe to say we can set the _canComposite() of a group to true?

sasensi commented 5 years ago

@jsbroks, thanks for the clear reproduction example, it makes my browser crash too now.

Based on your investigation, I will try to see if there is something that we can improve to prevent that.

rbavery commented 2 years ago

@sasensi Hi! curious if there are any updates (even if it's that this isn't a priority). I'm also seeing crashes when using coco annotator in a similar manner, trying to annotate polygons in images that are 8000x6000 using the magic and tool

sasensi commented 2 years ago

@rbavery, sorry for the lack of feedback about this, I personally don't have time currently to work on the project so unfortunately I won't be able to take care of it soon. If you want to give a try to the investigation or provide other reduced reproduction cases, feel free.

rbavery commented 2 years ago

@sasensi Thanks for the quick reply, I appreciate it and understand. Unfortunately I don't know enough currently about frontend to start debugging this. I think Justin's example above reproduces the issue but here is another image that can be tested if anyone is interested in solving this issue. I'm currently having issues with annotating complex shapes zoomed in on this image in COCO Annotator due to this Paperjs issue: https://figshare.com/ndownloader/files/31307755