Low quality envMap look with roughness

[akella]

i have this setup for mesh:

let textureEquirec = new TextureLoader().load("./envmap.jpg");
    textureEquirec.mapping = EquirectangularReflectionMapping;
    textureEquirec.encoding = sRGBEncoding;
let geometry = new SphereBufferGeometry(100, 100, 100);
let mat = new MeshStandardMaterial({
      envMap: textureEquirec,
      color: 0xff0000,
      envMapIntensity: 1,
      roughness: 0.3,
      metalness: 1
    });

Using this texture:

And with roughness above 0.2 it blurs texture (im ok with that), but it blurs at unequally. Like a low quality.

Here is demo:

three.js bare example (forked) - CodeSandbox

1. Question is: Is this the intended look of roughness shader + envmap? Or am i doing something wrong here.
2. Question: MeshStandardMaterial doc says:
   Note: only cube environment maps are supported for MeshStandardMaterial.
   yet, it works for me with this kind of texture, i guess docs should be updated? Or am i misunderstanding something here. I also tried pmremgenerator with the same result.

[Mugen87]

@akella

yet, it works for me with this kind of texture, i guess docs should be updated? Or am i misunderstanding something here.

Equirectangular environment maps are internally converted to cube maps. The shader can indeed only process cube maps.

In general, you should never use a PBR material like MeshStandardMaterial without PMREMGenerator otherwise the result is not physically correct. Do you mind updating your code so it uses PMREMGenerator?

[akella]

updated.
Hmm, it looks better, im wondering that grid-like thing on a texture, is that fixable, or that is limitation of roughness?

three.js bare example (forked) - CodeSandbox

[Mugen87]

It gets better if you actually use a complete sRGB workflow. Add this to your renderer:

this.renderer.outputEncoding = sRGBEncoding;

And lower the roughness a bit (e.g. to 0.1).

[akella]

@Mugen87

this.renderer.outputEncoding = sRGBEncoding;

thank you this makes it better!
But lowering roughness unfortunately is not an option for me. So i suppose, this is roughness shader limitation, this kind of artefacts.

[Mugen87]

BTW: The docs about MeshStandardMaterial.envMap should be more clear with next release. The usage of PMREMGenerator is now mentioned, too.

Docs: More clean up.

[donmccurdy]

Is this something that RoughnessMipmapper would help with? It requires a roughnessMap and a normalMap, so I’m not sure…

[Mugen87]

Possibly. I’m not sure about that, too. The problem is that RoughnessMipmapper is still broken under WebGL 2. Hence, I did not use it in a project, yet.