© Macrovector/Shutterstock.com
Erstellen von Webinhalten mit Babylon.js

Turmbau in 3D


Das Erstellen von Webapplikationen mit 3D-Inhalten wurde durch die Einführung der WebGL-Schnittstelle revolutioniert. Microsoft brachte sich mit dem eigenen JavaScript Framework Babylon.js schnell in den neuen Markt ein. Da die Updates – das letzte erschien im November 2020 – immer häufiger erscheinen, schauen wir uns an, was man mit dem Produkt aus Redmond alles anstellen kann.

3D-Inhalte für Webapplikationen waren einst der bevorzugte Aufenthaltsraum von Plug-ins. Noch vor einigen Jahren gab es ein gutes Dutzend verschiedene Produkte, die ein an Browserspielen mit anspruchsvollen Grafiken interessierter Nutzer auf dem Rechner haben musste. Die vor einigen Jahren eingeführte WebGL-Schnittstelle ermöglichte Webapplikationen erstmals die direkte Interaktion mit der GPU der zugrundeliegenden Hardware. Schon bald hatte sich mit Three.js ein JavaScript Framework etabliert, das versuchte, JavaScript-Entwicklern grundlegende Unterstützung bei der Interaktion mit dieser Programmierschnittstelle anzubieten.

Microsoft beobachtete diesen Trend nicht nur von der Seitenlinie, sondern schickte mit Babylon.js – vergleichsweise zeitnah – ein eigenes Produkt ins Rennen, das dem Platzhirsch in einigen Designentscheidungen radikal und diametral entgegentrat. Wir werfen an dieser Stelle gemeinsam einen Blick auf die Möglichkeiten des Produkts. Im Interesse der Fairness sei schon hier angemerkt, dass wir in diesem Artikel keine Komplettdarstellung geben können – auch bei Nutzung einer (fortgeschrittenen) Abstraktionsschicht bleibt die 3D- und Shader-Programmierung ein immens kompliziertes Thema.

Von Nähe und Ferne

Microsoft ist kein Neuling im Bereich des Designs von Grafikschnittstellen: Neben DirectX bot man mit dem (in diesem Magazin in der Vergangenheit umfangreich besprochenen) XNA auch eine auf einem höheren Level angesiedelte Programmierschnittstelle für 3D-Grafik an. OpenGL bzw. DirectX sind dabei niederschwellige Systeme, die dem Entwickler nicht unerhebliche Kompetenz im Bereich der 3D-Pipeline-Programmierung abverlangen. Ein gutes Beispiel dafür wäre ein Versuch zur Erzeugung eines Zylinders. In Three.js ist dazu nach folgendem Schema einiges an Code erforderlich:

var geometry = new THREE.CylinderGeometry( 15, 15, 20, 32 ); var material = new THREE.MeshBasicMaterial( {color: 0xeeff00} ); var cylinder = new THREE.Mesh( geometry, material ); scene.add( cylinder );

Diese direkte Interaktion mit der Rendering-Pipeline ermöglicht die maximale Ausnutzung der zugrunde liegenden Hardware. Für die heutige schnelllebige Zeit, die gerade vor der Spielebranche nicht haltmacht, gilt allerdings, dass die Konkurrenz bzw. die Bejagung des nächsten Grafikkrachers insbesondere für kleinere Studios nicht möglich ist. Das 2013 erschienene GTA V verschlang im Rahmen seiner Entwicklung mindestens 130 Millionen Dollar – um einmal die aktuellen Größenordnungen zu verdeutlichen.

Babylon.js begegnet diesem Problem auf zweierlei Weisen. Erstens stellten die Angestellten der Babylon-Entwickler schon vor einigen Jahren von JavaScript auf TypeScript um. Die strengere Sprachspezifikation sorgt dafür, dass der Code rigider ausfällt. Zweitens basiert die Abstraktionsschicht auf einem wesentlich höheren Level. Um den soeben angesprochenen Zylinder in Babylon.js zu erzeugen, ist nur der folgende, vergleichsweise kurze Code erforderlich:

BABYLON.MeshBuilder.CreateCylinder("cone", {diameterTop: 0, tessellation: 4}, scene);

Angemerkt sei in diesem Zusammenhang, dass Three. js im Bereich Performance dem Microsoft-Produkt wesentlich überlegen ist [1].

Vom Werkzeug

In der guten alten Zeit von Palm OS, aber auch noch zur Zeit von Windows Mobile und Co., war die Entwicklung von Spielen im Allgemeinen ein codelastiger Prozess: Assets wurden vielleicht in 3D Studio MAX und Co. erzeugt, das eigentliche Zusammenfügen erfolgte mit Texteditor, Compiler und Schweiß. Spätestens der unheimliche Erfolg von Unity führte dann dazu, dass Spieleprogrammierer immer umfangreicher werdende Werkzeuge in die Hand bekamen. Babylon.js greift Entwicklern an dieser Stelle mit mehreren Werkzeugen unter die Arme, die wir – vor dem Beginn der eigentlichen Programmierungsarbeiten – kurz vorstellen wollen. Werkzeug Nummer eins ist dabei die als Playground bezeichnete und in Abbildung 1 gezeigte Webseite [2].

hanna_babylonjs_1.tif_fmt1.jpgAbb. 1: Der Babylon-Playground ermöglicht das niederschwellige Ausprobieren von Babylon-Code

Besonders interessant ist neben dem oben rechts eingeblendeten Auswahlassistenten zur Entscheidung zwischen JavaScript und TypeScript speziell die Möglichkeit, Inhalte mit einem einzigartigen URL abzuspeichern. Derartige URLs dürfen Sie dann in Foren und sozialen Medien teilen, um Feedback von Kollegen einzusammeln. Es gehört heute zum guten Ton, diverse Viewer zur Verfügung zu stellen, die das Ansehen dreidimensionaler Objekte erlauben. Interessanter ist der Node Material Editor [3]. Der Name ist irreführend, ein Blick auf den in Abbildung 2 gezeigten Screenshot illustriert aber klar den Sinn des Produkts.

hanna_babylonjs_2.tif_fmt1.jpgAbb. 2: Der NME erlaubt das „grafische Zusammenstellen“ von Shader-Programmen

Die eigentliche Übertragung der im NME erzeugten Shader-Informationen erfolgt dann ebenfalls durch JavaScript-Code. Das Babylon.js-Entwicklerteam implementiert in seinem Framework eine Art Shader-Abstraktionsschicht, deren Verwendung in Listing 1 gezeigt wird.

Listing...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang