I'm working on a react-three-fiber website and can't get SSR (screen spaced reflections) working at the same time as Bloom. I'm using @react-three/postprocessing which I understand uses Effects rather than Passes, however I believe my real issue lies in library versions and peer-dependency conflicts.
Here is what it looks like with Screen Spaced Reflections working and the dependencies I used (note the nice reflections on the floor):
"@react-three/drei": "9.17.1",
"@react-three/fiber": "8.2.0",
"@react-three/postprocessing": "2.6.1",
"three": "0.142.0",
And here is what it looks like with Bloom working and the dependencies I used (note the nice glow around some of the neon bulbs):
"@react-three/drei": "^9.84.2"
"@react-three/fiber": "^8.15.15"
"@react-three/postprocessing": "^2.16.0"
"three": "^0.161.0"
I've read in a few places that SSR has been deprecated in more recent version so maybe I need to implement Drei's Reflector or MeshReflectionMaterial.
Hopefully there's an easy way to resolve it and implement both effects. Thanks in advance for any help or guidance!
I've bounced through a lot of codeandsandbox examples, read all the relevant docs for all the libraries, and experimented heavily with upgrading / downgrading npm versions of each of the relevant libraries.