feat: /examples section (World globe + Flat Map) + landing lighting + render perf

.gitignore

@@ -17,16 +17,10 @@ log.md
 log-texture.md
 website/.baseline-shots/
 
-# Large geo datasets — not committed
+# Large source geo datasets — not committed. Only needed locally to (re)bake
+# the small tile pyramids under website/public/data/ via the bake scripts.
 etopo/
 gadm_410.gdb/
 
-# /map tile pyramid + legacy single-tile globe (regenerable from etopo via
-# `node website/scripts/bake-globe.mjs --tiles`). The landing-earth.json
-# file IS tracked — it's small (~95 KB) and required by the landing page.
-website/public/data/tiles/
+# Legacy single-tile globe (superseded by the LOD tiles). Regenerable.
 website/public/data/earth.json
-
-# Local-only experimental /map page (LOD-tiled ASCII globe). Depends on the
-# untracked tile pyramid above; not ready to ship.
-website/src/pages/map.astro

packages/glyphcss/src/api/createGlyphScene.ts

@@ -247,13 +247,29 @@ export function createGlyphScene(
       creaseAngle: options.creaseAngle,
     });
 
+    // Optional perf instrumentation: set `globalThis.__glyphPerf = {}` to
+    // record per-render rasterize vs DOM-write timings into it. Zero cost when
+    // the flag is unset. Used by the glyphcss perf benchmark to decide whether
+    // the bottleneck is JS rasterization or the DOM/paint of the <pre>.
+    const perf = (globalThis as { __glyphPerf?: { raster?: number[]; dom?: number[]; polys?: number[] } }).__glyphPerf;
+    const tStart = perf ? performance.now() : 0;
+
     const output = rasterize(ctx);
+    const tRaster = perf ? performance.now() : 0;
+
     if (options.useColors) {
       pre.innerHTML = output;
     } else {
       pre.textContent = output;
     }
 
+    if (perf) {
+      const tDom = performance.now();
+      (perf.raster ??= []).push(tRaster - tStart);
+      (perf.dom ??= []).push(tDom - tRaster);
+      (perf.polys ??= []).push(allPolygons.length);
+    }
+
     // Update hotspot positions.
     updateHotspots();
   }
@@ -388,14 +404,23 @@ export function createGlyphScene(
     // Inherit line-height + font-size from the `<pre>` so the measurement
     // reflects any caller-applied overrides (e.g. the gallery's lineHeight
     // tunable). Hardcoding `line-height: 1` here would defeat the purpose.
+    //
+    // Height is measured from a MULTI-LINE probe (height ÷ N), not a single
+    // character. A single inline span's bounding box can't shrink below the
+    // font's glyph height, so at line-height < ~0.8 it over-reports the cell
+    // height — autoSize then computes too few rows and the rendered <pre>
+    // (which lays out lines at the true line-height) ends up shorter than the
+    // host, visually shrinking the scene. Stacking N lines and dividing
+    // recovers the real per-line advance at any line-height.
+    const LINES = 20;
     const probe = host.ownerDocument!.createElement("span");
-    probe.textContent = "M";
+    probe.textContent = Array(LINES).fill("M").join("\n");
     probe.style.cssText =
       "position:absolute;visibility:hidden;font-family:inherit;font-size:inherit;line-height:inherit;white-space:pre;padding:0;margin:0";
     pre.appendChild(probe);
     const r = probe.getBoundingClientRect();
     probe.remove();
-    return { w: r.width || 8, h: r.height || 16 };
+    return { w: r.width || 8, h: r.height ? r.height / LINES : 16 };
   }
 
   function fitToHost(): void {

packages/glyphcss/src/render/rasterize.ts

@@ -81,6 +81,14 @@ function rasterizeSolid(
     ? computeVertexNormals(polygons, creaseAngle)
     : null;
 
+  // Lit-color cache for this render. Meshes share a handful of distinct
+  // base colors (palette buckets) and the shaded output is an 8-bit RGB hex
+  // string, so per-triangle `hexToRgb` parsing + `toHex2` formatting is the
+  // bulk of the color cost (≈doubles rasterize time at high poly counts).
+  // Key on (color, intensity quantized to 8 bits) — lossless for 8-bit
+  // output — and reuse the formatted string across all triangles that match.
+  const litCache = new Map<string, string>();
+
   for (let polyIdx = 0; polyIdx < polygons.length; polyIdx++) {
     const poly = polygons[polyIdx]!;
     const verts = poly.vertices;
@@ -143,14 +151,24 @@ function rasterizeSolid(
       if (useColors) {
         const avgI = (iA + iB + iC) / 3;
         const avgKey = Math.max(0, avgI - ambIntensity);
-        const triRgb = poly.color ? hexToRgb(poly.color) : [255, 255, 255];
-        const tintR = ambIntensity * ambRgb[0] / 255 + avgKey * keyRgb[0] / 255;
-        const tintG = ambIntensity * ambRgb[1] / 255 + avgKey * keyRgb[1] / 255;
-        const tintB = ambIntensity * ambRgb[2] / 255 + avgKey * keyRgb[2] / 255;
-        const litR = Math.min(255, triRgb[0] * tintR);
-        const litG = Math.min(255, triRgb[1] * tintG);
-        const litB = Math.min(255, triRgb[2] * tintB);
-        litColor = `#${toHex2(litR)}${toHex2(litG)}${toHex2(litB)}`;
+        const baseColor = poly.color ?? "#ffffff";
+        // Cache key: base color + intensity quantized to 0..255. Two triangles
+        // with the same base and intensity-to-8-bits produce identical output.
+        const q = (avgKey * 255) | 0;
+        const cacheKey = `${baseColor}:${q}`;
+        let cached = litCache.get(cacheKey);
+        if (cached === undefined) {
+          const triRgb = hexToRgb(baseColor); // memoized internally
+          const tintR = ambIntensity * ambRgb[0] / 255 + avgKey * keyRgb[0] / 255;
+          const tintG = ambIntensity * ambRgb[1] / 255 + avgKey * keyRgb[1] / 255;
+          const tintB = ambIntensity * ambRgb[2] / 255 + avgKey * keyRgb[2] / 255;
+          const litR = Math.min(255, triRgb[0] * tintR);
+          const litG = Math.min(255, triRgb[1] * tintG);
+          const litB = Math.min(255, triRgb[2] * tintB);
+          cached = `#${toHex2(litR)}${toHex2(litG)}${toHex2(litB)}`;
+          litCache.set(cacheKey, cached);
+        }
+        litColor = cached;
       }
 
       // Scan-fill the projected triangle. Depth and intensity are both
@@ -492,7 +510,18 @@ function stampToGlyphs(
   return parts.join("");
 }
 
+// Memoized: meshes reuse a small set of base colors, so parsing the same hex
+// strings thousands of times per frame is pure waste. Keyed by the raw string.
+const rgbMemo = new Map<string, [number, number, number]>();
 function hexToRgb(hex: string): [number, number, number] {
+  const cached = rgbMemo.get(hex);
+  if (cached !== undefined) return cached;
+  const rgb = parseHexToRgb(hex);
+  rgbMemo.set(hex, rgb);
+  return rgb;
+}
+
+function parseHexToRgb(hex: string): [number, number, number] {
   // Accepts #rgb / #rrggbb. Anything else falls through to white.
   const h = hex.startsWith("#") ? hex.slice(1) : hex;
   if (h.length === 3) {

website/public/data/flatmap/manifest.json

@@ -0,0 +1 @@
+{"plane":{"halfX":1,"halfY":1},"exagg":200,"zooms":[{"z":0,"cols":1,"rows":1},{"z":1,"cols":2,"rows":2},{"z":2,"cols":4,"rows":4},{"z":3,"cols":8,"rows":8}],"tileBoxes":{"0/0_0":{"x0":-1,"x1":1,"y0":-1,"y1":1},"1/0_0":{"x0":-1,"x1":0,"y0":-1,"y1":0},"1/1_0":{"x0":-1,"x1":0,"y0":0,"y1":1},"1/0_1":{"x0":0,"x1":1,"y0":-1,"y1":0},"1/1_1":{"x0":0,"x1":1,"y0":0,"y1":1},"2/0_0":{"x0":-1,"x1":-0.5,"y0":-1,"y1":-0.5},"2/1_0":{"x0":-1,"x1":-0.5,"y0":-0.5,"y1":0},"2/2_0":{"x0":-1,"x1":-0.5,"y0":0,"y1":0.5},"2/3_0":{"x0":-1,"x1":-0.5,"y0":0.5,"y1":1},"2/0_1":{"x0":-0.5,"x1":0,"y0":-1,"y1":-0.5},"2/1_1":{"x0":-0.5,"x1":0,"y0":-0.5,"y1":0},"2/2_1":{"x0":-0.5,"x1":0,"y0":0,"y1":0.5},"2/3_1":{"x0":-0.5,"x1":0,"y0":0.5,"y1":1},"2/0_2":{"x0":0,"x1":0.5,"y0":-1,"y1":-0.5},"2/1_2":{"x0":0,"x1":0.5,"y0":-0.5,"y1":0},"2/2_2":{"x0":0,"x1":0.5,"y0":0,"y1":0.5},"2/3_2":{"x0":0,"x1":0.5,"y0":0.5,"y1":1},"2/0_3":{"x0":0.5,"x1":1,"y0":-1,"y1":-0.5},"2/1_3":{"x0":0.5,"x1":1,"y0":-0.5,"y1":0},"2/2_3":{"x0":0.5,"x1":1,"y0":0,"y1":0.5},"2/3_3":{"x0":0.5,"x1":1,"y0":0.5,"y1":1},"3/0_0":{"x0":-1,"x1":-0.75,"y0":-1,"y1":-0.75},"3/1_0":{"x0":-1,"x1":-0.75,"y0":-0.75,"y1":-0.5},"3/2_0":{"x0":-1,"x1":-0.75,"y0":-0.5,"y1":-0.25},"3/3_0":{"x0":-1,"x1":-0.75,"y0":-0.25,"y1":0},"3/4_0":{"x0":-1,"x1":-0.75,"y0":0,"y1":0.25},"3/5_0":{"x0":-1,"x1":-0.75,"y0":0.25,"y1":0.5},"3/6_0":{"x0":-1,"x1":-0.75,"y0":0.5,"y1":0.75},"3/7_0":{"x0":-1,"x1":-0.75,"y0":0.75,"y1":1},"3/0_1":{"x0":-0.75,"x1":-0.5,"y0":-1,"y1":-0.75},"3/1_1":{"x0":-0.75,"x1":-0.5,"y0":-0.75,"y1":-0.5},"3/2_1":{"x0":-0.75,"x1":-0.5,"y0":-0.5,"y1":-0.25},"3/3_1":{"x0":-0.75,"x1":-0.5,"y0":-0.25,"y1":0},"3/4_1":{"x0":-0.75,"x1":-0.5,"y0":0,"y1":0.25},"3/5_1":{"x0":-0.75,"x1":-0.5,"y0":0.25,"y1":0.5},"3/6_1":{"x0":-0.75,"x1":-0.5,"y0":0.5,"y1":0.75},"3/7_1":{"x0":-0.75,"x1":-0.5,"y0":0.75,"y1":1},"3/0_2":{"x0":-0.5,"x1":-0.25,"y0":-1,"y1":-0.75},"3/1_2":{"x0":-0.5,"x1":-0.25,"y0":-0.75,"y1":-0.5},"3/2_2":{"x0":-0.5,"x1":-0.25,"y0":-0.5,"y1":-0.25},"3/3_2":{"x0":-0.5,"x1":-0.25,"y0":-0.25,"y1":0},"3/4_2":{"x0":-0.5,"x1":-0.25,"y0":0,"y1":0.25},"3/5_2":{"x0":-0.5,"x1":-0.25,"y0":0.25,"y1":0.5},"3/6_2":{"x0":-0.5,"x1":-0.25,"y0":0.5,"y1":0.75},"3/7_2":{"x0":-0.5,"x1":-0.25,"y0":0.75,"y1":1},"3/0_3":{"x0":-0.25,"x1":0,"y0":-1,"y1":-0.75},"3/1_3":{"x0":-0.25,"x1":0,"y0":-0.75,"y1":-0.5},"3/2_3":{"x0":-0.25,"x1":0,"y0":-0.5,"y1":-0.25},"3/3_3":{"x0":-0.25,"x1":0,"y0":-0.25,"y1":0},"3/4_3":{"x0":-0.25,"x1":0,"y0":0,"y1":0.25},"3/5_3":{"x0":-0.25,"x1":0,"y0":0.25,"y1":0.5},"3/6_3":{"x0":-0.25,"x1":0,"y0":0.5,"y1":0.75},"3/7_3":{"x0":-0.25,"x1":0,"y0":0.75,"y1":1},"3/0_4":{"x0":0,"x1":0.25,"y0":-1,"y1":-0.75},"3/1_4":{"x0":0,"x1":0.25,"y0":-0.75,"y1":-0.5},"3/2_4":{"x0":0,"x1":0.25,"y0":-0.5,"y1":-0.25},"3/3_4":{"x0":0,"x1":0.25,"y0":-0.25,"y1":0},"3/4_4":{"x0":0,"x1":0.25,"y0":0,"y1":0.25},"3/5_4":{"x0":0,"x1":0.25,"y0":0.25,"y1":0.5},"3/6_4":{"x0":0,"x1":0.25,"y0":0.5,"y1":0.75},"3/7_4":{"x0":0,"x1":0.25,"y0":0.75,"y1":1},"3/0_5":{"x0":0.25,"x1":0.5,"y0":-1,"y1":-0.75},"3/1_5":{"x0":0.25,"x1":0.5,"y0":-0.75,"y1":-0.5},"3/2_5":{"x0":0.25,"x1":0.5,"y0":-0.5,"y1":-0.25},"3/3_5":{"x0":0.25,"x1":0.5,"y0":-0.25,"y1":0},"3/4_5":{"x0":0.25,"x1":0.5,"y0":0,"y1":0.25},"3/5_5":{"x0":0.25,"x1":0.5,"y0":0.25,"y1":0.5},"3/6_5":{"x0":0.25,"x1":0.5,"y0":0.5,"y1":0.75},"3/7_5":{"x0":0.25,"x1":0.5,"y0":0.75,"y1":1},"3/0_6":{"x0":0.5,"x1":0.75,"y0":-1,"y1":-0.75},"3/1_6":{"x0":0.5,"x1":0.75,"y0":-0.75,"y1":-0.5},"3/2_6":{"x0":0.5,"x1":0.75,"y0":-0.5,"y1":-0.25},"3/3_6":{"x0":0.5,"x1":0.75,"y0":-0.25,"y1":0},"3/4_6":{"x0":0.5,"x1":0.75,"y0":0,"y1":0.25},"3/5_6":{"x0":0.5,"x1":0.75,"y0":0.25,"y1":0.5},"3/6_6":{"x0":0.5,"x1":0.75,"y0":0.5,"y1":0.75},"3/7_6":{"x0":0.5,"x1":0.75,"y0":0.75,"y1":1},"3/0_7":{"x0":0.75,"x1":1,"y0":-1,"y1":-0.75},"3/1_7":{"x0":0.75,"x1":1,"y0":-0.75,"y1":-0.5},"3/2_7":{"x0":0.75,"x1":1,"y0":-0.5,"y1":-0.25},"3/3_7":{"x0":0.75,"x1":1,"y0":-0.25,"y1":0},"3/4_7":{"x0":0.75,"x1":1,"y0":0,"y1":0.25},"3/5_7":{"x0":0.75,"x1":1,"y0":0.25,"y1":0.5},"3/6_7":{"x0":0.75,"x1":1,"y0":0.5,"y1":0.75},"3/7_7":{"x0":0.75,"x1":1,"y0":0.75,"y1":1}}}

website/public/data/tiles/manifest.json

@@ -0,0 +1 @@
+{"zooms":[{"z":0,"cols":1,"rows":1,"tileLonSpan":360,"tileLatSpan":180},{"z":1,"cols":2,"rows":2,"tileLonSpan":180,"tileLatSpan":90}],"heightExagg":30,"earthRadiusM":6371000}