Eine neue Dimension im Web

Wenn Sie sich eine Webseite vorstellen, dominieren vermutlich Text, farbige Flächen und Fotos dieses Bild. Aber schon seit einigen Jahren sind alle gängigen Browser in der Lage auch komplexe 3D-Objekte darzustellen. Diese Technik nennt sich WebGL (Web Graphics Library) und kann mit der Skriptsprache JavaScript angesteuert werden. Da dies aber leistungsstarke Endgeräte voraussetzt und die Programmierung einiges an Geduld abverlangt, traf man 3D auf Webseiten bisher eher selten an.

Illustration WebGL Arbeitsschritte, Polycontact

Der herkömmliche Weg

Erst einmal sollten wir klären, wie herkömmliche Webseiten aufgebaut sind.

Wir möchten ein blaues Quadrat von je 50 Pixel Breite und Höhe, das 100 Pixel vom oberen und linken Rand platziert ist, erstellen. Der erste Schritt besteht nun darin, ein Element zu erzeugen. Das machen wir mit der Sprache HTML (Hyper Text Markup Language). Dazu nehmen wir hier das Allrounder-Element <div> und geben dem die ID, den Namen, „element“.

<div id="element"></div>

Würden wir das jetzt im Browser aufrufen, sähen wir nichts als gähnende Leere. Das Element ist zwar vorhanden, hat aber weder Breite, Höhe noch sonstwelche grafischen Ausprägungen. Dafür müssen wir auf die Gestaltungssprache des Internets, CSS (Cascading Style Sheets), zurückgreifen.

Wir steuern das Element mit der eben definierten ID an und geben ihm das gewünschte Aussehen.

#element{
  position: absolute;
  left: 100px;
  top: 100px;
  width: 50px;
  height: 50px;
  background: blue;
}

Sehen wir uns das Ergebnis an:

See the Pen clus.ch WebGL Blog 1 by Adabs Urdum (@adabs-urdum) on CodePen.

Und jetzt in 3D

Sehr gut. Und jetzt vergessen wir alles, was wir gerade gemacht haben. Wenn wir in die dritte Dimension wollen, müssen wir komplett umdenken, denn diese orientiert sich viel mehr an der realen Welt.

Anstelle des Quadrats wollen wir jetzt einen Würfel (weil 3D) darstellen.

Reines WebGL mit Javascript zu schreiben, ist extrem aufwändig und kompliziert. Glücklicherweise wurden von der Internet-Community mit der Zeit Bibliotheken (Sammlungen an Funktionen) wie Babylon.js oder Three.js entwickelt. Diese erleichtern den Umgang soweit, dass es nicht mehr extrem kompliziert, sondern nur noch aufwändig ist.

In den folgenden Beispielen werden wir Babylon.js verwenden, da es (meiner Meinung nach) um einiges intuitiver ist, als Three.js.

Anstelle des vorhin verwendeten <div> Elements, nehmen wir jetzt ein <canvas> Element, geben dem eine ID und definieren das Seitenverhältnis durch die Höhe und Breite des Elements. Eine Canvas ist quasi eine weisse Leinwand, auf die man mit Hilfe von Javascript „malen“ kann.

<canvas id="babylon" width="640" height="360"></canvas>

Mit Javascript greifen wir uns die eben erstellte Canvas. Danach weisen wir Babylon.js an, diese Canvas zu verwenden und darin eine Szene, eine „Welt“, zu erstellen.

const canvas = document.getElementById('babylon');
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);

Jetzt fügen wir der Szene einen Würfel mit der Breite und Höhe 50 hinzu. Dabei kommt hier eine abstrakte Grösseneinheit zum Tragen. Wie bereits erwähnt, bewegen wir uns nicht in der herkömmlichen Pixel-Welt. Diese 50 sind keine Pixel, sondern 50 Einheiten. Der Einfachheit halber können wir uns einen Würfel mit 50 Meter Höhe und Breite vorstellen.

const wuerfel = BABYLON.MeshBuilder.CreateBox("wuerfel", {size: 50}, scene);

Nun erstellen wir eine blaue Oberfläche, ein sogenanntes Material, und legen es über den Würfel.

const wuerfelOberflaeche = new BABYLON.StandardMaterial("wuerfelOberflaeche", scene);
wuerfelOberflaeche.diffuseColor = new BABYLON.Color3(0,0,1);
wuerfel.material = wuerfelOberflaeche;

Das wars. Möchte man denken. Aber da wir uns in einer „realen“ Welt bewegen, wars das noch nicht.

Stellen Sie sich vor, dass unsere Canvas die kleine Abstellkammer Ihres Domizils ist. Da haben wir gerade einen blauen Würfel hineingelegt. Was brauchen wir um den Würfel wahrzunehmen?

Genau. Licht und Augen.

Erstellen wir also zuerst ein Licht, positionieren es 100 Meter über dem Würfel und färben es weiss ein.

const licht = new BABYLON.HemisphericLight("licht", new BABYLON.Vector3(0, 100, 0), scene);
licht.diffuse = new BABYLON.Color3(1, 1, 1);

Jetzt fügen wir der Szene noch Augen, oder in unserem WebGL Kontext, eine Kamera, hinzu. Wir positionieren diese Kamera 100 Meter vor dem Würfel und richten sie auf ebendiesen. Ausserdem sagen wir der Kamera, dass sie auf Input, also Klick, Touch oder Zoom reagieren soll.

const kamera = new BABYLON.ArcRotateCamera("kamera", 0, 0, 100, wuerfel.position, scene);
kamera.attachControl(canvas, true);

Zu Demonstrationszwecken (und weils Spass macht) lassen wir unseren Würfel noch um 1 Grad um die eigene Achse pro Frame rotieren. Ein Frame ist die Geschwindigkeit mit der der Browser unseren Würfel darstellen kann. Leistungsstarke Geräte können unseren Code sehr schnell berechnen und sind in der Lage, unsere Szene beispielsweise 60 mal pro Sekunde neu zu berechnen. Somit dreht sich unser Würfel jede Sekunde 60 Mal um ein Grad. Schwache Geräte schaffen vielleicht nur 20 Berechnungen pro Sekunde und somit nur 20 Mal ein Grad in einer Sekunde.

engine.runRenderLoop(() => {
  wuerfel.rotation.z += Math.PI / 180;
  scene.render();
});

Hier also das Ergebnis unseres kleinen Code Abenteuers. Wenn man auf den Würfel klickt, geklickt hält und zieht, kann man die Kamera um diesen herum navigieren.

See the Pen clus.ch WebGL Blog 2 by Adabs Urdum (@adabs-urdum) on CodePen.

Cool, aber was bringt das?

Wir haben in diesen paar Zeilen die Möglichkeiten von WebGL nicht einmal ansatzweise angekratzt. Beispielsweise können die für die Produktion von realen Objekten verwendeten CAD-Daten umgewandelt und im Web dargestellt werden, wie wir es für Polycontact gemacht haben. WebGL unterstützt ausserdem auch WebVR und WebAR, wodurch wir in Zukunft auf eine komplett andere Art und Weise durch das Internet surfen könnten. An die Gamer unter uns: Auch Spiele können so erstellt werden und dann mit Hilfe von electron.js in „echte“ Programme umgewandelt werden.

Zugegeben, ich habe das Ganze anfangs nur aus Spass gelernt. Aber das Schöne ist, dass in dieser 3D-Welt die Grenzen wirklich fast nur durch die Vorstellungskraft gesetzt werden.