Crea tu primera aplicación de realidad virtual con A-Frame

En artículos anteriores hemos hablado de las aplicaciones de realidad virtual que existen en el mercado, pero ¿Qué sucede si lo que queremos es crear una que se adapte a nuestras necesidades? A-Frame puede ser la herramienta que necesitamos y vamos a explicaros cómo crear aplicaciones de realidad virtual más allá del hello world con muy poco código.

¿Qué es A-Frame?

A-Frame es un framework web de código abierto para desarrollar aplicaciones de realidad virtual creado por Mozilla. El objetivo del proyecto es facilitar una herramienta con la que los desarrolladores podamos crear experiencias de realidad virtual complejas de manera sencilla.
Para conseguir este objetivo utiliza tecnologías muy sencillas y potentes como HTML y custom elements de forma que nos presenta un sistema basado en el DOM que nos permite crear los entornos 3D de manera declarativa que funcionan en un amplio abanico de dispositivos. Desde headsets como HTC Vive u Oculus Rift, a los más modestos Daydream, GearVR o Cardboard, incluso podemos utilizar la aplicación desde el navegador de cualquier ordenador y utilizar los controles con teclado y ratón que sustituirían al seguimiento de posición y los controladores.

No obstante A-Frame no es un lenguaje de marcado con un motor 3D incorporado sino un potente framework basado en el patrón Entity Component System utilizado comúnmente en el mundo de los motores de videojuegos (por ejemplo lo implementan Unity, Unreal Engine, etc).
En A-Frame las entidades se representan mediante elementos HTML como <a-entity>. Se trata de objetos en la escena como nuestro personaje o el cielo. Estos componentes tienen atributos inherentes referentes a la escena de la que forman parte como la posición, rotación y escalado.
Los componentes se representan como atributos de los elementos HTML y son los que definen el comportamiento concreto o la apariencia de la entidad, por ejemplo shadow=»receive: true; cast: true;». El sistema nos permite crear componentes reusables personalizados como veremos más adelante para dotar de características especiales a ciertas entidades.

Al estar basado en el DOM y utilizar internamente threejs existe una gran cantidad de componentes creados por la comunidad específicamente para A-Frame pero también podemos utilizar casi cualquier librería de manipulación de DOM que conozcamos para interactuar con el sistema.

Además A-Frame es un proyecto creado específicamente para WebVR y por tanto el rendimiento es una pieza clave para que el usuario pueda disfrutar de una experiencia igual de satisfactoria que la que se puede experimentar usando aplicaciones nativas (que suelen funcionar a 90+ FPS). Para ello, y a pesar de utilizar el DOM, A-Frame recurre a varias optimizaciones y es por esto que los cambios en el DOM no se ven reflejados en las herramientas de inspección que incluyen los navegadores, por tanto no podremos hacer debug a nuestras aplicaciones utilizando el inspector. Para suplir esta carencia el propio A-Frame incluye un kit de herramientas de desarrollo que incluye un inspector visual 3D que podemos activar con ctrl + alt + i y que nos permitirá movernos libremente por la escena, consultar y modificar las propiedades y componentes de cada entidad y una herramienta de captura de acciones que nos permitirá recrear las acciones realizadas sin tener que ponernos el equipo cada vez que deseamos realizar pruebas sobre una modificación del código.

Introducción

Vamos a crear una aplicación sencilla para hacer una demostración técnica básica de las cualidades del framework, en nuestro caso utilizaremos un headset similar a Daydream con un Iphone X en su interior, aunque se puede ver el resultado en el navegador recomendamos experimentarlo utilizando un headset. En cuanto al software vamos a utilizar glitch.com que nos permite desarrollar, probar y compartir de forma sencilla este tipo de pequeñas aplicaciones o demos, por tanto no necesitamos instalar absolutamente nada en nuestros dispositivos.

El hello world que nos propone A-Frame es el siguiente:

Se trata de una aplicación con varias formas geométricas simples pero que ya nos permite utilizarla en modo VR. Para obtener este resultado en el que ya podemos interactuar con el mundo solo necesitamos el siguiente código:

Se trata de una página web con el HTML mínimo, importamos la librería como haríamos con cualquier otra y añadimos los tags necesarios en el body. En este caso tenemos lo justo para representar la escena que vemos:

  • a-scene: Todo lo relativo a A-Frame debe suceder dentro de la escena, por tanto hace de wrapper del resto de elementos.
  • a-box, a-sphere y a-cylinder: Se encargan de generar las 3 formas que vemos en el resultado, cada una con sus características geométricas, un color definido y el atributo shadow que permite que el objeto proyecte sombras y que se puedan proyectar sobre el mismo.
  • a-plane: Define el plano que estamos utilizando como superficie sobre la que reposan los objetos, de manera similar a las entidades anteriores cuenta con atributos básicos como la posición, el tamaño o el color.
  • a-sky: Es una primitiva algo especial ya que en lugar de representar un objeto genera un fondo para la escena en 360º con un color o una imagen. Esto lo logra renderizando una gran esfera dentro de la cual se encuentra toda la escena y de la que se utiliza el interior para mapear la imagen o color que configuremos.

Como hemos visto 7 lineas son suficientes para representar una escena simple pero completa, la propia librería se encarga de facilitarnos iluminación, cámara, y controles aunque no especifiquemos  de forma explícita estos elementos que más tarde pueden ser configurados para cumplir con nuestros requisitos.

Nuestra primera aplicación VR

El anterior ejemplo nos permitiría crear cualquier escena que se nos ocurra pero para simplificar el proceso de desarrollo podemos utilizar recursos de terceros e ir aumentando la complejidad de la aplicación resultante sin aumentar exponencialmente la dificultad del desarrollo.

Primero vamos a personalizar la cámara. Por defecto ésta se sitúa en la posición 0 1.6 0. Las unidades en A-Frame guardan una relación 1-1 con los metros que representan, por tanto esa posición equivaldría a situarnos en los ojos de una persona que mide 1.6 metros y está en la posición 0, 0. Si queremos ver la escena anterior desde el punto de vista de un niño de 1 metro de altura tendremos que añadir dentro de a-scene el siguiente código:

Como podemos ver en el resultado el punto de vista inicial de la aplicación ha cambiado.

Para seguir construyendo nuestra aplicación seguramente querremos incluir modelos 3D más complejos, para ello podemos crear nuestros modelos utilizando software como Blender o Maya o recurrir a los que la comunidad ha creado y que se pueden descargar desde varias páginas web como Sketchfab, Clara.io o la que vamos a utilizar para el artículo: Poly de Google.

En nuestro caso hemos descargado el modelo Space Cowboy de Kell Condon y lo hemos subido a la carpeta de assets de glitch para que nos genere una url que utilizaremos para enlazar en nuestro HTML.

Para hacer uso de recursos en A-Frame tendremos que incluir la sección a-assets y dentro un a-asset-item para cada recurso que queramos utilizar. En el caso del modelo que hemos seleccionado tendremos 2 ficheros, un .obj y un .mtl que tendremos que importar para después poder crear una entidad que haga uso de ellos de la siguiente manera:

En este caso hemos visto como utilizar modelos 3D pero el sistema de componentes también nos permite crear y utilizar componentes de terceros. El proceso para utilizar un componente externo es muy similar al del resto de elementos. Importaremos el fichero js correspondiente y la utilizaremos siguiendo la documentación del autor. En nuestro caso vamos a crear un cielo estrellado con aframe-star-system-component, tendremos que importar el componente en el head y lo utilizaremos añadiendo una entidad con el atributo star-system a nuestra escena.

Por último vamos a mostrar la creación de un pequeño componente personalizado. En nuestro caso vamos a mover la cámara acercándola y alejándola del modelo de manera automática. Los componentes deben ser registrados antes de la escena y para simplificar el ejemplo únicamente vamos a implementar la función tick que se ejecuta continuamente. En la función obtendremos la posición de la entidad y la la modificaremos. Para utilizarlo simplemente añadiremos el atributo auto-camera a la entidad que contiene la cámara de la siguiente manera:

Resultado final y conclusiones

Podéis consultar el código en el siguiente enlace y ejecutar la aplicación en cualquier dispositivo desde aquí.

Definitivamente A-Frame es una herramienta muy potente en el mundo de la realidad virtual, nos permite crear escenas de manera declarativa y cuenta con un buen ecosistema de componentes que podremos utilizar para simplificar nuestro trabajo y conseguir grandes resultados. En menos de 50 líneas hemos escrito el boilerplate necesario para una aplicación A-Frame, importado un modelo, un componente, y hemos creado nuestro propio componente que hemos usado en nuestra escena.

Aplicaciones para exprimir al máximo tus gafas de Realidad Virtual

Si en algo coinciden todas las vertientes tecnológicas, sectores empresariales y modas “trending”, es que la Realidad Virtual es un elemento que cada vez tiene que normalizarse más y verse más a menudo en aspectos del día a día.

Actualmente esta afirmación es aún algo ambiciosa, pues es una tecnología que sigue mejorándose de forma continua, y poco a poco va avanzando, perfeccionándose y haciéndose hueco en muchas aplicaciones disponibles.

Desde la época del “Eye Toy” (¿Quién no recuerda lo adictivo que era golpear ninjas con tus propias manos en el televisor?) se ha ido invirtiendo mucho en mejorar la Realidad Virtual en el mundo de los videojuegos y aplicaciones de ocio. Obviamente, empresas como Oculus VR (con Oculus Rift), Sony (con Playstation VR) o HTC (con HTC Vive) lideran ahora mismo esta industria, trabajando en dispositivos de realidad virtual muy avanzados con la intención de formar parte del set básico de una videoconsola en cualquier casa de vecino.

Uno de los productos que más populares se hicieron estos últimos años han sido las “Gafas VR”, tanto su versión básica hecha con cartón (conocido como Google Cardboard), como versiones mucho más cuidadas con acabados plásticos y metálicos (como las Samsung Gear VR). Esto se debe a que son productos muy económicos que permiten, junto a unas APPs móviles concretas, disfrutar de la “experiencia 3D” desde los propios dispositivos móviles.

En este artículo, vamos a listar y segmentar algunas aplicaciones móviles que permitan sacar todo el potencial a las “Gafas VR”, sin importar material, marca o precio.

 

APLICACIONES DE VIAJES/LUGARES:

Google Street View: El poder viajar y ver mundo cómodamente desde el sofá de tu casa es una experiencia en la que Google siempre ha estado esforzándose por mejorar y ofrecer a los usuarios.

Con esta aplicación optimizada para Realidad Virtual, puedes hacer un tour muy realista por cualquier parte del mundo. Visitar un país lejano antes de visitarlo en la realidad, o quizá ver paisajes exóticos de lugares a los que no tienes pensado ir. Las utilidades son infinitas.

Within – VRSE: En esta aplicación de encuentran almacenadas varias experiencias visuales con efectos especiales trabajados por especialistas del sector, con la misión de permitirle al usuario vivir momentos destacados en la vida, como una puesta de sol en un punto paradisiaco, el asistir a un show en directo como alguien del público más o pasear por las calles de una gran ciudad en Navidad.

Jaunt VR: En esta APP se recopilan varios vídeos en 360º en los que el usuario puede transportarse a lugares y momentos increíbles relacionados con los deportes, la música, el cine o los viajes. La APP es totalmente gratuita y también tiene una interfaz realmente sencilla.

War of Words VR: Sin duda una de las aplicaciones más originales, y solo recomendados a fans de la cultura bélica. Dentro de la aplicación podremos vivir de cerca como es estar en plena guerra; pero eso sí, no es una aplicación realista. Tiene un estilo artesanal que únicamente quiere transmitir sensaciones.

Orbulus: Esta aplicación móvil recoge una serie de rincones del mundo; como museos, paisajes y playas exóticas, y te muestra como son con todo lujo de detalles. Es una de las APPs enfocadas a la Realidad Virtual más descargadas acualmente.

 

APLICACIONES Y JUEGOS VR

Proton Pulse: Para los más aficionados a los videojuegos retro, “Proton Pulse” es una mezcla entre Araknoid, Pong y unas explosiones de colores psicodélicas (todo esto acompañado con música tecno) que te permitirán jugar únicamente moviendo el cuello y los ojos. Eso sí, puede llegar a ser algo mareante.

Rush: Cuándo hablamos de Realidad Virtual, es imposible no pensar en simuladores de deportes y experiencias extremas, y de eso trata justamente Rush. Concretamente, es un simulador de caída libre (en el que además pone a prueba nuestra puntería y habilidad con objetivos dentro de cada salto) que permite al usuario vivir lo que se sentiría al tirarse desde un avión.

VR Fantasy: Una de nuestras favoritas. Para los fans de los juegos de rol, llega esta APP en la que nos permite vivir una aventura al más puro estilo Zelda pero con las Gafas de Realidad Virtual, permitiendo sentir al usuario que es el verdadero protagonista de la historia. No tiene los mejores gráficos del mundo, pero nos conquista su ambientación.

Land’s End: ¿Si mencionamos a Monument Valley es suficiente para llamar la atención? De los mismos creadores de MV, llega Land’s End, un juego/historia interactiva donde de nuevo, la ambientación, fotografía y animación cobran todo el protagonismo para dejarnos con la boca abierta. Aunque actualmente es de pago, si eres aficionado a los puzles y los paisajes, no te va a decepcionar nada. Quizá se queda algo corta la historia.

 

Por supuesto, la cantidad de aplicaciones que existen son infinitas. Hay muchas enfocadas a: Simuladores de miedo, simuladores de deportes extremos, baile, enfocadas al aprendizaje y la ciencia, juegos de dos, juegos de rol, etc.

Actualmente todavía es una tecnología que está naciendo y creciendo de forma lenta pero constante. Estamos muy lejos de una realidad virtual envolvente y realista como podemos ver en películas futuristas y de ciencia ficción; pero lo que es seguro es que acabará formando una parte importante y vital del mundo de la enseñanza e investigación y también del ocio y del entretenimiento.

¿Tienes alguna incidencia?

Cuéntanos qué ocurre
y nos pondremos con ello lo antes posible.

Este sitio está protegido por reCAPTCHA, y la Política de privacidad y Términos de servicio de Google.
Sucríbete a
nuestra newsletter

para estar al día en el mundo online

¡Cuéntanos tus ideas!
+34 96 653 19 14
+info@acceseo.com
He leído y acepto la política de privacidad

Este sitio está protegido por reCAPTCHA, y la Política de privacidad y Términos de servicio de Google.