Create floor with dynamic soft reflections

Question

Using three.js am trying to create a floor that reflects the objects that sit upon it. Preferably the floor material should reflect not like a mirror but in a more 'matte' or diffused way. To achieve this I looked to Jaume Sanchez Elias who has made a great example using a cube camera: Look for the "smooth material" example on this page:

http://www.clicktorelease.com/blog/making-of-cruciform

Here is my attempt using the same technique. But as you see the reflections are misplaced, they do not appear underneath the mountain objects as expected.

http://dev.udart.dk/stackoverflow_reflections/

I am looking to correct this or to use any other technique that will achieve a more correct diffused reflection.

There are three.js examples using the cube camera technique but they all create mirror-like effects not a soft reflection.

Answer 1

Vibber. Parallax-corrected cubemaps, the technique used in cru·ci·form, only works for closed volumes, like cubes. It works really well to simulate correct reflections inside a room, but not so much for outdoors or open/large scenes. They also can't reflect anything that it's inside the cubemap, you'd have to split the volume in many sub-volumes.

I can think of a couple of solutions for what you want to achieve:

• SSR: Screen-space reflections, you can find more info in many places on the internet. It's not the most trivial of effects to implement, and you might have to change the way you render your scene.

• Simpler post-processing approach: since you have a flat floor, render the mountains vertically flipped on a framebuffer object, blur it, and render the regular scene on top. For extra effect, render the depth of the flipped mountains, and use that value as the blur radius, to get diffuse reflections.

As always, there's a ton of ways to achieve the (un)expected result :)