Roughness problem when using equirectangular hdr image for MeshStandardMaterial's envMap

[zhutq]

Description of the problem

I'm trying to use equirectangular .hdr image as MeshStandardMaterial's envMap.
It seems roughness does not work with equirectangular .hdr envMaps, although it does work with cube hdr maps.

The original examples/webgl_materials_variations_standard.html, using cube hdr maps, looks like:

When using an equirectangular hdr image instead, the result is as follows. The reflections of higher roughness are as sharp as that of lower roughness.

My loading code:

new THREE.RGBELoader().load( 'textures/miranda_uncropped.hdr', function( texture ) {
	texture.encoding = THREE.RGBEEncoding;
	texture.flipY = true;
	texture.mapping = THREE.EquirectangularReflectionMapping;

       	// .....
       	var material = new THREE.MeshStandardMaterial( {
		map: imgTexture,
		bumpMap: imgTexture,
		bumpScale: bumpScale,
		color: diffuseColor,
		metalness: beta,
		roughness: 1.0 - alpha,
		envMap: index % 2 === 0 ? null : texture
	} );
        // ......

Three.js version

• Dev
• r95
• ...

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

Hardware Requirements (graphics card, VR Device, ...)

[WestLangley]

Only cube environment maps are supported for MeshStandardMaterial.

See if you can get EquirectangularToCubeGenerator to work in your use case.

Example: https://threejs.org/examples/webgl_materials_envmaps_exr.html

[zhutq]

See if you can get EquirectangularToCubeGenerator to work in your use case.
Example: https://threejs.org/examples/webgl_materials_envmaps_exr.html

EquirectangularToCubeGenerator results in black when texture.encoding = THREE.RGBEEncoding.
My loading code:

new THREE.RGBELoader().load( 'textures/miranda_uncropped.hdr', function( texture ) {
	texture.encoding = THREE.RGBEEncoding;
	texture.minFilter = THREE.NearestFilter;
	texture.magFilter = THREE.NearestFilter;
	texture.flipY = true;

        var cubemapGenerator = new THREE.EquirectangularToCubeGenerator( texture, 512 );
        // ......

[WestLangley]

/ping @richardmonette Any ideas as to the proper workflow in this case?

/ping @bhouston

[richardmonette]

The THREE.EquirectangularToCubeGenerator has the assumption that your data is already in THREE.RGBAFormat, if I recall correctly. Can you pre-convert your RGBE image to Linear RGBA? Alternatively, if you use equirectangular EXR, then https://threejs.org/examples/webgl_materials_envmaps_exr.html would be exactly the example you need.