Are 8k textures supported in three.js?

I have 6k images which I want to use for spherical panoramas. Since three.js only supports powers of 2, I resized it to 4k but there was loss of quality. So, I resized the 6k image to 8k, but three.js is giving the message :

THREE.WebGLRenderer: Texture has been resized from (8192x4096) to (4096x2048).

Any suggestions on how to use higher quality images or prevent automatic downsizing by three.js ? Also, is it possible / recommended to use 6k images in three.js ?

First of all, three.js has no built-in restriction about the maximum texture size. This depends purely on the hardware. You can check the respective WebGL capabilities here:

https://webglreport.com/

On my iMac for example, I have a max texture size of 16384.

Textures are resized because of two reasons.

  • They are bigger than the max texture size of your system.
  • You want to use mipmapping with a NPOT texture.

You can prevent the second one by using a WebGL 2 rendering context, by disable mipmapping (set Texture.generateMipmaps to false or Texture.minFilter to THREE.LinearFilter) or use a POT texture.

1 Like

Textures with such high resolution allocate a lot of memory. Many devices won’t be able to handle such expensive assets. More information here: