search

theatre-js / theatre

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

sequence performance optimization #472

Open Johnly1986 opened 11 months ago

Johnly1986 commented 11 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 7 months 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 6 months 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 6 months 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 6 months 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?

Johnly1986 commented 6 months ago

@AriaMinaei Hey there! I’m working on this roaming system for a 3D program where everything is automatically generated - scenes, paths, you name it, the theatre is wonderful. But here’s the thing, it creates a ton of keyframes, especially when I’m messing around with splines. Usually, I need to do some extra editing in the sequences that are already there. The only bummer is that the editing can get a bit laggy in the theatre. I know I’m not alone in needing this fixed, so if you could sort it out soon, that’d be awesome!