Baustelle: Diese Seite ist im Aufbau · noindex · Zugangscode erforderlich.
← Zurück zum Portfolio

Fallstudie · in Arbeit

Habiterra — Blue marble, the habitat of life

Ein ruhiger, wissenschaftlich fundierter 3D-Erd-Explorer — im Browser und in VR — mit echten Klima-, Ozean- und Live-Verkehrs-Layern und einem Deep-Time-Modus zurück bis Pangäa.

three.js WebXR / VR WebGL / GLSL PWA Data-Viz
Habiterra — Blue marble, the habitat of life
Rolle
Solo — Konzept, Design, Engineering, Deployment
Stack
three.js · WebXR · WebGL/GLSL · PWA · Live-Wissenschafts-APIs
Zeitraum
laufend, nebenbei
Jahr
2026
Status
In Arbeit (private Vorschau, passwortgeschützt)

Ein ruhiger, wissenschaftlich fundierter 3D-Explorer der lebendigen Erde — dasselbe Produkt im Browser und in VR — der echte Klima-, Ozean- und Live-Verkehrsdaten über einen astronomisch korrekten Globus legt, mit einem Deep-Time-Modus, der die Kontinente bis Pangäa zurückdreht.

Die Herausforderung

Einen Erd-Explorer bauen, der sich wie ein ruhiges planetarisches Observatorium anfühlt — kein überladenes GIS-Cockpit — und das gleiche Produkt sowohl im Browser als auch in VR auf einer Meta Quest lauffähig machen. Astronomisch korrekt, mit echten wissenschaftlichen Daten (Klima, Ozean, Live-Schiffe/-Flugzeuge/-Satelliten), und dabei lesbar bleiben. Leitregel: Earth first — der Globus ist immer das Hauptobjekt, Panels sind Werkzeuge, nie das Zentrum.

Das Vorgehen

  • Astronomisch korrekter Kern (three.js). Sonne–Erde–Mond nach echten Ephemeriden — 23,44° Achsneigung, exzentrische Bahn, Sternzeit-Rotation, Mondmodell nach Meeus — plus NASA-Blue-Marble-Monatstexturen, sodass die Oberfläche mit den Jahreszeiten wechselt (Schnee im Winter, Vegetation im Sommer), inklusive Topografie und Ozean-Bathymetrie.
  • Eine lebendige Oberfläche. Tag/Nacht-Terminator mit Dämmerungsband und Stadtlichtern, animierte Wellen und Sonnen-Glitzern, eine übertrieben dargestellte Gezeitenhülle mit zwei Flutbergen, die Mond und Sonne folgen (Spring-/Nippflut aus der Elongation).
  • Echtes Wetter & Zirkulation. Ein GPU-Partikel-Windfeld der globalen Zirkulation (Passate, Westwinde, wandernde ITCZ, umkehrender Monsun) mit Windstärke-Farbskala; klassische Blauwasser-Segelrouten, die nur in ihrem günstigen Saisonfenster leuchten. Echte Winde aus Open-Meteo mit Druckmarkern und meteorologischen Windfiedern.
  • Live-Layer, alle am selben Zeitregler. Echte Schiffe (AIS über aisstream.io), Flugzeuge (ADS-B über OpenSky), Satelliten & ISS (TLE/SGP4 über CelesTrak) — Tausende stilisierte, instanzierte Marker, Details erst bei Fokus.
  • „Satelliten-Zoom". Beim Heranzoomen werden Sentinel-2-cloudless-Kacheln (bis ~40 m/Pixel) nachgeladen und mit dem Tag/Nacht-Licht überlagert — Nahsicht weit über 8k bei minimalem Speicher, auch in VR.
  • VR richtig gemacht (WebXR, Quest 3). Keine starren Handgelenk-Menüs: ein bewusst aufrufbares, greifbares, anheftbares schwebendes Panel-System mit Hand- und Controller-Interaktion — ein ruhiges Observatorium, kein Cockpit.
  • Entdeckermodus. Ein eigener Workspace über denselben Layern: freie Achsrotation, Freitextsuche (Länder, Gebirge, Flüsse, Kontinentalplatten) und eine GPlates-gestützte Plattentektonik-Timeline, die die Erde von Pangäa bis heute rekonstruiert — mit Paleo-Points-of-Interest.
  • Als Produkt ausgeliefert. Installierbare PWA (Manifest + Service Worker) auf dem Weg in den Meta-Horizon-Store.

Das Ergebnis

  • Ein kohärentes Produkt über Browser und VR hinweg, mit fünf Bereichen — Time, Earth, Ocean, Traffic, Climate — und einer strikten „nur ein Focus-Layer gleichzeitig"-Regel, die es lesbar hält.
  • Echte Live-Wissenschaftsdaten (NASA, NOAA/NSIDC, CelesTrak, Open-Meteo, OpenSky, AIS) in einer einzigen ruhigen Oberfläche.
  • Dieselbe Informationsarchitektur in beiden Modi; performant genug für Tausende Live-Objekte via instanced Rendering.
  • In 10 Sprachen lokalisiert (inkl. Rechts-nach-links-Arabisch), auf dem Weg in den bezahlten Meta-Horizon-Store.

Was das zeigt

  • Echte Tiefe über 3D-Grafik (eigene Shader), Echtzeit-Datenintegration (viele Live-APIs) und WebXR/VR — von A bis Z.
  • Einen riesigen Funktionsraum durch disziplinierte Informationsarchitektur in ein ruhiges, lesbares Produkt verwandeln.
  • Volle Verantwortung: Konzept, Design, Entwicklung, Performance, Deployment.
  • Moderne, KI-gestützte Umsetzung, die einen ambitionierten Anspruch schnell in laufende Software verwandelt — vom Menschen gesteuert und kuratiert.

Technik auf einen Blick

three.js · WebXR (Meta Quest 3) · WebGL / GLSL · PWA · satellite.js (SGP4) · NASA Blue Marble / GIBS · GPlates · Open-Meteo · OpenSky (ADS-B) · AIS · Sentinel-2 cloudless (EOX)