Screen Space Reflections (SSR)

live link: Screen-space reflections · Meep

SSR: ON
image

SSR: OFF
image

A while back Babylon.js was brought up with this specific “Back to the Future”-inspired scene

here’s Babylon (camera is locked, so I apologize for difference in perspective)


OFF:

Here’s the current denoised three.js example:


OFF:

There are a few problems here that we’re solving compared to three.js and babylon:

  1. reflections are roughness-aware (stochastic). Babylon just doesn’t have any roughness at all, three.js version has roughness, but at least as far as example is concerned - it’s a fixed single value per scene.
  2. reflections are HDR (low and high light values propagate instead of being squashed or clipped)
  3. Accumulation. It’s easy to trace the image, but you need to combine it back, taking correct Fresnel into account, reflections end up being significantly brighter than physics dictates if you don’t.
  4. anti-aliasing

Here’s Babylon.js closeup

here’s Shade (mine):

Same pixel density, I didn’t mess with the screenshots in any way

1 Like