three-flatland

The complete 2D solution for Three.js and React Three Fiber. Built for WebGPU with composable TSL shaders.

Power Features

WebGPU Native

Next-Gen Graphics API

Built from the ground up for WebGPU. No WebGL fallbacks, no compromises. Pure TSL shader power for effects that weren’t possible before.

Batch Rendering

10,000+ Sprites per batch

Automatic batching and GPU instancing. Every sprite shares geometry and materials. Your GPU does the heavy lifting.

React Three Fiber

R3F v10 WebGPU Support

First-class R3F integration. Declarative JSX components that feel native. Full TypeScript support with accurate types.

Animation System

60fps Frame-perfect timing

Built-in sprite animation with spritesheet support. Define animations in JSON, play them with one call. Buttery smooth.

TSL Shader Nodes

Composable Effect pipeline

Mix and match shader effects. Palette swaps, outlines, glow, distortion. Build your visual style node by node.

Tilemap Support

Tiled JSON format

Efficient tilemap rendering with Tiled editor support. Multiple layers, animated tiles, collision data. Build worlds fast.

import { Sprite2D, SpriteGroup } from 'three-flatland'

// Create a sprite group and add to your scene
const spriteGroup = new SpriteGroup()
scene.add(spriteGroup)

// Create sprites with textures
const player = new Sprite2D({ texture: playerTexture })
const enemy = new Sprite2D({ texture: enemyTexture })
enemy.position.set(2, 0, 0)

// Add sprites to the group
spriteGroup.add(player, enemy)

import { Canvas, extend } from '@react-three/fiber/webgpu'
import { Sprite2D, SpriteGroup } from 'three-flatland/react'

extend({ Sprite2D, SpriteGroup })

function Game() {
  return (
    <Canvas>
      <spriteGroup>
        <sprite2D texture={playerTexture} position={[0, 0, 0]} />
        <sprite2D texture={enemyTexture} position={[2, 0, 0]} />
      </spriteGroup>
    </Canvas>
  )
}

Why three-flatland?

Built for the Future

three-flatland is designed exclusively for Three.js WebGPU renderer. No legacy code, no WebGL baggage. By targeting WebGPU from day one, we leverage TSL (Three Shader Language) for shader composition that simply isn’t possible with GLSL strings.

This means real-time shader effects that would tank performance on WebGL run buttery smooth. Palette cycling, CRT effects, per-sprite distortion — all composable, all fast.

Performance Obsessed

Every sprite in your scene shares the same geometry and materials through automatic batching. Whether you have 10 sprites or 10,000, three-flatland keeps your draw calls minimal and your frame rate high.

The GPU does what GPUs do best. Your CPU stays free for game logic. Zero per-sprite overhead in your render loop.

Developer Joy

Full TypeScript support with types that actually help. React Three Fiber users get JSX components that integrate seamlessly. Vanilla Three.js users get a clean, intuitive API.

No configuration hell. No boilerplate. Import, create, render. Ship your game, not your build config.

This documentation was created with AI assistance. AI can make mistakes — please verify claims and test code examples. Submit corrections here.