3D Modelle im Browser

Bewerten
Noch keine Be­wer­tun­gen abgegeben.

Anzeige und Bearbeitung von 3D-Modellen war lange Zeit kein Thema für Web-Entwickler. Ein Grund war sicher die mangelnde Unterstützung durch gängige Browser. Wer eine Website besucht, erwartet auch 2016 noch zweidimensionale Formulare. 3D wird nur für Spezialanwendungen und Spiele gebraucht – dafür gibt es spezialisierte Plug-ins.

Mit Virtual oder Augmented Reality und besseren Grafikkarten hat eine positive Entwicklung stattgefunden: Gängige Browser wie Chrome und  IE11 unterstützen nun nativ WebGL und damit das Einbinden von 3D-Modellen. Hier kommt x3dom ins Spiel. Mit dieser Library werden X3D-Modelle direkt in HTML integriert. X3D ist das Nachfolgeformat von VRML. Eine Konvertierung in X3D ist problemlos aus beliebigen Formaten mit CAD-/CAM-Werkzeugen oder 3D-Designern wie Blender durchführbar.

Der Umgang mit 3D-Modellen erfolgt damit so, wie es Entwickler mit Web-Technologien von Standard-Webseiten gewohnt sind.  Die einzelnen Teile des Modells bestehen aus HTML-Tags mit Attributen. Änderungen von Position, Drehung oder Farbe eines Teils des Modells geschieht genauso, wie die Änderung einer Eigenschaft eines Steuerelements auf einer zweidimensionalen Seite: über simple DOM-Bearbeitung mit JavaScript. Auch Erweiterungen des Modells sind denkbar einfach. Um etwa eine Kugel zu einem 3D-Modell hinzuzufügen, reicht es, in dieselbe Szene einen <Sphere>-Tag hinzuzufügen. Soll die Position des einzufügenden Teils über einen Mausklick bestimmt werden, berechnet x3dom die xyz-Koordinaten. Dies wird über ein Attribut des dazugehörenden <Transform>-Knotens festgelegt.

Für Anwendungen in der Automobilindustrie haben wir eine JavaScript Library entwickelt, um mit x3dom 3D-Modelle von Fahrzeugen zu bearbeiten. Darauf können Marker mit Beschreibungen gesetzt werden, wie dies etwa bei der Qualitätsprüfung notwendig ist. Diese Marker lassen sich mit Beschreibungen wie Teilezuordnung, Fehlercodes und xyz-Koordinaten als JSON-Objekte ex- und importieren. Zusätzlich gibt es die Möglichkeit, das Modell einzufärben, also etwa eine Verteilung der Fehlerhäufigkeit in Form einer Heatmap. Darüber hinaus lassen sich einzelne Teile des 3D-Modells ein- und ausblenden.

Umgesetzt haben wir das Ganze als JavaScript Library hedgehog.js. Darin ist eine Klasse definiert, die im <Script>-Teil der Seite instanziiert werden kann. Nach Einbinden der Datei zusammen mit x3dom.js können Events beliebiger Steuerelemente mit den entsprechenden Funktionen verbunden und angegeben werden, in welchem <div> das Modell angezeigt werden soll.

CodeSnippet2

Damit die Seite auf Web-Servern funktioniert, muss dort als MimeType auch x3d zurückgegeben werden können, was in ASP.NET in der Web.Config definiert wird.

Da für die Anwendung der Library nur die beiden JavaScript-Dateien x3dom.js und hedgehog.js notwendig sind, ist der Einsatz überall mit Web-Technologien und modernen Browsern möglich. Besonders interessant ist dies im Zusammenhang mit Qlik Sense-Extensions, mit denen sich die Daten des bearbeiteten 3D-Modellen live auswerten lassen. Durch die Kombination von 3D-Modell und Live-Auswertung werden Informationen kompakt sowie in einer natürlichen und verständlichen Form aufbereitet.

Zurück