glTF Texture Filtering Modes for Crisp UI Text

Rendering legible, high-contrast text on user interface elements in glTF requires selecting the correct texture sampler filtering modes. Because standard 3D mipmapping often introduces unwanted blur to fine typographic details, configuring the appropriate magnification and minification filters ensures that glyphs remain sharp whether viewed straight-on, scaled, or placed at an angle in 3D space.

Understanding glTF Sampler Properties

In the glTF 2.0 specification, texture sampling behavior is configured inside the samplers array using two primary properties:

• magFilter: Determines how the texture is sampled when a texel is smaller than a screen pixel (magnification).
• minFilter: Determines how the texture is sampled when a texel is larger than a screen pixel (minification).

These properties take WebGL integer constants to define filtering behavior.

Recommended Filtering Configurations

The ideal filtering mode depends on the technique used to render the text texture:

1. Pre-rendered Bitmap Text (Direct 1:1 Pixel Mapping)

When UI elements are fixed in screen space or designed to render at native pixel resolution, mipmapping should be disabled to prevent the renderer from selecting lower-resolution mip levels that cause text to blur.

• magFilter: 9729 (LINEAR) or 9728 (NEAREST)
  Use LINEAR for general smoothness if minor scaling occurs. Use NEAREST only if you are adhering to a strict pixel-art aesthetic where sub-pixel interpolation is unwanted.
• minFilter: 9729 (LINEAR)
  Disables mipmapping entirely. This forces the GPU to sample directly from the base level (Level 0), preventing the premature softening common with default trilinear mipmaps.

2. Signed Distance Field (SDF / MSDF) Text

Signed Distance Fields and Multi-channel Signed Distance Fields represent vector glyph outlines mathematically inside a texture. The fragment shader calculates the sharp vector boundary at runtime.

• magFilter: 9729 (LINEAR)
• minFilter: 9729 (LINEAR)

LINEAR filtering is strictly required for SDF and MSDF textures. The shader relies on linear interpolation between neighboring texel values to calculate the continuous distance gradient. Using NEAREST breaks the interpolation, resulting in jagged, stepped edges. Mipmaps should generally be avoided unless specifically generated with distance-preserving downsampling algorithms.

3. Spatial, In-World 3D UI (Perspective-Scaled)

If the UI element exists inside the 3D scene where the camera can move arbitrarily far away, disabling mipmaps entirely will cause severe shimmering and aliasing artifacts.

• magFilter: 9729 (LINEAR)
• minFilter: 9987 (LINEAR_MIPMAP_LINEAR)

To maintain crispness while using trilinear filtering (LINEAR_MIPMAP_LINEAR), configure the target 3D engine (such as Three.js, Babylon.js, or Godot) to enable anisotropic filtering (e.g., 4x, 8x, or 16x). While anisotropic filtering is configured at the engine/material runtime level rather than stored directly in the core glTF schema, it works alongside LINEAR_MIPMAP_LINEAR to prevent oblique text surfaces from degrading into a blur.

Summary of glTF Sampler Values