Combine glTF Materials with Texture Atlasing

Texture atlasing is a powerful 3D optimization technique that consolidates multiple individual textures from distinct materials into a single, unified texture image. In the context of glTF (GL Transmission Format) models, this process reduces file sizes, minimizes GPU state changes, and drastically cuts draw calls during real-time rendering. This article explains how texture atlasing works for glTF assets, how it handles PBR (Physically Based Rendering) texture channels, and the exact steps required to remap UVs and merge separate material textures into unified maps.

The Role of Texture Atlasing in glTF

In standard glTF files, complex 3D scenes often contain dozens of separate materials, each referencing its own set of image files (such as base color, normal, and metallic-roughness maps). When a real-time engine like Three.js or Babylon.js renders these objects, each unique material typically requires a separate draw call.

Texture atlasing combines these distinct images into a shared canvas (an "atlas"). By sharing a single texture atlas across multiple meshes or sub-meshes, the rendering engine can batch these geometries together, rendering them in a single draw call.

How the Atlasing Process Works

Combining glTF textures into unified maps involves three fundamental steps: texture grouping, packing, and UV remapping.

1. Grouping Corresponding Map Types

glTF 2.0 uses a standard PBR workflow. When creating an atlas, textures cannot simply be merged haphazardly; like-typed maps must be grouped together to maintain material definitions:

  • Base Color (Albedo): Diffuse color maps are combined into a single unified Base Color atlas.
  • Metallic-Roughness: glTF packs roughness into the green channel and metallic into the blue channel. These channel-packed textures must be packed into a unified Metallic-Roughness atlas.
  • Normal Maps: Tangent-space normal maps are arranged into a matching Normal atlas.
  • Occlusion (ORM): If the glTF combines Ambient Occlusion, Roughness, and Metallic (ORM) into the red, green, and blue channels respectively, these composite maps are packed into a single unified ORM atlas.
  • Emissive: Any glow or emissive textures are arranged into an Emissive atlas.

2. Packing into a Unified Layout

A bin-packing algorithm calculates the most efficient way to arrange the individual source textures onto a power-of-two image canvas (e.g., 2048x2048 or 4096x4096 pixels).

Crucially, every map type must follow the exact same spatial layout. If an object’s Base Color texture occupies the top-left quadrant of the Base Color atlas, its Normal and Metallic-Roughness maps must occupy that identical quadrant in their respective atlases.

3. UV Coordinate Remapping

Because the original textures now occupy only a sub-rectangle of the larger texture sheet, the 3D model's UV texture coordinates (TEXCOORD_0) must be adjusted.

For each mesh vertex associated with an atlased material, the UV coordinates are scaled down and shifted:

  • Scale: Multiplied by the ratio of the sub-texture size to the total atlas size (e.g., a 512x512 texture inside a 2048x2048 atlas has a scale factor of 0.25).
  • Offset: Shifted along the U and V axes to align with the sub-texture's coordinates within the atlas grid.

Once the UVs are rewritten, the original distinct material slots can be replaced with a single, shared glTF material referencing the new unified texture maps.

Preventing Texture Bleeding

A common issue when atlasing glTF textures is "bleeding" or edge seams, where adjacent textures in the atlas spill into one another. This occurs when graphics hardware downsamples the atlas to generate lower-resolution mipmaps for objects viewed at a distance.

To prevent this:

  • Add Texture Padding (Gutters): Insert empty pixel margins between packed textures (typically 4 to 16 pixels, depending on the atlas resolution).
  • Edge Dilation: Extrapolate the border pixels of each sub-texture outward into the padding area so mipmaps sample matching colors rather than transparent or black background pixels.

Implementation and Tools

Developers and technical artists can perform glTF texture atlasing using several standard tools:

  • Blender: Uses texture baking workflows or dedicated add-ons to consolidate multiple materials into a single texture set and export a unified glTF.
  • glTF-Transform: A command-line and JavaScript library that includes optimization functions to inspect, resize, and reconfigure glTF texture properties programmatically.
  • Automated WebGL Pipelines: Dedicated asset optimization tools that take raw multi-material glTFs, compute unified atlases, remap vertex attributes, and output an optimized glTF file ready for production deployment.