Color banding artifacts on `>= v1.1.37`

[nhtoby311]

From v1.1.37, I notice some color banding artifacts on my scene overlay FX, which is implemented similar to this https://github.com/FunTechInc/use-shader-fx/issues/50#issuecomment-1884499421

const offscreenScene = useMemo(() => new THREE.Scene(), []);
const { size, viewport, camera, gl } = useThree();

const [_, updateRenderTarget] = useSingleFBO({
  scene: offscreenScene,
  camera,
  size,
  dpr: viewport.dpr,
  samples: 8,
  depthBuffer: true,
});

const fxMaterial = useStore((state) => state.fxMaterial);

useFrame((props) => {
  if (morphing && fxMaterial) {
  fxMaterial.uniforms.u_texture.value = updateRenderTarget(gl);
}
});

return (
<>
    {createPortal(<mesh>{children}</mesh>, offscreenScene)}
</>

v1.1.36:

v1.1.37:

[takuma-hmng8]

@nhtoby311

There are changes to FBO_DEFAULT_OPTION Prior to 36, the specification was to override some of the default props as follows.

export const FBO_DEFAULT_OPTION: THREE.RenderTargetOptions = {
   minFilter: THREE.LinearFilter,
   magFilter: THREE.LinearFilter,
   type: THREE.HalfFloatType,
   stencilBuffer: false,
   depthBuffer: false,
   samples: 0,
};

From 37 onwards, the change is simpler. Only the depthBuffer is overwritten. This is because, due to the nature of this library, depth is not very important.

export const FBO_DEFAULT_OPTION: THREE.RenderTargetOptions = {
   depthBuffer: false,
};

The cause of the problem in this drawing result is probably THREE.HalfFloatType. This is because the default is UnsignedByteType.