R3F & StereoCamera

[MaxTwentythree]

Hi, 👋

I'm trying to implement the three.js StereoCamera with r3f.
Here the three.js example

And it drives me nuts as it should be fairly simple, but all my attempts lead to only the right Camera getting rendered.

I created a simple sandbox to showcase this (takes a bit to load):
Codesandbox

I tried using StereoCamera and StereoEffect from three, both lead to the same result.

Am I missing something? Has someone encountered this before?

[CodyJasonBennett]

The reason for this is R3F will render your scene by default unless you specify a render priority to useFrame above 0, and you're leaking scissor state to that render so it can be hard to judge from a glance.

useFrame(({ gl, scene, camera, size }) => {
  stereoCamera.current.update(camera);

  if (gl.autoClear) gl.clear();
  gl.autoClear = false;

  gl.setScissorTest(true);

  gl.setScissor(0, 0, size.width / 2, size.height);
  gl.setViewport(0, 0, size.width / 2, size.height);
  gl.render(scene, stereoCamera.current.cameraL);

  gl.setScissor(size.width / 2, 0, size.width / 2, size.height);
  gl.setViewport(size.width / 2, 0, size.width / 2, size.height);
  gl.render(scene, stereoCamera.current.cameraR);

  gl.setScissorTest(false);

  gl.autoClear = true;
}, 1);

[MaxTwentythree]

Hello,
I seeee, makes sense and now it works!
Thanks a lot for the explanation!