# Density & Detail

```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/Elephant.glb", { solidTextureSamples: false });
scene.add(recenterPolygons(polygons));
createGlyphOrbitControls(scene, { drag: true, wheel: true });
```



Raise density to shrink the cells while keeping the object the same size. This control changes the whole scene's font size; open Code to see the CSS setting. Per-mesh `density` increases detail for individual objects instead.

## Per-mesh resolution

```tsx
<GlyphMesh geometry="cube" />
<GlyphMesh geometry="icosahedron" density={3} />
```

Place these inside your `GlyphScene`. The second mesh uses cells one-third the size in its own `<pre>`; omitted density or `1` uses the shared grid. Vanilla: `scene.add(polygons, { density: 3 })`. Vue uses `:density="3"`; HTML uses `density="3"`.

| Option | Default | Effect |
|---|---|---|
| `density` | `1` | Resolution multiplier at the same screen size |
| `fontSize` | — | Explicit px number or CSS length; overrides density |
| `lineHeight` | — | Explicit row height multiplier; overrides density for that metric |
| `transparent` | `false` | See-through layer: neither occludes nor is occluded |

Detail layers require browser layout and are unavailable in static compilation. They work with orthographic, perspective, and first-person cameras.

## Row spacing



```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/Owl.glb", { solidTextureSamples: false });
scene.add(recenterPolygons(polygons));
createGlyphOrbitControls(scene, { drag: true, wheel: true });
```



Line height changes vertical cell spacing. The camera projection uses the measured cell aspect, preserving the object's proportions.

## Layer appearance

```ts
scene.add(polygons, { density: 2, mode: "ink", transparent: true });
```

| Per-mesh option | Effect |
|---|---|
| `glyphPalette` | Own solid ramp; unknown names use the default |
| `ambientIntensity` | Own ambient intensity; ambient color and key light stay scene-wide |
| `mode` | Own render mode; shares the base grid when it matches the scene |

These overrides create separate layers even at base resolution. Character encoding, junctions, and weight ramps remain scene options. Opaque outline layers claim their full surface footprint; add `transparent` for an outline over other geometry.

## Occlusion

Opaque layers resolve depth together. Use these options only when a detail mesh needs a different claim:

| Option | Default | Effect / limit |
|---|---|---|
| `occlusionPriority` | `0` | Higher values win regardless of depth; depth resolves equal priorities |
| `occlusionClaim` | `"alpha"` | Claim opaque texels; `"geometry"` claims the full triangle |
| `occlusionContourPx` | unset | Claim ink plus a screen-pixel margin; `0` is tightest |

`occlusionContourPx` does not steal another detail mesh's cells. It costs a 4×-per-axis coverage pass across the scene; the margin caps at `6 / supersample` output cells. Transparent layers skip occlusion entirely.

## Keep interaction responsive

Each detail mesh adds a `<pre>` and render pass. Doubling density roughly quadruples cells. Keep detail for a few objects; set scene `interactiveDownscale: 2` to lower resolution during gestures and restore detail on release. See [performance](/guides/performance/).