How to Improve Scene Background's Texture Resolution from Image

Questions
1

Copying my post from Stack Overflow, in case more people here see it: three.js - ThreeJS - How to Improve Texture Image Resolution - Stack Overflow

I have the following JPG image that I’m trying to set as my Three JS scene.background :

image

If I do:

scene.background = backgroundLoader.load(trial.imageURL);

I get a low resolution image:

image
image726×487 88.8 KB

Other posts (e.g. Three.js image quality blured) have suggested setting the minFilter and magFilter , but I find both of these offer little improvement. When I do:

              texture.generateMipmaps = false;
              texture.minFilter = THREE.LinearFilter;
              texture.magFilter = THREE.LinearFilter;
              texture.needsUpdate = true;
          });

I get the following image:

image
image717×483 39.5 KB

How to I make the scene.background texture have the JPG’s original resolution?

1 Like
2

I think filtering is enabled by default (see Texture). It seems it renders correctly for me (see https://codepen.io/avseoul/pen/zYPEoRy?editors=0010) so it might be something else than filtering. It might be helpful if you could share the codes how you implemented it

3

The filtering solution is only valid when using WebGL 1. It was required at that time since most users did not load a power-of-two (POT) texture but still had minFilter set to LinearMipmapLinearFilter. However mipmapping only works with POT in WebGL 1.

This is no true for WebGL 2 so it’s not necessary to touch the filter settings. This will only worsen the quality.

The best setup you can achieve is this: Edit fiddle - JSFiddle - Code Playground

It will also ensure to retain the original aspect ratio which seems important for your type of image.

1 Like