SpriteBatch for WebGPU

Draw thousands of textured, tinted, rotated 2D sprites with a familiar begin / draw / end workflow — entirely on the GPU.

Get Started Live Demos GitHub Repo

Install npm install webgpu-spritebatch

Small API surface

Draw sprites without building a renderer first

Create a render surface, begin a batch, issue draw calls, and submit the frame. The library handles the WebGPU batching details underneath.

const surface = await RenderSurface.create(canvas)
const batch   = new SpriteBatch(surface)
const tex     = await Texture2D.fromUrl(surface, '/hero.png')

surface.beginFrame({ clearColor: Color.cornflowerBlue })
batch.begin()
batch.draw(tex, {
  position: [100, 80],
  scale: 2,
  rotation: 0.1,
})
batch.end()
surface.endFrame()

Walk through your first sprite →

Why SpriteBatch?

If you've used XNA, MonoGame, or FNA, you know SpriteBatch: a clean, low-ceremony API that batches textured quads into efficient GPU draw calls. On the web, you can go all-in with a full engine (PixiJS, Phaser, Babylon) or wrestle raw WebGPU yourself. Neither is ideal when all you want is fast, correct 2D sprite rendering without an opinion about your game loop, scene graph, or asset pipeline.

This library fills that gap. It gives you instanced rendering, sort modes, blend presets, custom WGSL shaders, render textures, cameras, and spritesheet animation — all in a small, TypeScript-first package that stays out of your way.

Instanced Rendering

One draw call per texture group. Thousands of sprites at 60 fps with minimal GPU overhead.

Custom WGSL Shaders

Plug in any fragment shader while keeping the built-in vertex and instance layout. Add CRT, grayscale, outlines, or anything you can write in WGSL.

Render Textures

Draw sprites into offscreen textures for post-processing, minimaps, or pixel-art virtual resolutions.

Camera2D

Pan, zoom, and rotate with a familiar XNA-style transform matrix. World/screen coordinate conversion included.

Sort & Blend Modes

Deferred, texture, front-to-back, or back-to-front sorting. Alpha, additive, opaque, and premultiplied blending.

TypeScript-First

Full type declarations, strong autocomplete, and clear option objects. No runtime type coercion surprises.

Sprite Animation

Frame sequencing for spritesheets with loop, once, and ping-pong modes. Slice and pick sub-animations from a master sheet.

DPI-Aware

All coordinates use CSS pixels. The canvas renders at native device resolution automatically for crisp Retina output.

When to use it

Pick the layer that matches how much rendering infrastructure you want to own.

Approach	Best for	Trade-off
SpriteBatch Install as webgpu-spritebatch	Fast 2D sprite rendering with full control over your game loop, architecture, and asset flow.	No scene graph, physics, or asset pipeline included.
Full engine Pixi, Phaser, Babylon, etc.	Complete game framework with scenes, plugins, and higher-level opinions.	Larger dependency and may not use WebGPU natively.
Raw WebGPU Maximum rendering ownership	Total ownership of every pipeline, buffer, shader, and render pass.	Significant boilerplate before drawing basic sprites.