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 a single render pass whenever the camera or scene changes — and
nothing at all in between.
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> is rewritten in a single textContent write per render pass — no
pre-baked frames, no per-polygon DOM nodes, no CSS transforms. Hotspots (one per registered 3D anchor) are projected
through the same camera and repositioned with one inline-style assignment each,
so they cannot drift out of step with the glyphs.
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) |
| Render styles | wireframe, Lambert-shaded solid, voxel, ink contour | smooth-shaded polygons |
| Per-frame JS work | none while idle; one pass per camera/scene change | 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 render pass, the hit layer, the camera contract.
- Gallery — tune live, see the renderer at work.
- Maps — render real geographic data: terrain, borders, contours, OpenStreetMap buildings.