@web-engine-dev/gltf

glTF 2.0 asset loader with full support for the core specification and commonly used extensions. Loads .gltf (JSON + separate buffers) and .glb (binary container) formats into engine-native scene graphs, meshes, materials, and animations.

Layer 6 · Visual Output

Features

• Full glTF 2.0: Meshes, materials (PBR metallic-roughness), textures, animations, skins, cameras, lights
• GLB Support: Binary container format for single-file distribution
• Draco Compression: Mesh decompression via @web-engine-dev/geometry-compression
• KTX2/Basis Universal: GPU-compressed textures via @web-engine-dev/texture-compression
• Extension Support: KHR_materials_unlit, KHR_texture_transform, KHR_draco_mesh_compression, KHR_lights_punctual, KHR_materials_clearcoat, KHR_mesh_quantization, and more
• Morph Targets: Blend shapes with per-target weights
• Sparse Accessors: Memory-efficient accessor representation
• Multi-Scene: Support for multiple scenes per file with default scene selection
• Async Loading: Progressive loading with streaming buffer support
• Instancing: EXT_mesh_gpu_instancing for hardware instances

Installation

npm install @web-engine-dev/gltf
# or
pnpm add @web-engine-dev/gltf

Quick Start

import { GltfLoader } from '@web-engine-dev/gltf';

const loader = new GltfLoader();

// Load a glTF file
const asset = await loader.load('/models/character.glb');

// Access loaded data
const scene = asset.defaultScene;
const meshes = asset.meshes;
const materials = asset.materials;
const animations = asset.animations;
const skins = asset.skins;

// Instantiate into the ECS world
const entity = asset.instantiate(world);

Loading Pipeline

1. Fetch — Download .gltf JSON or .glb binary
2. Parse — Extract JSON chunk and binary buffer views
3. Resolve — Load external buffers, images, and extensions
4. Decompress — Draco geometry, KTX2 textures (if present)
5. Build — Create engine-native meshes, materials, textures, skeletons
6. Instantiate — Optionally create ECS entities with transform hierarchy

Supported Extensions

Extension	Purpose
KHR_draco_mesh_compression	Compressed mesh geometry
KHR_texture_basisu	KTX2/Basis Universal textures
KHR_materials_unlit	Unlit material model
KHR_materials_clearcoat	Clearcoat material layer
KHR_texture_transform	UV offset, rotation, scale
KHR_lights_punctual	Point, spot, directional lights
KHR_mesh_quantization	Quantized vertex attributes
EXT_mesh_gpu_instancing	Hardware instancing

Dependencies

• @web-engine-dev/renderer — GPU resource creation
• @web-engine-dev/assets — Asset system integration
• @web-engine-dev/math — Vectors, matrices, quaternions
• @web-engine-dev/hierarchy — Scene graph construction
• @web-engine-dev/geometry-compression — Draco decoder (optional)
• @web-engine-dev/texture-compression — KTX2 decoder (optional)