Texture Atlases

Questions
1

After a brief skimming of the documentation, I couldn’t find any mention of an atlas loader or packer. Is there an idiomatic threejs way to do texture atlases?

2

Texture packer:
PixiTexturePacker-master.zip (488.7 KB)

3

Is this your project? Can you tell me a bit about it first?

4

Not mine. GitHub - but0n/PixiTexturePacker: A Spritesheet packing tool written with HTML5 using pixi.js for rendering

Program TexturePacker Download - Newest releases and betas

5

three.js project does not provide tools for creating texture atlases. But 3D models in most any file format can use a texture atlas, you don’t need a special loader for that.

If you’re using Blender you could use something like SimpleBake and then export to glTF.

4 Likes
6

I am trying to find a way to blend a texture from a GLB file with one of my own. I’m trying to wrap a 3D model of a car. It has decals from the original texture that I want to keep, and I don’t want to remodel them for every wrap. Whenever I traverse through the materials and get the texture map, it returns the entire atlas. Is there a way for me to get the specific texture map to modify it?

7

Nope. Not with any old random mesh. The mesh has to be modelled to have separate uv “islands” that you can identify somehow.
Those islands also have to be mapped in such a way that you can scale/paste an image onto that island in the correct orientation/scale.
As Don said, this is something that is usually done in 3d modelling software (like Blender).
You can drag your model into gltf-report and see if there are existing islands that you copy your texture modification onto.

Here’s a video on how UV mapping works: https://www.youtube.com/watch?v=Yx2JNbv8Kpg

1 Like
8

You could manually pack images using maxrects-packer:

GitHub - soimy/maxrects-packer: A max rectangle 2d bin packer npm-module for packing glyphs or images into multiple sprite-sheet/atlas

Then you can combine them into a single DataArrayTexture:

three.js docs

Finally you provide it as a uniform to a custom fragment shader:

uniform sampler2DArray atlas;
//...
gl_FragColor = texture(atlas, vec3(vUv, vTextureId));
9

Does this correspond to what you are looking for? You can expand the texture list with many textures and use the index to select which one should be used in the shader

10

Word of caution about atlassing… if you’re trying to atlas tiling textures… you’re gonna have a time with aliasing/shader logic to make repeating work. If you need them to be repeatable, then using a texture array uniform might be a better approach.