Siguiendo con la serie de artículos acerca de programación creativa, en este post exploramos las posibilidades de A-Frame, un entorno de programación web para crear experiencias de Realidad Virtual (RV). Desarrollado originalmente por Mozilla, A-Frame ha pasado a ser un proyecto open source que cuenta con una amplia comunidad de usuarios. Parte de su éxito se debe a su sencillez: A-Frame se basa en el código HTML, por lo que resulta fácil trabajar a partir de un archivo .html añadiendo scripts para crear objetos o entornos complejos, no sólo limitados a un escenario en 360 grados, sino incorporando los datos obtenidos por los sensores de posición y los controladores con los que cuentan la mayoría de los visores de RV del mercado. A-Frame es compatible actualmente con Vive, Oculus Rift, Windows Mixed Reality, Daydream, Cardboard y también aplicaciones de Realidad Aumentada (RA). Entre las características de A-Frame destacan las siguientes:

• Creación simple de entornos RV: sólo requiere emplear las etiquetas <script> y <a-scene>, no es preciso instalar nada. A-Frame se encarga de generar los modelos 3D, la configuración de la RV y los controles predeterminados.
• Basado en HTML: HTML es fácil de leer, entender y copiar y pegar. A-Frame es accesible tanto pra desarrolladores web, entusiastas de la RV, artistas, diseñadores, educadores, creadores, o incluso niños, gracias a la facilidad que supone trabajar con código html.
• RV multiplataforma: A-Frame permite construir aplicaciones de RV para Vive, Rift, Windows Mixed Reality, Daydream, GearVR y Cardboard con soporte para todos sus respectivos controladores respectivos. También funciona en los smartphones y ordenadores de sobremesa.
• Arquitectura basada en componentes: A-Frame es un potente entorno de three.js, que proporciona una estructura declarativa, componible y reutilizable. HTML es sólo la punta del iceberg; los desarrolladores tienen acceso ilimitado a JavaScript, DOM APIs, three.js, WebVR y WebGL.
• Rendimiento: A-Frame está optimizado desde cero para WebVR. Aunque A-Frame utiliza el DOM, sus elementos no tocan el motor de diseño del navegador. Las actualizaciones de objetos 3D se realizan en memoria con poca sobrecarga en una única llamada.
• Válido para todas las herramientas: puesto que la web fue construida sobre HTML, A-Frame es compatible con la mayoría de las bibliotecas, entornos y herramientas incluyendo React, Preact, Vue.js, d3.js, Ember.js, jQuery.
• Inspector visual: A-Frame proporciona un práctico inspector visual 3D integrado, que permite acceder rápidamente al código y modificarlo, visualizando los resultados de inmediato. Esto se puede experimentar con los propios ejemplos facilitados en el sitio web del proyecto.
• Componentes: A-Frame incluye una serie de componentes pre-diseñados, tales como geometrías, materiales, luces, animaciones, modelos, radiotransmisores, sombras, audio posicional, texto y controles para  Vive / Touch / Windows Motion / Daydream / GearVR / Cardboard. Gracias a los componentes creados por la comunidad de desarrolladores, pueden añadirse elementos tales como sistemas de partículas, física, océanos, montañas, reconocimiento de voz, captura de movimiento, teletransportación y realidad aumentada.

Trabajando con el editor visual

Primeros pasos con A-Frame

Un completo tutorial denominado A-Frame School permite al usuario novel iniciarse en el desarrollo de entornos de RV a través de unos sencillos pasos. El tutorial emplea el entorno Glitch, que permite escribir código en la ventana del navegador sin necesidad de instalar nada, así como emplear proyectos existentes y modificarlos. El sitio web ofrece diferentes ejemplos con los que es posible jugar y experimentar directamente, simplemente modificando los valores del inspector visual.

Precisamente es por medio de la modificación de estos atributos (color, posición, rotación, escala) como se empieza a descubrir de qué manera manipular los elementos de un entorno RV. Estos atributos se denominan “primitivos” (primitives) y se identifican intuitivamente dado que tan sólo es preciso leer la etiqueta correspondiente, cuyo término (en inglés) se explica por sí solo.

El paso siguiente consiste en añadir recursos a la sección assets, por ejemplo subiendo una imagen que posteriormente se empleará para dar textura a un objeto. Para añadir la textura, basta con seleccionar un objeto (por ejemplo <a-sphere>) e insertar en la etiqueta html src la URL de la imagen escogida. También es posible añadir imágenes en 360º para crear el escenario.

En cualquier escena creada con A-Frame, basta con apretar ctrl+alt+i para abrir el editor visual, que como hemos comentado anteriormente permite modificar los atributos de cualquier elemento de forma sencilla y ver plasmados los resultados en tiempo real.

Los primitivos pueden convertirse en componentes que permiten editar sus parámetros y crear relaciones entre ellos, como por ejemplo efectos de luz. A-Frame cuenta con una extensa librería de componentes llamada The Registry de la que se pueden extraer elementos que funcionan como plugins y añaden efectos, animaciones y otras mejoras a un entorno creado.

Más allá de las posibilidades de html, A-Frame también permite integrar JavaScript y three.js para un mayor control de los elementos del entorno simulado. A partir de aquí también puede incluirse el cursor (o punto de mira) como entidad, para interactuar con los elementos del espacio RV haciendo clic sobre ellos o centrando la mirada en ellos.

A fin de enriquecer el entorno RV, pueden insertarse modelos 3D ya creados (por ejemplo, con Blender) en el formato glTF, que facilita integrar modelos 3D en la web. Estos modelos pueden incluir animaciones cuya reproducción puede controlarse por medio de un componente en la cabecera del archivo html.

A-Frame funciona con detectores de posición por lo cual es posible añadir controles de mano, es decir unas manos virtuales que aparecen en el entorno RV respondiendo a la posición de los controladores de cualquier sistema de RV.

En apenas doce pasos, y tras cierta experimentación con el código, es posible hacerse una idea de las funciones básicas de A-Frame, para posteriormente desarrollar un primer proyecto aprovechando los componentes ya creados por la comunidad de usuarios e insertando poco a poco funciones y elementos más complejos. Este entorno ciertamente simplifica la creación de modelos de Realidad Virtual y resulta una herramienta de gran utilidad para artistas y diseñadores.