Skip to content

feat(landing): real-time sun-lit Earth globe hero#5

Merged
apresmoi merged 1 commit into
mainfrom
feat/landing-earth-globe
May 24, 2026
Merged

feat(landing): real-time sun-lit Earth globe hero#5
apresmoi merged 1 commit into
mainfrom
feat/landing-earth-globe

Conversation

@apresmoi
Copy link
Copy Markdown
Owner

Summary

Replaces the apple GLB on the landing page with an ASCII Earth globe rasterized from NOAA ETOPO1 elevation data. The lit hemisphere tracks the real subsolar point computed from current UTC.

Numbers

  • Mesh: 120×60 grid → 7,200 quads
  • Format: shared-vertex indexed (~75% vertex dedup) + 4-sig-fig truncation
  • File: landing-earth.json — 95 KB raw / ~30 KB gzipped
  • vs previous apple.glb (~50 KB): comparable transfer; richer subject

New GlyphDemo props

Prop What
polygonsUrl Load pre-baked indexed-format polygons instead of a mesh file
invertDrag Grab-and-spin sign (drag right rotates visible face east)
noClampPitch Remove the ±π/2 vertical-drag limit
realSunLight Directional light tracks actual subsolar point; refresh every 30 s

autoRotate now also pauses while the user is dragging (was a bare RAF that fought direct input).

Cross-package surface change

createGlyphOrbitControls gains clampPitch?: boolean (default true, backward-compatible). Mirrored in:

  • packages/react/.../GlyphOrbitControls.tsx
  • packages/vue/.../GlyphOrbitControls.ts
  • packages/glyphcss/.../GlyphOrbitControlsElement.ts (new clamp-pitch attribute)

Bake pipeline

website/scripts/bake-globe.mjs parses ETOPO1 NetCDF-3 by hand (netcdfjs OOMs on the ~933 MB uncompressed grid; a typed-array view + custom header parser sidesteps it) and emits the indexed JSON. ETOPO1 source data is git-ignored — run node website/scripts/bake-globe.mjs --landing to regenerate after dropping the .grd.gz into etopo/.

Test plan

  • `pnpm test` — 147+147+core+glyphcss all green
  • `pnpm build` — packages + website
  • Landing renders Earth at iso angle with day/night terminator matching current UTC
  • Drag rotates globe; release → auto-rotate resumes after 600 ms grace
  • Vertical drag past either pole works (no clamp)

…support

Replaces the apple hero on the landing with a compact ASCII Earth globe
rasterised from ETOPO1 elevation data (120x60 grid, ~7.2k polygons,
~95 KB raw / ~30 KB gzipped via shared-vertex indexed format + 4-sig-fig
truncation).

Adds to GlyphDemo / glyph-runtime:
- polygonsUrl: load pre-baked indexed-format polygon data instead of a
  mesh file. Lighter than shipping a GLB for static decorative meshes.
- invertDrag: grab-and-spin sign convention (drag right rotates the
  visible face east).
- noClampPitch: lets the user tumble the model past either pole.
- realSunLight: directional light tracks the actual subsolar point
  computed from current UTC + day-of-year. Refreshed every 30s.
- autoRotate now pauses while the user is dragging (was a bare RAF
  loop that fought direct input).

Adds to createGlyphOrbitControls a clampPitch?: boolean option
(default true; backward-compatible). Mirrored in React, Vue, and the
<glyph-orbit-controls> custom element per cross-package discipline.

bake-globe.mjs is the source-to-mesh tool; pulls ETOPO1 from a local
etopo/ folder (gitignored), parses NetCDF-3 by hand to avoid OOM on
the ~930 MB uncompressed grid, emits the indexed format consumed by
the landing.
@apresmoi apresmoi merged commit 64978d6 into main May 24, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant