Introduction
insomni is an opinionated 2D WebGPU renderer
built on top of TypeGPU. It is optimized
for data-heavy scenes where most geometry can be packed once per frame,
uploaded in batches, and rendered with simple SDF-style pipelines.
The whole drawing model is one idea: everything you draw is a
Layer, and a single Renderer2D.render(layers) call
draws one frame. There is no scene graph to retain, no per-shape draw call, and
no separate background/foreground machinery — you author shapes into layers and
hand the array to the renderer.
Why insomni
Section titled “Why insomni”- Batched, SDF-based primitives — rects, circles, ellipses, segments,
curves, arcs, and triangles pack into one flat instance buffer
(
UberPack) and render in a handful of merged draw calls. Complex polygons go throughearcuttriangulation; text rides a dedicated MSDF glyph pipeline on the same layer. - One drawable abstraction — everything is a
Layer. Layers are dynamic by default (re-uploaded each frame); content that rarely changes can be retained (a stable GPU buffer) or baked to a cached RTT texture, so a busy scene only re-rasterizes what moved. - Damage-tracked rendering — partial WebGPU redraw via a persistent backbuffer and scissored regions, so idle frames are cheap. See Damage & partial redraw.
- Order-independent transparency — a default-on A-buffer handles correct blending without manual sorting. See Transparency.
- Type-safe GPU resources — buffers, pipelines, and bind groups are defined with TypeGPU, so the CPU-side packing and the WGSL stay aligned by construction.
- Higher layers included — a grammar-of-graphics charting layer
(
insomni-plot) and a phylogenetics stack (insomni-phylo) build directly on the core.
The ecosystem
Section titled “The ecosystem”| Package | Role |
|---|---|
insomni | Core WebGPU 2D renderer. |
insomni-plot | Grammar-of-graphics charting layer. |
insomni-phylo | Phylogenetic tree model, parsers, and rendering geoms. |
@phylon/parser | Parsers, writers, diagnostics, and lossless CST editing. |
insomni-msdf-text | MSDF font atlas + glyph layout (standalone). |
insomni-layout | Differentiable GPU layout / particle solver. |
insomni-layout-jsx | JSX mount layer for insomni-layout. |
insomni-profiler | Named-span CPU/GPU profiling primitive. |
insomni-monitor | Lightweight telemetry and control-panel UI. |
Who this is for
Section titled “Who this is for”insomni is for anyone building interactive, high-density 2D visualizations on the GPU — where a Canvas2D or SVG renderer would buckle under the instance count, and a general-purpose 3D engine would be overkill. Typical fits:
- Scientific & statistical plots — large scatter, segment, and area fields that need correct transparency and smooth pan/zoom.
- Phylogenetic trees — hundreds of thousands of branches, tip labels, and
annotations (the
insomni-phylostack). - Custom data renderers — anything that wants fine control over batching, retention, and partial redraw without writing WGSL by hand.
It is not a general-purpose game engine or a 3D renderer: the primitive set is deliberately 2D and SDF-based, and the API trades scene-graph flexibility for a flat, batch-friendly draw model.
If you are new, start with Installation, then render a frame in the Quick start, then read the Core concepts tour.