Getting scene refs.

[mokargas]

Hey there

Perhaps I'm missing something, but I'm wondering how I can get a reference to the or

My use-case is a top-level component that contains a material using two FBO's, . Based on the scroller's progress, I'd like to transition from one scene to the adjaced scene. Typically something like this roughly

function TransitionScene() {
  const sceneAFBO = useFBO();
  const sceneBFBO= useFBO();
  const sceneARef= useRef();
  const sceneBRef = useRef();

  useFrame(({ gl, camera }) => {
    if (sceneARef.current) {
      gl.setRenderTarget(sceneAFBO);
      gl.clearColor(0, 0, 0, 0); 
      gl.render(sceneARef.current, camera);
    }

    if (sceneBRef.current) {
      gl.setRenderTarget(sceneBFBO);
      gl.clearColor(0, 0, 0, 0); 
      gl.render(sceneBRef.current, camera);
    }

    gl.setRenderTarget(null);
  });

  return (
    <>
      <scene ref={sceneARef}>
        <Sphere args={[1, 32, 32]} />
      </scene>

      <scene ref={sceneBRef}>
        <Box args={[1, 1, 1]} />
      </scene>
   
<ScreenQuad>
      <TransitionMaterial sceneA={sceneAFBO} sceneB={sceneBFBO} progress={progress} />
     </ScreenQuad>
    </>
  );
}

Is this possible?

[ffdead]

Hi @mokargas - interesting use case!

Haven't done this type of transition with the scrollrig yet, but should be possible. I guess you only need the scrollrig if you are planning on syncing meshes inside each scene with DOM elements, is that the idea?

The scrollrig has a global render loop that renders the default r3f scene useFrame(({scene})=>{}) by default. You'd probably want to turn that off by setting <GlobalCanvas globalRender={false} />. You could also play with globalPriority (1000 by default) if you want to render before or after the global scene.

[mokargas]

Yes that's the idea and I'll look into your suggestion. A visual idea of what I'm trying to achieve is on https://www.deso.com/.

If you scroll to the end of Chapter 1, you'll see a diagonal cut between both scenes, but the tracked content scrolls as normal.

[ffdead]

Got it!

You also need to make sure the canvas children render inside your local scenes (sceneA, sceneB) instead of the global scene.
I pushed a new version v8.13.1 where the ScrollScene accepts a scene property. If provided it will portal the children to that scene. e693906

So you can do something like:

// somewhere globally
const sceneA = new Scene()

// in your UI component
<ScrolllScene track={ref} scene={sceneA}>...</ScrollScene>

[ffdead]

I made a sandbox for you which does what you are asking for: https://codesandbox.io/p/sandbox/scroll-rig-scene-transitions-m2gc3p?file=%2Fsrc%2Findex.js

Forget what I said about disabling the globalRender - it's still needed to render the TranitionMaterial :)

[ffdead]

Don't forget that each scene will need its own lights etc. if you are using MeshStandardMaterial for instance they would all be black unless you place and HDRI or lights in each of those portal scenes.

Oh, and the HMR doesn't seem to work in that example for some reason. Don't have time to figure out why right now 🤷

Looking forward to see what you build with it!

[mokargas]

@ffdead
Wow this is amazing. Huge thanks for making that happen. I previously got the effect to work but I'm using a very basic Lenis setup, this will enable more flexibility and help me remove some boilerplate when I migrate to scroll-rig.

A question(s) for you: When you say the scenes are portalled, will I incur a performance cost if I render say the same material in both scenes? e.g a recompilation of those shaders and materials? I'm considering the possibility of jank in that regard.

[ffdead]

No problem, I was waiting for an excude to explore that type of transition :)

Clarification: the scenes are not "portals" - but the content of the ScrollScene is portaled into each of those scenes - i.e. not added to the global scene graph.

Regarding perf cost I'm not sure, I assume materials would be shared but not sure if they might recompile. You'd have to do some tests, please let me know what you find out!

Maybe you can do an explicit compile before use to avoid jank: https://threejs.org/docs/index.html?q=gl#api/en/renderers/WebGLRenderer.compile