Skip to content

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.

  • 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 through earcut triangulation; 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.
PackageRole
insomniCore WebGPU 2D renderer.
insomni-plotGrammar-of-graphics charting layer.
insomni-phyloPhylogenetic tree model, parsers, and rendering geoms.
@phylon/parserParsers, writers, diagnostics, and lossless CST editing.
insomni-msdf-textMSDF font atlas + glyph layout (standalone).
insomni-layoutDifferentiable GPU layout / particle solver.
insomni-layout-jsxJSX mount layer for insomni-layout.
insomni-profilerNamed-span CPU/GPU profiling primitive.
insomni-monitorLightweight telemetry and control-panel UI.

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-phylo stack).
  • 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.