glyphcss

                                   ✪★★✫                         ★★★                                                               
                                   ✩★★★                         ★★★                                                               
                        ★★★★★✧★★★★ ✪★★✫★✦✧★    ✧✦✧★★★★✪✧★★★★    ★★★ ✦✧★★✦      ✧✦★★✧✩    ✧✦★★★★✧    ✦✧★★★★✦                       
                      ★★★★★★★★★★★✫ ✩★★★ ★★★✩  ✧★★★★★★★★★★★★★★★  ★★★★★★★★★★  ✧✦★★★★★★★★ ✦★★★★ ✪✪★★★✧✦★★★ ✫★★★★                     
                      ★★★★✫   ★★★✫ ✪★★✫ ✩★★✫✩ ★★★★ ★★★★    ★★★★ ★★★    ✧★★★ ✦★★    ✧★★★✧★★★✧      ✦✧★★✧                           
                     ★★★★✫    ★★★✫ ✩★★★  ✩★★✪✦★★★  ★★★★    ✦★★★ ★★★    ✧★★★✦✧★★          ★★★★★★★✧   ✫★★★★★★★                      
                      ★★★✩✧   ★★★★ ✪★★✫   ★★★★★★   ★★★★    ★★★★ ★★★    ✧★★★ ✩★★    ✧✦✧✦✧✦✧    ✫★★★✦✧✦    ✩✦★★                     
                      ★★★★★★★★★★★✫ ✩★★★    ★★★★★   ★★★★★★★★★★★  ★★★    ✧★★★  ✫★★✧✦✧★★★ ✧★★★✧✧✦✧★★★✩✫★★★✦✧✦★★★                     
                         ★★★★ ★★★★ ★★★✫    ✪★★★    ★★★★ ★★★★    ★★★    ✧★★★     ★★★★      ★★★★★       ★★★★★                       
                       ★✧✦✧  ★★★★★        ✧★★★     ★★★★                                                                           
                       ★★★★★★★★★        ✦★★★★      ★★★★

>Turn 3D models into ASCII art, rendered as text in a single<pre>. No WebGL. No <canvas> — inspect, hover, and click every cell.

>Load OBJ, glTF, GLB, STL, and MagicaVoxel VOX — with UV textures and material colors. Works with vanilla JS, React, and Vue, or straight in your terminal.

[ View on GitHub ★ … ][ Browse gallery ]

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 ]

                                                ┌────────────────────┐   ┌─────────────────┐  ┌────────────────────┐      
                                              ┌─▶ Rasterise polygons │───▶   Encode text   │──▶        <pre>       │      
                                              │ │  cols × rows grid  │   │ or colour spans │  │ one write / render │      
      ┌─────────────────┐  ┌────────────────┐ │ └────────────────────┘   └─────────────────┘  └────────────────────┘      
      │ Mesh / geometry │──▶ Scene + camera ├─┤                                                                           
      └─────────────────┘  └────────────────┘ │ ┌────────────────────┐  ┌──────────────────┐                              
                                              └─▶ Project 3D anchors │──▶   DOM hotspots   │                              
                                                │     same camera    │  │ position + depth │                              
                                                └────────────────────┘  └──────────────────┘

Each render writes the text once per <pre>. Optional hotspots share the scene camera.

            ┌──────────┐            
            │  Mesh /  │            
            │ geometry │            
            └──────────┘            
                 │                  
                 │                  
         ┌───────▼────────┐         
         │ Scene + camera │         
         └───────┬────────┘         
                 │                  
        ┌────────┴─────────┐        
        │                  │        
 ┌──────▼──────┐           │        
 │  Rasterise  │    ┌──────▼──────┐ 
 │  polygons   │    │ Project 3D  │ 
 │ cols × rows │    │   anchors   │ 
 │    grid     │    │ same camera │ 
 └─────────────┘    └─────────────┘ 
        │                  │        
        │                 ┌┘        
        │                 │         
 ┌──────▼──────┐   ┌──────▼───────┐ 
 │ Encode text │   │ DOM hotspots │ 
 │  or colour  │   │  position +  │ 
 │    spans    │   │     depth    │ 
 └─────────────┘   └──────────────┘ 
        │                           
        │                           
 ┌──────▼──────┐                    
 │    <pre>    │                    
 │ one write / │                    
 │   render    │                    
 └─────────────┘

Each render writes the text once per <pre>. Optional hotspots share the scene camera.

>glyphcss loads OBJ, glTF, GLB, STL, and VOX mesh files. The rasteriser projects polygons through the scene camera, fills a cols × rows character grid, and encodes text or colour spans. Each render writes one string per <pre>: textContent for plain text, or innerHTML for colour. Detail layers get their own <pre>. 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 positions a DOM element over the cell projected through the same camera. Real DOM events, real :hover styles, real role="button"accessibility — without one DOM node per polygon. Rendering is demand-driven; controls and animation request new renders.

[ → 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.

~/project/

<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 ]