HoverFit: Gamificare il Fitness in WebXR Parte 1: Tecnologia

Scopri come The Fitness Resort ha utilizzato Wonderland Engine per creare HoverFit, superando le limitazioni di performance di Unity sul web.

Sfide Tecniche con Unity Web

Le applicazioni WebXR richiedono rendering ad alte prestazioni, bassa latenza e interattività senza soluzioni di continuità, ma i motori web esistenti non sono stati progettati con queste priorità in mente.

Prestazioni di Unity sul Web

Quando il team di The Fitness Resort ha iniziato a sviluppare il loro trainer VR da sci con l’esportazione Unity HTML5 (web), hanno rapidamente incontrato gravi colli di bottiglia nelle performance e nel flusso di lavoro:

Tempi di iterazione lunghi – Per testare nel browser, dovevano aspettare interminabili 15 minuti o più, rendendo il flusso di lavoro di sviluppo incredibilmente inefficiente, poiché l’anteprima non può eseguire codice JavaScript per la piattaforma Unity HTML5.
Prestazioni WebGL lente – Anche con molte ottimizzazioni manuali, la loro build Unity WebGL soffriva di prestazioni insufficienti per raggiungere tutte le caratteristiche critiche del gioco. A causa delle basse prestazioni, non potevano abilitare l’anti-aliasing, il che influiva pesantemente sulla qualità visiva in VR, dove i piccoli movimenti della testa rendono molto evidenti le linee seghettate. Unity semplicemente non riusciva a fornire la potenza di elaborazione necessaria nemmeno per un prototipo minimo dell’esperienza sciistica.
Capacità limitate di shader e illuminazione – I visual di alta qualità richiedevano illuminazione in tempo reale e shader complessi, ma l’esportazione web di Unity non poteva gestirli efficacemente.
Dimensioni dei file massicce e tempi di caricamento lunghi – La build web di Unity portava a dimensioni dei file eccessivamente grandi, con anche un progetto iniziale vuoto che richiedeva un download di oltre 25 MB. Unity è progettato per piattaforme native come Steam, Console o App Store, dove gli utenti sono abituati a pre-caricare completamente le app durante l’installazione. Sul web, gli utenti si aspettano che l’app venga trasmessa in streaming su richiesta.

Dall’idea alla realtà: Costruire una piattaforma VR fitness basata sul web

Il fitness VR sta evolvendo rapidamente, ma costruire una piattaforma di fitness VR che funzioni interamente sul web? Questo era territorio inesplorato.

Nel 2020, i fondatori di The Fitness Resort Yin-Chien “Yinch” Yeap e Tim Dudgeon, un ex sciatore olimpico, si sono messi alla scoperta delle possibilità del WebXR. La loro visione era ambiziosa: sviluppare un trainer VR da sci che funzionasse completamente in un browser web, offrendo allo stesso tempo la stessa performance e fedeltà visiva di un’applicazione XR nativa.

YouTube Video

Dopo aver sviluppato con successo Ski Fit 365 utilizzando Wonderland Engine, hanno visto il potenziale per andare oltre lo sci. Per Tim, questa visione era profondamente personale: da atleta professionista, sapeva quanto potessero essere noiosi gli allenamenti tradizionali in palestra. Hanno deciso di portarlo al livello successivo e sviluppare HoverFit, una piattaforma fitness WebXR di nuova generazione. Con supporto multiplayer, mondi virtuali diversi e monitoraggio della salute integrato, HoverFit gamifica il fitness, trasformando gli allenamenti in un’esperienza che le persone apprezzano veramente.

Hai bisogno di consigli? Contatta per supporto enterprise.

Perché il Web? Libertà, flessibilità e garanzia per il futuro.

Il fondatore di Hoverfit Yin-Chien "Yinch" Yeap. — Il fondatore di Hoverfit Yin-Chien “Yinch” Yeap.

Mi considero uno sviluppatore con una visione d’insieme. Da quella prospettiva, credo fermamente che il web con i suoi standard aperti e le sue piattaforme aperte guidi la vera crescita della XR come ecosistema emergente.
— Yin-Chien Yeap

In uno spazio come quello della XR, dove le migliori pratiche sono ancora in fase di formazione, gli sviluppatori hanno bisogno della libertà di iterare rapidamente e sperimentare senza restrizioni. Le piattaforme chiuse introducono costi elevati e barriere artificiali, rendendo più difficile l’innovazione. Il web ha permesso a Yinch e al suo team di distribuire istantaneamente, aggiornarsi liberamente e mantenere il pieno controllo creativo, senza essere vincolati al processo di approvazione di una grande azienda.

Garantire il futuro è stato un altro fattore chiave. Nuovi hardware VR vengono costantemente rilasciati. Con un’applicazione nativa, ogni nuovo visore significa un altro SDK da integrare e mantenere per la compatibilità. Al contrario, le applicazioni WebXR sono immediatamente accessibili su nuovi dispositivi fintanto che supportano un browser.

Un ottimo esempio di ciò è Android XR. Quando Meta e Google hanno annunciato il supporto per Android XR, molti sviluppatori nativi si sono subito posti la domanda:

Come facciamo a portare le nostre app in questo nuovo ecosistema?

Per gli sviluppatori WebXR, la risposta è stata molto più semplice:

Basta darci un browser e siamo pronti a partire!

Quel tipo di libertà, flessibilità e garanzia per il futuro è il motivo per cui Yinch e Tim hanno scelto WebXR rispetto a un approccio nativo.

Superare i Colli di Bottiglia delle Prestazioni: Passare da Unity a Wonderland Engine

HoverFit: Gamificare il Fitness in WebXR
- **Parte 1: Tecnologia**

Come sviluppatore Unity, Yinch ha naturalmente scelto Unity per Ski Fit 365. Tuttavia, hanno rapidamente incontrato critici colli di bottiglia nelle prestazioni, poiché il flusso di esportazione web di Unity non riusciva a soddisfare le loro esigenze di performance. Nonostante ampi sforzi di ottimizzazione, hanno raggiunto un limite prima di raggiungere i loro obiettivi di design, lasciandoli senza altra scelta se non esplorare soluzioni alternative.

Mentre cercavano soluzioni e discutevano delle sfide sul server Discord di WebXR, Jonathan Hale di Wonderland Engine ha suggerito di provare Wonderland Engine, progettato per risolvere esattamente questi problemi.

Unisciti alla Comunità Discord.

Inizialmente, Yinch era esitante: Unity era familiare e cambiare motore significava ricominciare da capo. Ma mentre i problemi di prestazioni persistevano, è diventato chiaro che Unity semplicemente non poteva soddisfare le loro esigenze.

Hanno effettuato il passaggio. Ricostruire SkiFit 365 con Wonderland Engine ha portato a un notevole miglioramento delle prestazioni, permettendo loro di offrire un’esperienza WebXR di alta qualità senza i colli di bottiglia tecnici che avevano affrontato prima.

L’unico motore 3D ottimizzato per il web.

Oltre a Unity, Yinch ha sperimentato anche A-Frame e PlayCanvas. Sebbene ritenga che PlayCanvas sia un framework WebGL solido per certi casi d’uso, lo vede fondamentalmente come un editor WebGL piuttosto che come un motore orientato prima di tutto al WebXR. Tale distinzione è diventata sempre più importante man mano che affinavano i requisiti del loro progetto:

I framework WebXR sono costruiti sopra WebGL, e la funzionalità WebXR viene spesso aggiunta come un ripensamento piuttosto che essere una priorità del motore. Piuttosto che ottimizzare per WebGL, WebGL viene visto come una limitazione. Wonderland Engine è diverso: è costruito dal basso per il rendering 3D basato sul browser. Questo approccio rende Wonderland Engine l’unico motore di gioco veramente ottimizzato per progetti 3D Web e WebXR su larga scala con elevate esigenze di rendering.

Tempi di iterazione rapidi – Quando il motore viene impacchettato direttamente nel browser in meno di un secondo, l’applicazione impacchettata diventa l’anteprima e tutto il codice viene eseguito direttamente nel browser. Questo elimina differenze di performance, visuale e runtime JavaScript.
Prestazioni WebGL ottimizzate – Il renderer WebGL di Wonderland Engine è adattato alle caratteristiche di performance del web. Raggruppa anche migliaia di oggetti dinamici in una singola chiamata di disegno per tipo di shader, risultando in un numero esiguo di chiamate di disegno per scena.
Illuminazione dinamica – Grazie alla sua radicale ottimizzazione delle chiamate di disegno, Wonderland Engine può rendere molte luci dinamiche anche con ombre in tempo reale in WebXR.
Tempi di caricamento veloci – Con il suo formato di file binario progettato su misura che può essere trasmesso in streaming sul web, simile a come non pre-caricheresti un’intera libreria video per guardare un video sulla tua piattaforma di streaming preferita. Wonderland Engine carica anche scene complesse in pochi secondi poiché mappa i suoi file direttamente nella memoria di WebAssembly, invece di analizzare un formato basato su testo come JSON o XML. Risorse come animazioni, texture e mesh sono compresse per la trasmissione web per impostazione predefinita.