What it does
four20 traces raster images into clean SVG paths in the browser, and makes sure those paths can be extruded into 3D without any cleanup.
The scene above
The image is split into brightness bands. Each band becomes a black-and-white mask, four20 traces it to SVG, and Three.js extrudes the paths. Stacked on top of each other, the layers become a terraced relief, a topographic map of the picture. Text is blurred first, so each band is a slightly smaller outline and the letters come out inflated.
Every band is full of nested shapes: islands inside holes inside outlines. That's exactly the case that breaks naive tracing, and the reason four20 exists.
Why it exists
Three.js can extrude any 2D shape with ExtrudeGeometry, but outer paths must wind one way and
holes the other. Get it wrong and faces invert, surfaces vanish and the geometry breaks.
Every potrace port I found produced paths in arbitrary winding order. four20 adds a geometric post-pass: it works out which paths contain which, and re-orders the winding so the output is always ready to extrude.
How it works
- Pixels are traced with Peter Selinger's potrace algorithm, the same foundation as Inkscape's bitmap tracing: polygon fitting, then curve optimisation into a minimal set of Bézier curves
- Output paths are compared with point-in-polygon tests to build a containment tree
- Containment depth decides winding: even depth is an outline, odd depth is a hole
- Text is rendered with the browser's font engine first, so any web font works