How to Improve Scene Background's Texture Resolution from Image

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 :


If I do:

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

I get a low resolution image:

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:

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

1 Like

I think filtering is enabled by default (see Texture). It seems it renders correctly for me (see so it might be something else than filtering. It might be helpful if you could share the codes how you implemented it

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