Rendering GIS Terrain via glTF Heightmap Displacement

Geographic Information System (GIS) platforms render 3D terrain elevation models by leveraging heightmap displacement within the glTF (GL Transmission Format) standard. This process transforms raw Digital Elevation Models (DEMs) into lightweight, high-performance 3D meshes by pairing standardized 2D elevation textures with dynamic geometry. By encoding elevation into texture maps and displacing vertices directly on the Graphics Processing Unit (GPU), web and desktop GIS engines achieve real-time, interactive landscape visualization across vast geographic scales.

1. Data Encoding and Preparation

Before terrain can be rendered in a glTF-compatible pipeline, raw elevation data (such as GeoTIFF or LAS point clouds) is processed into a rasterized heightmap. Because standard 8-bit grayscale images only offer 256 elevation steps—insufficient for geographic accuracy—GIS pipelines utilize high-precision encoding formats:

  • RGB-Encoded Elevation: Formats like Terrain-RGB compress elevation values across red, green, and blue channels using an equation such as height = -10000 + ((R * 256 * 256 + G * 256 + B) * 0.1). This allows for sub-meter vertical precision within standard image formats like PNG.
  • 16-bit or 32-bit Single-Channel Floats: When supported by the graphics runtime, single-channel textures (such as R16UI or R32F) are embedded directly into glTF buffers or referenced as external textures.

2. Base Geometry and the glTF Architecture

A glTF terrain node typically contains a planar, tessellated grid mesh (a tile) defined by vertex attributes (positions, normals, and UV coordinates). Instead of storing billions of pre-displaced 3D vertices—which drastically inflates file size and bandwidth consumption—the glTF primitive is stored as a flat plane with uniform vertex spacing.

The heightmap is linked within the glTF material definition, frequently utilizing the displacementGeometry extension (or custom vendor extensions), or assigned to standard texture slots read by custom shader pipelines in renderers such as CesiumJS, Three.js, or Babylon.js.

3. GPU Vertex Displacement

The displacement itself occurs in the GPU’s vertex shader during the rendering pass:

  1. Texture Sampling: The vertex shader reads the UV coordinates of each vertex on the planar mesh and samples the corresponding pixel from the elevation heightmap.
  2. Value Decoding: If using RGB-encoded elevation, the shader unpacks the color channels into a single floating-point elevation value based on the predefined scaling factor and vertical datum offset.
  3. Position Offset: The vertex’s position is translated along its normal vector (typically the Z-axis in standard GIS coordinate spaces, or the Y-axis in glTF's default coordinate space) by the decoded elevation value, multiplied by any global vertical exaggeration factor applied by the user.

4. Normal Reconstruction and Hillshading

Shifting vertices modifies the topography, rendering the original planar normal vectors obsolete. To achieve realistic lighting and hillshading, the rendering pipeline recalculates surface normals using one of two methods:

  • Precomputed Normal Maps: A companion normal map is generated alongside the heightmap and packed into the glTF material, providing high-fidelity lighting with minimal runtime computation.
  • Dynamic Derivative Calculation: In the fragment shader, normal vectors are dynamically derived from adjacent height values or screen-space derivatives using functions such as dFdx and dFdy. This creates accurate shadows and slopes without requiring additional texture downloads.

5. Level of Detail (LOD) and 3D Tiles

Rendering continental or global terrain requires streaming strategies. GIS platforms encapsulate glTF payloads inside spatial hierarchical data structures, such as OGC 3D Tiles. As the camera moves closer to the ground, the engine loads higher-resolution glTF planar tiles paired with finer-resolution heightmaps. When combined with techniques like Continuous Level of Detail (CLOD) or hardware tessellation, this architecture ensures smooth frame rates while rendering real-world topography accurately.