WebVR Parte 5: Diseño e Implementación

Me encanta que los proyectos estén "terminados". Hemos llegado al final de nuestro viaje y al nacimiento de nuestra simulación de gravedad celestial en WebVR.

En esta publicación final, conectaremos nuestro código de simulación de alto rendimiento (Artículos 1, 2, 3) en un visualizador WebVR basado en el visualizador de lienzo (Artículo 4).

1. “problema de n-cuerpos” Introducción y Arquitectura
2. Web Workers nos proporciona hilos de navegación adicionales
3. WebAssembly y AssemblyScript para nuestro código de cuello de botella de rendimiento O(n²)
4. Visualización de datos de lienzo
5. Visualización de datos WebVR

Este es un artículo más largo, por lo que omitiremos algunos detalles técnicos tratados anteriormente. Consulte las publicaciones anteriores si desea una orientación, o siga leyendo peligrosamente.

Hemos estado explorando el cambio de paradigma del navegador de un tiempo de ejecución de JavaScript de subproceso único a un tiempo de ejecución de alto rendimiento de subprocesos múltiples (trabajadores web) (WebAssembly). Estas funciones informáticas de escritorio de rendimiento están disponibles en Progressive Web Apps y el modelo de distribución SaaS.

La realidad virtual creará entornos atractivos de ventas y marketing sin distracciones para comunicar, persuadir y medir el compromiso (seguimiento ocular e interacción). Los datos seguirán siendo ceros y unos, pero el resumen ejecutivo esperado y la experiencia del consumidor serán WebVR, al igual que creamos experiencias de panel móvil para la web plana hoy.

Estas tecnologías también permiten la computación en el borde del navegador distribuida. Por ejemplo, podríamos crear una aplicación basada en la web para ejecutar nuestros cálculos de WebAssembly para millones de estrellas en una simulación. Otro ejemplo es una aplicación de animación que renderiza las creaciones de otros usuarios mientras editas las tuyas.

El contenido de entretenimiento está liderando la aceptación de la Realidad Virtual, al igual que el entretenimiento liderado en dispositivos móviles. Sin embargo, una vez que la realidad virtual sea normal (como lo es hoy en día el diseño móvil primero), será la experiencia esperada (diseño primero de realidad virtual). Este es un momento muy emocionante para ser diseñador y desarrollador, y la realidad virtual es un paradigma de diseño completamente diferente.

No eres un diseñador de realidad virtual si no puedes agarrar. Esa es una declaración audaz, y hoy es la inmersión profunda en el diseño de realidad virtual. Este campo se está inventando mientras lees esto. Mi propósito es compartir mis experiencias en software y películas para preparar la conversación sobre el "primer diseño de realidad virtual". Todos aprendemos unos de otros.

Con esas grandiosas predicciones en mente, quería completar este proyecto como una demostración técnica profesional: ¡WebVR es una excelente opción para eso!

WebVR y Google A-Frame

El repositorio git de WebVR es una bifurcación de la versión de lienzo por un par de razones. Facilita el alojamiento del proyecto en las páginas de Github, y WebVR requirió un par de cambios que habrían abarrotado la versión de lienzo y estos artículos.

Si recuerdas nuestra primera publicación sobre la arquitectura, delegamos toda la simulación a nBodySimulator .

La publicación del trabajador web mostró que nBodySimulator tiene una función step() llamada cada 33 ms de la simulación. step() llama a calculateForces() para ejecutar nuestro código de simulación O(n²) WebAssembly (artículo 3), luego actualiza las posiciones y vuelve a pintar. En nuestra publicación anterior, creamos una visualización de lienzo, implementamos esto con un elemento de lienzo, a partir de esta clase 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)) } }

Definir el desafío de la integración

Tenemos la simulación. Ahora, queremos integrarnos con WebVR, sin rediseñar nuestro proyecto. Cualquier ajuste que hagamos a la simulación ocurre cada 33 ms en el subproceso principal de la interfaz de usuario en la función paint(bodies) .

Así es como mediremos “hecho”. Estoy emocionado, ¡manos a la obra!

Cómo hacer una realidad virtual

Primero, necesitamos un diseño:

• ¿De qué está hecha la realidad virtual?
• ¿Cómo se expresa el diseño WebVR?
• ¿Cómo podemos interactuar con él?

La Realidad Virtual se remonta a los albores de los tiempos. Cada historia de fogata es un pequeño mundo virtual de extravagantes exageraciones empapeladas con detalles triviales.

Podemos multiplicar por 10 nuestra historia de la fogata agregando imágenes y audio estereoscópicos en 3D. Mi instructor de presupuestos de producción cinematográfica solía decir: “Solo pagamos el póster. No estamos construyendo la realidad”.

Si está familiarizado con el navegador DOM, sabrá que crea una estructura jerárquica similar a un árbol.

Implícito en el diseño de la web está el espectador que ve desde el "frente". Mirar desde un lado revelaría los elementos DOM como líneas, y desde atrás, solo veríamos la etiqueta <body> porque oscurece a sus elementos secundarios.

Parte de la experiencia inmersiva de la realidad virtual es permitir que el usuario controle su punto de vista, estilo, ritmo y orden de las interacciones. No tienen que prestar atención a nada en particular. Si mueves o giras la cámara mediante programación, literalmente vomitarán por la enfermedad de la realidad virtual.

Tenga en cuenta que la enfermedad de realidad virtual no es una broma. Tanto nuestros ojos como nuestro oído interno detectan movimiento. Es muy importante para un animal que camina erguido. Cuando esos sensores de movimiento no están de acuerdo, nuestro cerebro naturalmente asume que nuestra boca ha estado comiendo tonterías nuevamente y vomita. Todos fuimos niños alguna vez. Ya se ha escrito mucho sobre este instinto de supervivencia en la realidad virtual. El título "Epic Fun" es gratis en Steam, y la montaña rusa es la mejor demostración de VR que he encontrado.

La realidad virtual se expresa como un "gráfico de escena". Un gráfico de escena tiene el mismo patrón de árbol que el DOM para ocultar el detalle y la complejidad de un entorno 3D convincente. Sin embargo, en lugar de desplazarse y enrutar, posicionamos al espectador donde quiere atraer la experiencia hacia él.

Aquí está el gráfico de escena Hello World del A-Frame WebVR Framework de 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>

Este documento HTML crea un DOM en el navegador. Las etiquetas <a-*> son parte del marco A-Frame, y <a-scene> es la raíz del escenario gráfico. Aquí, vemos cuatro primitivas 3D mostradas en la escena.

Primero, observe que estamos viendo la escena desde un navegador web plano. La pequeña máscara en la parte inferior derecha invita al usuario a cambiar a un modo estereoscópico 3D.

En teoría, deberías ser capaz de:

1. Abre esto en tu teléfono
2. Sostenga su teléfono en su cara
3. ¡Deléitese con el esplendor de una nueva realidad!

Nunca he logrado que funcione sin las elegantes lentes de un auricular VR. Puede obtener un auricular VR para un teléfono Android a bajo precio (un dispositivo básico basado en Google Cardboard), sin embargo, para desarrollar contenido, sugiero un HMD (pantalla montada en la cabeza) independiente como Oculus Quest.

Al igual que el buceo o el paracaidismo, la realidad virtual es un deporte de equipo.

“Acantilado” de aprendizaje de los diseñadores de realidad virtual

Observe que la escena A-Frame Hello World tiene una iluminación y una cámara predeterminadas:

• Las caras del cubo son de diferentes colores: el cubo se sombrea a sí mismo.
• El cubo arroja una sombra sobre el avión: hay una luz direccional.
• No hay espacio entre el cubo y el plano: este es un mundo con gravedad.

Estas son señales críticas que le dicen al espectador: "Relájate, esto en tu cara es totalmente normal".

También tenga en cuenta que esta configuración predeterminada está implícita en el código de la escena Hello World anterior. A-Frame sabiamente proporciona un valor predeterminado sensato, pero tome nota: la cámara y la iluminación son el abismo que los diseñadores de web plana deben cruzar para crear VR.

Damos por sentada la configuración de iluminación predeterminada. Por ejemplo, botones:

Observe cuán omnipresente es esta iluminación implícita en el diseño y la fotografía. Incluso el botón de "diseño plano" no pudo escapar de la iluminación predeterminada de la web: arroja una sombra hacia abajo y hacia la derecha.

El diseño, la comunicación y la implementación de configuraciones de iluminación y cámara son el acantilado de aprendizaje del diseñador de WebVR. El "lenguaje cinematográfico" es una colección de normas culturales, expresadas como diferentes configuraciones de cámara e iluminación, que comunican emocionalmente la historia a la audiencia. Los profesionales del cine que diseñan/mover las luces y la cámara alrededor de una escena son el departamento de agarre.

Volver a Nuestra Realidad Virtual

Ahora bien, volvamos al trabajo. Nuestra escena celeste de WebVR tiene un patrón similar:

 <!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>

Este documento HTML carga el marco A-Frame y un complemento de interacción. Nuestra escena comienza en <a-scene> .

En el interior, comenzamos con un elemento <a-sky color="#222"></a-sky> para colorear de fondo todo lo que no definimos en la escena.

A continuación, creamos un "plano orbital" para que el espectador "se aferre" mientras vuela a través de nuestro extraño y desconocido mundo. Creamos esto como un disco y una pequeña esfera negra en (0,0,0). Sin esto, convertirme me parecía “sin conexión a tierra”:

 <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 continuación, definimos una colección donde podemos agregar/eliminar/reposicionar entidades A-Frame.

 <a-entity></a-entity>

Este es el claro para que la paint(bodies) de nBodyVisualizer haga su trabajo.

Luego, creamos la relación entre el espectador y este mundo. Como demostración técnica, el propósito de este mundo es permitir que el espectador explore WebVR y la tecnología del navegador que lo permite. Una simple narración de "astronauta" crea una sensación de juego, y esta señal estelar es otro punto de referencia para la navegación.

 <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>

Eso completa nuestro escenario gráfico. Finalmente, quería algún tipo de interacción en una demostración de teléfono entre el usuario y este mundo giratorio. ¿Cómo podemos recrear el botón "Lanzar escombros" en VR?

El botón es un elemento primordial de todo diseño moderno: ¿dónde están los botones de realidad virtual?

Interacciones en WebVR

La Realidad Virtual tiene su propio “arriba” y “abajo del pliegue”. La primera interacción de un espectador es a través de su avatar o cámara. Estos son todos los controles para hacer zoom.

Si está leyendo esto en una computadora de escritorio, puede usar WASD para mover y el mouse para rotar la cámara. Esta exploración revela información pero no expresa tu voluntad.

Real Reality tiene un par de características muy importantes que no se encuentran a menudo en la web:

• Perspectiva : los objetos se vuelven visiblemente más pequeños a medida que se alejan de nosotros.
• Oclusión : los objetos se ocultan y revelan en función de su posición.

VR simula estas características para crear el efecto 3D. También se pueden usar en realidad virtual para revelar información e interfaz, y para establecer el estado de ánimo antes de presentar las interacciones. Descubrí que la mayoría de las personas solo necesitan un minuto para disfrutar de la experiencia antes de seguir adelante.

En WebVR, interactuamos en el espacio 3D. Para ello disponemos de dos herramientas básicas:

• Colisión : un evento 3D pasivo que se activa cuando dos objetos comparten el mismo espacio.
• Proyección : una llamada de función 2D activa que enumera todos los objetos que se cruzan con una línea.

La colisión es la interacción más "similar a la realidad virtual"

En realidad virtual, una "colisión" es exactamente lo que parece: cuando dos objetos comparten el mismo espacio, A-Frame crea un evento.

Para que el usuario “presione” un botón, debemos darle un peón y algo con lo que presionar el botón.

Desafortunadamente, WebVR aún no puede asumir controladores: muchas personas verán una versión web plana en su computadora de escritorio o teléfono, y muchas usarán un auricular como Google Cardboard o Samsung's Gear VR para mostrar una versión estereoscópica.

Si el usuario no tiene controladores, no puede extender la mano y "tocar" las cosas, por lo que cualquier colisión tendrá que ser con su "espacio personal".

Podríamos darle al jugador un peón con forma de astronauta para moverse, pero obligar al usuario a entrar en un miasma giratorio de planetas parece un poco desagradable y contrario a la amplitud de nuestro diseño.

La proyección es un clic 2D "similar a la web" en un espacio 3D

Además de "colisión", también podemos usar "proyección". Podemos proyectar una línea a través de nuestra escena y ver lo que toca. El ejemplo más común es el "rayo de teletransporte".

Un rayo de teletransporte traza una línea en el mundo para mostrar dónde puede moverse un jugador. Esta “proyección” busca lugares para aterrizar. Devuelve uno o más objetos en la ruta de la proyección. Aquí hay un ejemplo de rayo de teletransporte:

Observe que el rayo en realidad se implementa como una parábola que apunta hacia abajo. Esto significa que naturalmente se cruza con el "suelo" como un objeto arrojado. Esto también establece naturalmente una distancia máxima de teletransportación. Los límites son las opciones de diseño más importantes en VR. Afortunadamente, la realidad tiene muchas limitaciones naturales.

La proyección "aplana" el mundo 3D en 2D para que pueda señalar cosas para hacer clic como un mouse. Los juegos de disparos en primera persona son juegos elaborados de "clic 2D" en botones exquisitamente frustrantes, a menudo con una historia elaborada para explicar por qué no está bien que esos malditos botones te devuelvan el "clic".

Hay tantas armas en la realidad virtual porque las armas se han perfeccionado como ratones 3D precisos y confiables, y hacer clic es lo que los consumidores saben hacer sin aprender.

La proyección ofrece también la seguridad de la distancia en la relación con la escena. Recuerde, acercarse a algo en realidad virtual ocultará naturalmente todas las demás cosas cuya importancia aún no se haya revelado.

Proyección sin controladores usando la “mirada”

Para crear esta interacción primitiva en WebVR sin controladores, podemos proyectar la "mirada" de los espectadores como un "cursor" de línea de visión. Este cursor se puede usar mediante programación para interactuar con objetos con un "fusible". Esto se comunica al espectador como un pequeño círculo azul. ¡Ahora estamos haciendo clic!

Si recuerda historias de fogatas, cuanto más grande sea la mentira, menos detalles se necesitan para venderla. Una interacción de "mirada" obvia y absurda es mirar fijamente al sol. Usamos esta "mirada fija" para activar la adición de nuevos planetas "escombros" a nuestra simulación. Ningún espectador ha cuestionado nunca esta elección: la realidad virtual es bastante encantadora cuando es absurda.

En A-Frame, expresamos la cámara (el peón invisible de los jugadores) y este "cursor" de la línea de visión como nuestro dispositivo de cámara. Al colocar el <a-cursor> dentro de la <a-camera> , las transformaciones de la cámara también se aplican al cursor. Cuando el jugador mueve/rota su peón ( a-camera ), también mueve/rota su mirada ( 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>

El "fusible" del cursor espera hasta que haya pasado un segundo completo de "mirada fija" antes de emitir un evento.

Utilicé la iluminación predeterminada para que pueda notar que hay una "parte posterior" apagada del sol. Si bien no he estado fuera del plano orbital, no creo que así sea como funciona el sol. Sin embargo, funciona para nuestro póster de demostración técnica de la realidad.

Una opción alternativa sería colocar la iluminación dentro del elemento de la cámara, para que se mueva con el usuario. Esto crearía una experiencia minera de asteroides más íntima, y ​​posiblemente espeluznante. Estas son opciones de diseño divertidas.

Contamos con un Plan de Integración

Con eso, ahora tenemos nuestros puntos de integración entre A-Frame <a-scene> y nuestra simulación de JavaScript:

A-Frame <a-scene> :

• Una colección con nombre para los cuerpos: <a-entity></a-entity>

• Un cursor que emitirá eventos de proyección: <a-cursor color="#4CC3D9" fuse="true" timeout="1"></a-cursor>

Nuestra simulación de JavaScript:

• nBodyVisWebVR.paint(bodies) - agrega/elimina/reposiciona las entidades VR de los cuerpos de simulación

• addBodyArgs(name, color, x, y, z, mass, vX, vY, vZ) para agregar nuevos cuerpos de escombros a la simulación

index.html carga main.js , que inicializa nuestra simulación como la versión de lienzo:

 // 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)) }

Notará que aquí configuramos el htmlElement del visualizador en la colección de a-bodies a para contener los cuerpos.

Gestión programática de objetos A-Frame desde JavaScript

Habiendo declarado nuestra escena en index.html , ahora estamos listos para codificar el visualizador.

Primero, configuramos nBodyVisualizer para leer de la lista de cuerpos de nBodySimulation y crear/actualizar/eliminar objetos A-Frame en la colección <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() {}

En el constructor, guardamos nuestra colección A-Frame, establecemos una variable global para nuestro evento de mirada para encontrar la simulación e inicializamos un contador de identificación que usaremos para hacer coincidir los cuerpos entre nuestra simulación y la escena de 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) }) }

Primero, recorremos los cuerpos de simulación para etiquetar y/o crear una tabla de búsqueda para hacer coincidir las entidades de A-Frame con los cuerpos de simulación.

A continuación, recorremos los cuerpos A-Frame existentes y eliminamos los que fueron recortados por la simulación para viajar fuera de los límites. Esto aumenta el rendimiento percibido de la experiencia.

Finalmente, recorremos los cuerpos del sim para crear una nueva <a-sphere> para los cuerpos que faltan y para reposicionar los otros con aBody.object3D.position.set(body.x, body.y, body.z)

Podemos alterar mediante programación elementos en la escena A-Frame usando funciones DOM estándar. Para agregar un elemento a la escena, agregamos una cadena al HTML interno del contenedor. Este código me sabe raro pero funciona, y no encontré nada mejor.

Notará que cuando creamos la cadena para agregar, tenemos un operador ternario cerca de "estrella" para establecer un atributo.

 <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>`

Si el cuerpo es una "estrella", agregamos algunos atributos adicionales que describen sus eventos. Así es como se ve nuestra estrella cuando está montada en el 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>

Tres atributos, debris-listener , event-set__enter y event-set__leave , configuran nuestras interacciones y son la última etapa de nuestra integración.

Definición de eventos e interacciones A-Frame

Usamos el paquete NPM "aframe-event-set-component" en los atributos de la entidad para cambiar el color del sol cuando el espectador "lo mira".

Esta "mirada" es una proyección de la posición y la rotación del espectador, y la interacción proporciona la retroalimentación necesaria de que su mirada está haciendo algo.

Nuestra esfera estelar ahora tiene dos eventos abreviados habilitados por el complemento, event-set__enter y event-set__leave :

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

A continuación, decoramos nuestra esfera estelar con un debris-listener que implementaremos como un componente A-Frame personalizado.

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

Los componentes de A-Frame se definen a nivel global:

 // 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)) } }) } })

Este componente A-Frame actúa como un oyente de 'clic' que puede activarse con el cursor de la mirada para agregar 10 nuevos cuerpos aleatorios a nuestra escena.

Para resumir:

1. Declaramos la escena WebVR con A-Frame en HTML estándar.
2. Podemos agregar/eliminar/actualizar mediante programación entidades A-Frame en la escena desde JavaScript.
3. Podemos crear interacciones en JavaScript con controladores de eventos a través de complementos y componentes de A-Frame.

WebVR: Veni, Vidi, Vici

Espero que hayas sacado tanto provecho de esta demostración técnica como yo. Donde hemos aplicado estas funciones (trabajadores web y WebAssembly) a WebVR, también se pueden aplicar a la computación perimetral del navegador.

Ha llegado una gran ola tecnológica: la Realidad Virtual (VR). Independientemente de lo que haya sentido la primera vez que sostuvo un teléfono inteligente, experimentar la realidad virtual por primera vez brinda una experiencia emocional 10 veces mayor en todos los aspectos de la informática. Solo han pasado 12 años desde el primer iPhone.

La realidad virtual ha existido por mucho más tiempo, pero la tecnología necesaria para llevar la realidad virtual a los usuarios promedio llegó a través de la revolución móvil y Oculus Quest de Facebook, no la revolución de la PC.

Internet y el código abierto se encuentran entre las mayores maravillas del mundo de la humanidad. A todas las personas que crearon Internet plano: brindo por su coraje y sentido de la aventura.

¡Manifiesto! Construiremos mundos, porque tenemos el poder de crear.