Certain Graphics Cards Cause Jitters during Animation Scroll Thru

[zpennachi]

Hi everyone! I've been using Modelviewer for over a year now and have actually learned most of my basic coding knowledge from trying to create web experiences with it (big thanks to the modelviewer team for creating such a clean and open-ended library).

I'm running into an odd bug that I SWEAR wasn't there a few months ago? Or maybe my drivers changed?

The animation loads in fine, and is verrrrry smooth and responsive to the scroll-y position, however, I notice on my 3070gpu and a friend of mines macbook that it becomes very jittery when the user stops scrolling. This doesn't occur on my integrated graphics though. Its almost as if it's between a few frames trying to figure out which ones right. I tried this on a blank page with no other code/elements to ensure it wasn't the page affecting the scroll.

livesite: https://zpnew.webflow.io/

entire code:

<script> function zpennachi() { const modelViewer = document.querySelector('#zpennachi'); const screenHeight = window.innerHeight; modelViewer.currentTime = window.scrollY / screenHeight; window.requestAnimationFrame(zpennachi); modelViewer.timeScale = 0.9; } function StartScroll() { window.requestAnimationFrame(zpennachi); } </script>

Any insights into this would be appreciated! As I said, i'm very much in the learning stage of javascript and I may not approaching the scroll event right.

[elalish]

Thank you! And your page is impressive (and smooth on my mac, for what it's worth). I would recommend using a scroll event listener instead of requestAnimationFrame. Not sure if that's the problem, but it's generally a best-practice to only run your code when a change occurs rather than always.

[zpennachi]

Hi @elalish, circling back to this issue with a bit more context i've uncovered!

This issue is present on all of my devices in different scenarios, that's why i'm having such a tough time pinpointing the issue.

A screengrab of the scroll interaction bugging out:
https://user-images.githubusercontent.com/95557128/234620538-8bcc6018-ce20-436c-9107-f271618771eb.mp4

On my 3070gpu laptop, this issue occurs in Chrome when the battery is below 20%, or any time in Edge.
On my chromebook this issue is consistent regardless of battery status.
On my pixel 7 this occurs when the battery is low, or when battery saver is enabled.
On a mac mini, this occurs in both Safari and Chrome.

This is clearly pointing to a performance issue with the hardware, but this is such a simple .glb file and animation sequence that i'm confused as to what the limitation/issue is!

Do you have any insight into what may be the root of this issue? I have tried both a scroll event listener and requestAnimationframe with the same result.

Thanks a lot!
Zack

[elalish]

Hmm, that's a strange one. It actually doesn't really look like performance, because the frame rate seems to stay high, rather it is vibrating back and forth. It might be interesting to console.log the currentTime values that you're setting and check if they're really monotonic when you expect them to be. Maybe some precision issue with the scroll position? You might try adding a small smoothing filter.

[zpennachi]

Ahhh great callout, it's completely smooth without frame drops otherwise!

I added a console.log and it appears that the currentTime values are in fact monotonic when "stopped" during both the clean experience (chrome full battery), and the bugged experience (Edge browser, Chromebook) so that seems even more strange now? haha.

I currently have a smoothing script on the page to attempt to solve it, and while it makes the experience very smooth (woo!), it remains jittery.

In an attempt to troubleshoot, I removed all additional script+styles https://zpnew.webflow.io/test but the issue still persists.

Feel free to take a look at the console.log yourself, it's published on the /test page.

Again, if this is beyond scope of Modelviewer, let me know, I don't want to hog resources from others!

Really appreciate your suggestions so far.

[elalish]

The glitching on my Pixel 4a looks a bit different than your video. It looks like it's jumping as it readjusts the camera due to a viewport height change, which I think is happening when the URL bar appears and disappears. That should be fixable with some CSS magic.

[zpennachi]

Yeah I noticed this as well, didn't even think about it being caused by the URL bar visibility, I'll throw a CSS fix on it! Thanks.

I'm going to go back to the drawing board and try and re-think/re-build this interaction! Hopefully I can circle back next week with a solution in case others encounter the same issue.

In the meantime, i'll chime in with any progress I make.

[zpennachi]

A bit of a progress update:

I went ahead and re-approached this by using @elalish 's suggestion of a scroll event listener as opposed to requestAnimationframe. While this didn't solve the issue on its own, I then added a play/pause feature so the animation pauses the second the scrolling is deactivated and this got me one step closer. https://zpnew.webflow.io/test-3

playpause-update.mp4

While the easing of the scroll when using trackpad feels very messy/jittery still as it slows to a stop (vid attached above), the animation successfully pauses (without jitter!) when the scrolling stops.

While this is not a solution, I figured it may shed some light on the underlying issue!

code for reference:

<model-viewer onload="StartScroll()" id="zpennachi" pause preload shadow-intensity="0" shadow-softness="0" src="https://uploads-ssl.webflow.com/643af806354c783eb866d160/643dc3c156cf1c305bdb76c6_anianiainainani.glb%20(2).txt" alt="low-code 3D" camera-target=".8m -3m -9m" camera-orbit="0deg 75deg 30.31m" field-of-view="8deg">

<script>
  let pauseTimeout; 
  let isPlaying = true; 

  function scrollHandler() {
    const modelViewer = document.querySelector('#zpennachi');
    const screenHeight = window.innerHeight;
    modelViewer.currentTime = window.scrollY / screenHeight;
    console.log('currentTime:', modelViewer.currentTime); 
    modelViewer.timeScale = 0.9;
    if (!isPlaying) { 
      modelViewer.play();
      isPlaying = true;
    }
    clearTimeout(pauseTimeout); 
    pauseTimeout = setTimeout(() => { 
      modelViewer.pause();
      isPlaying = false;
    }, 0);
  }

  function StartScroll() {
    const modelViewer = document.querySelector('#zpennachi');
    const screenHeight = window.innerHeight;
    const initialTime = window.scrollY / screenHeight;
    modelViewer.currentTime = initialTime;
    window.addEventListener('scroll', scrollHandler);
  }
</script>