Dealing w Multiple Compressed Textures

I have a tileset with each individual tile as a DDS file. How can I efficiently deal with this? What I’ve been doing is batching them into a larger texture however that strategy will no longer work.

I guess it doesn’t help that I’m confused about how textures and materials work. A material AFAIK can have up to 16 textures on my gpu, but what does that translate to? Multiple textures on a Material class? And wouldn’t that lead to a draw call for each texture?

Yes, unless you are using a low profile machine from a decade ago or having hundreds of textures, I would not worry about it.

I guess it doesn’t help that I’m confused about how textures and materials work. A material AFAIK can have up to 16 textures on my gpu, but what does that translate to? Multiple textures on a Material class?

Each three.js material type has a limited number of material slots. For MeshStandardMaterial, these include:

  • .map
  • .normalMap
  • .roughnessMap
  • .metalnessMap

There are a few more, and additional textures might be allocated on the material for features like skinning and morph targets, but generally speaking you are unlikely to hit the 16-texture limit on any built-in three.js material. Maybe with custom shaders you could hit the limit, but in practice this doesn’t happen often.

You can’t assign more than one texture to the same slot on the same material instance. If you have two base color textures (.map), you’ll need to assign them to different materials, and then assign those materials to different meshes. This does indeed increase draw calls, which are typically one {material, geometry} pair attached to a mesh. Draw calls are not directly related to textures other than that.

You haven’t mentioned how many tiles you have, but if there are more tiles than you can afford in draw calls, you would need to look into ways of batching them. Merging into a larger texture, or using 3D textures in WebGL 2.0, would both be options.

Oppsssee, I meant Draw Calls not textures.
Thanx Don!

Here is the formula to find the max number of textures your GPU can handle:

alert((gl = document.createElement('canvas').getContext('webgl')).getParameter( gl.MAX_TEXTURE_IMAGE_UNITS ));

And this is how you can list all the keys in your object: _Object_info.html (2.1 KB)

It’s in the thousands of unique tiles, 128x128px each.
I’ve been batching them via a render target to max texture size but I lose the compression. I guess it’s not such a big deal. I would use 3D textures but a) it’s not presently supported for three and b) I’m not sure if it would work the way I imagine with the individual DDS files.