search

theatre-js / theatre

Motion design editor for the web
https://www.theatrejs.com
Apache License 2.0
10.82k stars 337 forks source link

sequence performance optimization #472

Open Johnly1986 opened 5 months ago

Johnly1986 commented 5 months ago

When I add several thousand keyframes in the sequence, the panel becomes very sluggish. Is there a possibility to optimize this issue? Thank you

Johnly1986 commented 3 weeks ago

Hello, I'm very sorry to bother you. Has this issue been resolved or is it planned to be resolved? Looking forward to your reply. @AriaMinaei

AriaMinaei commented 4 days ago

@Johnly1986 In my tests, Theatre handles thousands of keyframes pretty smoothly, so this particular issue is probably unrelated to Theatre, but if you can share a codesandbox reproduction, we can take a look and let you know for sure.

Johnly1986 commented 3 days ago

@Johnly1986 In my tests, Theatre handles thousands of keyframes pretty smoothly, so this particular issue is probably unrelated to Theatre, but if you can share a codesandbox reproduction, we can take a look and let you know for sure.

@AriaMinaei It's a great honor to have a conversation with you and pay attention to this issue. You can check the sandbox reproduction in the link provided below https://codesandbox.io/p/sandbox/strange-dirac-cj4lxh?file=%2Fdata%2Fmyitems.mjs%3A30%2C14 When I drag the scroll bar and keyframes in the Sequence panel, there is still a lag.

AriaMinaei commented 1 day ago

@Johnly1986 so I did a quick test, but removed the console.log() calls because those just overwhelm the devtools with a bunch of calls every frame.

For me, playback itself was smooth, but the UI isn't buttery smooth anymore. Usable, but not smooth. Here is a video:

https://github.com/theatre-js/theatre/assets/593118/ace3906f-ae38-44e3-b50c-afc336a13037

In this case, the keyframes are in one sequence instead of being spread along multiple sequences, so they all get rendered at the same time in the UI. We haven't optimized for that yet. I always wanted to re-do the sequence editor so it uses THREE.js instead of SVG and then it could handle probably millions of keyfreames, but so far that hasn't been a priority because most people don't have such a large number of keyframes in their sequences. But if the use-case becomes more popular, I'll make sure the THREE.js rewrite gets done.

What's your use-case?