HoverFit: Spielerisch Fitness mit WebXR erleben

• Teil 1: Technologie

Erfahre, wie The Fitness Resort die Wonderland Engine genutzt hat, um HoverFit zu erstellen, und dabei die Leistungsbeschränkungen von Unity für das Web überwunden hat.

Technische Herausforderungen mit Unity Web 

WebXR-Anwendungen erfordern hochleistungsfähiges Rendering, geringe Latenz und nahtlose Interaktivität, aber bestehende Web-Engines wurden nicht mit diesen Prioritäten im Hinterkopf entwickelt.

Unity Web-Leistung 

Als das Team von The Fitness Resort begann, ihren VR-Skitrainer mit Unity HTML5 (Web) Export zu entwickeln, stießen sie schnell auf große Leistungs- und Workflow-Engpässe:

• Lange Iterationszeiten – Um im Browser zu testen, mussten sie qualvolle 15 Minuten oder länger warten, was den Entwicklungs-Workflow unglaublich ineffizient machte, da die Vorschau keinen JavaScript-Code für die Unity HTML5-Plattform ausführen kann.

• Langsame WebGL-Leistung – Selbst mit vielen manuellen Optimierungen litt ihr Unity WebGL-Build unter unzureichender Leistung, um alle kritischen Spielfunktionen zu erreichen. Aufgrund der niedrigen Leistung konnten sie kein Anti-Aliasing aktivieren, was die visuelle Qualität in VR stark beeinträchtigte, da kleine Kopfbewegungen gekrümmte, aliasierte Linien sehr offensichtlich machen. Unity konnte einfach nicht genug Rechenleistung liefern, um sogar den minimalen Prototyp der Skierfahrung zu liefern.

• Eingeschränkte Shader- und Beleuchtungsfunktionen – Hochwertige Grafiken erforderten Echtzeitbeleuchtung und komplexe Shader, aber Unitys Web-Export konnte diese nicht effizient handhaben.

• Massive Dateigrößen und lange Ladezeiten – Der Unity-Web-Build führte zu übermäßig großen Dateigrößen, wobei selbst ein leeres Starterprojekt einen Download von über 25 MB erforderte. Unity ist für native Plattformen wie Steam, Konsolen oder App-Stores konzipiert, wo Benutzer daran gewöhnt sind, die Apps während der Installation vollständig vorzuladen. Im Web erwarten die Benutzer, dass die App bei Bedarf gestreamt wird.

Von der Idee zur Realität: Aufbau einer webbasierten VR-Fitnessplattform 

VR-Fitness entwickelt sich schnell, aber eine VR-Fitnessplattform, die vollständig im Web läuft, zu entwickeln? Das war Neuland.

Im Jahr 2020 machten sich die Gründer von The Fitness Resort, Yin-Chien „Yinch“ Yeap und Tim Dudgeon, ein ehemaliger olympischer Skifahrer, daran, die Möglichkeiten von WebXR zu erkunden. Ihre Vision war ehrgeizig: einen VR-Skitrainer zu entwickeln, der vollständig in einem Webbrowser läuft – und dabei die gleiche Leistung und visuelle Wiedergabetreue wie eine native XR-Anwendung bietet.

Nach der erfolgreichen Entwicklung von Ski Fit 365 mit der Wonderland Engine erkannten sie das Potenzial, über das Skifahren hinauszugehen. Für Tim war diese Vision zutiefst persönlich – als professioneller Sportler wusste er, wie mühsam traditionelle Fitnessstudio-Übungen sein können. Sie entschieden sich, den nächsten Schritt zu gehen und HoverFit zu entwickeln, eine WebXR-Fitnessplattform der nächsten Generation. Mit Multiplayer-Unterstützung, vielfältigen virtuellen Welten und integriertem Gesundheitstracking gamifiziert HoverFit Fitness und verwandelt Workouts in eine Erfahrung, die Menschen wirklich genießen.

Warum das Web? Freiheit, Flexibilität und Zukunftssicherheit. 

Ich betrachte mich als Entwickler mit einem Blick für das große Ganze. Aus dieser Perspektive glaube ich fest daran, dass das Web mit seinen offenen Standards und Plattformen das wahre Wachstum von XR als sich entwickelndes Ökosystem vorantreibt.

— Yin-Chien Yeap

In einem Bereich wie XR, wo sich Best Practices noch formen, brauchen Entwickler die Freiheit, schnell zu iterieren und ohne Einschränkungen zu experimentieren. Geschlossene Plattformen schaffen hohe Kosten und künstliche Barrieren, die Innovation erschweren. Das Web ermöglichte es Yinch und seinem Team, schnell zu deployen, frei zu aktualisieren und die volle kreative Kontrolle zu behalten – ohne von einem großen Unternehmen genehmigt werden zu müssen.

Zukunftssicherheit war ein weiterer entscheidender Faktor. Neue VR-Hardware wird ständig veröffentlicht. Mit einer nativen Anwendung bedeutet jedes neue Headset ein weiteres SDK zu integrieren und die Kompatibilität zu erhalten. Im Gegensatz dazu sind WebXR-Anwendungen sofort auf neuen Geräten zugänglich, solange sie einen Browser unterstützen.

Ein großartiges Beispiel dafür ist Android XR. Als Meta und Google die Unterstützung für Android XR ankündigten, standen viele native Entwickler sofort vor der Frage:

Wie portieren wir unsere Apps auf dieses neue Ökosystem?

Für WebXR-Entwickler war die Antwort viel einfacher:

Gib uns einfach einen Browser, und wir sind startklar!

Diese Art von Freiheit, Flexibilität und Zukunftssicherheit ist der Grund, warum Yinch und Tim sich für WebXR gegenüber einem nativen Ansatz entschieden haben.

Überwindung von Leistungsengpässen: Wechsel von Unity zur Wonderland Engine 

Als Unity-Entwickler wählte Yinch natürlich Unity für Ski Fit 365. Jedoch stießen sie schnell auf kritische Leistungsengpässe, da Unitys Web-Export-Pipeline Schwierigkeiten hatte, ihre Leistungsanforderungen zu erfüllen. Trotz umfangreicher Optimierungsbemühungen stießen sie auf eine Decke, bevor sie ihre Designziele erreichten, und hatten keine andere Wahl, als nach alternativen Lösungen zu suchen.

Während sie nach Lösungen suchten und die Herausforderungen im WebXR-Discord-Server diskutierten, schlug Jonathan Hale von Wonderland Engine vor, die Wonderland Engine auszuprobieren, die genau dazu entwickelt wurde, diese Probleme zu lösen.

Anfangs war Yinch zögerlich – Unity war vertraut, und der Wechsel der Engine bedeutete, von Grund auf neu zu beginnen. Aber da die Leistungsprobleme anhielten, wurde klar, dass Unity einfach nicht ihren Anforderungen entsprechen konnte.

Sie vollzogen den Wechsel. Der Neuaufbau von SkiFit 365 mit der Wonderland Engine führte zu einer dramatischen Leistungssteigerung und ermöglichte es ihnen, eine hochwertige WebXR-Erfahrung ohne die technischen Engpässe, auf die sie zuvor gestoßen waren, zu liefern.

Die einzige 3D-Engine, die für das Web optimiert ist. 

Neben Unity experimentierte Yinch auch mit A-Frame und PlayCanvas. Während er denkt, dass PlayCanvas ein solides WebGL-Framework für bestimmte Anwendungsfälle ist, sieht er es grundsätzlich eher als WebGL-Editor denn als WebXR-first-Engine. Diese Unterscheidung wurde zunehmend wichtig, als sie die Anforderungen ihres Projekts verfeinerten:

WebXR-Frameworks basieren auf WebGL, und WebXR-Funktionalität wird oft als nachträglicher Gedanke hinzugefügt, anstatt eine Priorität der Engine zu sein. Anstatt für WebGL zu optimieren, wird WebGL als Einschränkung gesehen. Wunderland Engine ist anders – sie ist von Grund auf für Rendererstellung im Browser konzipiert. Dieser Ansatz macht Wunderland Engine zur einzigen Spiel-Engine, die wirklich für groß angelegte 3D-Web- und WebXR-Projekte mit hohen Rendering-Anforderungen optimiert ist.

• Schnelle Iterationszeiten – Wenn die Engine direkt in den Browser packt, dauert das weniger als eine Sekunde, die gepackte Anwendung wird zur Vorschau und jeglicher Code wird direkt im Browser ausgeführt. Das beseitigt Leistungs-, visuelle und JavaScript-Runtime-Unterschiede.

• Optimierte WebGL-Leistung – Der WebGL-Renderer von Wonderlan Engine ist auf die Leistungsmerkmale des Webs zugeschnitten. Er fasst sogar Tausende von dynamischen Objekten in einem einzigen Draw-Call pro Shader-Typ zusammen, was in einer Handvoll Draw-Calls pro Szene resultiert.

• Dynamische Beleuchtung – Dank seiner radikalen Draw-Call-Optimierungen kann die Wonderland Engine viele dynamische Lichter sogar mit Echtzeitschatten in WebXR rendern.

• Schnelle Ladezeiten – Mit seinem eigens entworfenen binären Dateiformat, das über das Web gestreamt werden kann, ähnlich wie man keine gesamte Videobibliothek vorladen würde, um ein Video auf deiner Lieblings-Streaming-Plattform anzusehen. Wonderland Engine lädt selbst komplexe Szenen in Sekunden, da sie ihre Dateien direkt in den WebAssembly-Speicher abbildet, anstatt ein textbasiertes Format wie JSON oder XML zu parsen. Ressourcen wie Animationen, Texturen und Maschen sind standardmäßig für die Webübertragung komprimiert.

HoverFit auf HeyVR

Jetzt spielen

Die Wonderland Engine war das einzige Entwicklungstool, mit dem sie alle Anforderungen von HoverFit erfüllen konnten:

• Rendering von mehr als einer Million Dreiecken in Echtzeit auf Meta Quest
• Dynamische, Echtzeit-Beleuchtung
• Mindestens 60 fps auf Quest 2 und 72 fps auf Quest 3/Quest 3s
• Hochwertige Shader
• Vollständig geskinte und anpassbare Avatare
• Multiplayer-Unterstützung
• Sprachchat-Integration