Hi,
I’m trying to create a reflection that fades as it gets further to the object:
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!
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.
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!
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.
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.
Hello everybody.
Yannic from twitter (https://twitter.com/0beqz) was able to convert it to Vanilla 
. 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>
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)
Hi there. Great to know that helped 
. 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?
I am trying to add a faded reflection using MeshReflectorMaterial, I would like something like this https://global.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/9/e9e54a20d1f341be7131c3583367af8ef4866715.jpeg but the result is not what I want.
I don’t know what I am doing wrong 
Here is the demo Start
Thank you.
Hello! I’m having a problem when trying to use MeshReflectorMaterial in my code.
Console error: GL_INVALID_OPERATION: Depth/stencil buffer format combination is not allowed for blit.
Can anyone help solve this problem?
threejs is a moving target, it breaks with pretty much every minor release. i’m not aware of an issue atm, but too scared to update the demos. but i would start there, take the demos and establish if it’s running with latest three. if it’s not we have to fix something.