In den letzten Jahren sind die Fähigkeiten moderner Webbrowser exponentiell gewachsen. Technologien wie WebAssembly und leistungsfähige Grafik-APIs wie WebGL2 und WebGPU haben die Möglichkeiten von Webanwendungen grundlegend verändert. Parallel dazu haben Fortschritte in der Konnektivität und die stetig wachsenden Übertragungsgeschwindigkeiten es ermöglicht, Datenmengen zu verarbeiten, die noch vor Kurzem undenkbar waren. Angesichts dieser Entwicklungen haben sich zahlreiche Technologien, die lange als experimentell galten, in den letzten Jahren zu produktiven Standards etabliert.

Der aktuelle Aufschwung digitaler Zwillinge ist ein anschauliches Beispiel dafür, wie dieser technologische Wandel die Welt der Webkarten verändert hat. Klassische Kartendienste, die auf vorgerenderten Rasterbildern basieren, wirken heute zunehmend unzureichend. Moderne Webkarten profitieren immer stärker von optimierten Datenübertragungsmethoden wie Vektorkacheln, die es ermöglichen, große Datenmengen effizient im Browser zu verarbeiten und dynamische Stile anzuwenden, die das Visualisierungserlebnis bereichern. Zudem erfordert die wachsende Verfügbarkeit dreidimensionaler Daten – vorangetrieben durch die Standardisierung von Formaten und die zunehmende Zugänglichkeit von Erfassungsgeräten – effiziente und flüssige Implementierungen in Webanwendungen.

Diese Zukunft, über die so lange spekuliert wurde, ist endlich da. Um den neuen Anforderungen moderner Kartenanwendungen gerecht zu werden, haben wir unsere deklarative React-Bibliothek MapComponents erweitert und neben unserem auf MapLibre basierenden Basispaket zwei neue Pakete veröffentlicht: @mapcomponents/deck-gl und @mapcomponents/three. Diese Pakete erweitern das Komponentenangebot von MapComponents, ermöglichen die Einbindung neuer Datenquellen und bieten komplexere Visualisierungen. Dabei bleibt der Grundgedanke der Bibliothek erhalten: leistungsfähige und vielseitige Kartenanwendungen aus einfachen, flexiblen und nutzerorientierten Komponenten zu entwickeln.

Im Folgenden stellen wir einige Details vor und geben einen Überblick über das, was diese Pakete in ihrem ersten Release bieten.

deck.gl: GPU-gestützte Visualisierung, nahtlos integriert mit MapLibre

deck.gl ist ein von der OpenJS Foundation betreutes Open-Source-Framework zur explorativen Analyse und Visualisierung großer Datenmengen. Es setzt auf einen schichtbasierten Ansatz und nutzt WebGL2/WebGPU für ein effizientes Rendering auch unter hoher Datenlast. Das Framework bietet zwar eine eigene Unterstützung für Datenquellen wie GeoJSON, WMS und Vektorkacheln und kann somit grundsätzlich als eigenständige Kartenengine fungieren – allerdings sind diese Funktionen im Vergleich zu spezialisierten Kartenbibliotheken wie MapLibre, OpenLayers oder Mapbox deutlich eingeschränkter. Die Stärke von deck.gl liegt vielmehr in der Integration mit solchen Frameworks: Es ergänzt sie um spezialisierte Layer zur Visualisierung komplexer und/oder sehr umfangreicher Daten.

In einem früheren Blogartikel haben wir bereits Beispiele für die Integration von deck.gl und MapComponents gezeigt. Am Ergebnis hat sich nichts geändert – doch mit dem neuen Paket @mapcomponents/deck-gl ist der Weg dorthin deutlich einfacher geworden. Bisher musste der Nutzer die deck.gl-Instanz eigenständig verwalten, ein MapboxOverlay erzeugen und es manuell an die von MapComponents bereitgestellte MapLibre-Instanz koppeln. Jetzt übernimmt die Bibliothek diese Integration. Der Nutzer muss lediglich:

1. Den DeckGlContextProvider einmalig in der Anwendung registrieren:

2. Die gewünschten Komponenten hinzufügen und mindestens die erforderlichen Felder definieren:

Der Layer-Katalog von deck.gl ist sehr umfangreich. In diesem ersten Release haben wir uns auf die zentralen Komponenten für den Aufbau digitaler Zwillinge konzentriert. Sukzessive wird MapComponents weitere deck.gl-Komponenten integrieren, um das Angebot zu erweitern. Wir freuen uns dabei über die Mitarbeit unserer Community auf GitHub sowie über konkrete Anfragen und Wünsche der Nutzer.

Three.js: Ein Paket zur Erweiterung des Möglichkeitshorizonts

Während deck.gl bereits leistungsstarke Optionen zum Rendern von 3D-Objekten auf der Karte bietet, erweitert das neue Paket @mapcomponents/three basierend auf Three.js die Möglichkeiten deutlich. Es öffnet die Tür zu reichhaltigeren Animationen, realistischeren Szenen und fortgeschrittenen 3D-Interaktionen.

Der Kern des Pakets ist der ThreeProvider, der eine Three.js-Szene, Kamera und Renderer initialisiert und als Custom Layer in der MapLibre-Karte registriert. Aktuell ermöglicht die Komponente MlThreeModelLayer das Laden und Platzieren von 3D-Objekten ohne explizite Georeferenzierung. Unterstützte Formate sind .glb und .obj (nur Geometrie):

Im Unterschied zum MlSceneGraphLayer von deck.gl benötigt diese Komponente keine vorher georeferenzierten Daten: Die Modelle können frei in der 3D-Szene platziert und transformiert und anschließend visuell mit der Karte abgeglichen werden.
Eine zweite Komponente, MlThreeSplatLayer, befindet sich in der experimentellen Phase und ermöglicht das Laden von Gaussian Splats direkt auf der Karte – eine innovative Technik, die effizient Fotorealistische Darstellung Dreidimensionaler Objekte und Scenen ermöglicht.

Obwohl sich das Paket noch in einer frühen Phase befindet, ist @mapcomponents/three darauf ausgelegt, eine Brücke zu BIM/CAD- und Digital Content Creation-orientierten Formaten zu schlagen. Beispiele hierfür sind .fbx, Collada (.dae), STL, 3DS und weitere. Zudem soll das Paket neuartige Darstellungsformen wie Gaussian Splats unterstützen. Damit ergänzt es die deck.gl-Integration, die sich primär auf glTF/GLB und datengetriebene Visualisierungen konzentriert, um vielfältigere 3D-Inhalte und Arbeitsabläufe auf MapLibre.