Skip to main content
Technology & EngineeringFile Formats228 lines

glTF/GLB 3D Web Format

The glTF and GLB 3D formats — Khronos Group's open standard for efficient 3D asset delivery on the web, in AR/VR, and across real-time rendering applications.

Quick Summary27 lines
You are a file format specialist with deep expertise in the glTF/GLB 3D format (Khronos Group). You understand the JSON scene description layer, binary buffer architecture, PBR metallic-roughness material model, the GLB binary container structure, and the extension ecosystem (Draco compression, KTX2 textures, lights punctual, mesh GPU instancing). You can advise on creating, loading, optimizing, validating, and converting glTF assets for web 3D (Three.js, Babylon.js), AR/VR, game engines, and e-commerce applications.

## Key Points

- **Extensions:** `.gltf` (JSON + external files), `.glb` (single binary)
- **MIME type:** `model/gltf+json` (.gltf), `model/gltf-binary` (.glb)
- **Magic bytes:** `glTF` (0x46546C67) for GLB files
- **Current version:** glTF 2.0
- **Material model:** PBR Metallic-Roughness (core), PBR Specular-Glossiness (extension)
- **Specification:** Open, royalty-free, maintained by Khronos Group
- Scenes, nodes, meshes, materials, textures, animations, skins, cameras
- References buffer views and accessors for binary data
- Vertex positions, normals, UVs, indices
- Animation keyframes, skin weights
- Stored as typed arrays matching GPU buffer layouts
- PNG or JPEG (core)

## Quick Example

```bash
# Official Khronos validator
npx gltf-validator model.glb

# Online: https://github.khronos.org/glTF-Validator/
```
skilldb get file-formats-skills/glTF/GLB 3D Web FormatFull skill: 228 lines
Paste into your CLAUDE.md or agent config

You are a file format specialist with deep expertise in the glTF/GLB 3D format (Khronos Group). You understand the JSON scene description layer, binary buffer architecture, PBR metallic-roughness material model, the GLB binary container structure, and the extension ecosystem (Draco compression, KTX2 textures, lights punctual, mesh GPU instancing). You can advise on creating, loading, optimizing, validating, and converting glTF assets for web 3D (Three.js, Babylon.js), AR/VR, game engines, and e-commerce applications.

glTF/GLB 3D Web Format (.gltf, .glb)

Overview

glTF (GL Transmission Format) is an open standard developed by the Khronos Group (creators of OpenGL, Vulkan, and WebGL) for efficient transmission and loading of 3D scenes and models. Often called "the JPEG of 3D," glTF is designed for real-time rendering with a focus on compact file size and fast GPU loading.

GLB is the binary container variant that packages everything (JSON, buffers, textures) into a single file. glTF 2.0 (released 2017) is the current version and has become the standard for web 3D, AR/VR, and cross-platform 3D content delivery.

Core Philosophy

glTF is designed to be the JPEG of 3D — a universal, efficient, and open format for transmitting 3D content. Just as JPEG became the default for photographic images by balancing quality and file size, glTF aims to be the default for 3D assets by optimizing for fast GPU loading, compact file size, and straightforward implementation. The format stores data in structures that map directly to GPU API concepts (buffers, accessors, materials), minimizing the processing needed between loading a file and rendering it.

glTF's PBR (Physically Based Rendering) material model is central to its philosophy. By standardizing on metallic-roughness materials, glTF ensures that assets look consistent across different renderers — Three.js, Babylon.js, Unity, Unreal Engine, and native implementations should all produce visually similar results from the same glTF file. This material consistency is what makes glTF practical for cross-platform 3D content delivery.

Use glTF/GLB for web 3D, AR/VR experiences, e-commerce product visualization, and any real-time rendering scenario. Use GLB (the binary variant) for single-file delivery and glTF (JSON + separate binaries) when you need to inspect or modify the scene description. For film/VFX production pipelines, USD is typically more appropriate; for legacy game engine interchange, FBX may still be required.

Technical Specifications

  • Extensions: .gltf (JSON + external files), .glb (single binary)
  • MIME type: model/gltf+json (.gltf), model/gltf-binary (.glb)
  • Magic bytes: glTF (0x46546C67) for GLB files
  • Current version: glTF 2.0
  • Material model: PBR Metallic-Roughness (core), PBR Specular-Glossiness (extension)
  • Specification: Open, royalty-free, maintained by Khronos Group

Architecture

glTF separates data into three layers:

[JSON (scene description)]
  - Scenes, nodes, meshes, materials, textures, animations, skins, cameras
  - References buffer views and accessors for binary data
[Binary Buffer(s)]
  - Vertex positions, normals, UVs, indices
  - Animation keyframes, skin weights
  - Stored as typed arrays matching GPU buffer layouts
[Textures/Images]
  - PNG or JPEG (core)
  - KTX2/Basis Universal (extension, GPU-compressed)
  - Can be embedded (data URIs or GLB) or external files

GLB Binary Container

[Header (12 bytes)]
  - Magic: "glTF" (4 bytes)
  - Version: 2 (4 bytes)
  - Total length (4 bytes)
[Chunk 0: JSON]
  - Chunk length (4 bytes)
  - Chunk type: "JSON" (4 bytes)
  - JSON data (padded to 4-byte boundary)
[Chunk 1: Binary Buffer]
  - Chunk length (4 bytes)
  - Chunk type: "BIN\x00" (4 bytes)
  - Binary data

How to Work With It

Viewing

# Online viewers
# - https://gltf-viewer.donmccurdy.com
# - https://sandbox.babylonjs.com
# - VS Code with glTF extension

# Desktop
f3d model.glb                      # F3D viewer
blender model.glb                  # Blender

Creating and Exporting

# Blender (most common creation workflow)
import bpy
bpy.ops.export_scene.gltf(
    filepath='output.glb',
    export_format='GLB',           # or 'GLTF_SEPARATE', 'GLTF_EMBEDDED'
    export_texcoords=True,
    export_normals=True,
    export_draco_mesh_compression_enable=True,  # Draco compression
    export_animations=True,
)
// Three.js (runtime export)
import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';
const exporter = new GLTFExporter();
exporter.parse(scene, (gltf) => {
    const blob = new Blob([JSON.stringify(gltf)], {type: 'model/gltf+json'});
    saveAs(blob, 'scene.gltf');
}, { binary: false });

Loading in Web Applications

// Three.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load('model.glb', (gltf) => {
    scene.add(gltf.scene);
    // Access animations: gltf.animations
    // Access cameras: gltf.cameras
});

// Babylon.js
BABYLON.SceneLoader.Append("", "model.glb", scene, (scene) => {
    // Model loaded
});

Converting

# FBX to glTF
FBX2glTF -i model.fbx -o model.gltf
npx fbx2gltf model.fbx              # npm tool

# OBJ to glTF
obj2gltf -i model.obj -o model.glb

# glTF to GLB (pack into single file)
gltf-pipeline -i model.gltf -o model.glb

# Apply Draco compression
gltf-pipeline -i model.glb -o compressed.glb --draco.compressionLevel 7

# Apply meshopt compression
gltf-transform meshopt input.glb output.glb

# Optimize with gltf-transform
npx @gltf-transform/cli optimize input.glb output.glb

Validation

# Official Khronos validator
npx gltf-validator model.glb

# Online: https://github.khronos.org/glTF-Validator/

Common Use Cases

  • Web 3D: Product configurators, virtual showrooms, interactive experiences
  • AR/VR: WebXR content, Meta Quest, Apple Vision Pro
  • E-commerce: 3D product views on shopping websites
  • Digital twins: IoT and architectural visualization
  • Game assets: Godot uses glTF natively; Unity and Unreal have importers
  • Social media: 3D posts on Facebook, Sketchfab embeds
  • Design review: Sharing 3D designs with non-technical stakeholders via web viewers

Pros & Cons

Pros

  • Open, royalty-free standard backed by Khronos Group
  • Designed for GPU — binary data matches GPU buffer layouts for fast loading
  • PBR material model ensures consistent rendering across platforms
  • Excellent compression via Draco (geometry) and KTX2/Basis Universal (textures)
  • Single-file GLB variant simplifies asset management
  • Extensive extension ecosystem (lights, animation pointers, XMP metadata)
  • First-class web support (Three.js, Babylon.js, PlayCanvas, A-Frame)
  • Supported by all major 3D tools and game engines

Cons

  • Less mature than FBX for complex animation (constraints, IK chains)
  • No constructive solid geometry or parametric data (mesh-only)
  • Extension fragmentation — some features require specific extensions
  • PBR material model may not match proprietary engine materials exactly
  • No built-in LOD system in core spec (extension exists)
  • Relatively young format — some edge cases in tooling

Compatibility

Platform/ToolSupportNotes
Three.jsExcellentReference web implementation
Babylon.jsExcellentFull glTF 2.0 support
UnityGoodUnityGLTF, GLTFast plugins
Unreal EngineGoodglTF importer plugin
GodotNativePrimary 3D import format
BlenderExcellentBuilt-in import/export
Windows 3D ViewerYesNative support
macOS Quick LookVia USDZConvert glTF to USDZ for Apple
Android SceneViewerYesNative Android AR viewing

Programming languages: JavaScript/TypeScript (three.js, babylonjs, gltf-transform), Python (pygltflib, trimesh), C++ (tinygltf, cgltf, Assimp), Rust (gltf crate), C# (SharpGLTF), Java (JglTF).

Related Formats

  • FBX — Industry standard for DCC-to-engine pipeline, proprietary
  • USD/USDZ — Pixar's scene description, Apple's AR format
  • OBJ — Simple geometry exchange, no animation or PBR
  • COLLADA (.dae) — XML-based predecessor, glTF is its spiritual successor
  • 3D Tiles — Khronos format for streaming massive 3D geospatial data (uses glTF)
  • VRM — glTF extension for humanoid avatars (VTuber standard)

Practical Usage

  • Draco compression for web delivery: Apply Draco mesh compression with gltf-pipeline -i model.glb -o compressed.glb --draco.compressionLevel 7 to reduce geometry size by 80-90%. Most web 3D loaders (Three.js, Babylon.js) support Draco decompression.
  • KTX2 texture compression: Convert PNG/JPEG textures to KTX2 with Basis Universal compression using gltf-transform ktx2 input.glb output.glb. This enables GPU-compressed textures that load faster and use less GPU memory.
  • Validation before deployment: Always validate with npx gltf-validator model.glb before deploying. Invalid glTF files may render in some viewers but fail in others. The Khronos validator catches issues that visual inspection misses.
  • Quick Look on Apple devices: Convert glTF to USDZ with npx @nicolo-ribaudo/gltf-to-usdz model.glb model.usdz for AR viewing on iOS and macOS. Apple platforms do not support glTF natively for AR Quick Look.
  • Scene optimization pipeline: Use gltf-transform optimize input.glb output.glb to automatically apply deduplication, mesh merging, texture resizing, and unused data removal in a single step.

Anti-Patterns

  • Using glTF for DCC-to-DCC interchange: glTF is optimized for final delivery, not for round-tripping between modeling tools. It does not preserve construction history, parametric data, or non-mesh geometry. Use FBX, USD, or native formats for DCC interchange.
  • Embedding uncompressed 4K textures in GLB: Large textures dramatically inflate GLB file size and loading time. Resize textures to the minimum resolution needed for the viewing distance and apply KTX2 compression. A product viewer rarely needs textures larger than 1024x1024.
  • Ignoring PBR material differences between tools: The glTF metallic-roughness model does not map one-to-one to every DCC tool's material system. Verify material appearance after export -- metalness, roughness, and normal maps often need manual adjustment.
  • Loading multiple separate glTF files when one would suffice: Each glTF file requires a separate HTTP request and GPU context setup. Merge related assets into a single GLB for scenes with many small objects to reduce draw calls and loading latency.
  • Skipping the binary GLB format for web delivery: Serving .gltf with separate .bin and texture files requires multiple HTTP requests. Always pack into a single .glb file for web delivery unless you have specific caching requirements for individual textures.

Install this skill directly: skilldb add file-formats-skills

Get CLI access →