Gadget w/ planar reflections (+full code)

A little project we made with arc4g: https://twitter.com/0xca0a/status/1352367448339730432

The dot field and the reflections are rendered to texture by the postprocessing library.

Demo: http://capable-brass.surge.sh
Codesandbox: arc x pmndrs - CodeSandbox

7 Likes

Wow that looks amazing!!

1 Like

Awesome! Love arc4gs work and the scene really captures the look.

Are screen space reflections being used here? It looks like just planar reflection from a second camera is being used.

1 Like

Yeah it’s planar reflection according to the code. @drcmda it would be better to adapt the title since there is a really big difference between planar and screenspace reflections.

Anyway looks great :+1:

1 Like

im so naive - i had no idea there’s a terminology for this, i knew the SSR thing from blender and just assumed this is how it’s called when the bottom reflects up, but yes, it’s using a camera that’s looking upwards and this is rendered on a texture, then blurred. :smiley:

(so SSR uses something like raycasting, is this correct?)

2 Likes

SSR is basically reflections done entirely in screenspace, the scene depth and normals are rendered to buffers and at the SSR pass it is marched from the surface till it hits what is reflecting, this allows any surface like a sphere to reflect what the camera captures.

This is also one of the minor-to-stronger disadvantages, as it can only reflect what’s on the screen unless a more advanced implementation with a cubemap is used but that still also can’t reflect what was occluded. A bigger issue is the cost of this which is the biggest out of most common post-processing effects.

A planar reflection is relatively cheap without those limitations and perfectly suited for scenes like yours.

Looks really stunning, great work! Is the shadow on the plane baked?

yes, we first tried to make softshadows by code but it claimed a few fps for itself.

I like such visuals :slight_smile:

1 Like

arc4g work is so cool, amazing this is done in real time.

1 Like

Beautiful work! Congrats!!!