Are 8k textures supported in three.js?

Questions
1

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 ?

2

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
3

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

4

In my case, if I load the texture from the domain of the website, then there is no restriction, if I connect the same texture but from another domain (for example, from cloudinary), I get the message “THREE.WebGLRenderer: Texture has been resized from …”
Why is this happening and how can I solve the problem in this situation?

5

Can you please share two URLs that can be used to reproduce your issue? In general, the resizing does not depend on the image’s origin.

6

https://visualcode-labs.web.app/3d/three2/index2.html – same domain texture url, all is good
https://visualcode-labs.web.app/3d/three2/ – external texture url, and get message “THREE.WebGLRenderer: Texture has been resized from (1440x1440) to (1024x1024).”

i only change this:
g.texture = new THREE.TextureLoader().load(srcInternal, function(texture) {});

to this:
g.texture = new THREE.TextureLoader().load(srcExternal, function(texture) {});

7

I tried using images from other domains, for example these:
image1
image2
but the result is the same.

8

Both URLs do not produce the resize warning on my system. I’m using macOS with Chrome 83.0.4103.61.

9

I get resize warning on:
Chrome – 83.0.4103.61 | macOS – 10.12.6 | 1440px width display
Safari – 11.1.2 | macOS – 10.12.6 | 1440px width display
Chrome – 83.0.4103.61 | Windows 10 | 1440px width display
Chrome – 83.0.4103.61 | Windows 10 | 1960px width display

10

What is the maximum texture size on your system? Just open the following URL and check the value in the Textures section.

https://webglreport.com/

11

Max Texture Size – 16384

12

Sorry, but I can’t reproduce. I’ve also inspected the diffuse and normal map of your skull asset and both are 2048x2048 so no need for resizing.

13

What screen resolution on your device? And how many dpr?

14

It’s a 5K monitor (5120×2880). The device pixel ratio is 2.

But…how is this related to this issue?

15

I don’t know for sure, it was just an assumption.
–
Finally I found the problem, the images did not fit, I just needed to make them look like these: 8192 \ 4096 \ 2048 …
Thanks for your help.