Client side Texture Atlas creator for Three.js

Hey guys!

I’ve created this lightweight library which generates Texture Atlases from Three.js textures. It’s a client side library and can be used to merge meshes with separate textures into one mesh or merge different textures of given mesh (emissive, displacement etc.) into one single texture for efficiency.

Feel free to check it out -> https://github.com/oguzeroglu/TextureMerger

Hope you fine it useful : )

5 Likes

Instead of hard-coding this.MAX_TEXTURE_SIZE = 4096; you should use the individual GPU’s maximum capability. That way you can get the best performance available on each device with:
WebGLRenderer.capabilities.maxTextureSize;

My laptop caps out at 8k textures, but my desktop can handle 16k.

4 Likes

It’s quite a useful tool. I wrote something similar for meep a while ago. I needed to be able to change the contents of the atlas at runtime though, so I ended up writing an implementation that does that. It’s a lot more complicated as a result, for the cases where you know in advance which textures you need - this is much better.

I remember having a lot of trouble optimizing performance for texture edits, making sure that only updated regions are re-packed and having to put in a lot of logic to prevent unnecessary resizing of the atlas and full re-pack.

My use-case for it was mainly for particle engine. I wanted to be able to reduce number of texture switches in the particle rendering. I pack both sprites and various curves for individual emitters into atlases.

The editing thing is due to not knowing in advance which emitters will be spawned and what sprite textures they will use, so the atlas serves to store sprites of active emitters and also to cache currently unused sprites in case they will be required at a later point. That space is reclaimed as necessary.

1 Like