useDepthBuffer with SpotLight causes sRGB texture error & slow load

[felixgren]

• three version: 0.137.5
• @react-three/fiber version: 7.0.26
• @react-three/drei version: 8.8.3
• node version: 16.13.1
• npm (or yarn) version: 8.1.2

Problem description:

When providing SpotLight with a depth-buffer from useDepthBuffer, an error occurs and significant jank on load is experienced.

On load we see THREE.WebGLTextures: sRGB encoded textures have to use RGBAFormat and UnsignedByteType.

On on every frame of the depth-buffer we see [.WebGL-0x26c082d7000] GL_INVALID_OPERATION: Feedback loop formed between Framebuffer and active Texture.

This issue can also be seen in the example in docs for volumetric lightning, CodeSandbox w/ code CodeSandbox no code

I am still uncertain if the significant jank on load is a result of this issue or if it's just that SpotLight and useDepthBuffer being expensive to render.

Relevant code:

function Scene() {
  const depthBuffer = useDepthBuffer();
  return (
    <>
      <SpotLight
        depthBuffer={depthBuffer}
        color="#ffffff"
        position={[-20, 17, -10]}
        distance={70}
        angle={1}
      />
      <SpotLight
        depthBuffer={depthBuffer}
        color="#ffffff"
        position={[20, 17, -10]}
        distance={70}
        angle={1}
      />
      <SpotLight
        depthBuffer={depthBuffer}
        color="#0c8cbf"
        position={[0, 15, 50]}
        intensity={5}
        angle={0.5}
        distance={75}
      />
    </>
  );
}

Suggested solution:

I don't know enough about this topic yet, it seems like an adjustment has to be made in useDepthBuffer.ts and useFBO.tsx which it relies on to return a depthFBO to render inside the useFrame of useDepthBuffer.ts. Maybe code to convert the sRGB encoded texture into linear-sRGB, still - I don't know where the sRGB texture is coming from in the first place. It might have something to do with the recent change to legacy color management (if it is active in this version of three-fiber & three yet)