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 + WebGLOne TSL node graph emits both WebGPU and WebGL2 at 1:1 parity
• Batch RenderingAutomatic batching for thousands of sprites
• React Three FiberFirst-class R3F integration with JSX components
• Animation SystemSpritesheet support with frame-based timing
• TSL Shader NodesComposable effects: palette swaps, outlines, glow
• Tilemap SupportTiled 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.185.1 (required for TSL/WebGPU support)
• React ~19.2.0 (for React packages; R3F alpha.3 requires React < 19.3)
• @react-three/fiber 10.0.0-alpha.3 (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.