Jumping scene

[antoine-hellocafeine]

Hello, sorry to bother but yet again a question I don't seem to find answers anywhere and would rather ask someone who knows the subject so much
In order to use post processing, I disabled the globalRender of the GlobalCanvas, to override it with EffectComposer and custom lights
However, disabling the globalRender whilst using the SmoothScrollbar component seems to make my scene become "jumpy", on scroll it bounces a lot almost to catch user scrolling (issue I don't have if globalRender is set to true)
Here's my code and how it looks with globalRender set to false

<div ref={ref}>
  <GlobalCanvas
    eventPrefix="client"
    eventSource={ref}
    style={{ pointerEvents: 'none' }}
    scaleMultiplier={0.01}
    globalRender={false}
  >
    <Environment
      background={false}
      environmentIntensity={
        currentSettings.current.environment.environmentIntensity
      }
      preset={currentSettings.current.environment.preset}
    />
  
    <GoboSpotlight
      settings={currentSettings.current.goboSpotlight}
      decayAnimation={decayAnimation}
    />
  
    <ambientLight intensity={2} />
  
    <EffectComposer
      enabled={
        currentSettings.current.toneMapping.enabled ||
        currentSettings.current.hueSaturation.enabled
      }
    >
      {currentSettings.current.toneMapping.enabled && (
        <ToneMapping
          blendFunction={currentSettings.current.toneMapping.blendFunction}
          adaptive={currentSettings.current.toneMapping.adaptive}
          resolution={currentSettings.current.toneMapping.resolution}
          middleGrey={currentSettings.current.toneMapping.middleGrey}
          maxLuminance={currentSettings.current.toneMapping.maxLuminance}
          averageLuminance={
            currentSettings.current.toneMapping.averageLuminance
          }
          adaptationRate={
            currentSettings.current.toneMapping.adaptationRate
          }
        />
      )}
      {currentSettings.current.hueSaturation.enabled && (
        <HueSaturation
          blendFunction={
            currentSettings.current.hueSaturation.blendFunction
          }
          hue={currentSettings.current.hueSaturation.hue}
          saturation={currentSettings.current.hueSaturation.saturation}
        />
      )}
    </EffectComposer>
  </GlobalCanvas>
  <SmoothScrollbar />
  {children}
</div>

[ffdead]

Honestly not sure why you are seeing that jumping. I would try commenting stuff out until it works as expected and try to fix it that way 🤔

[antoine-hellocafeine]

Hello @ffdead it would appear it starts glitching whenever I have too many models on the same page
I started from fresh, creating a page with the models only and one stickyscrollscene from the powerups
Again, with globalRender it works just fine, but as soon as I disable it and start using postprocessing, the models in a stickyscrollscene jump like you see on the capture, which I'm not sure why

[ffdead]

Can you create a codesandbox or similar for me to try and debug the code for you?

[antoine-hellocafeine]

Hello @ffdead this should normally work : https://codesandbox.io/p/sandbox/test-for-ffdead-353pnc
Sometimes the stutter occurs, sometimes not
In some contexts, the "bounce" is smooth, on others it's very laggy
In both cases, it shouldn't happend, as you said
Tell me if you're missing anything (the code is still a wip so gsap code is broken but it's not relevant)
Thanks in advance, I appreciate your help

[ffdead]

Thanks for the example code @antoine-hellocafeine

It seems delaying the postprocessing render priority fixes the bounce issue:

<EffectComposer renderPriority={1}>

I suspect we have to make sure the postprocessing render happens after the scrolling which is also driven by the R3F frame loop

hope this helps!

[antoine-hellocafeine]

Well @ffdead it seems okay on the different devices I tested so thank you very much for that

To make sure I understand, what we can get from that is that we must make sure scroll is initialized before anything else to avoid having it be glitched due to other r3f frame loop related elements?

Anyway, never thought of checking that, good call!

[ffdead]

Im not sure exactly what happened, but it looks like the render loop was mixing in old scroll positions.

The Smoothscrollbar runs with default priority in the R3F render loop so we want to make sure the final render happens later than that (which it usually does).

Looking at the EffectComposer, the default renderPriority is actually already 1 so now I'm even more confused, it shouldn't have made a difference unless we made it larger than 1 😅

But glad it did something for you!