How to Render Flat Decals on Curved glTF Surfaces
Rendering flat decals onto curved surfaces presents a common challenge in 3D graphics, particularly within the glTF format, which lacks a native, dynamic screen-space decal specification. Because placing a completely flat polygon onto a curved surface causes clipping and severe Z-fighting, technical artists and developers must rely on specialized workflows. This article explores practical workarounds for applying decals to curved glTF models, including conformant geometry modeling, multi-UV texture layering, texture baking, and runtime engine-level projection techniques.
1. Conformed Decal Geometry (Shrinkwrapping)
The most format-compliant way to deliver decals directly inside a
standard .gltf or .glb container is to create
conformant geometry. Instead of using a purely flat quad:
- Mesh Extraction: In a 3D modeling tool like Blender or Maya, duplicate the faces of the curved target mesh where the decal will sit.
- Shrinkwrap Modifier: Alternatively, project a flat subdivided plane onto the curved surface using a shrinkwrap modifier or surface constraint so the decal mesh matches the curvature precisely.
- Normal Offset: Push the conformed vertices slightly outward along their surface normals (e.g., by 0.1mm to 1mm depending on scene scale) to prevent Z-fighting.
- Alpha Transparency: Assign the decal material using
an alpha-blended or alpha-masked glTF PBR material
(
alphaMode: "BLEND"or"MASK").
2. Utilizing Secondary UV Channels (Multi-UV Texturing)
The glTF 2.0 specification natively supports multiple UV sets
(TEXCOORD_0, TEXCOORD_1). This allows you to
apply a decal over an existing texture without altering the model's
geometry:
- Keep the primary UV channel (
TEXCOORD_0) mapped for the base material (albedo, roughness, metallic, normal). - Create a secondary UV set (
TEXCOORD_1) where only the target area is mapped to the decal texture, while the rest of the mesh UVs are collapsed to an empty/transparent pixel space. - While vanilla glTF PBR does not allow complex node-based layer mixing inside a single material, you can combine textures using multi-material setups or engine-specific shader graphs that read glTF's secondary UV sets to blend the decal over the base maps.
3. Pre-Baking Decals into the Base Textures
If runtime flexibility is not required, baking is the cleanest and most performance-efficient approach:
- Project or place the decal onto the 3D model within your texturing software (such as Substance 3D Painter or Blender).
- Bake the decal directly into the base mesh's diffuse, normal, and roughness texture maps.
- Export the combined result as standard glTF textures.
This completely eliminates extra draw calls, transparency sorting issues, and geometric Z-fighting, though it increases texture memory usage if unique textures are required across multiple assets.
4. Runtime Decal Projection (Engine-Level Workaround)
If the glTF model is loaded into a WebGL engine like Three.js, Babylon.js, or a game engine like Godot, decal rendering is often best handled outside the glTF file itself:
- Decal Projectors: Engines like Three.js provide a
DecalGeometryhelper that computes the intersection volume between a projection box and the target glTF mesh at runtime. This dynamically clips and generates a curved surface patch conforming to the underlying mesh. - Screen-Space Decals: Advanced runtime renderers draw decals as screen-space projections via deferred rendering passes. The decal volume projects textures onto the depth buffer of the glTF model, requiring no geometry modifications or custom UV channels on the asset itself.
5. Depth Bias and Polygon Offset
When using conformed geometry within glTF viewers, tiny floating-point inaccuracies can still cause Z-fighting at steep viewing angles or long camera distances. If your runtime viewer allows material customization, enable polygon offset (or depth bias) on the decal material. This instructs the GPU rasterizer to artificially pull the decal's depth values closer to the camera, guaranteeing the decal renders cleanly over the underlying curved surface.