SpriteBatch for WebGPU
Draw thousands of textured, tinted, rotated 2D sprites with a familiar
begin / draw / end
workflow — entirely on the GPU.
import { RenderSurface, SpriteBatch, Texture2D, Color } from 'webgpu-spritebatch'
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()Why webgpu-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
| Approach | Best for | Trade-off |
|---|---|---|
| webgpu-spritebatch | Fast 2D sprite rendering with full control over your game loop and architecture | No scene graph, physics, or asset pipeline included |
| Full engine (Pixi, Phaser, etc.) | Complete game framework with editor, scenes, and plugins | Larger dependency, opinions about structure, may not use WebGPU natively |
| Raw WebGPU | Total ownership of the rendering pipeline | Significant boilerplate for basic sprite batching |