Postprocessing SSR with renderTarget (R3F)

Questions
, ,
1

Hello guys,
Actually trying to implement SSR ( https://codesandbox.io/p/sandbox/8pbw1f ) on my project.
To be clear I use two camera to renderTarget, at the end i retrieve the two textures from the renderTargets, pass them to a shader on a place, and do some cool transition between scenes like that.

// here my render targets
const renderTarget0 = useFBO(
  viewport.width * (isTouchDevice() ? touchDeviceDPR : noneTouchDeviceDPR),
  viewport.height * (isTouchDevice() ? touchDeviceDPR : noneTouchDeviceDPR),
  {
    stencilBuffer: false,
    alpha: true,
    samples: 2,
  },
);

const renderTarget1 = useFBO(
  viewport.width * (isTouchDevice() ? touchDeviceDPR : noneTouchDeviceDPR),
  viewport.height * (isTouchDevice() ? touchDeviceDPR : noneTouchDeviceDPR),
  {
    stencilBuffer: false,
    alpha: false,
    samples: 2,
  },
);

useFrame(({ gl, scene, camera }, delta) => {

  gl.autoClear = true;
   
  if (renderScene0.current.render) {
      // here i hide/show what I need for this "scene" 

      gl.setRenderTarget(renderTarget0);
      gl.render(scene, firstCameraRef.current);
  }

  if (renderScene1.current.render) {
      // here i hide/show what I need for this "scene" 

      gl.setRenderTarget(renderTarget1);
      gl.render(scene, secondCameraRef.current);
  }

  finalDisplayRef.current.visible = true;
  gl.setRenderTarget(null);
  gl.autoClear = false;
});

return(
<>
       // Here my plane with my two texture passed to a my "final screen" facing my main camera, an <OrthoCamera... />
      <mesh
        position={[0, 0, 0]}
        scale={[viewport.width, viewport.height, 1]}
        ref={finalDisplayRef}
      >
        <planeGeometry />
        <GradientFbmMaterial
          color={"white"}
          uTex0={renderTarget0.texture}
          uTex1={renderTarget1.texture}
          uResolution={
            new THREE.Vector2(
              viewport.width *
                (isTouchDevice() ? touchDeviceDPR : noneTouchDeviceDPR),
              viewport.height *
                (isTouchDevice() ? touchDeviceDPR : noneTouchDeviceDPR),
            )
          }
        />
      </mesh>
      // Here test to use the SSR - test with and without renderPriority > 0 - nothing works
      <EffectComposer disableNormalPass renderPriority={1}>
        <SSR {...props} />
      </EffectComposer>
</>
)

That’s what I got actually:

SSR-Bug
SSR-Bug2994×1166 68.6 KB

I guess I am doing something wrong … but what ?
Thanks!

2

Your SSR pass doesn’t see your actual 3D objects because you’re only rendering them into FBOs, then displaying the result on a fullscreen plane. SSR relies on depth and normal information from the live scene. Once it’s flattened into a 2D texture, the SSR pass sees only a plane.
To fix this, you can:

  1. Apply SSR on the actual scene before compositing the two FBOs. You’d render your geometry with SSR enabled (and possibly the NormalPass) to get reflections. Then combine those SSR outputs.
  2. Use SSR within each sub-scene if you want both cameras’ reflections, then blend those final SSR renders in your plane.
  3. Provide the real geometry to the final pass so the SSR pass can work on 3D data.
    Simply put, SSR must run on a scene that still has depth and normal buffers—it won’t work on a final plane with baked textures.
3

Thanks Heojunfo, will dig that!!!