Introduction
glyphcss turns 3D models into ASCII art. It rasterizes meshes (OBJ, glTF, GLB,
STL, MagicaVoxel .vox) into a character grid rendered as plain text in a single
<pre> — no WebGL, no canvas, no per-polygon DOM nodes. Use it in the browser
(vanilla, React, or Vue), or render straight to your terminal with the CLI.
JavaScript runs once at scene init and again only when the user drags or zooms —
never per frame.
It’s the successor to polycss, the CSS-transform polygon paint engine — same scene/camera API, but the paint backend emits ASCII text instead of a DOM node per polygon.
The mental model
Section titled “The mental model”A glyphcss scene is one <pre> per scene plus a sparse <div> hit layer.
The <pre> contains N pre-baked rotation frames stacked vertically; CSS animates the
strip with steps(N, end) over a configurable duration. Hotspots (one per registered
3D anchor) get their own @keyframes that step through projected positions in sync
with the strip.
Tradeoffs
Section titled “Tradeoffs”| glyphcss | CSS polygon renderers | |
|---|---|---|
| Cost dominator | grid cell count | polygon count |
| Per-polygon DOM events | opt-in via <GlyphHotspot> | ✓ (one node per polygon) |
| Texture / material support | wireframe + Lambert ramp + voxel face | full UVs, atlas, lighting |
| Per-frame JS work | none (CSS-driven) | none (CSS-driven) |
| Visual style | ASCII / glyph art | smooth-shaded |
glyphcss is the right tool when you want iconic, terminal-aesthetic 3D with handpicked interactivity — not when you need photorealistic texture mapping.
What’s next
Section titled “What’s next”- Quickstart — npm-installable demo in 30 seconds.
- Core Concepts — the strip flipbook, the hit layer, the camera contract.
- Gallery — tune live, see the renderer at work.