sceneFadeDuration stops all timers in a document
paulks-software opened this issue · comments
I have an animated character ina ascene in a html5 video container i use timer to seek for a partucular time period for example 1-2s,
sceneFadeDuration in this case is 1000 and when i change scene it stops that timer and my video is jumping from 1.9s for example to 2.9s, basically sceneFadeDuration stops everything until another scene is loaded, how to avoid this? Thank you!
When sceneFadeDuration is specified, the contents of the renderer are saved to an image buffer, which is displayed over the renderer's <canvas>. The renderer then loads the new scene, and the opacity of the image buffer is reduced with a CSS transition to fade between the two. This eliminates the need to have multiple renderers but means content is static on the original scene during the transition. As in the vast majority of cases a static panorama is being displayed, freezing the original scene doesn't affect anything, so I deem it is well worth the reduction in code complexity.
finally i made an example
https://paulks.dev/tests/360videotest/panoramas/pannellum.html
first click play to activate the video, click on a hotspot continuously, fast, sometimes this occurs even when you click regularly, especially after ctrl + f5, you will hear that audio gets out of sync, this a bug i try to fix, and in developer console you can see that an interval is stuck when transitioning to other panorama, how to fix this? Thanks!
The video keeps restarting for me in both Firefox and Chrome, so I'm not sure what I'd be looking for as far as audio getting out of sync. I also don't see anything getting stuck.
Hi @mpetroff here is a video showcasing the problem, please take a minute to watch it, you will hear that during a transition audio gets out of sync, it might be trivial for some users but for precise video control is crucial, i have an animated character webm video on top which always loops and the looping gets out of sync
https://www.youtube.com/watch?v=zQCrqjSD1fk&ab_channel=PaulKs
Thank you for your time!
This video looks like what I saw when I went to your example. Sorry if I'm being dense, but I still don't see the issue you're referring to.
Please @mpetroff take a look, i have recorder another video, you can clearly hear at 0.05s and 0.10s and a bigger one at 0.16s that small chop/glitch in audio, you would not hear it if you would just pressed play and dont navigate through panoramas
https://www.youtube.com/watch?v=P4jLcBQVVBE&ab_channel=PaulKs
Thank you again!
Okay, I now understand the issue. The key was to just listen to the repetition rate in the audio and ignore everything else.
Unfortunately, I'm not sure there's much I can do to entirely resolve the issue. The problem is with JavaScript on the main thread blocking. I briefly looked to see if I could move the code related to the video into a WebWorker, but it doesn't look like that's possible. It's not an issue that the timer is being stopped; the issue is that the browser is just not getting around to servicing it.
However, I did confirm that issue seemed to be mostly tied to the sceneFadeDuration parameter, so I inspected that section of code and also saw that you're using the 2.5.6 release. The process of encoding the currently rendered view as a PNG to display for the fade transition is the primary cause of the main thread blocking, and this blocking gets worse the larger the image is, so fullscreen on high-DPI displays is particularly bad. This performance issue was significantly improved in a7a8b85 by using an ImageBitmap instead of a PNG. By using the current Git master branch instead of the 2.5.6 release, the frequency of the glitching is vastly decreased. Hopefully this improvement is sufficient for your purposes.
I think the only way to completely eliminate the glitching would be to not control the looping via JavaScript. You shouldn't have an issue if you just had a short video with the <video> element set to loop. Not knowing the details of your project, I don't understand the reasoning behind seeking a longer video to loop it instead of using a short clip, but if using a short clip is an option, I would recommend doing so.
Thank you!