The WebGL Antidote: How meodai/heerich Renders 3D in Pure SVG

By discarding the GPU in favor of a custom polygon clipping engine, this zero-dependency library brings architectural voxel art to pen plotters and generative designers.

6 min read • View on GitHub • More from meodai

A split composition showing a glowing, pixelated cubic structure on the left and a crisp, mathematically precise wireframe cube being drawn by a mechanical pen on the right. This illustrates the difference between fixed-pixel WebGL output and infinitely scalable vector SVG. — While WebGL excels at pushing millions of pixels to a screen, heerich sacrifices real-time performance to generate perfectly crisp, plotter-ready vector lines.

Key Takeaways

Heerich bypasses WebGL entirely to generate perfect, resolution-independent 3D SVG markup.
The engine solves occlusion mathematically using spatial grids and convex subtraction instead of a standard raster Z-buffer.
Memory is optimized through a flat Float64Array that handles voxel coordinates for complex constructive solid geometry.
A custom bilinear warp engine maps flat 2D SVG paths onto isometric 3D planes for precise texture wrapping.

The GPU Bypass

Standard 3D on the web relies on WebGL to push millions of pixels to a canvas. Heerich takes the opposite approach. It accepts a massive CPU performance penalty to output pure, infinitely scalable SVG markup. This makes it a tool for mathematical precision rather than real-time framerates. For generative artists and developers looking to send architectural forms to physical drawing machines, perfect vector lines are far more valuable than high frame rates.

Feature	WebGL (Three.js)	meodai/heerich
Rendering Target	Canvas (Raster)	SVG (Vector)
Depth Sorting	Z-Buffer (GPU)	Polygon Clipping (CPU)
Scaling	Fixed Pixel	Infinite Vector
Primary Use Case	Interactive Screen	Plotters & Print

The Hidden Line Problem

Without a raster Z-buffer, you cannot simply paint pixels over each other to hide objects in the background. The engine relies on a custom 2D polygon clipping engine in src/bsp.js to solve this. It uses a spatial grid and convex subtraction to physically slice and remove hidden polygons before they ever reach the DOM. This ensures that hidden lines do not bleed through the gaps of front-facing polygons.

Z-Buffer pixel overwriting versus mathematical Polygon Clipping.

Carving the Grid

Instead of traditional polygonal meshes, the engine uses a voxel grid. Data is stored in a flat Float64Array to reduce garbage collection pressure. Constructive Solid Geometry operations, like carving a sphere out of a box, are achieved simply by deleting coordinate keys from a central map. This functional approach allows developers to build complex forms with minimal memory overhead.

Warping the Flat World

The addition of src/decal-warp.js allows developers to map standard 2D SVG paths onto 3D voxel faces. It uses sophisticated bilinear interpolation to stretch and project flat coordinates into isometric or perspective views. A custom tokenizer even converts complex arcs into cubic bezier curves to maintain perfect geometric fidelity without relying on heavy external matrix libraries.

A close-up of a sharp 90-degree corner of a stone block, with a smooth curved line wrapping seamlessly around the edge, pinned in place by tiny surveying stakes. This represents the mathematical projection of flat paths onto 3D geometry. — Bilinear warping maps 2D paths to 3D planes by recalculating anchor points across the perspective grid.

From Screen to Pen

The library draws its name from 1960s minimalist sculptor Erwin Heerich. Today, the generative art community uses this engine to bridge the gap between digital generative code and physical pen plotters. By producing clean vector lines with proper occlusion, artists can send 3D architectural forms directly to physical drawing machines.

Playing around with @meodai Heerich library, this thing is fun. I might plot one of these this week. https://t.co/17jIBcJztJ

Liam Egan, liamegan · @liamegan on X