Density & Detail

Loading…

Rendering

Mesh: Elephant.glb

Density

Code

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

<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

Loading…

Rendering

Mesh: Owl.glb

Line height

Code

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

Layer appearance

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.