WebVR / XR – Il futuro è qui

Costruire un’applicazione immersiva oggi è facile!

WebVR + Babylon.js + AmmoJS

TLDR:

  • WebVR / WebXR consente ai siti Web di comunicare con dispositivi AR / VR con un solo browser
  • WebXR non è ancora pronto, ma WebVR è abbastanza stabile in Firefox
  • È facile iniziare direttamente dal browser. Vedi come iniziare di seguito

Che cos’è WebVR / XR

WebVR e WebXR sono entrambe API Web che consentono alle pagine Web di interagire con dispositivi di realtà virtuale o aumentata per eseguire operazioni quali:

  • Ottieni la posizione / rotazione del dispositivo
  • Visualizza immagini sul dispositivo
  • Gestire eventi da controller VR / AR (ad es. Pulsanti o asse stick)
  • Ottieni la posizione / rotazione dei controller
  • Interrogazione delle funzionalità AR / VR del dispositivo

Ciò consente agli utenti di visualizzare e interagire con contenuti immersivi senza la necessità di scaricare un’app. Possono semplicemente accedere a un sito Web che comunica con le API WebXR / VR.

Spazi di SharePoint

In genere i siti Web utilizzano librerie di assistenza (ad es. Babylon.js, A-Frame o ThreeJS) per creare contenuti XR / VR in quanto semplificano gran parte del codice del boilerplate. Ad esempio, Babylon.js fornisce una classe VRExperienceHelper che può aggiungere il supporto VR a una scena in una sola riga di codice:

  // Abilita VR 
var vrHelper = scene.createDefaultVRExperience ();

Visualizza / modifica l’esempio online qui: Parco giochi

Perché VR / AR sul Web?

  • Nessun download richiesto, le esperienze sono a portata di clic
  • Nessun grande IDE richiesto per lo sviluppo, solo un browser e un editor di testo
  • Piattaforma incrociata
  • Utilizza gli strumenti che gli sviluppatori Web conoscono (js / npm / jQuery / dattiloscritto / ecc.)
  • App Web progressiva desktop / mobile (PWA)

Stato attuale

WebVR è stato creato inizialmente per colpire la prima ondata di dispositivi VR rilasciati (ad esempio Vive, Oculus, Windows Mixed Reality, telefoni Daydream). Ora è disponibile quando si utilizza un dispositivo e un browser compatibili. Un esempio funzionante può essere trovato nel parco giochi Babylon.js qui. Il supporto del browser attuale è qui. Ho trovato Firefox il più stabile per le cuffie desktop.

WebXR è stato creato per indirizzare una gamma più ampia di dispositivi immersivi oltre alla semplice realtà virtuale. Questi includono dispositivi di realtà aumentata (contenuti digitali nella parte superiore del mondo reale) come telefoni, Microsoft HoloLens e Magic Leap One. WebVR aveva alcuni problemi che rendevano difficile estenderlo a tutti i dispositivi immersivi, quindi è stato deciso di essere deprecato a favore dell’API WebXR. Le app WebVR esistenti non saranno sfortunate grazie al polyfill WebVR che fornisce WebVR finché WebXR esiste.

BabyonJS WebXR Seagull (VR, AR, Standard)

Le specifiche WebXR sono ancora in fase di sviluppo ma hanno implementazioni sperimentali iniziali in alcuni browser (ad esempio Chrome Canary). Le date attuali del traguardo sono qui. Sfortunatamente, non è ancora consigliabile codificare perché è ancora in evoluzione.

Babylon.js ha già iniziato a fornire supporto per WebXR e i documenti sono disponibili qui. Tuttavia, i documenti non sono definitivi e si evolveranno al variare delle specifiche.

di risposta

La tecnologia Web funziona su una vasta gamma di dispositivi, così come WebXR e WebVR. Ciò rende difficile garantire il funzionamento delle applicazioni su una vasta gamma di hardware immersivo.

Alcuni dispositivi rilevano solo la rotazione (3dof) e non consentono all’utente di camminare per la stanza. Alcuni non hanno controller. Alcuni sono portatili. Alcuni puoi vedere attraverso. Alcuni hanno controller che tracciano la posizione e la rotazione (6dof). Ciò può rendere la logica dell’applicazione piuttosto complicata.

Gli oggetti di visualizzazione e gamepad di WebVR riportano le loro capacità come visto documentato qui.

  display.capabilities.hasPosition 
  gamepad.pose.hasPosition 

WebXR offre la possibilità alle applicazioni di eseguire query sulle modalità di tracciamento spaziale supportate e di avviare una sessione XR per una modalità specifica. Le applicazioni possono prima scegliere come target i dispositivi più limitati e aggiungere funzionalità aggiuntive, dato il supporto aggiuntivo per raggiungere la maggior parte dei dispositivi o indirizzare solo un set di funzionalità specifico richiesto per lo scenario.

Ulteriori informazioni al riguardo sono disponibili qui.

Iniziare

Babylon Playground

Il parco giochi Babylon.js rende abbastanza facile provare le cose. Esistono numerosi parchi giochi di esempio che possono essere utilizzati come blocchi predefiniti per app più complesse.

Parco giochi Building Blocks

  • WebVR di base
  • Ottieni posizioni / rotazione dei dispositivi
  • Ray casting
  • Immagine come trame
  • Gameloop
  • Rendering del testo
  • Pulsanti della GUI
  • Afferrare e lanciare con la fisica
  • Molti altri nella pagina degli esempi di Babylon

Per qualsiasi problema, non esitare a porre domande sul forum Babylon.

Qual’è il prossimo

L’API WebXR è un ottimo primo passo, quindi speriamo che sia disponibile nei browser entro quest’anno 🤞, ma mancano ancora alcune funzionalità per consentire scenari più avvincenti.

Visualizzazione del contenuto DOM

Sfortunatamente, i browser attualmente non supportano la trasformazione del contenuto html esistente in trame WebGL per numerosi motivi, tra cui problemi di sicurezza; ci sono alcune proposte per risolverlo in futuro, ma al momento le app devono eseguire il rendering da sole.

Soluzione attuale:

  • GUI di Babylon.js: utilizzare la GUI Babylon.js – Documentazione Babylon.js
  • html2canvas: https://html2canvas.hertzen.com/
  • Disegnare manualmente il testo su una tela e utilizzare la trama dinamica Babylons per avvolgere la tela: HTML Canvas Text

Flusso di lavoro XR

L’uso di cuffie con WebVR / XR può essere doloroso in questo momento. Per motivi di sicurezza i browser non consentono ai siti Web di interagire con l’auricolare fino a quando l’utente non ha esplicitamente eseguito un’azione per consentirlo, quindi per ora la maggior parte dei casi d’uso segue questo schema.

  1. Vai al sito Web al di fuori di VR / AR
  2. Fai clic su un pulsante sul sito per accedere alla modalità immersiva
  3. Indossa l’auricolare
  4. Esci dalla modalità immersiva e togli le cuffie
  5. Ripetere

Non è molto, ma lo sforzo extra rende molto più facile stare fuori dall’auricolare. La possibilità di navigare sul Web dalla maggior parte delle cuffie / dei browser renderebbe il loro utilizzo più avvincente.

Multitasking XR

Attualmente WebVR / XR ha il pieno controllo delle cuffie, ciò significa che è possibile visualizzare solo un’applicazione alla volta. Questo è un peccato perché la maggior parte delle persone fa più di una cosa alla volta. Un’esperienza di shopping o mini gioco WebVR / XR è molto meno allettante se non puoi usarla mentre guardi un video o parli con gli amici. Ho creato una proposta su come aggiungere supporto per questo sulla pagina github delle proposte WebXR se vuoi saperne di più e spero che WebXR non venga fornito in modo che non possa essere supportato in futuro.

WebGPU

WebGPU è una nuova bozza dell’API che mira a fornire alle applicazioni Web 3D un’API di livello inferiore rispetto a WebGL che offre più funzionalità e prestazioni migliorate. Ciò potrebbe aiutare il Web a colmare il divario con i motori 3D nativi.

Dispositivi / Content

Finora, la maggior parte dei contenuti WebVR / XR sembra piuttosto ingannevole. Il contenuto più visualizzato quotidianamente (social network, video, giochi, notizie) generalmente non è ancora disponibile su dispositivi immersivi in ​​un modo che offre più valore rispetto all’utilizzo di uno schermo tradizionale. Altri dispositivi immersivi vengono rilasciati ogni anno. Man mano che diventeranno più mainstream, gli sviluppatori avranno un incentivo maggiore a scegliere come target questi dispositivi con contenuti più coinvolgenti.

browser

Sebbene l’innovazione del browser desktop sia sembrata un po ‘limitata di recente, molti browser sperimentali sono spuntati attorno al web immersivo. Forniscono una visione approfondita delle nuove idee che possono rendere WebVR / AR molto più semplice e piacevole da consumare.

  • Exokit
  • Firefox Reality