WebVR y la revolución de 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 más sustancial en todos los aspectos de la informática. Solo han pasado 12 años desde el primer iPhone. Como concepto, la realidad virtual existe desde hace más tiempo, pero la tecnología necesaria para llevar la realidad virtual a los usuarios promedio no estuvo disponible hasta hace poco.

Oculus Quest es la plataforma de juegos para consumidores de Facebook para VR. Su característica principal es que no necesita un PC. Proporciona una experiencia de realidad virtual inalámbrica y móvil. Puede entregarle a alguien un auricular VR en una cafetería para compartir un modelo 3D con la misma incomodidad que buscar algo en Google en una conversación, pero la recompensa de la experiencia compartida es mucho más convincente.

La realidad virtual cambiará la forma en que trabajamos, compramos, disfrutamos el contenido y mucho más.

En esta serie, exploraremos las tecnologías de navegador actuales que permiten WebVR y la computación de borde del navegador. Esta primera publicación destaca esas tecnologías y una arquitectura para nuestra simulación.

En los siguientes artículos, destacaremos algunos desafíos y oportunidades únicos en el código. Para explorar esta tecnología, hice una demostración de Canvas y WebVR y publiqué el código en GitHub.

Qué significa VR para UX

Como desarrollador de Toptal, ayudo a las empresas a llevar proyectos desde la idea hasta una prueba beta con los usuarios. Entonces, ¿cómo es relevante la realidad virtual para las aplicaciones web comerciales?

El contenido de entretenimiento liderará la adopción de la Realidad Virtual (como lo hizo en los dispositivos móviles). Sin embargo, una vez que la realidad virtual se generalice como los dispositivos móviles, la experiencia esperada será el "diseño primero en realidad virtual" (similar a "primero en dispositivos móviles").

“Mobile-first” fue un cambio de paradigma, “Offline-first” es un cambio de paradigma actual y “VR-first” está en el horizonte. Este es un momento muy emocionante para ser diseñador y desarrollador, porque la realidad virtual es un paradigma de diseño completamente diferente (exploraremos esto en el último artículo de la serie). No eres un diseñador de realidad virtual si no puedes agarrar.

La realidad virtual comenzó en la revolución de la informática personal (PC), pero está llegando como el siguiente paso en la revolución móvil. Oculus Quest de Facebook se basa en Google Cardboard utilizando el sistema en chip (SoC) Snapdragon 835 de Qualcomm, seguimiento de auriculares (empleando cámaras móviles) y se ejecuta en Android, todo empaquetado para montarse cómodamente en los tiernos órganos sensoriales de su cara.

El Oculus Quest de $400 ofrece experiencias increíbles que puedo compartir con mis amigos. Un nuevo iPhone de $1,000 ya no impresiona a nadie. La humanidad no va a escupir el anzuelo de realidad virtual.

Aplicaciones de la industria de realidad virtual

La realidad virtual está comenzando a hacer sentir su presencia en numerosas industrias y campos de la informática. Además del consumo de contenido y los juegos, que tienden a recibir mucha cobertura de prensa, la realidad virtual está cambiando lentamente las industrias que van desde la arquitectura hasta la atención médica.

• La arquitectura y los bienes raíces crean el valor de una realidad física a costos extraordinarios (en comparación con lo digital), por lo que es natural que los arquitectos y los agentes inmobiliarios lleven a los clientes a través de una realidad virtual para mostrar la experiencia. VR ofrece una "prueba beta" de su estadio de $ 200 millones, o un recorrido virtual por teléfono.
• El aprendizaje y la educación en realidad virtual transmiten experiencias que de otro modo serían imposibles de replicar con imágenes o videos.
• Las empresas automotrices se benefician de la realidad virtual, desde el diseño y la seguridad hasta la capacitación y el marketing.
• Los profesionales de la salud del Lucile Packard Children's Hospital de Stanford han estado utilizando la realidad virtual para planificar cirugías cardíacas, lo que les permite comprender la anatomía de un paciente antes de realizar una sola incisión. La realidad virtual también está reemplazando a los productos farmacéuticos para aliviar el dolor.
• Retail, Marketing y Hospitality ya ofrecen recorridos virtuales de productos y lugares. A medida que los minoristas comiencen a comprender cuán convincente podría ser su experiencia de compra, los innovadores minoristas pondrán el último clavo en el ataúd de las compras físicas.

A medida que avanza la tecnología, veremos una mayor adopción en varias industrias. La pregunta ahora es qué tan rápido ocurrirá este cambio y qué industrias se verán más afectadas.

Qué significa la realidad virtual para la web y la computación perimetral

“Edge Computing” mueve la informática fuera de su clúster de servidor de aplicaciones principal y más cerca de su usuario final. Tiene rumores de marketing porque las empresas de hospedaje están ansiosas por alquilarle un servidor de baja latencia en cada ciudad.

Un ejemplo de computación perimetral B2C es el servicio Stadia de Google, que ejecuta cargas de trabajo de juegos intensivas de CPU/GPU en los servidores de Google y luego envía el juego a un dispositivo como Netflix. Cualquier Chromebook tonto de Netflix de repente puede jugar juegos como una computadora de juegos de alta gama. Esto también crea nuevas opciones de arquitectura de juegos multijugador monolíticos estrechamente integrados.

Un ejemplo de computación perimetral B2B es GRID de Nvidia, que proporciona estaciones de trabajo remotas virtuales habilitadas para GPU de Nvidia a dispositivos económicos de clase Netflix.

Pregunta: ¿Por qué no trasladar la informática perimetral del centro de datos al navegador?

Un caso de uso para la computación de borde del navegador es una "granja de procesamiento de animación" de computadoras que procesan una película 3D al dividir el proceso de un día en partes que miles de computadoras pueden procesar en unos pocos minutos.

Tecnologías como Electron y NW.js llevaron la programación web a las aplicaciones de escritorio. Las nuevas tecnologías de navegación (como las PWA) están devolviendo el modelo de distribución de aplicaciones web (SaaS se trata de distribución) a la informática de escritorio. Los ejemplos incluyen proyectos como SETI@Home, Folding@Home (plegado de proteínas) o varias granjas de procesamiento. En lugar de tener que descargar un instalador, ahora es posible unirse a la granja de cómputo simplemente visitando el sitio web.

Pregunta: ¿WebVR es una "cosa real" o el contenido de VR se introducirá en "tiendas de aplicaciones" y jardines amurallados?

Como freelancer y tecnólogo de Toptal, es mi trabajo saber. Así que construí un prototipo tecnológico para responder a mis propias preguntas. Las respuestas que encontré son muy emocionantes y escribí esta serie de blogs para compartirlas con ustedes.

Spoiler: Sí, WebVR es algo real. Y sí, la computación perimetral del navegador puede usar las mismas API para acceder a la potencia de cómputo que habilita WebVR.

¡Muy divertido escribir! Construyamos una prueba de concepto

Para probar esto, haremos una simulación astrofísica del problema de n-cuerpos.

Los astronavegadores pueden usar ecuaciones para calcular las fuerzas gravitatorias entre dos objetos. Sin embargo, no hay ecuaciones para sistemas con tres o más cuerpos, lo cual es inconveniente para todos los sistemas del universo conocido. ¡Ciencia!

Si bien el problema de los n cuerpos no tiene una solución analítica (ecuaciones), sí tiene una solución computacional (algoritmos), que es O(n²). O(n²) es prácticamente el peor de los casos posibles, pero es cómo obtener lo que queremos y por qué se inventó la notación Big O en primer lugar.

Figura 2: “¿Arriba ya la derecha? Bueno, no soy ingeniero, ¡pero el rendimiento me parece bueno!”

Si está desempolvando sus habilidades con Big O, recuerde que la notación Big O mide cómo el trabajo de un algoritmo "escala" según el tamaño de los datos en los que está operando.

Nuestra colección son todos los cuerpos en nuestra simulación. Agregar un nuevo cuerpo significa agregar un nuevo cálculo de gravedad de dos cuerpos para cada cuerpo existente en el conjunto.

Si bien nuestro bucle interno es < n, no es <= O(log n), por lo que todo el algoritmo es O(n²). Esos son los descansos, sin crédito extra.

 for (let i: i32 = 0; i < numBodies; i++) { // n // Given body i: pair with every body[j] where j > i for (let j: i32 = i + 1; j < numBodies; j++) { // 1/2 n is > log n, so n. // Calculate the force the bodies apply to one another stuff = stuff } }

La solución n-body también nos ubica en el mundo de la física/motores de juego y una exploración de la tecnología necesaria para WebVR.

Para nuestro prototipo, una vez que hayamos construido la simulación, haremos una visualización en 2D.

Finalmente, cambiaremos la visualización de Canvas por una versión WebVR.

Si está impaciente, puede saltar directamente al código del proyecto.

Web Workers, WebAssembly, AssemblyScript, Canvas, Rollup, WebVR, Aframe

Abróchate el cinturón para un juego lleno de acción y diversión a través de un grupo de nuevas tecnologías que ya han llegado a tu navegador móvil moderno (lo siento, no a ti Safari):

• Usaremos Web Workers para mover la simulación a su propio subproceso de CPU, mejorando el rendimiento percibido y real.
• Usaremos WebAssembly para ejecutar el algoritmo O(n²) en código compilado de alto rendimiento (C/C++/Rust/AssemblyScript/etc.) en ese nuevo subproceso.
• Usaremos Canvas para visualizar nuestra simulación en 2D.
• Usaremos Rollup y Gulp como una alternativa ligera a Webpack.
• Finalmente, usaremos WebVR y Aframe para crear una realidad virtual para su teléfono.

Arquitectura al dorso de la servilleta antes de sumergirse en el código

Comenzaremos con una versión de Canvas porque probablemente estés leyendo esto en el trabajo.

En las primeras publicaciones, usaremos las API de navegador existentes para acceder a los recursos informáticos necesarios para crear una simulación intensiva de CPU sin degradar la experiencia del usuario.

Luego, visualizaremos esto en el navegador usando Canvas, y finalmente cambiaremos nuestra visualización de Canvas por una WebVR usando Aframe.

Bucle de simulación y diseño de API

Nuestra simulación de n cuerpos predice la posición de los objetos celestes utilizando las fuerzas de la gravedad. Podemos calcular la fuerza exacta entre dos objetos con una ecuación, pero para calcular las fuerzas entre tres o más objetos, necesitamos dividir la simulación en pequeños segmentos de tiempo e iterar. Nuestro objetivo es 30 fotogramas/segundo (velocidad de la película) o ~33 ms/fotograma.

Para orientarse, aquí hay una descripción general rápida del código:

1. Navegador GET's index.html
2. Que ejecuta main.js como el código a continuación. Las import se manejan con Rollup, una alternativa a Webpack.
3. Lo que crea un nuevo nBodySimulator()
4. Que tiene una API externa:
   1. sim.addVisualization()
   2. sim.añadircuerpo()
   3. sim.inicio()

 // src/main.js import { nBodyVisPrettyPrint, nBodyVisCanvas } from "./nBodyVisualizer" import { Body, nBodySimulator } from "./nBodySimulator" window.onload = function() { // Create a Simulation const sim = new nBodySimulator() // Add some visualizers sim.addVisualization(new nBodyVisPrettyPrint(document.getElementById("visPrettyPrint"))) sim.addVisualization(new nBodyVisCanvas(document.getElementById("visCanvas"))) // This is a simulation, using opinionated G = 6.674e-11 // So boring values are allowed and create systems that collapse over billions of years. // For spinny, where distance=1, masses of 1e10 are fun. // Set Z coords to 1 for best visualization in overhead 2D Canvas. // lol, making up stable universes is hard // name color xyzm vz vy vz sim.addBody(new Body("star", "yellow", 0, 0, 0, 1e9)) sim.addBody(new Body("hot jupiter", "red", -1, -1, 0, 1e4, .24, -0.05, 0)) sim.addBody(new Body("cold jupiter", "purple", 4, 4, -.1, 1e4, -.07, 0.04, 0)) // A couple far-out asteroids to pin the canvas visualization in place. sim.addBody(new Body("asteroid", "black", -15, -15, 0, 0)) sim.addBody(new Body("asteroid", "black", 15, 15, 0, 0)) // Start simulation sim.start() // Add another sim.addBody(new Body("saturn", "blue", -8, -8, .1, 1e3, .07, -.035, 0)) // That is the extent of my effort to handcraft a stable solar system. // We can now play in that system by throwing debris around (inner plants). // Because that debris will have significantly smaller mass, it won't disturb our stable system (hopefully :-) // This requires we remove bodies that fly out of bounds past our 30x30 space created by the asteroids. // See sim.trimDebris(). It's a bit hacky, but my client (me) doesn't want to pay for it and wants the WebVR version. function rando(scale) { return (Math.random()-.5) * scale } document.getElementById("mayhem").addEventListener('click', () => { for (let x=0; x<10; x++) { sim.addBody(new Body("debris", "white", rando(10), rando(10), rando(10), 1, rando(.1), rando(.1), rando(.1))) } }) }

Los dos asteroides tienen masa cero por lo que no se ven afectados por la gravedad. Mantienen nuestra visualización 2D alejada al menos a 30x30. ¡El último fragmento de código es nuestro botón "caos" para agregar 10 pequeños planetas internos para divertirse un poco!

El siguiente es nuestro "bucle de simulación": cada 33 ms, vuelva a calcular y pintar. Si te estás divirtiendo, podríamos llamarlo un "bucle de juego". Lo más simple que podría funcionar para implementar nuestro ciclo es setTimeout() , y eso cumplió mi propósito. Una alternativa podría ser requestAnimationFrame().

sim.start() inicia la acción llamando a sim.step() cada 33 ms (alrededor de 30 fotogramas por segundo).

 // Methods from class nBodySimulator // The simulation loop start() { // This is the simulation loop. step() calls visualize() const step = this.step.bind(this) setInterval(step, this.simulationSpeed) } // A step in the simulation loop. async step() { // Skip calculation if worker not ready. Runs every 33ms (30fps), so expect skips. if (this.ready()) { await this.calculateForces() } else { console.log(`Skipping: ${this.workerReady}, ${this.workerCalculating}`) } // Remove any "debris" that has traveled out of bounds - this is for the button this.trimDebris() // Now Update forces. Reuse old forces if we skipped calculateForces() above this.applyForces() // Ta-dah! this.visualize() }

¡Viva! Estamos pasando del diseño a la implementación. Implementaremos los cálculos físicos en WebAssembly y los ejecutaremos en un subproceso separado de Web Worker.

nBodySimulator envuelve esa complejidad de implementación y la divide en varias partes:

1. calculateForces() promete calcular las fuerzas a aplicar.
   1. Estas son en su mayoría operaciones de coma flotante y se realizan en WebAssembly.
   2. Estos cálculos son O(n²) y nuestro cuello de botella de rendimiento.
   3. Usamos un Web Worker para moverlos fuera del hilo principal para un mejor rendimiento percibido y real.
2. trimDebris() elimina cualquier residuo que ya no sea interesante (y alejaría nuestra visualización). En)
3. applyForces() aplica las fuerzas calculadas a los cuerpos. En)
   1. Reutilizamos las viejas fuerzas si omitimos calcularFuerzas() porque el trabajador ya estaba ocupado. Esto mejora el rendimiento percibido (eliminando el jitter) a costa de la precisión.
   2. El subproceso principal de la interfaz de usuario puede pintar las viejas fuerzas incluso si el cálculo lleva más de 33 ms.
4. visualize() pasa la matriz de cuerpos a cada visualizador para pintar. En)

¡Y todo sucede en 33ms! ¿Podríamos mejorar este diseño? Si. ¿Tienes curiosidad o tienes alguna sugerencia? Revisa los comentarios a continuación. Si está buscando un diseño e implementación modernos y avanzados, consulte Matter.js de código abierto.

¡Despegue!

Me divertí mucho creando esto y estoy emocionado de compartirlo con ustedes. ¡Nos vemos después del salto!

1. Introducción - esta página
2. Web Workers: acceso a varios subprocesos
3. WebAssembly: computación de navegador sin JavaScript
4. Rollup y Gulp: una alternativa a WebPack
5. Canvas: dibujar en la API de Canvas y el "bucle sim"
6. WebVR: cambiar nuestro visualizador Canvas por WebVR y Aframe

El entretenimiento liderará el contenido en Realidad Virtual (como el móvil), pero una vez que la RV sea normal (como el móvil), será la experiencia esperada por el consumidor y la productividad (como el móvil).

Nunca hemos tenido más poder para crear experiencias humanas. Nunca ha habido un momento más emocionante para ser diseñador y desarrollador. Olvídese de las páginas web: construiremos mundos.

Nuestro viaje comienza con el humilde Web Worker, así que esté atento a la próxima parte de nuestra serie WebVR.