# Environment Map Quality Problem

**URL:** <https://discourse.threejs.org/t/environment-map-quality-problem/24921>\
**Category:** Questions\
**Tags:** pmrem, envmap\
**Created:** [March 30, 2021, 10:48pm UTC](https://discourse.threejs.org/t/environment-map-quality-problem/24921 "2021-03-30T22:48:23Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![turkkan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/turkkan/32/7775_2.png) [@turkkan](https://discourse.threejs.org/u/turkkan)\
**Post date:** [March 30, 2021, 10:48pm UTC](https://discourse.threejs.org/t/environment-map-quality-problem/24921/1 "2021-03-30T22:48:23Z")

</div>

Hi everyone,  
I’m trying to build app needs realistic rendering. So First im trying to make everything okay for HDR environment map.

As far as i see in documentation .fromEquirectangular code gives an output 256x256  
so my background resolution too low. it is okay but real my wonder is whether this issue has an effect on light quality also for scene.environment. Because it will effect realistic rendering.

I’m using following code for env map.

```
function loadEnvironment(url) {

    let rgbeLoader = new RGBELoader();
    rgbeLoader.setDataType(UnsignedByteType);
    return new Promise(resolve => {

        rgbeLoader.load(url, function (texture) {

            let pmremGenerator = new PMREMGenerator(renderer);
            pmremGenerator.compileEquirectangularShader();

            let envMap = pmremGenerator.fromEquirectangular(texture).texture;
            pmremGenerator.dispose();

            //scene.background = envMap;
            //scene.environment = envMap;

            resolve(envMap);
        });

    });

}

```

In the mean time for the resolution i tried the code below

```javascript
				var envMap = new THREE.WebGLCubeRenderTarget( 4096, cubeRenderOpts2 ).fromEquirectangularTexture( renderer, texture );

```

It solves the resolution but at this time scene.environment doesnt give any light.

If you can help me about this issue it will be a good clean start for me and will be appreciated.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 31, 2021, 8:46am UTC](https://discourse.threejs.org/t/environment-map-quality-problem/24921/2 "2021-03-31T08:46:44Z")

</div>

If you want a sharp background, it’s best when you not use the output of `PMREMGenerator`. Simply do this:

```javascript
rgbeLoader.load(url, function (texture) {

    scene.background = texture;

});

```

There is not need to convert it to the cube map format.

---

<div class="post-metadata">

**Author:** ![turkkan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/turkkan/32/7775_2.png) [@turkkan](https://discourse.threejs.org/u/turkkan)\
**Post date:** [March 31, 2021, 9:31am UTC](https://discourse.threejs.org/t/environment-map-quality-problem/24921/3 "2021-03-31T09:31:24Z")

</div>

Thanks @Mugen87 , it solved my problem for sharp background.

But what about scene.environment.  
when i use 4k hdr it gives love resolution anyway. so doest it effect my realistic rendering?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 31, 2021, 9:38am UTC](https://discourse.threejs.org/t/environment-map-quality-problem/24921/4 "2021-03-31T09:38:09Z")

</div>

For `Scene.environment`, use the output of `PMREMGenerator`. Otherwise the PBR materials won’t render physically correct anymore.

---

<div class="post-metadata">

**Author:** ![turkkan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/turkkan/32/7775_2.png) [@turkkan](https://discourse.threejs.org/u/turkkan)\
**Post date:** [March 31, 2021, 10:22am UTC](https://discourse.threejs.org/t/environment-map-quality-problem/24921/5 "2021-03-31T10:22:29Z")

</div>

should i use envmap for materials like material.envMap = envMap; or it generates automatically?

And for sharp env yes your solution solved sharpnes. But this time envrioments doesnt rotate it is stable. So it is looking like object is turning only

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 31, 2021, 10:59am UTC](https://discourse.threejs.org/t/environment-map-quality-problem/24921/6 "2021-03-31T10:59:41Z")

</div>

> [@turkkan](#):
>
> should i use envmap for materials like material.envMap = envMap; or it generates automatically?

Use the output of `PMREMGenerator` if you use a PBR material like `MeshStandardMaterial`.

> [@turkkan](#):
>
> But this time envrioments doesnt rotate it is stable. So it is looking like object is turning only

Not sure what you mean by that. Do you mind demonstrating this with a live example?

---

<div class="post-metadata">

**Author:** ![turkkan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/turkkan/32/7775_2.png) [@turkkan](https://discourse.threejs.org/u/turkkan)\
**Post date:** [March 31, 2021, 11:14am UTC](https://discourse.threejs.org/t/environment-map-quality-problem/24921/7 "2021-03-31T11:14:12Z")

</div>

```
loadEnvironment('src/env/hdri/lilienstein_4k.hdr').then(function (envMap) {
        scene.background = envMap;
        scene.environment = envMap;

        gltfLoader.load(
            // resource URL
            'models/room/furnality-room.gltf',
            // called when the resource is loaded
            function (gltf) {

                gltf.scene.traverse(function (obj) {
                    if (obj instanceof Mesh) {
                        let materialAO = "models/room/bakeAO.jpg";
                        let ao = LoadTextureCorrected(textureLoader, materialAO);

                        obj.material.aoMap = ao;

                        // let materialLight = "models/room/lightMap.png";
                        // let lightMap = LoadTextureCorrected(textureLoader, materialLight);
                        // obj.material.lightMap = lightMap;

                        obj.material.receiveShadow = true;
                        obj.material.castShadow = true;
                        obj.material.envMap = envMap;

                        if (obj.material.name == "floor") {
                            obj.material.map.wrapS = obj.material.map.wrapT = RepeatWrapping;
                            obj.material.map.repeat.set(10, 10);
                            obj.material.roughness = 1;
                            obj.receiveShadow = true;
                            controls.ground.push(obj);
                        }

                        if (obj.material.name == "wall") {
                            obj.material.map.wrapS = obj.material.map.wrapT = RepeatWrapping;
                            obj.material.map.repeat.set(15, 15);
                            obj.material.roughness = 1;
                        }
                    }
                });

                scene.add(gltf.scene);

            },
            // called while loading is progressing
            function (xhr) {

                console.log((xhr.loaded / xhr.total * 100) + '% loaded');

            },
            // called when loading has errors
            function (error) {

                console.log('An error happened');

            }
        );

    });

```

is there anything wrong for envMap?

For your second thing  
I have mouselook control in my app. When i turn the camera enviorenment is stable. you see only one view of environment. it comes to user like house is turning not camera.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 31, 2021, 12:37pm UTC](https://discourse.threejs.org/t/environment-map-quality-problem/24921/8 "2021-03-31T12:37:11Z")

</div>

When using `Scene.environment`, it is not necessary to assign this map to the `envMap` property of your materials. More information in the documentation:

[https://threejs.org/docs/index.html?q=scene#api/en/scenes/Scene.environment](https://threejs.org/docs/index.html?q=scene#api/en/scenes/Scene.environment)

However, you should preprocess the environment map with `PMREMGenerator` if you assign it to `Scene.environment` (or `envMap`) and use a PBR material. You are not doing this in your code snippet.

---

<div class="post-metadata">

**Author:** ![turkkan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/turkkan/32/7775_2.png) [@turkkan](https://discourse.threejs.org/u/turkkan)\
**Post date:** [April 1, 2021, 7:14am UTC](https://discourse.threejs.org/t/environment-map-quality-problem/24921/9 "2021-04-01T07:14:56Z")

</div>

The codes for pmrem as below. Arent they okay ?

My function  
function loadEnvironment(url) {

```
    let rgbeLoader = new RGBELoader();
    rgbeLoader.setDataType(UnsignedByteType);
    return new Promise(resolve => {

        rgbeLoader.load(url, function (texture) {

            let pmremGenerator = new PMREMGenerator(renderer);
            pmremGenerator.compileEquirectangularShader();

            let envMap = pmremGenerator.fromEquirectangular(texture).texture;
            pmremGenerator.dispose();

            resolve(envMap);
        });

    });

}

```

And usage of function

```
loadEnvironment('src/env/hdri/woods_4k.hdr').then(function (envMap) {
        scene.background = envMap;
        scene.environment = envMap;
});

```

I have gltf object and all materials already assigned. Should i create a meshstandardmaterial?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 1, 2021, 9:24am UTC](https://discourse.threejs.org/t/environment-map-quality-problem/24921/10 "2021-04-01T09:24:15Z")

</div>

> [@turkkan](#):
>
> `scene.background = envMap;`

I think I told you before that you should not do this if you want a sharp background.

> [@turkkan](#):
>
> I have gltf object and all materials already assigned. Should i create a meshstandardmaterial?

`MeshStandardMaterial` is the default material when using `GLTFLoader`.

---

<div class="post-metadata">

**Author:** ![turkkan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/turkkan/32/7775_2.png) [@turkkan](https://discourse.threejs.org/u/turkkan)\
**Post date:** [April 1, 2021, 10:03am UTC](https://discourse.threejs.org/t/environment-map-quality-problem/24921/11 "2021-04-01T10:03:34Z")

</div>

@Mugen87 sharping was okay but when i rotate the camera enviroment is not stable. It is rotating either.

You can see in pics what i mean.

 ![Ekran Resmi 2021-04-01 13.01.42](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/f/bfe2daffb6f67a55ee9e86f3848de4b9ccd57ea8.jpeg)

 ![Ekran Resmi 2021-04-01 13.01.58](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/9/19fa35b3961030a5c388f9a2240906b64932ad86.jpeg)

---

<div class="post-metadata">

**Author:** ![Hayden](https://avatars.discourse-cdn.com/v4/letter/h/91b2a8/32.png) [@Hayden](https://discourse.threejs.org/u/Hayden)\
**Post date:** [April 8, 2021, 5:31pm UTC](https://discourse.threejs.org/t/environment-map-quality-problem/24921/12 "2021-04-08T17:31:22Z")

</div>

+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:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/a/6af9bb3ef6bff87c299d24259e1b9cae15dca75c.jpeg)

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:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/6/f63b0c5cc7ffa9808f1410f71432a9b2788fafb4.jpeg)

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](https://www.vw.com.mx/app/virtual-studio/). If you click on the environments you see this…

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/f/4fb24a15c4f872021c3d9e27d35dada3efb27497.jpeg)

Thanks in advance for any assistance!

---

<div class="post-metadata">

**Author:** ![archerl](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/archerl/32/11058_2.png) [@archerl](https://discourse.threejs.org/u/archerl)\
**Post date:** [February 7, 2022, 3:10pm UTC](https://discourse.threejs.org/t/environment-map-quality-problem/24921/13 "2022-02-07T15:10:35Z")

</div>

I have the same problem. Did anybody solve it?