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:
- I get a warning:
THREE.WebGLRenderer: image is not power of twoand the image gets downsized to 1024x1024px which looks blocky
- 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 ?