Creating a fading reflection

Hi,

I’m trying to create a reflection that fades as it gets further to the object:
18K%E7%99%BD%E9%87%91%E5%92%8C%E5%B0%8F%E5%BD%A9%E8%89%B2%E5%AE%9D%E7%9F%B3_LI

I know THREE.Reflector and THREE.ReflectorRTT are available to implement mirrors.
How can I make the reflection fade?
Any suggestion is appreciated.

Thank you very much!

1 Like

Maybe this example helps a bit: https://jsfiddle.net/f2Lommf5/12004/

I’ve enhanced THREE.Reflector so it uses a depth buffer for its internal render target. It’s now possible to evaluate how far away the fragments are from the reflector’s virtual camera (in other words: the view of the mirror). The depth value is used in the fragment shader to modulate the alpha value.

If you want an additional blur effect like in the picture, you can sample the reflection map multiple times and then apply a gaussian blur filter.

BTW: The code uses the WebGL extension WEBGL_depth_texture. It might not work on older devices.

2 Likes