Compiling to Static

Loading…

Rendering

Mesh: Policecar.glb

Camera

ZoomTilt

Frame the object with tilt and zoom, then open Code. The demo is interactive; compileScene freezes a scene into HTML with no renderer JavaScript. Its inputs are polygons, camera, and render options.

Bake a frame

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

const { html } = compileScene({
  polygons: cubePolygons({ center: [0, 0, 0], size: 100 }),
  camera: createGlyphCamera({ rotX: 65, rotY: 45, zoom: 1 }),
  mode: "solid", cols: 80, rows: 24,
});

Insert html into your page. inner contains the <pre> contents; cols and rows describe the grid. Match camera, grid, lighting, and material inputs when comparing a bake to a live scene.

Choose a build integration

Pipeline	Entry point	Result
Node / Astro frontmatter	`compileFile(path, options)` from `@glyphcss/compile`	Loads a mesh and returns compiled HTML
Vite	`glyphcssCompile()` from `@glyphcss/compile/vite`	Compiles `?glyph` imports at build time
React / Vue SSR	`GlyphSceneStatic` from the binding	Renders polygons into a `<pre>`
Any build tool	`npx @glyphcss/compile`	Writes text, ANSI, or HTML

import { glyphcssCompile } from "@glyphcss/compile/vite";
export default { plugins: [glyphcssCompile()] };
// In application code, after registering the plugin:
import model from "./model.glb?glyph&autoCenter=1&rotX=60&cols=80&rows=30";

Astro accepts the plugin under vite.plugins; use <Fragment set:html={model} /> to insert the imported string. Alternatively, call compileFile directly in frontmatter with an absolute filesystem path.

GlyphSceneStatic is zero-runtime only when rendered on the server or at build time without hydration. In a client-rendered app it still runs the compiler in the browser; use the Vite plugin for a baked string.

CLI

npx @glyphcss/compile cube --auto-center --format full --out cube.html

Inputs: a geometry name, .obj / .glb / .gltf / .vox / .stl, --polygons FILE.json, or --polygons-json. Formats: ansi, text, html, full. Defaults: terminal → ANSI; file → HTML; pipe → text. Omit grid dimensions to auto-fit; specify one to fit that axis.

Options and limits

Option	Default / use
`mode`, `glyphPalette`, `useColors`	`"solid"`, `"default"`, `true`
`cols`, `rows`, `cellAspect`	`80`, `24`, `2`
`autoCenter`	`false`; recenter loaded geometry explicitly
`smoothShading`, `creaseAngle`	`false`, `60` degrees
`doubleSided`, `supersample`	`false`, `1`

compileScene / GlyphSceneStatic also accept charMode, hiddenLines, solidWeightRamp, and colorTolerance; CLI, Vite, and compileFile do not.
wireframeJunctions and per-mesh detail layers are runtime-only. Static compilation cannot reproduce per-mesh density or transparency.
File compilation uses material/vertex colors; browser-decoded texture images are unavailable. compileScene can accept procedural textureSamplers.
Atlas output requires an explicit palette and font CSS.

Export motion

Function	Ships / limits
`buildGlyphInteractiveExport` (`glyphcss`)	Mesh + runtime; `interactions` selects orbit, zoom, pan, or FPV; optional stock `effect`
`buildGlyphFramesExport` (`glyphcss`)	Baked one-axis rotation; fixed resolution, payload grows with `frameCount`
`buildGlyphFieldSynthStaticExport` (`@glyphcss/effects`)	Field-synth animation over fixed geometry/camera, without runtime imports

Only field synth has an effect-only static export. Check isGlyphFieldSynthStaticExportSupported(params); volumetric, carve, and xray patches need interactive export. Custom effects and program are unsupported by these effect export paths.

For text diagrams and charts, see the diagram CLI and chart CLI.