inbard
October 31, 2022, 12:31pm
1
Hi!
I’m trying to achieve the blurred reflection in the ground like in here:
the problem is that I don’t use react three fiber in the project, and there is already a lot of code without it.
so I tried to use ShaderMaterial and copy the vertex, fragment shaders from here:
import { Matrix4, MeshStandardMaterial, Texture } from 'three'
type UninitializedUniform<Value> = { value: Value | null }
export class MeshReflectorMaterial extends MeshStandardMaterial {
private _tDepth: UninitializedUniform<Texture> = { value: null }
private _distortionMap: UninitializedUniform<Texture> = { value: null }
private _tDiffuse: UninitializedUniform<Texture> = { value: null }
private _tDiffuseBlur: UninitializedUniform<Texture> = { value: null }
private _textureMatrix: UninitializedUniform<Matrix4> = { value: null }
private _hasBlur: { value: boolean } = { value: false }
private _mirror: { value: number } = { value: 0.0 }
private _mixBlur: { value: number } = { value: 0.0 }
private _blurStrength: { value: number } = { value: 0.5 }
private _minDepthThreshold: { value: number } = { value: 0.9 }
private _maxDepthThreshold: { value: number } = { value: 1 }
private _depthScale: { value: number } = { value: 0 }
private _depthToBlurRatioBias: { value: number } = { value: 0.25 }
private _distortion: { value: number } = { value: 1 }
private _mixContrast: { value: number } = { value: 1.0 }
This file has been truncated. show original
but regarding row 48, I think this row is replaced with the code of the shader of MeshStandardMaterial
I couldn’t find where it is
I would appreciate if you can point me to where it is, or suggest another solution
thanks in advance!
inbard
October 31, 2022, 1:03pm
3
I don’t want the reflection of SSR because it doesn’t have the blur with falloff
drcmda
October 31, 2022, 3:26pm
4
this one does: GitHub - 0beqz/screen-space-reflections: Implements Screen Space Reflections in three.js and it’s also fast enough whereas the three example imo is not usable in the real world. it will give you the most realistic results for sure because it’s a screen space effect, it’s not limited to a single plane. click:
Starwars (forked) by drcmda using @react-three/drei, @react-three/fiber, @react-three/postprocessing, @types/three, leva, react, react-dom, react-scripts, three
btw dreis reflector material has been ported. you find it somewhere here on discord, i saw it once.
1 Like
inbard
November 16, 2022, 10:39am
5
on my android phoene this runs only with 12FPS
I need a more performant solution