Introduction
three-flatland is a high-performance 2D sprite and effects library for Three.js and React Three Fiber, using WebGPU and TSL (Three Shader Language).
Features
- WebGPU Native Built for WebGPU with TSL shaders
- Batch Rendering Automatic batching for thousands of sprites
- React Three Fiber First-class R3F integration with JSX components
- Animation System Spritesheet support with frame-based timing
- TSL Shader Nodes Composable effects: palette swaps, outlines, glow
- Tilemap Support Tiled editor format with animated tiles
Packages
| Package | Description |
|---|---|
three-flatland | Core sprite system, materials, rendering, and React Three Fiber integration |
@three-flatland/nodes | TSL shader nodes for custom effects |
@three-flatland/presets | Pre-configured effect presets |
Requirements
- Three.js >= 0.182.0 (required for TSL/WebGPU support)
- React >= 19.0.0 (for React packages)
- @react-three/fiber >= 10.0.0-alpha.0 (for React packages)