Web Engine Docs
Preparing documentation
Documentation0%
Use the search bar to quickly find any topic
Content
Search
Examples
Ready
Web Engine v0.1.0-alpha
Edit this page on GitHub
Last updated: 1/16/2026
Was this page helpful?
Preparing documentation
Use the search bar to quickly find any topic
Production-grade animation system with skeletal animation, blend trees, state machines, IK, and root motion. Built for performance with zero-allocation hot paths and SIMD-accelerated bone transforms.
The animation system is built on a high-performance ECS architecture with several specialized subsystems:
Central registry for animation clips with validation, metadata, and O(1) lookup by asset UUID, asset ID, or clip name. Ensures single source of truth for clip metadata.
Fast bone hierarchy tracking with hash-based lookup for animation bone masking. Enables per-bone animation control (e.g., upper body vs lower body).
Race-condition-safe state machine with priority-based transitions, transactional updates, event buffering, and zero-GC hot paths. Pooled instances for entity spawn/despawn.
Zero-allocation evaluator for 1D and 2D blend trees with linear interpolation, barycentric blending, and pre-allocated weight buffers.
The animation system supports industry-standard 3D animation formats:
GLTF 2.0 is the primary format for animated models. The engine automatically extracts:
import { AnimationRegistry } from '@web-engine-dev/core/animation';import { AssetLoader } from '@web-engine-dev/core/engine/assets';// Load GLTF model with animationsconst model = await AssetLoader.loadGLTF('characters/hero.glb');// Clips are automatically registeredconst clips = AnimationRegistry.getByAssetUuid(model.uuid);console.log(`Loaded ${clips.length} animation clips`);// Find specific clip by nameconst walkClip = AnimationRegistry.findClip(model.uuid, 'Walk');
FBX files are supported through Three.js FBXLoader with automatic conversion to the engine's format.
Skeletal animation deforms meshes based on bone transformations. Each vertex is influenced by 1-4 bones with normalized weights. The engine uses SIMD-accelerated matrix palette skinning for high-performance character rendering.
Morph targets (blend shapes) blend between vertex positions for facial expressions, lip sync, and corrective shapes. The engine supports:
Root motion extracts translation/rotation from the root bone for natural locomotion. The engine provides full 3D root motion with optional Y-axis (vertical) support for jumps/vaults.
The animation system is optimized for production workloads with aggressive performance targets:
| Metric | Target | Notes |
|---|---|---|
| State machine update | < 0.1ms | Per entity, zero GC allocations |
| Bone matrix update | < 0.05ms | 100 bones, SIMD path |
| Blend tree evaluation | < 0.02ms | 8 clips, pre-allocated buffers |
| IK solve (two-bone) | < 0.01ms | Analytic solution |
| Root motion extraction | < 0.005ms | Curve evaluation |
Frame Budget
Total animation budget per entity: < 0.2ms at 60 FPS. Allows 50+ animated characters at full quality. Use LOD and adaptive pooling for larger crowds.
All hot path code uses pre-allocated buffers and object pools to avoid GC pressure:
Skeleton matrix updates use WASM SIMD for 4x throughput:
Animation mixer pooling with priority-based allocation and quality degradation:
Mobile Considerations
Mobile GPUs have less VRAM and bandwidth. Reduce bone counts (max 50-75 bones), use animation LOD, disable IK on distant characters, and prefer simpler blend trees (1D over 2D).
Now that you understand the animation architecture, explore specific topics:
Bone hierarchy, skinned meshes, animation clips, and retargeting
Blend trees, crossfading, additive blending, and layered animation
Animation graphs, states, transitions, parameters, and conditions
IK solvers, look-at constraints, foot IK, and ragdoll physics