Make reflectivity

I want to make reflectivity for sink to marble but it is now working. Sink and marble have same material. What is wrong on my code?

const texture = new THREE.TextureLoader().load('../Textures/1/Maps/' + file.name);
            customMaterial.roughnessMap = texture;
            customMaterial.envMap = reflectionCube;
            customMaterial.envMapIntensity = 1;
            customMaterial.ior = 2.2;
            customMaterial.specularIntensity = 1;
            customMaterial.specularTint = new THREE.Color(0xffffff);
            customMaterial.lightIntensity = 1;
            customMaterial.exposure = 1;
            customMaterial.reflectivity = 1;

You potentially need screen-space reflections for this feature request (assuming you want the sink to be reflected on the table top surface and vice versa). Check out how the following demo is implemented:

https://threejs.org/examples/webgl_postprocessing_ssr

But be aware, this effect is very expensive and won’t properly run on weaker devices.

1 Like

I added ReflectorForSSRPass on floor and all material turn to reflect item also quality turn to too low



var floorGeometry = new THREE.PlaneGeometry(50, 50, 1, 1);
groundReflector = new THREE.ReflectorForSSRPass(floorGeometry, {
            clipBias: 0.0003,
            textureWidth: window.innerWidth,
            textureHeight: window.innerHeight,
            color: 0x888888,
            useDepthTexture: false,
        });
        groundReflector.material.depthWrite = false;
        groundReflector.rotation.x = - Math.PI / 2;
        groundReflector.position.y = -310;
        groundReflector.visible = false;
        scene.add(groundReflector);

        composer = new THREE.EffectComposer(renderer);
        ssrPass = new THREE.SSRPass({
            renderer,
            scene,
            camera,
            width: innerWidth,
            height: innerHeight,
            encoding: THREE.sRGBEncoding,
            groundReflector: groundReflector,
            selects: bathroom.children[4].geometry // it is marble mesh but not work
        });
        composer.addPass(ssrPass);
  1. Hello, try selects: [ bathroom.children[4] ], instead.

  2. ReflectorForSSRPass is just a supplement for SSRPass, not a must to use. If you just want the model to be reflective, no need to create groundReflector.

  3. Because SSRPass is a postproccessing, so main renderer’s antialias will no any effect on it. You need postproccessing ( RenderTarget ) antialias solution:
    For webgl1, suggest use FXAA after SSRPass.
    For webgl2, suggest use WebGLMultisampleRenderTarget which may need some code adjust of SSRPass.js’ source code.

  1. selects: [ bathroom.children[4] ] thanks it is work.
  2. ReflectorForSSRPass I deleted this code
  3. FXAA NOT working. I am getting same scene.
ssrPass = new THREE.SSRPass({
            renderer,
            scene,
            camera,
            width: innerWidth,
            height: innerHeight,
            encoding: THREE.sRGBEncoding,
            selects: [theModel.children[4]]
        });
        composer.addPass(ssrPass);
        fxaaPass = new THREE.ShaderPass(THREE.FXAAShader);

        const pixelRatio = renderer.getPixelRatio();

        var container = document.getElementById('c');
        fxaaPass.material.uniforms['resolution'].value.x = 1 / (container.offsetWidth * pixelRatio);
        fxaaPass.material.uniforms['resolution'].value.y = 1 / (container.offsetHeight * pixelRatio);
        composer.addPass(fxaaPass);

I solved. It is about composer.setSize(width, height); . but reflection quality not good. Do you have any idea about that?


1 Like
  1. Try to increase the thickness parameter. three.js examples

  2. Try to uncomment the codes of blurRenderTarget3 in SSRpass.js, to make the result blurrier.

  3. Try to use something like blue noise to jitter the normal in the shader, but SSRPass currently hasn’t implemented this. I want to do it but don’t know when can be done. May try it by yourself first if needed.
    @gkjohnson told me about blue noise, you can refer to his implementation.
    repo, demo pics

  4. I’ve tried to use simple noise before, but need to loop multiple times to get a good result, very expensive. Comparatively, the upper mentioned blue noise should just run once is enough.
    demo, code

  5. Because of the limitation of screen-space, SSRPass can only reflect what has already been rendered. I think it’s good for bumpy surfaces, but not plane surfaces. So, for the desktop and floor, use plane Reflector or ReflectorForSSRPass for each will more suitable.