El presente de la AR y VR es tu propia web
A principios de 2019 estrenamos una nueva identidad corporativa que traslada propuesta, valores y principios de Runroom a una nueva marca creada por el estudio de branding Folch y que aplicamos a diferentes entornos y medios, online y offline.
A partir de aquí nos surgió la inquietud sobre cómo podríamos aplicar esa marca en terrenos que Runroom todavía no había explorado y con mucho potencial presente y futuro tanto para nosotros como para nuestros clientes.
Somos fans del learning by doing y quien conozca la empresa sabrá que nos gusta experimentar y aprender, explorar terrenos y añadirlos a la variedad de soluciones que ofrecemos a nuestros clientes. De esta manera vemos la AR (Realidad aumentada) y la VR (Realidad virtual) como dos áreas de interés con un gran potencial en estos momentos para aplicar en muchos tipos de proyectos en sectores tan variados como educación, salud, inmobiliario... y también ¡para divertirnos!
Hasta ahora era necesario descargar una aplicación en nuestros dispositivos móviles para poder tener acceso a AR y VR, y ya son muy conocidos alguno de los ejemplos más populares. Desde la salida del famoso Pokemon Go no ha cesado el desarrollo de nuevas aplicaciones y de nuevas features en aplicaciones que todos ya usábamos.
¿Quién no ha usado un filtro de Instagram hoy en día?
Con el avance de la tecnología, ahora tenemos disponibles muchas de estas herramientas para aplicar este tipo de tecnologías en la web tradicional con los benefícios que eso conlleva. Cualquier marca y cualquier empresa puede aumentarse y ser accesible ya a todos sus usuarios que tengan un dispositivo móvil o un ordenador con webcam.
Sin ir más lejos, podemos buscar el nombre de cualquier animal en Google para poder ver una representación aumentada de éste animal en la cámara de nuestro móvil.
A día de hoy, realmente solo estamos accediendo a la punta del iceberg de las posibilidades que la Realidad Aumentada nos ofrece. Imaginad en que se podría convertir esto en un periodo no muy lejano de 5 años. ¿Os imagináis usando algún tipo de dispositivo que sustituya nuestros ordenadores personales o nuestros teléfonos móviles? Es con lo que soñamos todos los amantes de la ciencia ficción.
Ahora mismo con el uso de los teléfonos y los smartwatches podemos, por ejemplo, recordar dónde hemos aparcado el coche o saber calorías hemos quemado en esos 10km de running a 5,5min/km. Aún así, no somos conscientes de la información contextual a la que podríamos acceder en cada momento solamente llevando un dispositivo en forma de gafas. Ahora nos imaginamos calcular el consumo de esa carrera en tiempo real, la información de alérgenos solamente mirando el plato que nos acaban de servir o traducir un cartel que estamos mirando en un país extranjero mientras estamos de viaje, pero hay cosas que incluso no se nos ocurren por que no las hemos imaginado.
Como comentaba, el avance de la tecnología, y concretamente la tecnología WebXR (que es un grupo de estándares que permiten el renderizado de escenas 3D) nos permite a través de la WebXR Device API hacer todas esas cosas antes solo disponibles en aplicaciones descargables extensible a dispositivos compatibles con ello usando la tecnología WebGL (que podría considerarse el actual sustituto del antiguo Flash) que tiene un gran soporte con todos grandes navegadores, incluso Internet Explorer 11, como se puede ver aquí.
Gracias a esto tenemos acceso a dispositivos como headsets 3D con detección de movimiento y orientación, gafas con posibilidades gráficas y los ya mencionados ordenadores y móviles con cámaras.
Todas estas tecnologías se han convertido en mucho más sencillas y atractivas de usar con la aparición de la librería de javascript AR.js basada en otras librerias de 3D y VR (como Three.js y Aframe) y con la que mucha gente ya está interactuando y creando sus própias aplicaciones web sobre Realidad Aumentada. Como los creadores de AR.js lo describen:
You can experience efficient augmented reality for the web directly on your phone without installing any applications.
Es muy sencillo empezar a trabajar con esta librería, tal y como detallan en éste artículo: Augmented Reality in 10 lines of HTML así que por aquí empecé con mi primer renderizado de AR.
Aquí se puede encontrar más literatura sobre la librería escrita por los creadores: https://aframe.io/blog/arjs/
Durante el proceso de research y exploración de la tecnología he encontrado muchos recursos en formato 101, "arranca tu aplicación AR en 10 líneas", etc. aunque la mayoría de esos tutoriales o artículos no pasaban de aquí.
La verdad no fue fácil superar esa fase inicial, ya que a parte de desconocer la librería no tenía ningún conocimiento de los mundos 3D y Virtual.
Como ocurre con todas las librerías y tecnologías nuevas, en las primeras versiones hay muchos cambios y poca documentación y muchos de esos ejemplos con los que me iba cruzando eran incompatibles entre ellos.
A base de hacer mucho mix & match de esos ejemplos en los que me basaba y leyendo documentación de las librerías en las que se sustenta AR.js conseguí entender cómo funcionaba y montar unos cuantos ejemplos para poder darle estructura de proyecto.
¿Qué forma podíamos dar a este proyecto?
En el punto en el que nos encontramos el razonamiento nos llevó a decidir crear una librería de componentes básica dónde alguien que había recorrido el mismo camino que acabamos de recorrer pudiera encontrar ejemplos prácticos que no había sido capaz de encontrar en esos artículos de ejemplo 101.
En esta librería también añadimos los resultados de este proceso de exploración y creación es una nueva manera de presentar la marca Runroom en un formato que hasta ahora no podíamos imaginar.
A partir de ahora y entendiendo el potencial que tiene esta tecnología, uno de nuestros objetivos es seguir explorando este terreno y convertir estos aprendizajes en un proyecto para disfrute de los Runroomers. Nos marcamos como objetivo poder organizar toda esa información almacenada en sitios que nadie recuerda ni sabe encontrar para que esté disponible de una manera muy rápida y muy visual, por qué no, a través de marcadores repartidos por la oficina y que además de tener acceso rápido a esos recursos, se pueda disfrutar de la tecnología.
Para ello hemos creado este repositorio de GitHub dónde están disponibles los ejemplos que hemos comentado:
También podéis explorar algunos ejemplos que hemos colgado en Glitch, la nueva plataforma de moda para expresarse de forma creativa en la web.
TLDR: Las tecnologías de VR y AR han venido para quedarse y así lo demuestra este video que se volvió viral hace tan solo unos días.