Show HN: An ASCII 3D Rendering Engine

# glyphcss: ASCII polygon-mesh renderer for the DOM Source: [https://glyphcss.com/](https://glyphcss.com/) \>Render textured 3D meshes in the DOM with ASCII\. No WebGL\. No`<canvas\>`\. Each scene is a single`<pre\>`you can inspect, hover, and click\. \>Supports OBJ, glTF, GLB, and MagicaVoxel VOX — including UV textures and material colors\. Works with vanilla JS, React, and Vue\. runtimes:vanilla jsreactvue \[ INSTALLATION \] ┌─package managers─┐ terminal ``` $ npm install glyphcss ``` terminal ``` $ npm install @glyphcss/react ``` terminal ``` $ npm install @glyphcss/vue ``` ┌─cdn─┐ index\.html ``` <script type="module" src="https://esm.sh/glyphcss/elements"></script> ``` \[ HOW IT WORKS \] \>glyphcss loads OBJ, glTF, GLB, STL, and VOX mesh files\. Each scene renders into a single`<pre\>`: the rasteriser projects every polygon, fills a`cols × rows`character grid, and writes one string to`textContent`per render\. There are no per\-polygon DOM nodes and no`matrix3d`\. \>Interactivity is opt\-in and sparse: drop a`<GlyphHotspot\>`at any 3D anchor and glyphcss emits one absolutely\-positioned`<div\>`over the projected cell\. Real DOM events, real`:hover`styles, real`role="button"`accessibility — without one DOM node per polygon\. [\[ → core concepts \]](https://glyphcss.com/core-concepts) \[ HELLO WORLD \] \>glyphcss provides custom elements \(`<glyph\-scene\>`,`<glyph\-mesh\>`\), an imperative`createGlyphScene`API, and optional React / Vue bindings\. Use whichever entry point fits your stack\. ``` <script type="module" src="https://esm.sh/glyphcss/elements"></script> <glyph-camera rot-x="23" zoom="1.3"> <glyph-scene> <glyph-orbit-controls drag wheel></glyph-orbit-controls> <glyph-mesh geometry="dodecahedron"> <glyph-hotspot at="0,1,0"></glyph-hotspot> </glyph-mesh> </glyph-scene> </glyph-camera> ``` ``` import { GlyphCamera, GlyphScene, GlyphOrbitControls, GlyphMesh, GlyphHotspot } from "@glyphcss/react"; export function App() { return ( <GlyphCamera rotX={23} zoom={1.3}> <GlyphScene> <GlyphOrbitControls drag wheel /> <GlyphMesh geometry="dodecahedron"> <GlyphHotspot at={[0, 1.2, 0]} onClick={() => alert("vertex")} /> </GlyphMesh> </GlyphScene> </GlyphCamera> ); } ``` ``` <template> <GlyphCamera :rot-x="23" :zoom="1.3"> <GlyphScene> <GlyphOrbitControls drag wheel /> <GlyphMesh geometry="dodecahedron"> <GlyphHotspot :at="[0, 1.2, 0]" @click="onVertex" /> </GlyphMesh> </GlyphScene> </GlyphCamera> </template> <script setup lang="ts"> import { GlyphCamera, GlyphScene, GlyphOrbitControls, GlyphMesh, GlyphHotspot } from "@glyphcss/vue"; function onVertex() { alert("vertex"); } </script> ``` [\[ → api reference \]](https://glyphcss.com/api/headless)