NewStar
Eine 3D-Sternenkarte im Browser – mit eigener API, Datenbank und automatischem Deployment.
Eine Web-Anwendung, die rund 15.000 mit bloßem Auge sichtbare Sterne in ihrer echten räumlichen Lage um die Sonne darstellt. Man kann frei durch den Raum navigieren, die Sichtweite einstellen und Sterne anklicken, um die passende Zusammenfassung aus Wikipedia zu lesen. Gebaut als vollständiges System: Svelte- und Three.js-Frontend, Node.js-API mit MongoDB, Docker-Container und automatisches Deployment.
- Kontext
- Studienprojekt, HfG Schwäbisch Gmünd – überarbeitet 2026
- Rolle
- Einzelarbeit – Konzept, Frontend, Backend, Deployment
- Werkzeuge
- Svelte, Three.js, Node.js, Express, MongoDB, Docker, GitHub Actions, Firebase Hosting
- Jahr
- 2024
Leitfrage
„Wie lassen sich Tausende Sterne aus einer astronomischen Datenbank im Browser räumlich erkunden – und mit Wissen verknüpfen?“
Vorgehen
Die Case Studies sind nach dem Double Diamond gegliedert: erst das Problem verstehen und schärfen, dann Lösungen entwickeln und umsetzen.
Discover
Verstehen
- Datenquelle: ATHYG-Sternenkatalog
- Analyse der Felder (Position, Helligkeit, Namen)
Echte 3D-Koordinaten machen eine räumliche Karte möglich.
Define
Definieren
- Funktionsumfang festlegen
- Filter: mit bloßem Auge sichtbare Sterne
Erkunden, Entfernung steuern, Sterne anklicken.
Develop
Entwickeln
- REST-API mit Express und MongoDB
- 3D-Szene mit Three.js und eigenen Shadern
- Anbindung der Wikipedia-API
Frontend und Backend als getrennte Dienste.
Deliver
Umsetzen
- Docker-Container
- CI/CD mit GitHub Actions
- Hosting auf Firebase
Automatisch gebaut und veröffentlicht bei jedem Push.
Discover
Verstehen
Ausgangslage
Ein Katalog, der räumlich gelesen werden will.
Sternenkataloge sind lange Tabellen: Namen, Helligkeiten, Koordinaten. Der ATHYG-Katalog enthält für jeden Stern seine Position im Raum relativ zur Sonne. Daraus entstand die Idee, die Tabelle als begehbaren Raum darzustellen – und jeden Stern mit Wissen zu verknüpfen.
Define
Definieren
Funktionen
Was die Anwendung können sollte.
Frei erkunden
Drehen, zoomen und verschieben mit der Maus, Rücksprung zur Startansicht per Knopf.
Sichtweite steuern
Ein Regler legt fest, wie weit in den Raum geblickt wird.
Sichtbare Sterne
Nur Sterne bis Helligkeit 7 – etwa das, was das bloße Auge sehen kann.
Wissen per Klick
Sterne mit Wikipedia-Eintrag sind gelb markiert; ein Klick zeigt die Zusammenfassung.
Develop
Entwickeln
Architektur
Drei Schichten, klar getrennt.
Datenbank
MongoDB mit den Sterndaten aus dem ATHYG-Katalog.
REST-API
Node.js und Express liefern die Sterne und holen Zusammenfassungen von der Wikipedia-API.
Frontend
Svelte und Three.js stellen jeden Stern als Objekt im Raum dar; eigene Shader lassen sie flimmern und markieren Hover und Wikipedia-Einträge.
Interaktion
Klicken, um zu verstehen.
Per Raycasting erkennt die Anwendung, welcher Stern unter dem Mauszeiger liegt. Fährt man über einen Stern, färbt er sich; ein Klick schickt seinen Wikipedia-Link an die eigene API, die die Zusammenfassung abruft und im Interface einblendet. So wird aus einem Lichtpunkt ein Stern mit Geschichte.
Deliver
Umsetzen
Deployment
Vom Commit zur laufenden Anwendung.
Container
Frontend und API laufen in eigenen Docker-Containern, lokal per docker-compose zusammengeschaltet.
CI/CD
Bei jedem Push baut GitHub Actions die Images und veröffentlicht sie in der GitHub Container Registry.
Hosting
Das Frontend wurde über Firebase Hosting ausgeliefert, die API lief auf einem eigenen Server.
Überarbeitung 2026
Zwei Jahre später: denselben Code besser machen.
2026 habe ich das Projekt erneut aufgegriffen. Die API war nicht mehr online, die Wikipedia-Abfrage scheiterte an geänderten Regeln, und bei 15.000 Sternen ruckelte die Darstellung. Die Überarbeitung behebt das – und macht aus einer funktionierenden Studienarbeit eine Anwendung, die sich gut bedienen lässt.
Was sich geändert hat
Von 15.000 Objekten zu einer Punktwolke.
Performance
Statt eines eigenen 3D-Objekts mit eigenem Shader pro Stern zeichnet eine einzige Punktwolke alle Sterne.
Echte Sternfarben
Größe nach Helligkeit, Farbe aus dem Farbindex über die Oberflächentemperatur berechnet.
Suche und Infokarte
Suche nach 362 benannten Sternen mit Kamerafahrt; Karte mit Entfernung in Lichtjahren, Helligkeit und Wikipedia-Text.
Fehler behoben
Klicks beim Drehen der Kamera und auf Bedienelemente lösen keine Auswahl mehr aus; die Sichtweite lädt keine Daten mehr neu.
Saubere API
Nur benötigte Felder, Health-Check, Cache und korrekte Kennung für Wikipedia; ungenutzter Code entfernt.
Reproduzierbar
Import-Skript für den Katalog, Konfiguration über Umgebungsvariablen und ein docker-compose mit Datenbank, API und Frontend.
Code
Eine Punktwolke statt 15.000 Objekte.
// Ein Eintrag pro Stern: Position, Farbe, Größe
stars.forEach((s, i) => {
positions.set([s.x0, s.y0, s.z0], i * 3);
colors.set(starColor(s.ci), i * 3); // Farbindex → Temperatur → RGB
sizes[i] = Math.max(0.9, 4.2 - s.mag * 0.5); // heller = größer
});
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
const points = new THREE.Points(geometry, new THREE.ShaderMaterial({
uniforms, vertexShader, fragmentShader,
transparent: true,
depthWrite: false,
blending: THREE.AdditiveBlending, // Sterne leuchten, statt sich zu verdecken
}));
scene.add(points);
// Anklicken: Raycasting gegen die Punktwolke statt gegen einzelne Meshes
raycaster.params.Points.threshold = Math.max(0.35, camera.position.distanceTo(controls.target) * 0.008);
const hits = raycaster.intersectObject(points);- Alle Sterne liegen in einem einzigen Geometrie-Puffer. Die Grafikkarte zeichnet sie in einem Durchgang – 2024 waren es noch 15.000 einzelne Objekte mit je eigenem Shader.
- Größe und Farbe kommen aus den Daten: Die Magnitude bestimmt die Größe, der Farbindex B–V wird über die Oberflächentemperatur in eine Farbe umgerechnet.
- Für Klicks wird die Trefferzone mit dem Kameraabstand größer, damit auch weit entfernte Sterne anklickbar bleiben.
Reflect
Reflexion
Reflexion
Ein System lebt nur, solange es gepflegt wird.
Das Projekt hat mir gezeigt, wie viele Teile zusammenspielen müssen, damit eine Idee im Browser ankommt: Daten, API, Frontend, Container und Pipeline. Und es zeigt, dass Software Pflege braucht – externe Dienste ändern ihre Regeln, Server laufen aus.
Mit Abstand auf den eigenen Code zu schauen war lehrreich: Die größte Verbesserung kam nicht von neuen Funktionen, sondern davon, die Darstellung grundlegend anders zu lösen. Als Nächstes würde ich die Anwendung wieder dauerhaft bereitstellen und um Sternbilder als verbundene Linien ergänzen.