Question about progress

[mokargas]

A little confused about progress here

Imagine I have the following component

  function HeroWrapper() {
    const el = useRef(null)

    return (
      <>
          <div id="hero" ref={el} className="top-0 h-[400vh]"></div>
          <UseCanvas>
            <ScrollScene track={el}>{(props) => <Hero {...props} />}</ScrollScene>
          </UseCanvas>
           </>
    )
  }
  

In this component, I am using a particular timeline (inside <Hero />) which I want to use scrollState.progress or an equivalent to scrub that timeline. Previously I was using a scrollProgress signal directly on Lenis. (e.g lenis.on('scroll', ({progress}}=>scrollProgress.value=progress))

I've made the scrollable part of this section 400vh or 4x the viewport height. What I am expecting, is scrollState.progress to be 0 on mount (it is currently the only component rendered). However, it is actually 0.2, and when the scroller is at 400h or viewport:4 that progress value is 0.8. (This causes havoc for my timeline)

I'm actually expecting these to be normalized - e.g, progress starting at 0, and ending at 1.0. I can probably write a function to map this range to something I'm expecting, but I'm wondering why it starts at 0.2 (or 0.5 if 100vh etc)?

[ffdead]

Hi @mokargas

You are correct in your thinking that scrollState is relative to the component you are tracking.

Indeed progress is 0 when the DOM element enters the viewport at the bottom of the screen, and 1 when it exists the viewport at the top of the screen.

Your confusion comes from the fact that the hero is already in the viewport when the page loads, hence the progress is already started. You can figure out your starting value based on the height and remap the progress.

Your container is 400vh - each section is 100vh. The container actually has to travel 500vh to enter and fully exit the viewport (after 400vh the last section is still inside the viewport).

0 - No part of the container is in view (all of it is below the viewport) - this never happens as your hero sits at the top of the page
0.2 - First section is fully in view
0.4 - Second section is fully in view
0.6 - Third section is fully in view
0.8 - Fourth and last section is fully in view
1 - Fourth and last section has exited the the window at the top and is no longer visible (user has scrolled past it)

[mokargas]

@ffdead Right, I see.

BTW, I tried this with (because things like global fog and per-component lighting don't seem to work without doing so) and setting the container height also scales the actual canvas. Is that a design difference between VSS and ScrollScene?

e.g If I don't set 100vh (h-screen in Tailwind) on the tracked div and instead put h-[300vh] on the tracked div, it will scale the whole canvas

//This works with VSS
  function HeroWrapper({ index = 1 }) {
    const el = useRef(null)
    return (
      <section className="overflow-hidden h-[300vh]">
        <div id="hero" ref={el} className="relative left-0 top-0 w-full h-screen"></div>
        <UseCanvas>
          <ViewportScrollScene track={el} hideOffscreen={false}>
            {(props) =>
            (<>
              <Hero scrollState={props.scrollState} />
              <FX renderPriority={index + 1} />
            </>)
            }
          </ViewportScrollScene>
        </UseCanvas>
        </section>
    )
  }

// This will scale the actual canvas
  function HeroWrapper({ index = 1 }) {
    const el = useRef(null)
    return (
      <section>
        <div id="hero" ref={el} className="relative left-0 top-0 w-full h-[300vh]"></div>
        <UseCanvas>
          <ViewportScrollScene track={el} hideOffscreen={false}>
            {(props) =>
            (<>
              <Hero scrollState={props.scrollState} />
              <FX renderPriority={index + 1} />
            </>)
            }
          </ViewportScrollScene>
        </UseCanvas>
        </section>
    )
  }

Ideally, I'd want several VSS one after the other, and control how many sections they scroll by

[ffdead]

Are you no longer doing the portal scenes as discussed here? #33
If so you'd have to set up the individual lithts and postprocessing as part of those FBO renders. (these are already like a VSS)

The lights and fog etc that you place in the GlobalCanvas will be shared between all objects in the global scene (i.e. ScrollScenes).

ViewportScrollScene runs in a separate render so it can have separate lights like you are doing.

Both SS and VSS should scale acording to the DOM element. Here's the official VSS demo https://codesandbox.io/s/hello-viewportscrollscene-fu0ky6?file=/src/App.jsx I don't read Tailwind but make sure you get the dimensions of the tracked element correct first :)

Is that <FX> component doing post processing? I think that might interfere with the intended functionality of VSS as it uses gl.setViewport to set the correct dimensions & placement - that might be why you are seeing weird scaling

If you need individual post processing I think the FBO approach is your best bet: pmndrs/postprocessing#221

[mokargas]

Portal scenes - well I'd like to with VSS as I have a need for custom controlled cameras based on scroll in each scene.

Previously I was using Drei's View, which worked fine with composable FX from @react-three/postprocessing. Perhaps the problem is I'm expecting the SS/VSS to work in the same way.

Due to the way other parts of the site work, I don't think I want to rewrite the FX component to be imperative - it's harder to maintain for what I'm doing. It's also my understanding that the react-three version does most of what's suggested in the link automatically.

It's true that I don't need per-scene FX. However, if I have a mix of SS and VSS or just several VSS, my FX doesn't work when defined globally. e.g

<GlobalCanvas>
 {(globalChildren) => (
            <>
              <MouseMove />
              <AdaptiveDpr />
              <Suspense fallback={null}>
                <AssetScaffolder />
                {globalChildren}
                </Suspense>
              <FX />
              <Preload all />
            </>
          )}
</GlobalCanvas/>

The lights and fog etc that you place in the GlobalCanvas will be shared between all objects in the global scene (i.e. ScrollScenes).

When I tried this, I lost directional lights and fog defined just in <Hero />. Is that expected behavior? (one of the other reasons I used VSS)

Both SS and VSS should scale acording to the DOM element. Here's the official VSS demo https://codesandbox.io/s/hello-viewportscrollscene-fu0ky6?file=/src/App.jsx I don't read Tailwind but make sure you get the dimensions of the tracked element correct first :)

So I assume that's why I'm seeing this effect with 300vh on the tracking element for VSS? Because the tacking element controls scale as well as how much to scroll?

function HeroWrapper() {
    const el = useRef(null)
    return (
      <>
        <div id="hero" ref={el} style={{height: '300vh', width:'100%'}}></div>
        <UseCanvas>
          <ViewportScrollScene track={el} hideOffscreen={false}>
            {(props) =>
            (<>
              <Hero scrollState={props.scrollState} />
              {/* <FX renderPriority={index + 1} /> */} //With FX disabled.
            </>)
            }
          </ViewportScrollScene>
        </UseCanvas>
        </>
    )
  }

It doesn't happen for me with ScrollScene though (v8.13.0):

 function HeroWrapper() {
    const el = useRef(null)
    return (
      <>
        <div id="hero" ref={el} style={{height: '300vh', width:'100%'}}></div>
        <UseCanvas>
          <ScrollScene track={el} hideOffscreen={false}>
            {(props) =>
            (<>
              <Hero scrollState={props.scrollState} /> //INVESTIGATE: directional light vanishes from here with SS
              {/* <FX renderPriority={index + 1} /> */}
            </>)
            }
          </ScrollScene>
        </UseCanvas>
        </>
    )
  }

What if I want the VSS to scroll 300vh, but remain scaled to 100vh as I'm seeing with ScrollScene?

[ffdead]

Lots to cover here, I'll do my best without having access to the actual code

Previously I was using Drei's View, which worked fine with composable FX from @react-three/postprocessing. Perhaps the problem is I'm expecting the SS/VSS to work in the same way.

I wasn't aware - do you have a link to share so I can take a look how it works? I can try to take a look and see if I can make VSS compatible with a declarative EffectComposer

It's true that I don't need per-scene FX. However, if I have a mix of SS and VSS or just several VSS, my FX doesn't work when defined globally. e.g

Got it, yes this is true since the VSS runs in separate renders.

So if you have two distinct scenes, with no RenderTexture transition in between them (as discussed previiously) - are you sure you even need the scroll-rig at this point? If all you are doing is scrolling between two scenes could you not have two canvases after each other in the DOM? (maybe I'm oversimplifying here but worth asking)

The lights and fog etc that you place in the GlobalCanvas will be shared between all objects in the global scene (i.e. ScrollScenes).

When I tried this, I lost directional lights and fog defined just in <Hero />. Is that expected behavior? (one of the other reasons I used VSS)

Not sure I understand this part:

When I tried this, I lost directional lights and fog defined just in <Hero />. Is that expected behavior?

But if you defined lights and fog in the Hero component - and the hero unmounts you would remove them from the global scene - is that what you were asking?

Here's a test where the global scene has a city environment and a magenta directional light - you can see it on the ScrollScenes - and the ViewportScrollScene has a "dawn" environment and no directional light. But scene containers are 300vh.

https://codesandbox.io/s/ss-vs-vss-300vh-test-jjldcy?file=/src/App.jsx

Do you maybe need to adjust the scale of the content inside your VSS?

[ffdead]

Had a look and it is indeed gl.setViewport related. Seems like they are working on a fix in v7:
pmndrs/postprocessing#570
pmndrs/postprocessing#386

[mokargas]

@ffdead Thanks for taking the time to work through this with me

I wasn't aware - do you have a link to share so I can take a look how it works? I can try to take a look and see if I can make VSS compatible with a declarative EffectComposer

Mmy project one is complicated since it uses events and regression to control effects and performance, I'll see if I can make a simple one when I get a few mins.

It's true that I don't need per-scene FX. However, if I have a mix of SS and VSS or just several VSS, my FX doesn't work when defined globally. e.g

Got it, yes this is true since the VSS runs in separate renders.

Thanks I understand this now. I had an incorrect assumption about VSS

So if you have two distinct scenes, with no RenderTexture transition in between them (as discussed previiously) - are you sure you even need the scroll-rig at this point? If all you are doing is scrolling between two scenes could you not have two canvases after each other in the DOM? (maybe I'm oversimplifying here but worth asking)

Yes. The idea is not to render two or Canvas. The reason is the need to maintain events and the fact that each Canvas will treat materials, assets etc as new entities even if they are "reused" in the project. So each Canvas will recompile everything which has very poor performance for what I'm doing (Tried that already 😂)

Not sure I understand this part:

When I tried this, I lost directional lights and fog defined just in <Hero />. Is that expected behavior?

But if you defined lights and fog in the Hero component - and the hero unmounts you would remove them from the global scene - is that what you were asking?

Not quite, as the component isn't unmounted. If I define a directional light inside the Hero component which is wrapped by a ScrollScene, my directional light will not render (the lack of the blue light in the second screenshot). I have to move it to the . Same issue with fog. I'm not 100% sure if this is an issue with my stack or versions, so I was more wondering if you'd encountered it.

e.g Let's say we have two scroll scenes, not v scroll scenes

//psuedocode
<ScrollScene>
<Box />
<fog .. /> <-- won't render
<directionalLight color="orange" intensity={10} /> <--- wont render
</ScollScene>

<ScrollScene>
<Sphere />
<fog .. /> <-- won't render
<directionalLight color="blue" intensity={10} /> <-- won't render
</ScollScene>

<GlobalScene>
<directionalLight color="blue" intensity={10} /> <--renders
<directionalLight color="orange" intensity={10} /> <--renders
<fog .. />  <---renders
</GlobalScene>

Here's a test where the global scene has a city environment and a magenta directional light - you can see it on the ScrollScenes - and the ViewportScrollScene has a "dawn" environment and no directional light. But scene containers are 300vh.

https://codesandbox.io/s/ss-vs-vss-300vh-test-jjldcy?file=/src/App.jsx

Do you maybe need to adjust the scale of the content inside your VSS?

The thing I didn't understand is why VSS would need to be scaled but not SS. In my screenshots the only difference was using VSS or SS, nothing else. But judging from the example you've given where both scale to the 300vh container height, I am going to put this down to an issue with my stack.

Basically Hero needs to be visually 100vh, but scroll 300vh. However I now understand that's something I need to solve, probably by making the Hero VSS/SS sticky like you would with a standard Lenis setup.