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.
Am 13. Dezember 2019 hat Chrome 79 als erster Browser WebXR 1.0 standardmäßig aktiviert. 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 Browser-API, auf der es basierte, 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 jede in WebVR 1.0 geschriebene Anwendung zum Scheitern zu bringen.
Nach WebVR 1.1 folgte eine Reihe von nicht versionierten Zwischenversionen von WebXR. Es war schwierig zu erkennen, mit welcher Version man es zu tun hatte, und es war nötig, Google Chrome Origin Trials Tokens zu beantragen, um die App für die Benutzer lauffähig zu machen, ohne dass sie experimentelle Flags aktivieren mussten.
Mit WebXR 1.0 in Chrome 79 ist dieses Problem endlich vorbei, 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! 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 Unreal Engine die beliebteste 3D-Entwicklungsplattform, unterstützt HTML5 als Zielplattform und kann daher theoretisch für die WebXR-Entwicklung genutzt werden. Es wird jedoch nicht direkt unterstützt: Du benötigst ein Plugin wie De-Panther’s WebXR Exporter.
Das ist zwar nicht optimal, aber Du könntest in Zukunft von nativer WebXR-Unterstützung in Unity 3D profitieren, falls sie diese hinzufügen. Bis dahin musst Du jedoch mit einigen anderen Problemen beim HTML5-Export umgehen: Leistung, Ladezeiten und keine Unterstützung für mobile GPUs (wie die in Smartphones oder Oculus Quest und anderen eigenständigen Headsets). Du profitierst vom Asset- und Plugin-Ökosystem von Unity und kannst Deine App auch als native App veröffentlichen!
4 - Babylon.js
Mit dem “Playground” bietet dieses Framework eine schnelle Möglichkeit, jede 3D-Anwendung zu prototypisieren. Es unterstützt bereits WebXR und hat eine riesige Liste von Beispielen, um nahezu alles zu rendern. Seine Flexibilität ergibt sich dadurch, dass es eine JavaScript-Bibliothek ist. Es ermöglicht 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, wenn Du entweder die Erfahrung hast und/oder das Rendering stark anpassen musst.
3 - Three.js
Wahrscheinlich die beliebteste 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 mit sich: Du bist allein dafür verantwortlich, dass Deine Anwendung performant bleibt und auch auf mobilen VR-Geräten reibungslos läuft.
Three.js unterstützt bereits WebXR! Bis es eine weit verbreitete AR-Unterstützung in WebXR gibt, solltest Du Dir AR.js oder mind-ar-js für WebAR-Support ansehen. 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 beginnen, 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 Programmiererfahrung hast, empfehlen wir Dir, stattdessen A-Frame anzuschauen. Es basiert auf Three.js und ermöglicht es Dir, viele Funktionen auf einfachere Weise zu nutzen.
2 - PlayCanvas
Diese Entwicklungsplattform kommt mit einem vollständigen visuellen Editor und bietet Unterstützung für AR und VR. Ihr 3D-Grafik-Rendering sieht beeindruckend aus, wenn es korrekt eingerichtet ist. Die Ladezeiten des Editors und der exportierten Spiele scheinen ebenfalls recht okay 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 bevorzugst, wie Atom, Vim, Visual Studio Code oder andere, könntest Du beim Bearbeiten der Skripte Schwierigkeiten haben. Mit der REST-API könntest Du dies jedoch trotzdem bewerkstelligen.
1 - A-Frame
Für bequeme WebVR- und WebAR-Entwicklung war A-Frame in den letzten Jahren der bevorzugte Weg. Aufbauend auf Three.js kannst Du immer auf eine niedrigere Ebene gehen, falls Du Anpassungen benötigst, und es gibt viele vorhandene Komponenten, die Du wiederverwenden kannst.
A-Frame ermöglicht es Dir, Deine Szene in HTML einzurichten, aus dem eine 3D-Szenenhierarchie generiert wird. Du kannst benutzerdefinierte JavaScript-Komponenten erstellen, um Verhalten und Interaktionen zu ändern, und der “A-Frame Inspector” erlaubt es Dir, Deine Szene einfach zu bearbeiten und zu sehen, was aus dem HTML generiert wird. Einige größere VR-Browser-Spiele wurden auf 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, öffne die Motorhaube und 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
Hast Du noch nicht das richtige Werkzeug für den Job gefunden? Vielleicht interessiert Dich, was wir entwickeln. Die Wonderland Engine ist ein Offline-Tool, das eine effiziente Binärszenendatei erstellt, die mit einer WebAssembly-basierten Laufzeit geladen wird.
Während Du von der Leistung unseres optimierten Renderings profitierst, kannst Du Interaktionscode mit unserer JavaScript/TypeScript-API implementieren. Viele wiederverwendbare Komponenten sind für Dich einsatzbereit, um VR, AR, Audio und mehr zu handhaben.
Und ja, wir unterstützen WebXR, die Engine wurde dafür von Grund auf neu gestaltet.
Lade die Wonderland Engine von der Downloads Seite herunter und registriere Dich hier.