Der Browser ermöglicht uns, mit Webtechnologien Dinge zu visualisieren. Das reicht von Texten über numerische Daten in Form von Tabellen bis hin zu Bildern. Im Browser können Sie darüber hinaus auch selbst Bilder zeichnen. Dafür steht Ihnen das svg- und das Canvas-Element zur Verfügung. Mit dem svg-Element können Sie Vektorgrafiken erzeugen, die Sie verlustfrei beliebig skalieren können; das Canvas-Element ist für Pixelgrafiken zuständig. Zusätzlich zu einfachen 2D-Grafiken können Sie über den 3D-Kontext auch dreidimensionale Repräsentationen erzeugen und mit ihnen interagieren. Wir schauen eine Bibliothek an, die Ihre Arbeit dabei erleichtern kann.

In diesem Kontext können Sie zwei Schnittstellen nutzen: die ältere WebGL (Web Graphics Library) und das modernere WebGPU (Web Graphics Processing Unit). Mit WebGL können Sie hardwarebeschleunigt Grafiken im Browser rendern und auch aufwändige 3D-Szenen umsetzen. WebGL basiert auf einer abgespeckten Variante von OpenGL und benutzt Shader. Das sind kleine Programme, die direkt auf der Grafikkarte des Systems ausgeführt werden und bestimmen, wie Geometrien und Pixel gerendert werden. Für die Implementierung gibt es auch eigene Shader-Sprachen. Neben den Shadern arbeitet WebGL mit Texturen, die Farben oder Muster für die Flächen eines Objekts definieren. WebGL verfügt außerdem über eine Rendering Pipeline, die die Positionen im 3D-Raum berechnet, diese in 2D-Pixel für die Darstellung umwandelt und Farben und Beleuchtung berechnet.

WebGPU soll die etwas in die Jahre gekommene WebGL ersetzen. Sie basiert auf modernen Grafikstandards wie Vulkan, Metal und Direct3D 12. WebGPU gewährleistet eine bessere Performance und höhere Flexibilität als WebGL. Zahlreiche Browser beinhalten mittlerweile diesen neuen Standard, jedoch teilweise noch deaktiviert, sodass Sie die Schnittstelle zuerst aktivieren müssen.

Sowohl WebGL als auch WebGPU sind Low-Level-Schnittstellen, auf die Sie nur in Ausnahmefällen zugreifen. Wollen Sie mit 3D-Inhalten im Browser arbeiten, gibt es, wie so häufig in der Webwelt, Bibliotheken, die die komplexen Browserschnittstellen für Sie abstrahieren. Eine der populärsten Lösungen ist Three.js, mit der Sie Ihre 3D-Szene bequem direkt in JavaScript erzeugen können, statt selbst Shader zu programmieren und mit den WebGL- oder WebGPU-APIs zu arbeiten.

Eine solche Szene kann dabei alles sein, was Sie sich vorstellen können. So können Sie eine interaktive Produktpräsentation implementieren, bei der Ihre Benutzer:innen einen Schuh, eine Kamera oder ein Auto von allen Seiten begutachten können. Mit etwas mehr Aufwand können Sie die Szenen auch interaktiv gestalten und einen Konfigurator implementieren, mit dem Sie bestimmte Aspekte des Produkts beeinflussen und beispielsweise die Farbe ändern oder zusätzliche Erweiterungen für Ihr Produkt hinzufügen können. Sie sind aber nicht auf einzelne Objekte beschränkt: Sie können auch eine interaktive Tour durch ein Gebäude umsetzen, Daten im dreidimensionalen Raum visualisieren oder ein 3D-Spiel implementieren.

Installation und Einbettung von Three.js

In JavaScript-Maßstäben ist Three.js ein Urgestein. Das initiale Release der Bibliothek war im April 2010. Three.js unterliegt der MIT-Lizenz und wird in einem öffentlichen GitHub-Repo [1] entwickelt. Die offizielle Webseite finden Sie unter [2]. Für die Einbindung von Three.js stehen Ihnen mehrere Möglichkeiten zur Verfügung. Die schnellste und einfachste für einen ersten Prototyp ist die Integration über ein CDN. Für größere Applikationen sollten Sie stattdessen eher auf den Paketmanager Ihrer Wahl setzen und Three.js in Ihrer Applikation installieren. Im Fall von npm ist das zugehörige Installationskommando npm add three. Three.js ist komplett in JavaScript geschrieben, sodass Sie f...