[Solved] How to display a background texture with the correct aspect ratio?

Questions
1

Hi,

I’m trying to render a scene with a static flat background image.

So far I’ve got something as simple as this:

scene.background = texture;

The renderer is 1920x1080 and I’d like to use a 1920x1080 image as the background.
The part when I’m confused is this:

  1. I get a warning: THREE.WebGLRenderer: image is not power of two and the image gets downsized to 1024x1024px which looks blocky
  2. If I make change the image from 1920x1080 to 2048x2048 (maintaining the aspect ratio of the content) the image appears hi-res in three.js, but with a the wrong aspect ratio.

I’ve also tried generating the background as a 3640 x 2048 image which gets downsampled to 2048x2048.
This looks crisp, but the content is smaller.

I feel I’m missing a trick here. How should I format an image that originally is 1920x1080 so I can use it as a background texture for a 1920x1080 renderer while maintaining the image’s content aspect ratio (16:9) given that three.js requires a power of two texture ?

Thank you,
George

2

I believe You could fill your canvas with the image, and render your scene with alpha channel
THREE.WebGLRenderer({ alpha:true })

3

Do this with your texture: texture.minFilter = THREE.LinearFilter;

The default THREE.LinearMipMapLinearFilter requires mipmaps which can only be generated if it’s a POT (power of two) texture.

3 Likes
4

@Mugen87 Woo hoo ! That solved the problem !

@MateuszWis I will use your advice as well, in case I need to fade the background (swap from scene background texture to an html image behind the transparent / alpha webgl canvas).

Thank you very much for the support !