Browser verfügen neben der Fähigkeit, HTML, CSS und JavaScript zur Darstellung von Webseiten zu verarbeiten, noch über zahlreiche weitere Features, die in der normalen Verwendung nicht ins Gewicht fallen. Eines dieser Features ist die Fähigkeit, echte 3D-Inhalte anzuzeigen und Ihnen die Möglichkeit zur Interaktion mit diesen zu bieten. Dazu bietet der Browser zwei Schnittstellen: die ältere und weit verbreitete WebLG und das neuere WebGPU. Bei beiden Schnittstellen handelt es sich um lowlevel-Schnittstellen, die Ihnen direkten Zugriff auf das Render-Verhalten des Browsers geben. Das hat jedoch den Nachteil, dass die Schnittstellen nicht komfortabel zu bedienen sind. Und genau hier kommen Bibliotheken ins Spiel. Sie abstrahieren die Schnittstellen und bieten Ihnen komfortable APIs zum Umgang mit den 3D-Daten und ihrem Rendering im Browser.

Eine der populärsten Bibliotheken in diesem Bereich ist Three.js. Diese haben wir uns bereits genauer angesehen, sodass es jetzt an der Zeit ist, einen Blick auf die Konkurrenz zu werfen. Die schärfste Konkurrenz von Three.js ist Babylon.js. Unterm Strich können Sie mit beiden Bibliotheken die gleichen Problemstellungen lösen und ähnliche Resultate erzielen. In der Herangehensweise und Philosophie unterscheiden sich die beiden jedoch deutlich.

Wo Ihnen Three.js nur die grundlegenden Schnittstellen zur Verfügung stellt und sehr stark auf die Community für Erweiterungen setzt, verfolgt Babylon.js einen ganzheitlicheren Ansatz und bietet Ihnen alles, was Sie für Ihre Arbeit benötigen, ohne dass Sie auf Community-Erweiterungen verzichten müssen. Auch die Dokumentation ist bei Babylon deutlich strukturierter und macht es gerade Einsteiger:innen deutlich leichter, sich in der Welt des dreidimensionalen Webs zurecht zu finden.

Die ersten Schritte

Wie jedes JavaScript-Framework, müssen Sie auch Babylon irgendwie in Ihren Browser bringen. Das erreichen Sie über einen von drei möglichen Wegen:

• CDN: Die schnellste und einfachste Variante führt über ein CDN (Content Delivery Network). Hier liegen die Dateien der Bibliothek auf einem System eines Anbieters, der in der Regel in geografischer Nähe des Users ist. Der Vorteil ist hier, dass Sie die Dateien einfach einbinden können und sich um nichts weiter kümmern müssen. Damit geben Sie jedoch auch ein Stück weit die Kontrolle aus der Hand. Babylon stellt Ihnen unter [1] ein eigenes CDN zur Verfügung. Die Bibliothek sagt jedoch selbst: Für eine Produktivumgebung lass die Finger vom CDN und liefere die Dateien selbst aus.

• UMD: Die Dokumentation von Babylon sagt „UMD just works”. UMD steht für „Universal Module Definition” und bezeichnet eines der JavaScript-Modulsysteme, bevor der JavaScript-Standard selbst eines festlegte. Diese Variante wird zwar noch weiter unterstützt; Sie sollten sie, wenn überhaupt, nur für schnelle Prototypen verwenden.

• ESM: Die Lösung, um Babylon zu integrieren und die volle Kontrolle zu behalten, besteht aus der Verwendung des ESM-basierten NPM-Pakets.

Es gibt zwar drei Lösungen, jedoch sollten Sie die ESM-Variante von Babylon.js mit dem Kommando npm install @babylonjs/core installieren. Damit Sie mit dem Paket komfortabel arbeiten können, sollten Sie einen Bundler wie Vite nutzen. Das Werkzeug stellt Ihnen Templates zur Verfügung, mit denen Sie direkt mit der Entwicklung beginnen können. Mit npm create vite@latest babylon-app initialisieren Sie eine neue Applikation, in der Sie dann das Babylon.js-Paket installieren können. Hier können Sie das vanilla-Template verwenden. Noch besser wird Ihre Applikation, wenn Sie statt des vanilla-Templates das vanilla-ts-Template nutzen. In diesem Fall arbeiten Sie mit TypeScript statt mit JavaScript. Was sich gut trifft, da Babylon selbst in TypeScript umgesetzt ist. Mit einem anschließenden npm run dev starten Sie die Applikation im Entwicklungsmodus, in dem Änderungen am Code direkt im Browser unter http://localhost:5173 sofort sichtbar werden.

Eine Szene in Babylon.js

Babylon.js arbeitet wie auch Three.js mit Szenen. Eine Szene ist im weitesten Sinne wie eine Art von Container, der die verschiedenen Elemente der Darstellung enthält....