Física y virtualmente y viceversa
Combinando sensores de dispositivos Bluetooth en ambientes virtuales
La posibilidad de interactuar con dispositivos físicos desde software siempre ha sido interesante dado que nos da acceso a distintas funcionalidades y nos permite expandir el rango de lo que es posible en nuestras aplicaciones. De igual manera, la posibilidad de crear experiencias virtuales abre un catálogo fascinante de ideas que desarrollar. Y aunque ambas tecnologías parecen contradictorias a primera vista (físico contra virtual), lo cierto es que ambas ahora pueden jugar un papel relevante en el desarrollo de aplicaciones en el navegador. Este es el caso de dos APIs relativamente nuevos, Web Bluetooth y WebXR, por medio de los cuales podemos acceder al uso de dispositivos físicos y creación de mundos virtuales.
No es un secreto que el navegador es una de las aplicaciones más versátiles que encontramos en un dispositivo, y siguiendo esta tendencia, han empezado a aparecer más navegadores con soporte a estos dos novedosos APIs. Antes de ver un ejemplo que hemos creado, quedemos claros en que son ambos APIs y cuál es el soporte que tienen actualmente.
Web Bluetooth
Del sitio MDN, encontramos que “El API Web Bluetooth provee la habilidad de conectarse e interactuar con periféricos Bluetooth Low Energy”. En términos sencillos, es una interface de programación que permite al navegador conectarse, controlar e interactuar con dispositivos que sean compatibles con BLE. Dentro de esta categoría de periféricos encontramos drones, robots, mandos de realidad virtual e inclusive juguetes para adultos.
El soporte se visualiza en la siguiente tabla.
WebVR
De nuevo, haciendo referencia a MDN, el API de WebVR “provee soporte para exponer dispositivos de Realidad Virtual — por ejemplo cascos como el Oculus Rift o el HTC Vive — a aplicaciones web, habilitando a los desarrolladores llevar información de posición y movimiento de la pantalla a una escena en 3D”. Básicamente, desde del navegador podemos obtener información de los dispositivos de Realidad Virtual asociados. Es importante hacer la distinción que la información que obtenemos es referente a la “pose” de los cascos, controles y demás dispositivos conectados, así como del entorno en el que podemos mandar los cuadros a pintar, y no se refiere a los objetos 3D o los cuadros en general. Esto se acostumbra a hacer con WebGL o algún framework que al final termina abstrayendo WebGL.
El soporte se puede ver en la siguiente tabla.
Es importante resaltar también que WebVR está en proceso de ser sustituido por un API más reciente que todavía está en desarrollo, denominado WebXR.
¿Por qué combinar IoT y XR?
La proliferación de sensores y dispositivos con los que podemos interactuar nos está llevando a una situación en dónde la cantidad de datos que estamos produciendo y recolectando crece de manera acelerada. Aquí hay un reto en transformar estos datos en información que realmente sea útil, y no es del todo seguro confiar este procesamiento en sistemas que no pueden ser escrutados por humanos. Esto abre la puerta a mejores maneras de visualizar y comprender datos. Esto abre una puerta a tecnologías inmersivas como la Realidad Virtual y la Realidad Aumentada. Jaron Lanier, un investigador de Microsoft Research, y figura reconocida por impulsar la Realidad Virtual en los 80s, expone que “VR is amazing at conveying complexity with lucidity” (la VR es genial para transmitir complejidad con lucidez).
También podemos mencionar al neurocientífico Beau Cronim, que ha descrito cómo no hay nada más natural para nosotros que un mundo de 4 dimensiones, dado a que es a lo que estamos acostumbrados desde que hemos nacido. Al representar datos en un entorno virtual, podemos desencadenar nuestro potencial inspeccionado esta información, lo cual hace más fácil detectar anomalías y tendencias. Si pensamos en la Realidad Aumentada, el potencial es aún mayor porque podemos poner información directamente sobre objetos en el mundo real, y controlarlos mediante interacción.
Varios ejemplos experimentales incluyen visualizar un valores en la bolsa como montañas rusas o portafolios de inversión como ciudades digitales. Inclusive en Samsung hemos probado mezclando estas tecnologías con una visualización interactiva de la contaminación sónica en varios lugares del mundo que acompaña un vestido interactivo y con una aplicación que permite visualizar y controlar un puente de Lego que tienen múltiples sensores que informan de su estado físico.
¿la Web… el navegador?
Generalmente este tipo de experiencias no son las que nos vendrían a la mente cuando pensamos en un navegador, sin embargo la Web como plataforma es cada día más completa. Nuevas ideas que se encuban en la comunidad van llegando a la Web, enriqueciendo el conjunto de herramientas a nuestra disposición para crear experiencias innovadoras. La ventaja de que converjan en el navegador es que están disponibles a un grupo extendido de desarrolladores que día a día utilizan tecnologías como HTML, JavaScript y CSS. Dicho sea de paso, estas tecnologías generalmente se sitúan entre las más utilizadas por los desarrolladores, a como lo deja en evidencia las encuestas a usuarios de sitios como StackOverflow.
Nuestra demostración
Hace unos meses creé con Peter una aplicación web de Realidad Virtual que respondía a estímulos que entraban por medio de un sensor conectado con el navegador por medio de Bluetooth. Este sensor, el Nordic 52 Thingy, nos permite ajustar una escena en nuestro mundo virtual en tiempo real. La escena como tal se adapta y responde a las interacciones del usuario. Este fue el tema de las presentaciones que hicimos en GDGDevFest 2018 en Ucrania y en Heapcon en Serbia.
La demostración consta de:
- Lluvia dinámica que está vinculada al sensor de humedad. 🌧️
- Claridad en la escena que adapta los valores del sensor de luz/color. 🔦
- Una lapa roja (en buen dialecto de tiquicia) que se mueve según la orientación del sensor. 🐦
- Y finalmente, como gran sorpresa, cuando se presiona el botón, el chillido del pájaro.🗯️
De nuevo, quiero destacar que esta demo es un sitio web, creado en su totalidad con tecnologías abiertas y estándares emergentes. Utilizando A-Frame creamos la escena con WebVR. Usando Thingy.js nos conectamos al dispositivo y recolectamos sus datos con Web Bluetooth.
Quizás esta escena no sea el ejemplo más práctico, pero si esperamos que la demostración dé muchas ideas del tipo de experiencias que se pueden crear al mezclar estos APIs innovadores que permiten combinar un entorno virtual con el mundo real.
Aquí puedes encontrar las diapositivas de GDG DevFest y aquí las del Heapcon. El código fuente del ejemplo que construimos está aquí. Cualquier pregunta o sugerencia háznosla llegar! Queremos agradecer también a Lars y a Kenneth por la ayuda con el Thingy, y a Patrick por “perderse” en Serbia. :)
