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).

If you’re already in a Three.js project and just want pixels on screen, jump to the Quick Start — you’ll be back here later for the why.

Alpha

three-flatland is in active development. We’re exploring performant, maintainable, and extensible patterns for GPU-driven 2D rendering with WebGPU. The API will evolve as we refine these systems. Follow along on GitHub — your feedback shapes what we build.

Features

• WebGPU + WebGL One TSL node graph emits both WebGPU and WebGL2 at 1:1 parity
• 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.183.1 (required for TSL/WebGPU support)
• React >= 19.2.0 (for React packages)
• @react-three/fiber >= 10.0.0-alpha.2 (for React packages)

Next steps

• Quick Start — pixels on screen in a few lines.
• Sprites, 2D Lighting, and Batch Rendering — the core guides.
• API Reference — generated type docs for every package.