# Compiling to Static

```ts
import { createGlyphPerspectiveCamera, createGlyphScene, createGlyphOrbitControls } from "glyphcss";
import { loadMesh, recenterPolygons } from "@glyphcss/core";

const host = document.getElementById("scene");
const camera = createGlyphPerspectiveCamera({ rotX: 65, rotY: 0, zoom: 0.3, distance: 0, perspective: 32000, stretch: 1 });
const scene = createGlyphScene(host, { camera, autoSize: true, mode: "solid", colorEncoding: "spans" });
scene.output.style.fontSize = "10px";
scene.output.style.lineHeight = "1";
scene.fit();
const { polygons } = await loadMesh("/gallery/glb/Policecar.glb", { solidTextureSamples: false });
scene.add(recenterPolygons(polygons));
createGlyphOrbitControls(scene, { drag: true, wheel: true });
```



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

```ts
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 |

```ts
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

```sh
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](/guides/color-encoding/#static-and-compiled-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](/diagrams/cli/) and [chart CLI](/charts/cli/).