WebVR Parte 5: Progettazione e Implementazione

Mi piace far "fare i progetti". Siamo arrivati ​​alla fine del nostro viaggio e alla nascita della nostra simulazione della gravità celeste in WebVR.

In questo post finale, collegheremo il nostro codice di simulazione ad alte prestazioni (articoli 1,2,3) in un visualizzatore WebVR basato sul visualizzatore canvas (articolo 4).

1. Introduzione e architettura del "problema n-body".
2. I Web Workers ci procurano thread aggiuntivi per il browser
3. WebAssembly e AssemblyScript per il nostro codice collo di bottiglia delle prestazioni O(n²).
4. Visualizzazione dei dati della tela
5. Visualizzazione dei dati WebVR

Questo è un articolo più lungo, quindi salteremo alcuni dettagli tecnici trattati in precedenza. Dai un'occhiata ai post precedenti se desideri un orientamento o continua a leggere pericolosamente.

Abbiamo esplorato il cambiamento di paradigma del browser da un runtime JavaScript a thread singolo a un runtime ad alte prestazioni (WebAssembly) multi-thread (lavoratori Web). Queste funzionalità di elaborazione desktop ad alte prestazioni sono disponibili nelle app Web progressive e nel modello di distribuzione SaaS.

La realtà virtuale creerà ambienti di vendita e marketing avvincenti e privi di distrazioni per comunicare, persuadere e misurare il coinvolgimento (tracciamento degli occhi e interazione). I dati saranno ancora zero e uno, ma il riepilogo esecutivo e l'esperienza del consumatore previsti saranno WebVR, proprio come oggi costruiamo esperienze dashboard mobili per il flat web.

Queste tecnologie consentono anche l'edge computing distribuito del browser. Ad esempio, potremmo creare un'applicazione basata sul Web per eseguire i nostri calcoli WebAssembly per milioni di stelle in una simulazione. Un altro esempio è un'applicazione di animazione che esegue il rendering delle creazioni di altri utenti mentre modifichi le tue.

I contenuti di intrattenimento stanno guidando l'adozione della realtà virtuale, proprio come l'intrattenimento su dispositivi mobili. Tuttavia, una volta che la VR sarà normale (come lo è oggi il design mobile first), sarà l'esperienza prevista (design VR first). Questo è un momento molto eccitante per essere un designer e uno sviluppatore e la realtà virtuale è un paradigma di progettazione completamente diverso.

Non sei un designer di realtà virtuale se non riesci ad afferrare. Questa è un'affermazione audace e oggi è il tuffo profondo nel design VR. Questo campo viene inventato mentre leggi questo. Il mio scopo è condividere le mie esperienze in software e film per innescare la conversazione "VR-first design". Impariamo tutti gli uni dagli altri.

Con queste grandiose previsioni in mente, volevo completare questo progetto come una demo tecnologica professionale: WebVR è un'ottima scelta per questo!

WebVR e Google A-Frame

Il repository git di WebVR è un fork della versione canvas per un paio di motivi. Semplifica l'hosting del progetto sulle pagine di Github e WebVR ha richiesto un paio di modifiche che avrebbero ingombrato la versione canvas e questi articoli.

Se vi ricordate il nostro primo post sull'architettura, abbiamo delegato l'intera simulazione a nBodySimulator .

Il post del web worker ha mostrato nBodySimulator ha una funzione step() chiamata ogni 33 ms della simulazione. step() chiama calculateForces() per eseguire il nostro codice di simulazione WebAssembly O(n²) (articolo 3), quindi aggiorna le posizioni e ridipinge. Nel nostro post precedente, creando una visualizzazione canvas, l'abbiamo implementata con un elemento canvas, partendo da questa classe base:

 /** * Base class that console.log()s the simulation state. */ export class nBodyVisualizer { constructor(htmlElement) { this.htmlElement = htmlElement this.resize() this.scaleSize = 25 // divided into bodies drawSize. drawSize is log10(mass) // This could be refactored to the child class. // Art is never finished. It must be abandoned. } resize() {} paint(bodies) { console.log(JSON.stringify(bodies, null, 2)) } }

Definire la sfida dell'integrazione

Abbiamo la simulazione. Ora vogliamo integrarci con WebVR, senza riprogettare il nostro progetto. Qualunque modifica apportiamo alla simulazione avviene ogni 33 ms nel thread dell'interfaccia utente principale nella funzione paint(bodies) .

Questo è il modo in cui misureremo il "fatto". Sono emozionato - mettiamoci al lavoro!

Come realizzare una realtà virtuale

Per prima cosa, abbiamo bisogno di un design:

• Di cosa è fatta la realtà virtuale?
• Come si esprime il design WebVR?
• Come possiamo interagire con esso?

La realtà virtuale risale alla notte dei tempi. Ogni storia di un falò è un minuscolo mondo virtuale di stravaganti esagerazioni tappezzate da dettagli banali.

Possiamo 10 volte la nostra storia del falò aggiungendo immagini e audio stereoscopici 3D. Il mio istruttore di budgeting per la produzione cinematografica era solito dire: "Stiamo pagando solo per il poster. Non stiamo costruendo la realtà".

Se hai familiarità con il browser DOM, saprai che crea una struttura gerarchica ad albero.

Implicito nella progettazione del web è lo spettatore che guarda dal "fronte". Guardando di lato rivelerebbe gli elementi DOM come linee, e da dietro, vedremmo solo il tag <body> perché oscura i suoi figli.

Parte dell'esperienza immersiva della realtà virtuale consiste nel consentire all'utente di controllare il proprio punto di vista, lo stile, il ritmo e l'ordine delle interazioni. Non devono prestare attenzione a nulla in particolare. Se sposti o ruoti la telecamera in modo programmatico, vomiteranno letteralmente a causa della malattia della realtà virtuale.

Tieni presente che la malattia della realtà virtuale non è uno scherzo. Sia i nostri occhi che le orecchie interne rilevano il movimento. È molto importante per un animale che cammina eretto. Quando quei sensori di movimento non sono d'accordo, il nostro cervello presume naturalmente che la nostra bocca abbia mangiato di nuovo sciocchezze e vomita. Eravamo tutti bambini una volta. Molto è stato già scritto su questo istinto di sopravvivenza in VR. Il titolo "Epic Fun" è gratuito su Steam e le montagne russe sono la migliore demo di malattia VR che ho trovato.

La realtà virtuale è espressa come un "grafico di scena". Un grafico di scena ha lo stesso schema ad albero del DOM per nascondere i dettagli e la complessità di un ambiente 3D convincente. Tuttavia, invece di scorrere e instradare, posizioniamo lo spettatore dove vuole portare l'esperienza verso di sé.

Ecco il grafico della scena Hello World da A-Frame WebVR Framework di Google:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello, WebVR! • A-Frame</title> <meta name="description" content="Hello, WebVR! • A-Frame"> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> </head> <body> <a-scene background="color: #FAFAFA"> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> </a-scene> </body> </html>

Questo documento HTML crea un DOM nel browser. I <a-*> fanno parte del framework A-Frame e <a-scene> è la radice del grafico della scena. Qui vediamo quattro primitive 3D visualizzate nella scena.

Innanzitutto, nota che stiamo visualizzando la scena da un browser web piatto. La piccola maschera in basso a destra invita l'utente a passare a una modalità stereoscopica 3D.

In teoria dovresti essere in grado di:

1. Apri questo sul tuo telefono
2. Avvicina il telefono al viso
3. Goditi lo splendore di una nuova realtà!

Non l'ho mai fatto funzionare senza gli obiettivi fantasiosi di un visore VR. Puoi ottenere un visore VR per un telefono Android a buon mercato (un dispositivo base basato su Google Cardboard), tuttavia, per lo sviluppo di contenuti, suggerisco un HMD (Head Mounted Display) autonomo come Oculus Quest.

Proprio come le immersioni subacquee o il paracadutismo, la realtà virtuale è uno sport con attrezzi.

"Cliff" di apprendimento dei designer di realtà virtuale

Si noti che la scena A-Frame Hello World ha un'illuminazione e una fotocamera predefinite:

• Le facce del cubo sono di colori diversi: il cubo si oscura automaticamente.
• Il cubo sta gettando un'ombra sull'aereo: c'è una luce direzionale.
• Non c'è spazio tra il cubo e l'aereo: questo è un mondo con gravità.

Questi sono segnali critici che dicono allo spettatore: "Rilassati, questa cosa sul tuo viso è del tutto normale".

Si noti inoltre che questa configurazione predefinita è implicita nel codice della scena Hello World sopra. A-Frame fornisce saggiamente un'impostazione predefinita ragionevole, ma prendi nota: fotocamera e illuminazione sono l'abisso che i designer di flat-web devono attraversare per creare la realtà virtuale.

Diamo per scontata la configurazione dell'illuminazione predefinita. Ad esempio, pulsanti:

Nota quanto sia pervasiva questa illuminazione implicita nel design e nella fotografia. Anche il pulsante "design piatto" non poteva sfuggire all'illuminazione predefinita del web: sta proiettando un'ombra in basso ea destra.

Progettare, comunicare e implementare l'illuminazione e le impostazioni della telecamera sono la scogliera di apprendimento del progettista WebVR. La "Lingua del cinema" è una raccolta di norme culturali - espresse come diverse impostazioni della telecamera e dell'illuminazione - che comunicano emotivamente la storia al pubblico. I professionisti del cinema che progettano/spostano luci e cinepresa intorno a una scena sono il reparto grip.

Torna alla nostra realtà virtuale

Ora allora, torniamo al lavoro. La nostra scena WebVR celeste ha uno schema simile:

 <!DOCTYPE> <html> <head> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/aframe-event-set-component.min.js"></script> <script src="main.js"></script> </head> <body> <a-scene> <a-sky color="#222"></a-sky> <a-entity geometry="primitive: circle; radius: 12" position="0 0 -.5" material="color: #333; transparent: true; opacity: 0.5"> <a-sphere color="black" radius=."02"></a-sphere> </a-entity> <a-entity></a-entity> <a-entity geometry="primitive: plane; width: 2; height: auto" position="0 -10 .3" rotation="55 0 0" material="color: blue" text="value: Welcome Astronaut!..."> </a-entity> <a-entity position="0 -12 .7" rotation="55 0 0"> <a-camera> <a-cursor color="#4CC3D9" fuse="true" timeout="1"></a-cursor> </a-camera> </a-entity> </a-scene> </body> </html>

Questo documento HTML carica il framework A-Frame e un plug-in di interazione. La nostra scena inizia a <a-scene> .

All'interno, iniziamo con un elemento <a-sky color="#222"></a-sky> per colorare di sfondo tutto ciò che non definiamo nella scena.

Successivamente, creiamo un "aereo orbitale" a cui lo spettatore può "aggrapparsi" mentre vola attraverso il nostro mondo strano e sconosciuto. Lo creiamo come un disco e una piccola sfera nera a (0,0,0). Senza questo, girare mi sembrava "senza fondamento":

 <a-entity geometry="primitive: circle; radius: 12" position="0 0 -.5" material="color: #333; transparent: true; opacity: 0.5"> <a-sphere color="black" radius=."02"></a-sphere> </a-entity>

Successivamente, definiamo una raccolta in cui possiamo aggiungere/rimuovere/riposizionare entità A-Frame.

 <a-entity></a-entity>

Questa è la compensazione per la paint(bodies) di nBodyVisualizer per fare il suo lavoro.

Quindi, creiamo la relazione tra lo spettatore e questo mondo. Come demo tecnica, lo scopo di questo mondo è quello di consentire allo spettatore di esplorare WebVR e la tecnologia del browser che lo abilita. Una semplice narrazione da "astronauta" crea un senso di gioco e questo cartello stellare è un altro punto di riferimento per la navigazione.

 <a-entity geometry="primitive: plane; width: 2; height: auto" position="0 -10 .3" rotation="55 0 0" material="color: blue" text="value: Welcome Astronaut!\n ..."> </a-entity>

Questo completa il nostro grafico della scena. Infine, volevo una sorta di interazione su una demo del telefono tra l'utente e questo mondo spinoso. Come possiamo ricreare il pulsante "Lancia detriti" in VR?

Il pulsante è un elemento fondamentale di tutto il design moderno: dove sono i pulsanti VR?

Interazioni in WebVR

La realtà virtuale ha il suo "sopra" e "sotto la piega". La prima interazione di uno spettatore avviene attraverso il suo avatar o la sua fotocamera. Questi sono tutti i controlli per ingrandire.

Se stai leggendo questo su un desktop, puoi WASD per muoverti e il mouse per ruotare la fotocamera. Questa esplorazione rivela informazioni ma non esprime la tua volontà.

Real Reality ha un paio di caratteristiche molto importanti che non si trovano spesso sul web:

• Prospettiva : gli oggetti diventano visibilmente più piccoli man mano che si allontanano da noi.
• Occlusione : gli oggetti vengono nascosti e rivelati in base alla posizione.

VR simula queste caratteristiche per creare l'effetto 3D. Possono anche essere usati in VR per rivelare informazioni e interfaccia e per creare l'atmosfera prima di presentare le interazioni. Ho scoperto che la maggior parte delle persone ha solo bisogno di un minuto per godersi l'esperienza prima di andare avanti.

In WebVR, interagiamo nello spazio 3D. Abbiamo due strumenti di base per questo:

• Collisione : un evento 3D passivo attivato quando due oggetti condividono lo stesso spazio.
• Proiezione - una chiamata di funzione 2D attiva che elenca tutti gli oggetti che intersecano una linea.

La collisione è l'interazione più "simile alla realtà virtuale".

In VR, una "collisione" è esattamente ciò che sembra: quando due oggetti condividono lo stesso spazio, A-Frame crea un evento.

Affinché l'utente possa "premere" un pulsante, dobbiamo dargli una pedina e qualcosa con cui premere il pulsante.

Sfortunatamente, WebVR non può ancora assumere controller: molte persone guarderanno una versione flat-web sul proprio desktop o telefono e molti useranno un visore come Google Cardboard o Gear VR di Samsung per mostrare una versione stereoscopica.

Se l'utente non ha controller, non può raggiungere e "toccare" le cose, quindi qualsiasi collisione dovrà riguardare il suo "spazio personale".

Potremmo dare al giocatore una pedina a forma di astronauta per muoversi, ma costringere l'utente in un vorticoso miasma di pianeti sembra un po' scoraggiante e contrario alla spaziosità del nostro design.

La proiezione è un clic 2D "simile al Web" in uno spazio 3D

Oltre a "collisione", possiamo anche usare "proiezione". Possiamo proiettare una linea attraverso la nostra scena e vedere cosa tocca. L'esempio più comune è il "raggio di teletrasporto".

Un raggio di teletrasporto traccia una linea nel mondo per mostrare dove un giocatore può muoversi. Questa “proiezione” cerca posti dove atterrare. Restituisce uno o più oggetti nel percorso della proiezione. Ecco un esempio di raggio di teletrasporto:

Si noti che il raggio è effettivamente implementato come una parabola rivolta verso il basso. Ciò significa che si interseca naturalmente con il "suolo" come un oggetto lanciato. Questo imposta naturalmente anche una distanza massima di teletrasporto. I limiti sono le scelte progettuali più importanti in VR. Fortunatamente, la realtà ha molti limiti naturali.

La proiezione "appiattisce" il mondo 3D in 2D in modo da poter puntare su oggetti per fare clic su di essi come un mouse. Gli sparatutto in prima persona sono giochi elaborati di "clic 2D" su pulsanti squisitamente frustranti, spesso con una storia elaborata per spiegare perché non va bene quei dannati pulsanti che ti stanno "facendo clic".

Ci sono così tante pistole in VR perché le pistole sono state perfezionate come mouse 3D accurati e affidabili - e fare clic è ciò che i consumatori sanno come fare senza imparare.

La proiezione offre anche la sicurezza della distanza nel rapporto con la scena. Ricorda, avvicinarsi a qualcosa in VR occuperà naturalmente tutte le altre cose la cui importanza potrebbe non essere stata ancora rivelata.

Proiezione senza controller utilizzando lo "sguardo"

Per creare questa primitiva di interazione in WebVR senza controller, possiamo proiettare lo "sguardo" degli spettatori come un "cursore" della linea di vista. Questo cursore può essere utilizzato a livello di codice per interagire con gli oggetti con una "miccia". Questo viene comunicato allo spettatore come un piccolo cerchio blu. Ora stiamo cliccando!

Se ricordi le storie di falò, più grande è la bugia, meno dettagli sono necessari per venderla. Un'interazione di "sguardo" ovvia e assurda è fissare il sole. Usiamo questo "sguardo" per attivare l'aggiunta di nuovi pianeti "detriti" alla nostra simulazione. Nessuno spettatore ha mai messo in dubbio questa scelta: la realtà virtuale è piuttosto affascinante quando assurda.

In A-Frame, esprimiamo la telecamera (il pedone invisibile dei giocatori) e questa linea di visuale "cursore" come il nostro sartiame della telecamera. Posizionando il <a-cursor> all'interno della <a-camera> , le trasformazioni della telecamera vengono applicate anche al cursore. Quando il giocatore muove/ruota il pedone ( a-camera ), sposta/ruota anche il suo sguardo ( a-cursor ).

 // src/index.html <a-entity position="0 -12 .7" rotation="55 0 0"> <a-camera> <a-cursor color="#4CC3D9" fuse="true" timeout="1"></a-cursor> </a-camera> </a-entity>

La “miccia” del cursore attende che sia trascorso un intero secondo di “stare” prima di emettere un evento.

Ho usato l'illuminazione predefinita, quindi potresti notare che c'è un "retro" del sole spento. Anche se non sono stato al di fuori del piano orbitale, non penso che sia così che funziona il sole. Tuttavia, funziona per il nostro poster demo tecnologico della realtà.

Un'opzione alternativa sarebbe quella di inserire l'illuminazione all'interno dell'elemento della telecamera, in modo che si muova con l'utente. Ciò creerebbe un'esperienza di minatore di asteroidi più intima e forse spettrale. Queste sono scelte di design divertenti.

Abbiamo un piano di integrazione

Con ciò, ora abbiamo i nostri punti di integrazione tra A-Frame <a-scene> e la nostra simulazione JavaScript:

A-Frame <a-scene> :

• Una raccolta denominata per i corpi: <a-entity></a-entity>

• Un cursore che emetterà eventi di proiezione: <a-cursor color="#4CC3D9" fuse="true" timeout="1"></a-cursor>

La nostra simulazione JavaScript:

• nBodyVisWebVR.paint(bodies) - aggiungi/rimuovi/riposiziona le entità VR dai corpi di simulazione

• addBodyArgs(name, color, x, y, z, mass, vX, vY, vZ) per aggiungere nuovi corpi detritici alla simulazione

index.html carica main.js , che inizializza la nostra simulazione in modo molto simile alla versione canvas:

 // src/main.js import { nBodyVisualizer, nBodyVisWebVR } from ."/nBodyVisualizer" import { Body, nBodySimulator } from ."/nBodySimulator" window.onload = function() { // Create a Simulation const sim = new nBodySimulator() // this Visualizer manages the UI sim.addVisualization(new nBodyVisWebVR(document.getElementById("a-bodies"), sim)) // making up stable universes is hard // name color xyzm vz vy vz sim.addBody(new Body("star", "yellow", 0, 0, 1, 1e9)) sim.addBody(new Body("hot-jupiter", "red", -1, -1, 1, 1e4, .24, -0.05, 0)) sim.addBody(new Body("cold-jupiter", "purple", 4, 4, .5, 1e4, -.07, 0.04, 0)) // Start simulation sim.start() // Add another sim.addBody(new Body("saturn", "blue", -8, -8, .1, 1e3, .07, -.035, 0)) }

Noterai qui che impostiamo l' htmlElement del visualizzatore sulla raccolta a a-bodies per contenere i corpi.

Gestione a livello di codice di oggetti A-Frame da JavaScript

Dopo aver dichiarato la nostra scena in index.html , siamo ora pronti per codificare il visualizzatore.

Innanzitutto, impostiamo nBodyVisualizer per leggere dall'elenco dei corpi di nBodySimulation e creare/aggiornare/eliminare oggetti A-Frame nella raccolta <a-entity></a-entity> .

 // src/nBodyVisualizer.js /** * This is the WebVR visualizer. * It's responsible for painting and setting up the entire scene. */ export class nBodyVisWebVR extends nBodyVisualizer { constructor(htmlElement, sim) { // HTML Element is a-collection#a-bodies. super(htmlElement) // We add these to the global namespace because // this isn't the core problem we are trying to solve. window.sim = sim this.nextId = 0 } resize() {}

Nel costruttore, salviamo la nostra raccolta A-Frame, impostiamo una variabile globale per il nostro evento di sguardo per trovare la simulazione e inizializziamo un contatore di ID che useremo per abbinare i corpi tra la nostra simulazione e la scena di A-Frame.

 paint(bodies) { let i // Create lookup table: lookup[body.aframeId] = body const lookup = bodies.reduce( (total, body) => { // If new body, give it an aframeId if (!body.aframeId) body.aframeId = `a-sim-body-${body.name}-${this.nextId++}` total[body.aframeId] = body return total }, {}) // Loop through existing a-sim-bodies and remove any that are not in // the lookup - this is our dropped debris const aSimBodies = document.querySelectorAll(."a-sim-body") for (i = 0; i < aSimBodies.length; i++) { if (!lookup[aSimBodies[i].id]) { // if we don't find the scene's a-body in the lookup table of Body()s, // remove the a-body from the scene aSimBodies[i].parentNode.removeChild(aSimBodies[i]); } } // loop through sim bodies and upsert let aBody bodies.forEach( body => { // Find the html element for this aframeId aBody = document.getElementById(body.aframeId) // If html element not found, make one. if (!aBody) { this.htmlElement.innerHTML += ` <a-sphere class="a-sim-body" dynamic-body ${ (body.name === "star") ? "debris-listener event-set__enter='_event: mouseenter; color: green' event-set__leave='_event: mouseleave; color: yellow'" : ""} position="0 0 0" radius="${body.drawSize/this.scaleSize}" color="${body.color}"> </a-sphere>` aBody = document.getElementById(body.aframeId) } // reposition aBody.object3D.position.set(body.x, body.y, body.z) }) }

Per prima cosa, eseguiamo il ciclo attraverso i corpi della simulazione per etichettare e/o creare una tabella di ricerca per abbinare le entità A-Frame ai corpi della simulazione.

Successivamente, eseguiamo il ciclo dei corpi A-Frame esistenti e rimuoviamo quelli che sono stati tagliati dalla simulazione per viaggiare fuori dai limiti. Ciò aumenta le prestazioni percepite dell'esperienza.

Infine, eseguiamo il loop attraverso i corpi della sim per creare una nuova <a-sphere> per i corpi mancanti e per riposizionare gli altri con aBody.object3D.position.set(body.x, body.y, body.z)

Possiamo modificare a livello di codice gli elementi nella scena A-Frame usando le funzioni DOM standard. Per aggiungere un elemento alla scena, aggiungiamo una stringa all'innerHTML del contenitore. Questo codice ha un sapore strano per me ma funziona e non ho trovato niente di meglio.

Noterai quando creiamo la stringa da aggiungere, abbiamo un operatore ternario vicino a "star" per impostare un attributo.

 <a-sphere class="a-sim-body" dynamic-body ${ (body.name === "star") ? "debris-listener event-set__enter='_event: mouseenter; color: green' event-set__leave='_event: mouseleave; color: yellow'" : ""} position="0 0 0" radius="${body.drawSize/this.scaleSize}" color="${body.color}"> </a-sphere>`

Se il corpo è una "stella", aggiungiamo alcuni attributi extra che descrivono i suoi eventi. Ecco come appare la nostra stella quando è montata nel DOM:

 <a-sphere class="a-sim-body" dynamic-body="" debris-listener="" event-set__enter="_event: mouseenter; color: green" event-set__leave="_event: mouseleave; color: yellow" position="0 0 0" radius="0.36" color="yellow" material="" geometry=""></a-sphere>

Tre attributi, debris-listener , event-set__enter e event-set__leave , impostano le nostre interazioni e rappresentano l'ultimo giro della nostra integrazione.

Definizione di eventi e interazioni A-Frame

Usiamo il pacchetto NPM "aframe-event-set-component" negli attributi dell'entità per cambiare il colore del sole quando lo spettatore lo "guarda".

Questo "sguardo" è una proiezione dalla posizione e dalla rotazione dello spettatore e l'interazione fornisce il feedback necessario sul fatto che il suo sguardo sta facendo qualcosa.

La nostra sfera stellare ora ha due eventi abbreviati abilitati dal plugin, event-set__enter e event-set__leave :

 <a-sphere ... event-set__enter="_event: mouseenter; color: green" event-set__leave="_event: mouseleave; color: yellow" … ></a-sphere>

Successivamente, decoriamo la nostra sfera stellare con un debris-listener che implementeremo come componente A-Frame personalizzato.

 <a-sphere ... debris-listener="" … ></a-sphere>

I componenti A-Frame sono definiti a livello globale:

 // src/nBodyVisualizer.js // Component to add new bodies when the user stares at the sun. See HTML AFRAME.registerComponent('debris-listener', { init: function () { // Helper function function rando(scale) { return (Math.random()-.5) * scale } // Add 10 new bodies this.el.addEventListener('click', function (evt) { for (let x=0; x<10; x++) { // name, color, x, y, z, mass, vx, vy, vz window.sim.addBodyArgs("debris", "white", rando(10), rando(10), rando(10), 1, rando(.1), rando(.1), rando(.1)) } }) } })

Questo componente A-Frame agisce come un ascoltatore "clic" che può essere attivato dal cursore dello sguardo per aggiungere 10 nuovi corpi casuali alla nostra scena.

Riassumere:

1. Dichiariamo la scena WebVR con A-Frame in HTML standard.
2. Possiamo aggiungere/rimuovere/aggiornare a livello di codice entità A-Frame nella scena da JavaScript.
3. Possiamo creare interazioni in JavaScript con gestori di eventi tramite plug-in e componenti A-Frame.

WebVR: Veni, Vidi, Vici

Spero che tu abbia ricavato tanto da questa demo tecnica quanto me. Laddove abbiamo applicato queste funzionalità (lavoratori Web e WebAssembly) a WebVR, possono essere applicate anche all'edge computing del browser.

È arrivata un'enorme ondata di tecnologia: la realtà virtuale (VR). Qualunque cosa tu abbia provato la prima volta che hai impugnato uno smartphone, l'esperienza della realtà virtuale per la prima volta offre un'esperienza emotiva 10 volte superiore in ogni aspetto dell'informatica. Sono passati solo 12 anni dal primo iPhone.

La realtà virtuale esiste da molto più tempo, ma la tecnologia necessaria per portare la realtà virtuale agli utenti medi è arrivata tramite la rivoluzione mobile e Oculus Quest di Facebook, non la rivoluzione del PC.

Internet e l'open-source sono tra le più grandi meraviglie del mondo dell'umanità. A tutte le persone che hanno creato Internet piatto, brindo al tuo coraggio e senso di avventura.

Manifesto! Costruiremo mondi, perché abbiamo il potere di creare.