Eintauchen in die dritte Dimension, 3D im Browser

Wie Mathias in seinem Blog bereits erwähnt hat, gibt es mittlerweile schon unzählige Möglichkeiten um 3D Modelle im Web zu visualisieren ohne dabei lästige Browser-Plugins installieren zu müssen. In diesem Blog geht es um die zwei wohl bekanntesten Technologien für 3D Rendering im Web: X3DOM und ThreeJS.

Wenn man sich einmal dazu entschließt, einen 3D Inhalt in seine Website einzubauen und sich auf die Suche nach einer passenden Technologie macht, ist man mit den unterschiedlichen Möglichkeiten schnell überfordert und fragt sich, welche wohl am besten für die eigenen Ansprüche geeignet ist. Mit sehr hoher Wahrscheinlichkeit befinden sich unter den in Betracht gezogenen Technologien X3DOM und ThreeJS.

Die beiden Projekte haben dasselbe Ziel, nämlich 3D Szenen genauso einfach und unkompliziert in das „alltägliche Web“ zu integrieren, wie es bereits mit Bildern, Videos oder SVG-basierenden 2D Grafiken der Fall ist. Dabei verfolgt jede der beiden Libraries unterschiedliche Ansätze.

X3DOM

X3DOM ist ein HTML5 Framework und alles was du tun musst um deine Seite um eine 3D Szene zu bereichern, ist ein JavaScript-File zu inkludieren und dein HTML DOM um einige Zeilen Code zu erweitern. Klingt sehr einfach und das ist es meist auch, wie dieses simple Beispiel zeigt:

<x3d>
      <scene>
            <shape>
                  <appearance> 
                        <material diffuseColor="1 0 0"></material>
                  </appearance>
                  <box></box>
            </shape>
       </scene>
</x3d>

 

3d mit x3dom
Wie du siehst, benötigt es sehr wenige Zeilen Code um eine 3D Szene in deine Website zu integrieren. In diesem Beispiel ist es zwar bloß ein simpler Würfel doch bei komplizierteren Szenen verhält es sich ähnlich einfach. Wie du vielleicht schon erkannt hast, basiert X3DOM auf X3D, einem standardisierten XML-basierenden File-Format für 3D Computer Grafik. Man könnte sogar sagen, dass es sich bei X3DOM um den Versuch handelt, X3D direkt in das HTML-DOM Format zu integrieren. Neben den angebotenen Primitiven wie Box (Würfel, Quader), Cone (Kegel) und Sphere (Kugel) gibt es auch die Möglichkeit die Punkte der Vertices mit einem -Tag und die jeweiligen Indizes mit einem -Tag anzugeben, wie es in einem X3D File der Fall ist. Man kann auch ganz bequem ein externes X3D File mit einem Element integrieren.

Seine Szene kann man ganz leicht durch Hinzufügen, Entfernen oder Modifikation der DOM Elemente manipulieren. Dies geschieht in JavaScript ganz genauso wie du es auch von anderen DOM Elementen wie <div> oder <p> gewohnt bist. Es werden auch die meisten HTML DOM-Events, wie zB „onclick“ für die X3D Elemente unterstützt.

ThreeJS

Im Gegensatz zu X3DOM ist ThreeJS eine klassische JavaScript Library und ist auf keinen konkreten 3D-Standard angewiesen. Um 3D Inhalte anzuzeigen, wird nicht das DOM erweitert, sondern per JavaScript Code in einem HTML5-Canvas gezeichnet. Hier ein simples Beispiel, das einen rotierenden Cube anzeigt:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,f1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

var animate = function () {
	requestAnimationFrame( animate );

	cube.rotation.x += 0.1;
	cube.rotation.y += 0.1;

	renderer.render(scene, camera);
};

animate();

3d mit threejs

Wie du siehst, benötigt man etwas mehr Code um eine Szene zu erstellen. Damit du überhaupt etwas anzeigen kannst musst du zu Beginn eine Szene, Kamera und einen Renderer definieren. Neben der klassischen perspektivischen und orthographischen Kamera gibt es noch einige andere Kameratypen wie zum Beispiel eine Stereo-Camera für eine stereoskopisches Anzeige mit 3D Brille. Es stehen auch mehrere unterschiedliche Renderer zur Auswahl. In dieser Szene wird ein WebGLRenderer verwendet, Threejs bietet aber auch noch Render an, die zum Beispiel bei älteren Browsern funktionieren. Um die Szene letztendlich anzeigen zu können, nutzt der Renderer ein <canvas> Element (renderer.domElement), das man zum HTML Dokument hinzufügen muss.

Nachdem Szene, Kamera und Renderer initialisiert sind, fügen wir noch einen Cube hinzu. Dafür muss man zuerst Geometrie und Material definieren. Wie bei X3DOM gibt es ein Pool an Primitiven (der bei Threejs deutlich größer ist als bei X3DOM), die man leicht hinzufügen kann. Hier wird zum Beispiel der BoxGeometry Konstruktor aufgerufen, man kann aber auch alle Vertices und Faces separat erzeugen. Neben der Geometrie braucht man auch ein Material für die Oberfläche des Objekts. Threejs bietet auch hier mehrere vorgefertigte Materialien an. In dieser Szene wird ein simples BasicMaterial verwendet, dem bloß eine Farbe als Attribut mitgegeben wird. Als Letztes wird ein Mesh benötigt, das einer Geometrie ein Material zuweist.

Nachdem das geschafft ist, kann man das Objekt endlich der Szene hinzufügen. Da Objekte standardmäßig auf der Position 0,0,0 im Koordinatensystem erzeugt werden, auf der sich auch die Kamera befindet, muss man eines der beiden verschieben. In diesem Fall wird die Kamera entlang der Z-Achse verschoben.

Um das ganze etwas aufzupeppen, erzeugen wir noch eine Animation, die den Cube dreht. Da Threejs ursprünglich für Web-Spiele entwickelt wurde, ist die Render-Schleife ein grundlegender Bestandteil des Codes. Der Render-Loop rendert die die Szene circa 60 mal pro Sekunde. Bei jedem Frame wird der Würfel ein wenig weiter gedreht.

Bei dem Ergebnis handelt es sich, im Gegensatz zum ersten Beispiel, nicht um eine interaktive Szene. Der Cube dreht sich von alleine und lässt sich nicht von außen beeinflussen. Um eine ähnliche Szene wie bei x3DOM zu erreichen, müsste man die User-Interaktionen extra implementieren.

Ein weiterer Unterschied zum Beispiel mit X3DOM ist, dass beim Threejs Beispiel keine Schatten geworfen werden. Dies könnte man durch Verwendung einer Shadow Map (auch dafür gibt es mehrere Implementierungen) lösen.

Fazit

Mit X3DOM und Threejs fällt es sehr leicht, 3D Inhalte in seine Webseite einzubauen. Dabei verfolgen die beiden Projekte aber unterschiedliche Ansätze. Je nach Anwendungsfall muss unterschieden werden, welche Technologie besser geeignet ist. Während X3DOM schnell ansehnliche Ergebnisse erzeugt und extrem gut geeignet ist, um „mal eben“ ein 3D-Objekt in die HTML Seite einzufügen, ist bei komplexeren Anwendungsfällen wahrscheinlich das etwas aufwändig aufzusetzende Threejs besser geeignet, da die Anpassungsmöglichkeiten umfangreicher sind und die Szene direkt gerendert wird, ohne den „Umweg“ über das DOM zu gehen.

 

Mehr Tech-News gefällig? Melde dich doch für unseren monatlichen Newsletter an! Element (renderer.domElement), das man zum HTML Dokument hinzufügen muss.
Nachdem Szene, Kamera und Renderer initialisiert sind, fügen wir noch einen Cube hinzu. Dafür muss man zuerst Geometrie und Material definieren. Wie bei X3DOM gibt es ein Pool an Primitiven (der bei Threejs deutlich größer ist als bei X3DOM), die man leicht hinzufügen kann. Hier wird zum Beispiel der BoxGeometry Konstruktor aufgerufen, man kann aber auch alle Vertices und Faces separat erzeugen. Neben der Geometrie braucht man auch ein Material für die Oberfläche des Objekts. Threejs bietet auch hier mehrere vorgefertigte Materialien an. In dieser Szene wird ein simples BasicMaterial verwendet, dem bloß eine Farbe als Attribut mitgegeben wird. Als Letztes wird ein Mesh benötigt, das einer Geometrie ein Material zuweist.
Nachdem das geschafft ist, kann man das Objekt endlich der Szene hinzufügen. Da Objekte standardmäßig auf der Position 0,0,0 im Koordinatensystem erzeugt werden, auf der sich auch die Kamera befindet, muss man eines der beiden verschieben. In diesem Fall wird die Kamera entlang der Z-Achse verschoben.
Um das ganze etwas aufzupeppen, erzeugen wir noch eine Animation, die den Cube dreht. Da Threejs ursprünglich für Web-Spiele entwickelt wurde, ist die Render-Schleife ein grundlegender Bestandteil des Codes. Der Render-Loop rendert die die Szene circa 60 mal pro Sekunde. Bei jedem Frame wird der Würfel ein wenig weiter gedreht.
Bei dem Ergebnis handelt es sich, im Gegensatz zum ersten Beispiel, nicht um eine interaktive Szene. Der Cube dreht sich von alleine und lässt sich nicht von außen beeinflussen. Um eine ähnliche Szene wie bei x3DOM zu erreichen, müsste man die User-Interaktionen extra implementieren.
Ein weiterer Unterschied zum Beispiel mit X3DOM ist, dass beim Threejs Beispiel keine Schatten geworfen werden. Dies könnte man durch Verwendung einer Shadow Map (auch dafür gibt es mehrere Implementierungen) lösen.