White outline when using @react-three/postprocessing

[xzilja]

I've got default scene with 1 mesh and background gradient applied to body dom element.

import '@/main.css'
import Level0 from '@/scenes/Level0'
import { Canvas } from '@react-three/fiber'
import { EffectComposer, Noise } from '@react-three/postprocessing'
import { StrictMode } from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <StrictMode>
    <Canvas dpr={Math.min(devicePixelRatio, 3)}>
      <Level0 />

      <EffectComposer>
        <Noise opacity={0.1} />
      </EffectComposer>
    </Canvas>
  </StrictMode>,
  document.getElementById('root')
)

I'm seeing this strange outline whenever I add different effects (not just Noise), I you look closely you can see white outline on the mesh.

Here is another example using Vignette effect instead of noise, and different angle

I'm not entirely sure why this is happening, as examples using postprocessing library seem to look really great. Will appreciate any ideas.

[drcmda]

try setting the clearcolor instead of a transparent backdrop. effects do not handle canvas transparency too well.

<Canvas>
  <color attach="background" args={["blue"]} />

[xzilja]

Is there a way to set radial gradient this way as well by any chance?

[drcmda]

using a canvas texture you can do it, everything else would be shaders.