How can we prevent environment map from having lower resolution?

Questions
, ,
1

For example, in this pen,

the scene background appears to have lower resolution. This is the original image:

https://assets.codepen.io/191583/airplane-hanger-env-map.jpg

The code that loads the image isn’t directly visible there, but basically this:

new TextureLoader.load('https://assets.codepen.io/191583/airplane-hanger-env-map.jpg', tx => {
  scene.background = new PMREMGenerator.fromEquirectangular(tx).texture
})

and by default it comes out at a lower resolution.

2

If you want a sharp background using PMREMGenerator is not an ideal choice. It’s better to directly assign the environment map to Scene.background without applying any pre-processing to it.

3

Does that mean in that case to supply it as a cube map directly?

4

You can assign textures in the cube map or equirectangular format.

5

Is there a guide on that? From what I can tell, the glTF examples use PMREMGenerator for handling environment maps from equirectangular images. I think you’re saying there’s a better way, right? It’s just not totally clear from the docs yet. Maybe I’m not versed enough on graphics in general yet, so I don’t know what to search for.

6

Ah, it seems, based on webgl_panorama_equirectangular demo, if I want a “better” solution then instead of using the background property and PMREMGenerator, I should manually create a sphere with the texture, and make sure that renders behind everything.

Is that the best way? Or is there another way to do it with the Scene.background property? I knew about the manual box/sphere method, but I thought Scene.background would be a nicer shortcut for it.

7

This maybe helps as an example to load an equirectangular texture:
(I am actually currently going the opposite way, discovering PMRemGenerator to reduce aliasing artifacts on metallic curved surfaces)

  if (model.envmapfilename)
  {
    cubemapsurface = new THREE.WebGLRenderTargetCube(512, 512);
  envmaptex =
      new THREE.TextureLoader().load(model.envmapfilename,
    function ( texture ) {
       texture.generateMipmaps = false;
      texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
       texture.minFilter = THREE.LinearFilter;
       texture.encoding = THREE.sRGBEncoding;

       cubemapsurface.fromEquirectangularTexture(renderer, texture);
       scene.background = cubemapsurface.texture

      texture.dispose();     }, undefined,.     function ( e ) {  console.error("Environment Texture load error:" + e );  }
    );
  }
8

arent you guys converting that to prem internally any way

edit: shit, this was 1 year old post

9

The renderer only uses the output of PMREMGenerator for PBR materials. Not for Scene.background.

In general it is not necessary anymore to use fromEquirectangularTexture() or PMREMGenerator for converting equirectangular env maps. That happens indeed internally now.

1 Like
11

I have a similar related issue. I created a new post to discuss it here : How to Improve Scene Background's Texture Resolution from Image

If anyone could help me, I would really appreciate it!

12

Is there updated documentation on creating env maps with internal fromEquirectangularTexture() & PMREMGenerator methods now?