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.
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 linesYou 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/Tool | Support | Notes |
|---|---|---|
| Three.js | Excellent | Reference web implementation |
| Babylon.js | Excellent | Full glTF 2.0 support |
| Unity | Good | UnityGLTF, GLTFast plugins |
| Unreal Engine | Good | glTF importer plugin |
| Godot | Native | Primary 3D import format |
| Blender | Excellent | Built-in import/export |
| Windows 3D Viewer | Yes | Native support |
| macOS Quick Look | Via USDZ | Convert glTF to USDZ for Apple |
| Android SceneViewer | Yes | Native 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 7to 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.glbbefore 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.usdzfor 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.glbto 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
.gltfwith separate.binand texture files requires multiple HTTP requests. Always pack into a single.glbfile for web delivery unless you have specific caching requirements for individual textures.
Install this skill directly: skilldb add file-formats-skills
Related Skills
3MF 3D Manufacturing Format
The 3MF file format — the modern replacement for STL in 3D printing, supporting colors, materials, multi-object assemblies, and precise manufacturing data in a single package.
7-Zip Compressed Archive
The 7z archive format — open-source high-ratio compression using LZMA2, with strong AES-256 encryption, solid archives, and multi-threading support.
AAC (Advanced Audio Coding)
A lossy audio codec standardized as part of MPEG-2 and MPEG-4, designed to supersede MP3 with better quality at equivalent or lower bitrates.
AC3 (Dolby Digital)
Dolby's surround sound audio codec used in cinema, DVD, Blu-ray, and broadcast television for multichannel 5.1 audio delivery.
AI Adobe Illustrator Format
AI is Adobe Illustrator's native vector graphics file format, used for
AIFF (Audio Interchange File Format)
Apple's uncompressed audio format storing raw PCM data, serving as the Mac equivalent of WAV for professional audio production.