Produktdesign · 3D · Full-Stack · 2026
Elbe LiveDer Hamburger Hafen, live.
Ein Live-Blick auf einen der größten Häfen Europas — Hamburg aus dem amtlichen 3D-Stadtmodell gezeichnet, jedes Handelsschiff auf der Elbe in Echtzeit.
Ich habe das ganze Produkt gestaltet und entwickelt — die Bildsprache, die 3D-Szene, einen Kontrollturm auf meinem eigenen Server, der die Schiffe empfängt, und das Interface darüber.
Hamburg, Kante für Kante aus dem eigenen 3D-Modell der Stadt nachgezeichnet. Die farbigen Rümpfe sind echte Schiffe, genau jetzt.
Warum ein Hafen
Hamburg lebt vom Hafen, doch die meisten sehen ihn nur vom Ufer. Jedes große Schiff sendet Position, Tempo und Ziel per Funk, und die Stadt veröffentlicht ein detailliertes 3D-Modell jedes Gebäudes. Die Daten sind offen. Es fehlte ein Blick, der sie auf einen Blick lesbar macht — näher an einer Architektenzeichnung als an einer Karte.
Was man sieht
| Ebene | Was man sieht |
|---|---|
| Die Stadt | Jedes Gebäude nur mit seinen Kanten. Nahe der Kamera in voller Detailtiefe — Dächer, Türme, Gauben; weiter weg ein leichteres Modell. |
| 13 Wahrzeichen | Elbphilharmonie, Millerntor, Volksparkstadion, Rathaus, Michel, Chilehaus und mehr. Sie leuchten beim Überfahren auf, jedes hat einen eigenen Button. |
| Schiffe | Maßstabsgetreue 3D-Rümpfe nach Typ, zehn Minuten Kielwasser, Namen und eine Karte mit Tempo, Kurs, Größe und Ziel. |
| Der Hafen auf einen Blick | Schiffe in Fahrt nach Typ, das gerade einlaufende Schiff mit seiner Zeit bis zur Stadt, das größte und das schnellste im Hafen. |
| Der Fluss | Pegel St. Pauli der letzten zwölf Stunden; Wind, Böen und Sicht. Wasser, Anleger, Brücken, Parks und Straßenkanten vervollständigen den Plan. |
Ein Schiff antippen, und seine Karte erscheint daneben — halbtransparent, damit die Karte sichtbar bleibt.
Jedes Wahrzeichen wird im detailliertesten Modell der Stadt geladen. Die Elbphilharmonie behält ihr Wellendach, Linie für Linie.
Designentscheidungen
Linien statt Fotos. Zuerst baute ich eine fotografische Version aus dem Luftbild-Mesh der Stadt. Von nah wirkte sie verpixelt, also zeichnete ich die Stadt als Linien: scharf in jeder Entfernung und viel leichter zu laden.
Echter Maßstab, Farbe nach Typ. Ein 400 Meter langes Containerschiff wirkt 400 Meter lang. Farbe hat nur eine Bedeutung — Fracht, Tanker, Passagiere, Service — und die Legende im Panel zählt sie live.
Das Panel beantwortet die Fragen eines Hafens. Es listet keine Datenquellen auf: Es zeigt, was sich bewegt, was einläuft und wie hoch das Wasser steht.
Ruhig von Anfang an. Schiffsnamen erscheinen erst aus der Nähe und verschwinden hinter Gebäuden. Kein Zoomsprung beim Antippen eines Buttons: Die Kamera gleitet und behält den Blickwinkel.
Technik: die schwierigen Stellen
| Problem | Meine Lösung |
|---|---|
| Schiffe lassen sich nicht aus dem Browser empfangen | Ein kleiner Kontrollturm auf meinem Server hält die einzige Verbindung zum AIS-Strom, merkt sich jedes Schiff (jede Minute gespeichert) und liefert alle paar Sekunden ein leichtes JSON. |
| Eine ganze Stadt im Browser | Hamburg wird in Kacheln geladen: nah detailliert, weiter weg einfach, hinter dem Nebel nichts. Mein Server komprimiert die Kacheln unterwegs — von 160 auf 48 MB. |
| Flüssig, während es lädt | Die schwere Arbeit für jedes neue Stück Stadt läuft in Hintergrund-Workern. Die Szene zeichnet nur bei Bedarf und senkt die Auflösung leicht, solange sich die Kamera bewegt. |
| Schiffe zwischen zwei Signalen | Jedes Schiff gleitet entlang Kurs und Tempo bis zum nächsten Signal, nichts springt. |
| Der Boden ist nicht flach | Straßen, Parks und Anleger liegen auf der Höhe der nächsten Gebäudesockel, gemessen am Modell selbst. |
Von nah: die Pontons der Landungsbrücken, Straßenkanten und anlegende Fähren.
Offene Daten, verantwortungsvoll genutzt
| Daten | Quelle |
|---|---|
| 3D-Gebäude und Brücken | Freie und Hansestadt Hamburg, LGV (dl-de/by-2-0) |
| Schiffe (AIS) | aisstream.io |
| Wasser, Anleger, Straßen, Parks | OpenStreetMap-Mitwirkende (ODbL) |
| Pegel · Wetter | PEGELONLINE (WSV) · Deutscher Wetterdienst |
Gezeigt werden nur Handelsschiffe; private Segel- und Sportboote filtert der Server heraus. Der Zugangsschlüssel erreicht nie den Browser, und über Besucher wird nichts gespeichert.
Auf dem Handy rückt das Panel nach unten, und die Stadt behält den Bildschirm.