Blurred reflections

Anderson_Mancini · March 5, 2022, 3:04am

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.

gist.github.com

https://gist.github.com/0beqz/e69378b278e5c336afe0c7ae9b4ed86c

MeshReflectorMaterial.js

// original implementation is from https://github.com/pmndrs/drei

import {
  DepthFormat, DepthTexture, LinearFilter, Matrix4, MeshStandardMaterial,
  PerspectiveCamera, Plane, UnsignedShortType, Vector3, Vector4, WebGLRenderTarget
} from "three"
import * as POSTPROCESSING from "postprocessing";

export default class MeshReflectorMaterial extends MeshStandardMaterial {
  constructor(renderer, camera, scene, object, {

This file has been truncated. show original

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

Topic		Replies	Views
Having problem with using MeshReflectorMaterial Questions materials , shaders	4	2083	November 16, 2022
CubeCamera reflection issue (codepen included) Questions geometry	6	795	January 20, 2023
Broken reflections and normals after Three version 0.135.0? Questions materials , react-three-fiber , react-threedrei	3	168	March 21, 2024
Issue with r3f MeshReflectorMaterial Questions materials , threejs , react-three-fiber , reflector , drei	0	501	February 28, 2023
Trying to adjust parameters of MeshReflectorMaterial Questions materials , shaders	0	895	November 21, 2022

Blurred reflections

Related topics