Introduction

glyphcss turns 3D meshes into text. Drag to orbit; open Code.

Loading…

Rendering

Mesh: apple.glb

Code

The actual DOM output

import { cubePolygons } from "@glyphcss/core";
import { compileScene, createGlyphOrthographicCamera } from "glyphcss";

const { html } = compileScene({
  polygons: cubePolygons({ center: [0, 0, 0], size: 1 }),
  camera: createGlyphOrthographicCamera({ rotX: 60, rotY: 30, zoom: 200 }),
  cols: 20, rows: 9, mode: "solid", useColors: false,
});
document.body.insertAdjacentHTML("beforeend", html);

Rendered HTML, blank margins omitted:

<pre class="glyph-output">
        %%@%%
     %%%%%%%%%%@
     %%%@%%%@@@@
     %%%%%%%@@@@
     %@%%%@%@@@@
        %%%%@
</pre>

Use a monospace font and line-height: 1. Scenes update on changes; static output needs no JavaScript.

Packages

Package	Use
glyphcss	Browser renderer
@glyphcss/core	Math, geometry, parsers
@glyphcss/react	React bindings
@glyphcss/vue	Vue bindings
@glyphcss/compile	Build-time rendering and CLI
@glyphcss/effects	Animated surface effects
@glyphcss/charts	Data charts
@glyphcss/diagrams	Mermaid and graph diagrams
@glyphcss/maps	Geographic maps
@glyphcss/fluid	Braille fluid text surface and speed reader
@glyphcss/fonts	Extruded text meshes

Try the quickstart or gallery.