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!

2 Likes

Maybe this example helps a bit: https://jsfiddle.net/3fb6ousc/6/

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.

8 Likes

Hi, I know this thread has been answered for a while, but I’m having trouble implementing your enhanced THREE.Reflector (allowing for fading reflection) . I have the standard Reflector working (image attached). When I tried to integrate your code, Edit fiddle - JSFiddle - Code Playground it wouldn’t run without including: import { Reflector } from ‘three/examples/jsm/objects/Reflector’
Also I had to amend:
‘const groundMirror = new THREE.Reflector(’
to:
‘const groundMirror = new Reflector(’
to avoid errors. With this it simplly uses the standard Reflector rather than your custom Reflector. Any changes I made to the Shader were ignored.
If I do get it to run, how would I specify the stat & end of the reflection fade?
Keep up the cool work!
temp_refl

here is a full implementation: drei/MeshReflectorMaterial.tsx at 1de1854b88b4cf4e114aee7c366176fb8aead298 · pmndrs/drei · GitHub

and this is how it looks in action: Image Gallery - CodeSandbox

it’s based on the original three reflector, you should be able to use the code if you compare the sources.

4 Likes

Great. will try this out.

Came across this error in the console when I replace the standard Reflector:
<index.js:566 Uncaught TypeError: react_three_drei__WEBPACK_IMPORTED_MODULE_6_.MeshReflectorMaterial is not a constructor>

Not sure if I missed out a step (first time using React), but this is what I did:

1/ npm install @react-three/drei
2/ index.js:
import { useEffect, useRef, useState } from ‘react’
import { Canvas, useFrame } from ‘@react-three/fiber’
import { MeshReflectorMaterial, Image} from ‘@react-three/drei’
3/ const groundMirror = new MeshReflectorMaterial(

It’s a component, not a class, you can’t use the “new” keyword, or use it in vanilla. If you need the reflector in vanilla you can port it, that’s mostly why I linked it, the code is there. Might be the one and only open source blur reflector, i never saw another.

2 Likes

Hello everybody.

Yannic from twitter (https://twitter.com/0beqz) was able to convert it to Vanilla :star_struck:. It is working like a charm and it is very easy to use it. It suports the blur with depth based fade.

MeshReflectorMaterial.js · GitHub.

It is awesome. A great achievement and I’m sharing it here in case someone searches for it and end up here.

This is the first result I got with this: https://twitter.com/Andersonmancini/status/1499514798433869829?t=XubsW0VLmxS848HTcXFd-w&s=19

Hi, I am a newbee to webgl world. May I ask is it possible to apply MeshReflectorMaterial. to any geometory? bufferGeometry does not work for me

      <mesh name="someKey" {...others}>
        <bufferGeometry {...nodes.someKey.geometry} {...others}/>
        <MeshReflectorMaterial
          blur={[400, 100]}
          resolution={2048}
          mixBlur={1}
          opacity={2}
          depthScale={1.1}
          minDepthThreshold={0.7}
          maxDepthThreshold={1.25}
          roughness={1}
        /> 
      </mesh>
1 Like

Hi there.

Yes, you can. But the geometry needs to be plannar. I’m using mesh reflector here: houses-neotix.vercel.app , to make this external floor reflexive, and it is working fine.

You need to change the parameter to the plannar normal. Sometimes, meshes are facing down instead of up and we don’t notice it.

I hope this can help you.

hello, thanks for sharing, can vue use it

look at andersons reply.

Hi anderson, you are a hero!
But unfortunately the gltf model delivered to me seems not to be a planner…(And it is not easy to change the model to planner in my opinion)
I am now looking to SSR (Screen Space Reflection)

1 Like

Hi there. Great to know that helped :+1:t2:. This same guy, yannic, created a very good and easy to use SSR Post processing. The default SSR from theeejs library is good but very expensive for gpu.

I always face some kind of strange result when applying reflections to non plannar surfaces. If your ssr approach work, please post it here so we can help people searching for it in the future okay?

:pray:t2:

1 Like