Over the past few months I’ve been working on a variety of reflection techniques in THREE.JS & WebGL - SSR, cubemap-based reflections, and voxel reflections.
I recently came across on article about parralax-correcting cubemaps, and I decided to have a shot at parralax correcting a cubemap by raymarching a depth buffer cubemap from the player’s perspective. It worked really well. It’s a bit too slow for use in games but still is a cool demonstration of the technique.
TECHNICAL DETAILS:
The technique works by rendering three cubemaps:
- One from the player’s perspective that captures scene color
- One that captures scene depth
- And one that captures only static objects
The first cubemap is projected onto the scene using the second, with the third being used as a fallback for rays that don’t hit anything.
Obviously, rendering three cubemaps is quite expensive and further optimization could get this down to 2 (one for depth & color) or even 1 with MRT perhaps.
The way the cubemap is projected onto the scene involves raymarching in worldspace and checking for an intersection with the depth cube map. This is the most expensive part of the algo - perhaps a mip pyramid could help with this.
The algorithm runs (without screen capture) at around 40 FPS on a M1 Mac (equivalent of a GTX 1050).
