Top 5 WebXR Frameworks - Vergleich
Willst Du mit der WebXR-Entwicklung beginnen? Hier ist ein Vergleich der Top 5 Frameworks, um Dir den Einstieg zu erleichtern.
Kurzer Überblick über APIs
Am 13. Dezember 2019 veröffentlichte Chrome 79 als erster Browser mit standardmäßig aktiviertem WebXR 1.0. Das bedeutet, dass der erste Schritt zur Überwindung eines der größten Hindernisse für WebXR endlich gelöst ist: Stabilität. Zuvor war es wirklich schwierig, ein WebXR / WebVR / WebAR-Projekt zu pflegen, da die zugrunde liegende Browser-API ständig im Wandel war: WebVR 1.0 wurde schnell durch WebVR 1.1 ersetzt, was trotz der nur geringfügigen Versionsänderung genügend Änderungen mit sich brachte, um alle in WebVR 1.0 geschriebenen Anwendungen zu beeinträchtigen.
Nach WebVR 1.1 folgte eine Reihe von nicht-nummerierten Zwischenversionen von WebXR. Es war schwierig, zu erkennen, mit welcher Version man es zu tun hatte, und man musste sich um Google Chrome Origin Trials-Tokens bemühen, damit die App für die Nutzer ohne das Aktivieren von experimentellen Flags funktionierte.
Mit WebXR 1.0 in Chrome 79 ist dieses Problem endlich gelöst, und wir können davon ausgehen, dass unsere Apps auch in zukünftigen Versionen von Chrome weiter funktionieren werden. Das bedeutet auch, dass Du endlich mit dem Projekt beginnen kannst, das Du schon immer machen wolltest! Heute unterstützt sogar Apple Vision PRO WebXR, und es ist eine großartige Möglichkeit, plattformübergreifende XR-Anwendungen zu bauen.
Aber welches Framework solltest Du verwenden?
Hier ist eine Liste von Frameworks, die unserer Meinung nach geeignet sein könnten:
Inhaltsverzeichnis
5 - Unity 3D
Zusammen mit der Unreal Engine ist es wohl die bekannteste 3D-Entwicklungsplattform und unterstützt HTML5 als Zielplattform. Daher kann es theoretisch für die WebXR-Entwicklung genutzt werden.
WebXR wird jedoch nicht direkt unterstützt: Du benötigst ein Plugin wie De-Panther’s WebXR Exporter.
Dies ist nicht optimal, aber es könnte in Zukunft möglich sein, auf WebXR-Unterstützung in Unity 3D zu wechseln, falls sie diese hinzufügen.
Bis dahin musst Du allerdings mit einigen anderen Problemen beim HTML5-Export umgehen: schwache Leistung, lange Ladezeiten und unzureichende Unterstützung für mobile GPUs (wie in Smartphones oder Meta Quest und anderen eigenständigen Headsets).
Du profitierst jedoch vom Asset- und Plugin-Ökosystem von Unity und kannst Deine App auch als native App veröffentlichen! (Heutzutage bieten App-Stores kaum Sichtbarkeit, es sei denn, Du bist unter den Top-Spielen, sodass dieser Vorteil eine begrenzte Nützlichkeit hat.)
4 - Babylon.js
Mit seinem “Playground” bietet dieses Framework eine schnelle Möglichkeit, jede 3D-Anwendung zu prototypisieren. Es unterstützt bereits WebXR und bietet eine umfangreiche Liste von Beispielen, um nahezu alles zu rendern. Seine Flexibilität kommt daher, dass es eine JavaScript-Bibliothek ist. Babylon erlaubt es Dir, auf sehr niedriger Ebene einzutauchen, erfordert jedoch, dass Du Deine gesamte Anwendung in JavaScript schreibst.
Es richtet sich an erfahrenere Programmierer. Daher empfehlen wir, dieses Framework zu wählen, wenn Du entweder die Erfahrung hast und/oder das Rendering stark anpassen musst.
3 - Three.js
Wahrscheinlich die bekannteste Open-Source-JavaScript-Rendering-Bibliothek. Wieder einmal steht Dir volle Flexibilität auf sehr niedriger Ebene zur Verfügung, da Du das Rendering anpassen kannst, um alles zu tun, was Du möchtest. Große Macht bringt jedoch große Verantwortung: Du bist allein dafür verantwortlich, dass Deine Anwendung performant bleibt und reibungslos läuft, auch auf mobilen VR-Geräten.
Three.js unterstützt bereits WebXR! Bis es weit verbreitete AR-Unterstützung in WebXR gibt, solltest Du AR.js oder mind-ar-js für WebAR-Support in Betracht ziehen. Beide haben Integrationen mit Three.js.
Der Three.js-Editor erlaubt es Dir, Szenen einfach zusammenzustellen und aus vielen verschiedenen Dateiformaten zu erstellen. Dies ermöglicht es Dir, Dein Projekt schnell zu starten, erfordert jedoch später, dass Du Interaktionen in JavaScript programmierst. Der Editor hat kein Konzept von Projektdateien und ist daher wirklich nur nützlich, um den anfänglichen Code für Dein Projekt zu generieren.
Wenn Du keine Programmierkenntnisse hast, empfehlen wir, stattdessen A-Frame zu verwenden. Es basiert auf Three.js und erlaubt es Dir, viele Funktionen auf einfachere Weise zu nutzen.
2 - PlayCanvas
Diese Entwicklungsplattform kommt mit einem vollständigen visuellen Editor und unterstützt AR und VR. Ihr 3D-Grafik-Rendering sieht großartig aus, wenn es korrekt eingerichtet ist. Die Ladezeiten des Editors und der exportierten Spiele scheinen ebenfalls ziemlich in Ordnung zu sein.
Der visuelle Editor macht es sehr einfach, Szenen zusammenzustellen, Komponenten hinzuzufügen und Dein Projekt zu veröffentlichen. Zusätzlich ermöglicht ein integrierter Code-Editor, dass Du Deine eigenen benutzerdefinierten Skripte schreibst. Wenn Du Deinen eigenen Code-Editor wie Atom, Vim, Visual Studio Code oder einen anderen bevorzugst, könntest Du beim Bearbeiten der Skripte Schwierigkeiten haben. Mit der REST-API könnte es dennoch möglich sein.
1 - A-Frame
Für bequeme WebVR- und WebAR-Entwicklung war A-Frame in den letzten Jahren der bevorzugte Weg. Basierend auf Three.js kannst Du immer auf eine tiefere Ebene wechseln, falls Du Anpassungen benötigst, und es gibt eine Vielzahl vorhandener Komponenten, die Du wiederverwenden kannst.
A-Frame lässt Dich Deine Szene in HTML einrichten, woraus es eine 3D-Szenenhierarchie generiert. Du kannst benutzerdefinierte JavaScript-Komponenten erstellen, um Verhalten und Interaktionen zu ändern, und der “A-Frame Inspector” erlaubt es Dir, Deine Szene leicht zu bearbeiten und zu sehen, was aus dem HTML generiert wird. Einige größere VR-Browser-Spiele wurden in A-Frame entwickelt: Barista Express und Moonrider.
Da es auf Three.js basiert, unterstützt es auch bereits WebXR. WebAR wird wiederum durch AR.js unterstützt. A-Frame überlässt es Dir, Deine Assets für schnellere Ladezeiten zu optimieren. Für einfache Anwendungsfälle ist A-Frame perfekt und bringt Dich ziemlich weit.
Für größere Projekte könntest Du jedoch an die Grenzen der Leistungsfähigkeit stoßen, die A-Frame Dir setzt.
Zusammenfassung | TL;DR
Die Wahl des Frameworks hängt von Deinem Anwendungsfall ab. Für einfache Szenen empfehlen wir A-Frame. Wenn Du mehr Leistung brauchst, optimiere direkt auf Three.js. Wenn Programmieren nichts für Dich ist, probiere vielleicht PlayCanvas aus. Es bietet scheinbar auch die einfachste Möglichkeit, sehr gut aussehende Grafiken zu erzielen (aber für VR im Web ziehe bitte Leistung dem Aussehen vor).
Wonderland Engine
Noch nicht das passende Framework gefunden? Vielleicht interessiert Dich, was wir entwickeln.
Wir haben sämtliche existierenden Frameworks unter die Lupe genommen und die Wonderland Engine von Grund auf neu entwickelt, um das beste 3D-Web-Framework und die beste Spiele-Engine für WebXR zu sein und alle bekannten Fallstricke zu vermeiden. Heute sind die größten WebXR-Anwendungen (The Escape Artist, Archery Evolution, …) alle mit der Wonderland Engine gebaut.
Die Wonderland Engine ist ein Offline-Tool, das eine effiziente Binärszenendatei erstellt, die mit einer auf WebAssembly basierenden Laufzeit geladen wird.
Du kannst von der Leistung unseres optimierten Renderings profitieren und Interaktionscode mit unserer JavaScript/TypeScript-API implementieren. Viele wiederverwendbare Komponenten sind für VR, AR, Audio und mehr bereits für Dich vorgefertigt.
Und ja, wir unterstützen WebXR, die Engine wurde von Grund auf dafür konzipiert.
Lade die Wonderland Engine von der Downloads Seite herunter und registriere hier ein kostenloses Konto.