Aframe: bienvenido a WebVR

Tutorial sobre aframe, nueva tecnología para uso de VR en web.

Índice de contenidos

• 1. Introducción
• 2. Entorno
• 3. ECS in AFrame
  • 3.1. Entidades
  • 3.2. Componentes
    • 3.2.1. Registrar un componente
• 4. Proyecto de ejemplo
  • 4.1. Crear index.html
  • 4.2. Ejecución
• 5. Conclusiones
• 6. Referencias

1. Introducción

Aframe es un framework en javascript para generar web en un entorno virtual.

Este framework usa la arquitectura ECS (Entity Component System), usada en el desarrollo de juegos donde cada objeto es una entidad.

La ventaja de este framework es que los objetos ya no están fijos en una jerarquía, por lo que ahora las posibilidades son inmensas, los objetos pueden tener un comportamiento sin límites.

En ECS tenemos:

• Entidades: Son objetos contenedores donde los componentes son ligados para otorgarles propiedades.
• Componentes: Son las propiedades que hacen que una entidad sea diferente a otra. Los componentes donan a la entidades de comportamiento, apariencia y funcionalidad.
• Sistemas: provienen el entorno donde manejar y desarrollar los componentes. Podemos usar los sistemas para separar la funcionalidad de la información, donde los componentes son los contenedores de la información y el sistema se ocupa de la lógica del uso de estos.

2. Entorno

El tutorial está escrito usando el siguiente entorno:

• Hardware: Portátil MacBook Pro 17′ (3 Ghz Intel Core 2 Duo, 8GB DDR3).
• Sistema Operativo: Mac OS El Capitán 10.11
• Entorno de desarrollo: Atom IDE 1.16.0 x64
• npm 3.3.6
• node 5.0.0

3. ECS in AFrame

Las entidades son representadas con <a-entity>, los componentes son representados mediante las propiedades html en <a-entity>. Estos tienen schema, manejadores del ciclo de vida y métodos. Las entidades se declaran en una escena (<a-scene>).

A-Frame permite llevar a ECS a otro nivel, A-frame es declarativo, tienen HTML y está basado en el DOM, lo que permite solucionar muchas de las debilidades de ECS. A continuación se muestran las capacidades que el DOM proporciona para ECS:

• Referencia a otras entidades con selectores de consulta: El DOM proporciona un potente sistema selector de consultas que nos permite seleccionar una entidad o entidades que coincidan con una condición. Podemos obtener referencias a entidades por ID, clases o atributos de datos. Debido a que A-Frame está basado en HTML, podemos usar selectores de consulta fuera de la caja. Document.querySelector (‘# player’).
• Comunicación cruzada entre entidades con desacoplamiento de eventos: El DOM proporciona la capacidad de escuchar y emitir eventos. Esto proporciona un sistema de comunicación entre entidades. Los componentes no tienen conocimiento de otros componentes, estos solo emiten eventos y otros componentes pueden escuchar esos eventos.
• APIs para la gestión del ciclo de vida con las API de DOM: El DOM proporciona API para actualizar los elementos HTML y el árbol. Tales como .setAttribute, .removeAttribute, .createElement y .removeChild se pueden utilizar tal y como lo usamos en el desarrollo web normal.
• Filtro de entidad con selectores de atributos: El DOM proporciona selectores de atributos que nos permiten consultar una entidad o entidades que tienen o no ciertos atributos HTML. Esto significa que podemos solicitar entidades que tengan o no un determinado conjunto de componentes. Document.querySelector (‘[enemigo]: no ([vivo]’).
• Declarativo: Por último, el DOM proporciona HTML. A-Frame es el puente entre ECS y HTML haciendo un patrón ya limpio declarativo, legible y extensible.

3.1 Entidades

Como ya hemos dicho podemos crear entidades y añadirles propiedades para diseñar el objeto que deseemos.

La sintaxis es la siguiente:

<a-entity ${componentName}="${propertyName1}: ${propertyValue1}; ${propertyName2:}: ${propertyValue2}">

Mejor lo vemos con un ejemplo, se verá más claro:

<a-entity geometry="primitive: sphere; radius: 1.5"
         light="type: point; color: white; intensity: 2"
         material="color: white; shader: flat; src: glow.jpg"
         position="0 0 -5"></a-entity>

Aquí tenemos un objeto primitivo esfera, con un radio de 1.5, el cual tiene un punto de luz blanco con intensidad 2, sin sombras. La esfera tendrá una textura que se carga mediante la propiedad src de material.

3.2. Componentes

Los componentes tienen la capacidad de modificar las entidades a través de sus propiedades. Los componentes pueden tener propiedades simples o compuestas.

• Simples

<a-entity position="0 0 5"></a-entity>

• Compuestas

<a-entity light="type: point; color: white; intensity: 2"></a-entity>

3.2.1. Registrar un componente

El schema es donde definimos las propiedades, en el siguiente ejemplo, el componente car tiene dos propiedades, «power» que es numérico y «colour» que es un string.

Cuando se utilice el componente en el DOM, podremos usar esas propiedades

<a-entity coche="power: 230; colour: blue"></a-entity>

4. Proyecto de ejemplo

Para comenzar crearemos un fichero index.html donde incluiremos la siguiente librería.

<script src=»https://aframe.io/releases/0.5.0/aframe.min.js»</script>

4.1. Crear index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, WebVR! - A-Frame</title>
    <meta name="description" content="Hello, WebVR! - A-Frame">
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js">
    </script>
  </head>
  <body>
    <a-scene>
      <a-entity light="color: #ccccff; intensity: 1;
        type: ambient;"></a-entity>
      <a-entity geometry="primitive: plane; width: 10000;
        height: 10000;" rotation="-90 0 0"
        material="src: #grid; repeat: 10000 10000; 
        transparent: true; metalness:0.6;  
        roughness: 0.4; sphericalEnvMap: #sky;">
      </a-entity>
 
      <a-box position="-1 0.5 -3" rotation="0 45 0" 
        color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" 
        color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" 
        height="1.5" color="#FFC65D"></a-plane>
      <a-sky color="#ECECEC">
    </a-scene>
  </body>
</html>

Aquí tenemos una escena con varias entidades. Si os fijáis, se han declarado entidades con etiquetas diferentes a entity. Esto está permitido para las entidades primitivas. Las siguientes declaraciones serían idénticas

<a-entity geometry="primitive: box; position: 1 0 3"></a-entity>
<a-box position="1 0 3"></a-box>

4.2. Ejecución

Para poder levantar la aplicación debemos tener instalado node y npm.

Una vez hecho esto, creamos en la carpeta del proyecto un fichero package.json con el siguiente contenido:

{
"name": "aframeVR",
"description": "Ejemplo aframeVR",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"start": "live-server --port=7000",
"deploy": "ghpages"
},
"devDependencies": {
"ghpages": "0.0.3",
"budo": "^7.0.0",
"ghpages": "0.0.3",
"nodemon": "^1.11.0",
"live-server": "^1.2.0"
}
}

Seguidamente, ejecutamos:

$> npm install

Esto nos instalara todas las dependencias declaradas en el fichero package.json

Una vez termine de descargar e instalar las dependencias, solo nos queda ejecutar para poder levantar la aplicación, para ello ejecutamos el comando:

$> npm start

La aplicación se ejecutara en el puerto 7000

5. Conclusiones

Creo que mozilla ha hecho un gran trabajo con este framework, aún está verde, pero preveo que llegará lejos, por su facilidad de uso y su baja curva de aprendizaje. Lo que está claro, que el futuro web será VR.

No os perdáis los siguientes tutoriales de este fantástico framework.

Saludos

6. Referencias

• Aframe.io
• T-machine
• Entity-System.wikidot
• Github aframevr