X3DOM vs. ThreeJS – warum der konkrete Anwendungsfall entscheidet.

Heute existieren bereits unzählige Möglichkeiten 3D Modelle in Web-Anwendungen zu visualisieren, ohne dass Nutzer lästige Browser-PlugIns installieren müssen. In dem folgenden Beitrag möchten wir die aktuell wohl beliebtesten 3D-Rendering-Technologien X3DOM und ThreeJS ein wenig näher vorstellen.

Immer mehr Webseitenbetreiber fassen den Entschluss 3D-Inhalte in die eigene Website einzubinden und nach geeigneten Technologien dafür zu suchen. Häufig sind diese durch die Vielzahl der Möglichkeiten heute überwältigt und stellen sich zwangsläufig die Frage, welche der Möglichkeiten am besten zu ihrer individuellen Situation passt. Wir möchten hier zwei Möglichkeiten mit X3DOM und ThreeJS ein wenig näher vorstellen und einander gegenüberstellen.

Grundsätzlich verfolgen beide Technologien das selbe Ziel. 3D-Inhalte wie Bilder oder Videos sollen so einfach wie möglich in das „Alltagsnetz“ eingebunden werden. Allerdings haben diese beiden Technologien ein wenig unterschiedliche Ansätze.

X3DOM

Bei X3DOM handelt es sich um ein HTML5–Framework. Um die eigene Website mit 3D anreichern zu können, muss lediglich eine JavaScript-Datei eingefügt und das HTML–DOM um ein paar Zeilen Code erweitert werden. Die folgenden Beispiele veranschaulichen die recht einfache Handhabung von X3DOM:

Die Beispiele zeigen, dass nur ein paar Zeilen notwendig sind um eine 3D-Szene in eine Website einbinden zu können. Auch komplexere 3D Szenen lassen sich mit X3DOM auch recht unkompliziert umsetzen.

X3DOM basiert auf einem standardisierten und XML-basierten Dateiformat für 3D-Computergrafiken (X3D). Es lässt sich mit ziemlicher Sicherheit konstatieren, dass X3DOM der Versuch ist, X3D direkt in das HTML-DOM-Format zu integrieren.

Mit X3DOM haben Nutzer zusätzlich die Möglichkeit neben den Standardprimitiven (Würfel, Quader) auch die Eckpunkte mit einem Coordinate-Tag und die entsprechenden Indizes mit einem IndexedFaceSet-Tag zu bestimmen, wie es in einer X3D-Tag gemacht werden würde. Es kann sogar direkt eine externe X3D-Datei mit einem Inline-Element integriert werden.
Szenen können auf dieser Basis ganz einfach manipuliert werden, indem DOM-Elemente hinzugefügt, gelöscht oder geändert werden. Dies kann direkt in JavaScript realisiert werden, genau wie bei anderen DOM-Elementen.  Hinzu kommt, dass die meisten HTML-DOM-Ereignisse, wie z.B. „onclick“ auch für X3D-Elemente unterstützt werden.

Im Vergleich zu X3DOM wird zur Erstellung einer 3D-Szene deutlich mehr Code benötigt. Bevor überhaupt irgendetwas angezeigt werden kann, muss zunächst eine Szene, eine Kamera und ein Renderer definiert werden. Neben der klassischen perspektivischen und orthographischen Kamera gibt es noch einige andere Typen, wie z. B. eine Stereokamera für eine stereoskopische Ansicht mit 3D-Brille. Außerdem stehen mehrere verschiedene Renderer zur Auswahl. In dieser Szene wird ein WebGL-Renderer verwendet. ThreeJS bietet aber auch eine Vielzahl anderer Renderer, darunter einige, die ältere Browser unterstützen. Um die Szene schließlich anzuzeigen, verwendet der Renderer ein canvas Element, welches dem HTML-Dokument hinzugefügt werden muss.

Nachdem Szene, Kamera und Renderer initialisiert sind, wird ein Cube bzw. Würfel hinzugefügt. Dazu muss zunächst die Geometrie und das Material definiert werden. Analog zu X3DOM existiert ein Pool von Primitiven, die jederzeit unkompliziert genutzt werden können. Im Beispiel oben wird der BoxGeometry constructor aufgerufen, allerdings können alle Verticles und Faces auch separat konstruiert werden. Zusätzlich zur Geometrie wird für das Objekt auch Oberflächenmaterial benötigt. ThreeJS bietet hier zahlreiche verschiedene vorgefertigte Materialien an. Zu guter letzt benötigen Anwender noch ein Mesh, welches das Material der Geometrie zuordnet.

Nachdem alles bewerkstelligt wurde, kann das Objekt der Szene hinzugefügt werden. Standardmäßig werden die Objekte in der Position 0,00 im Koordinatensystem angelegt, welche auch die Position der Kamera ist. Deshalb muss ein Objekt verschoben werden. Im obigen Beispiel wird die Kamera in Richtung z-Achse bewegt.

Damit der Würfel gedreht werden kann, muss eine Animation erstellt werden. Da ThreeJS ursprünglich für Onlinespiele entwickelt wurde ist die Rendering-Schleife ein grundlegender Bestandteil des Codes. Die Rendering-Schleife rendert die Szene ca. 60 Mal pro Sekunde. In jedem Frame wird der Würfel etwas weiter gedreht.

Im Vergleich zu ersten Beispiel ist das Ergebnis keine interaktive Szene. Der Würfel rotiert von selbst und kann von außen nicht beeinflusst werden. Um einen interaktiven Effekt ähnlich dem X3DOM-Beispiel zu erzeugen, müssten zusätzlich Benutzerinteraktionen implementiert werden.

Ein weiterer Unterschied zu X3DOM ist, dass das vorliegende Beispiel keine Schatten enthält. Diese können durch die Nutzung einer sogenannten shadow map hinzugefügt werden.

Fazit:

Mit X3DOM und ThreeJS stehen Nutzer zwei recht einfache Möglichkeiten zur Verfügung 3D Inhalte in die eigene Website einzubinden. Allerdings unterscheiden sich die beiden Technologien in der Art und Weise der Umsetzung stark voneinander.

Welches besser geeignet ist, hängt vom konkreten Anwendungsfall ab. X3DOM liefert schnelle und gute Ergebnisse und ist somit die perfekte Wahl, wenn 3D-Inhalte schnell in eine HTML-Seite eingefügt werden sollen. Für komplexere Anwendungen ist in der Regel ThreeJS die bessere Wahl. Die Einrichtung dauert zwar länger, bietet aber mehr Möglichkeiten zur Anpassung und kann die 3D-Szene direkt rendern, ohne den Umweg über das DOM zu machen.