Three.JS and WebGL texture automatic resize

Question

I need some help to solve a problem :) I use Three.JS to display very high quality equirectangular images into a sphere (20000x10000 pixels). The quality is very important for my webapp, and there is no consideration about bandwidth here. My problem is that ThreeJS resize images because WebGL MaxTextureSize limit is exceeded. Is there a way to pass through this limit ? Maybe by cutting textures into several parts ? Which is the best way to do this ?

Thanks you, have a good day !

Alex

Answer 1

You cannot pass through this limit. That's the whole idea behind a limit. What you can do is visit http://webglreport.com/ to see what the maximum capabilities are on your target devices (Under Textures > Max Texture Size), and then chop down your texture to fit nicely within those dimensions.

For instance, the iPhone 6 has a limit of 4096x4096, so you'd need to tile 5 meshes side-to-side to reach 20480. It all depends on your device's graphics card limitations, so how you divide it will vary from one user to the next.

Another thing you could do is instead of using one huge equirectangular image mapped onto a sphere, you could use 6 smaller images and either map it into a Cube or a CubeTexture . You can do this with any cubemap converter tool, such as this one: HDRI to CubeMap converter . That way you could load the 6 images, and let Three.js take the wheel; if your device can handle it, it'll show higher resolutions, but if it can't, it'll scale the textures down as necessary.

Answer 2

Look at this : http://glayve.com/relief/verdon.html It's better to divide, you can play more with individual faces.

You just have to set.position(x,y,z) and set.rotation(x,y,z) of individuals faces according to the 24 plans sizes.