How to get higher resolution environment map reflections

Questions
, , , ,
1

Hi all, does anyone know how to get higher resolution reflections? Thanks!

I get very pixelated reflections in a smooth metallic material, even though the source image is very sharp, which you can see in the background, compared with the reflection in the cube.

Using the texture directly, I get very pixelated reflections:

const environmentMap = textureLoader.load('assets/textures/photosphere/HDR_110_Tunnel_Bg.jpg');
environmentMap.mapping = EquirectangularReflectionMapping;
scene.environment = environmentMap;

scene.background = environmentMap;

Screen Shot 2021-09-13 at 12.57.51 PM
Screen Shot 2021-09-13 at 12.57.51 PM1528×1210 53.2 KB

Using PMREMGenerator I get slightly better looking result, but it’s still much lower quality than the source image:

const environmentMap = textureLoader.load('assets/textures/photosphere/HDR_110_Tunnel_Bg.jpg', tx => {
    scene.environment = pmremGenerator.fromEquirectangular(tx).texture;
});
environmentMap.mapping = EquirectangularReflectionMapping;
scene.environment = environmentMap;

scene.background = environmentMap;

Screen Shot 2021-09-13 at 12.58.42 PM
Screen Shot 2021-09-13 at 12.58.42 PM1604×1252 50.3 KB

Any help or advice appreciated, thanks.

2

Can you share your entire code here?

Try this:

cube.material = new MeshStandardMaterial({ roughness: 0, metalness: 1 });
3

Heya @looeee, thanks for the reply. I think code for the whole scene would add a lot of noise?

Yes my cube material looks like this:

var material = new MeshStandardMaterial({
    color: 0xffffff,
    metalness: 1,
    roughness: 0
});

Based on the below links, is there maybe a hardcoded resolution limit for reflections? If that’s the case it would be great to be able to configure it somehow.