Environment Map Quality Problem

+1 on this issue

Goal is to use an HDR equirectangular texture as the envMap to obtain physically correct lighting on a model while also having the scene.background use the same HDR equirectangular texture except that the background should be bigger than 256x256 so it looks hi-res.

When using an original hdr texture as the scene.background, the texture is hi-res but the issue is it appears to be fixed in the viewport. So when you use orbit controls, it appears that the model and scene is rotating, while the camera and background are fixed.

Code:

	this.pmremGenerator = new THREE.PMREMGenerator( this.el.sceneEl.renderer );
	this.pmremGenerator.compileEquirectangularShader();

	new RGBELoader()
		.setDataType( UnsignedByteType )
		.load( '/textures/studio_2k.hdr', ( texture ) => {

			// generate envMap used for lighting
			const envMap = this.pmremGenerator.fromEquirectangular( texture ).texture;
	        this.pmremGenerator.dispose();

			// set visual background
			this.el.sceneEl.object3D.background = texture; // OG texture

			// apply PMREM texture as envMap on all motorcycle materials
			this.el.sceneEl.object3D.environment = envMap;

		} );

Result:

Using the PMREM version of the texture as the scene.background solves the issue of it seeming “fixed” to the viewport but the issue then is it looks low res since it’s 256x256, which you can really see in the light in my screenshot.

Code:

	this.pmremGenerator = new THREE.PMREMGenerator( this.el.sceneEl.renderer );
	this.pmremGenerator.compileEquirectangularShader();

	new RGBELoader()
		.setDataType( UnsignedByteType )
		.load( '/textures/studio_2k.hdr', ( texture ) => {

			// generate envMap used for lighting
			const envMap = this.pmremGenerator.fromEquirectangular( texture ).texture;
	        this.pmremGenerator.dispose();

			// set visual background
			this.el.sceneEl.object3D.background = envMap; // envMap cube texture

			// apply PMREM texture as envMap on all motorcycle materials
			this.el.sceneEl.object3D.environment = envMap;

		} );

Result:

What’s the best technique to have a scene.background image that matches the envMap but is also high-res to make the scene look realistic? I’d imagine using a hi-res cubemap version of the texture would do the trick, but how do I convert my equirectangular image to a cubemap and maintain resolution? Or is there another solution I’m not thinking of?

A good example of what I’m trying to accomplish is Virtual Studio. If you click on the environments you see this…

Thanks in advance for any assistance!