3D Visualisierung im Browser

3D Darstellungen für die Augmented Reality habe ich im Beitrag „AR/IoT-Prototyp: IoT in Verbindung mit Augmented Reality“ bereits vorgestellt. Aber auch schon im normalen Webbrowser können 3D unterstützte Visualisierungen eingesetzt werden.
Als kurze Einführung, wie ein 3D Modell aufgebaut ist, soll das doubleSlash-Logo dienen:

Ein Modell besteht aus vielen Punkten, die mit Linien verbunden werden (rechts im Bild sichtbar). Mindestens drei dieser Linien bilden eine Fläche des Modells. Dadurch bekommt das Modell die gewünschte Form. Den Flächen werden Farben zugewiesen, um sie wie gewünscht einzufärben (links im Bild sichtbar).

Anhand dieser Informationen kann das Modell dargestellt und mit gewünschten Funktionen animiert werden. Folgend am Beispiel des doubleSlash-Logos präsentiert:

Umgesetzt ist dieses Beispiel mit dem JavaScript Framework three.js [1]. Dieses Framework haben wir bei doubleSlash schon in mehreren Projekten aufgrund seiner Leichtgewichtigkeit erfolgreich eingesetzt.

Vorteile der browserbasierten 3D Visualisierung

• Mit 3D-Unterstützung kann man manche Dinge für den Nutzer anschaulicher visualisieren. Usecases können dazu sehr unterschiedlich sein. Ein Beispiel ist ein Produktkonfigurator der dem Nutzer live sein konfiguriertes Produkt zeigt. Ein anderes könnte die Darstellung von Punktwolken sein, die z.B. von einem LiDAR erzeugt werden.
• Der Nutzer hat viele Freiheiten, weil er mit der Visualisierung interagieren kann. So kann er sich zum Beispiel das Modell aus verschiedenen Winkeln ansehen.
• Die Anwendung läuft im Browser und ist daher plattformübergreifend [2] verwendbar.

Wir setzen 3D Visualisierungen aktuell vor allem in Mobility- und IoT-Projekten ein, um Gerätedaten live darzustellen.
Die folgenden Links zeigen verschiedene Beispiele, basierend auf dem three.js Framework:

• featured projects threejs.org
• geografische Daten www.itowns-project.org/itowns/examples/

Es sind viele Anwendungsfälle realisierbar: Von einer eher abstrakten oder realistischen Darstellung, über seitenfüllend bis hin zu eingebettet in Text (wie im Beispiel oben).

Alternativen zum three.js Framework sind zum Beispiel Game Engines wie die Unity Game Engine. Diese kann auch Content für den Browser erzeugen. Diese Engines haben höhere Leistungsanforderungen, sind aber auch mächtiger im Funktionsumfang als eine Anwendung mit z.B. three.js. Aktuell werden auf Grund dessen Browser-Applikationen nicht auf mobilen Endgeräten unterstützt [3]. Der Technologie-Einsatz muss daher nach Anwendungsfall entschieden werden.

Wo könnten Sie sich eine 3D-Visualisierung (in Ihrem Unternehmen?) vorstellen?

Quellen