A-Frame, 3D y Realidad Virtual en la Web

A-Frame Logo

A-Frame, 3D y Realidad Virtual en la Web

Hola a todos y saludos desde el área Web de la Escola Espai. Normalmente el mundo de las 3 dimensiones en la web ha estado restringido a programadores con avanzados conocimientos de matemáticas y que dominaban tecnologías como WebGL. Hoy haremos una breve introducción a A-Frame.

Exploraremos las posibilidades que nos ofrece este novedoso framework basado en HTML5, que nos va a permitir introducir elementos 3D y de Realidad Virtual en nuestras paginas web de forma sencilla (sin necesidad de escribir código JavaScript!).

3D en HTML5

La promesa de 3D en la Web no es algo nuevo. Ya nos la ofrecía en su momento Adobe con su producto Shockwave, aunque actualmente su futuro es mas negro incluso que el de Flash. El hecho de ser un producto cerrado, inestable y con serios problemas de seguridad no le a ayudado mucho.

Con la llegada de HTML5 y su elemento Canvas, surgio la posibilidad de emplear WebGL para mostrar contendo 3D en la Web de forma nativa. Sin embargo, programar en WebGL no es precisamente fácil. Algo, aparentemente tan sencillo, como mostrar un cubo 3D, requiere ser capaz de programar shaders, que son pequeños programas para la tarjeta gráfica donde le indicamos cosas tales como las operaciones de transformación para los vértices y los píxeles. Si bien es cierto que estos shaders añaden una capa extra de complejidad al desarrollo 3D, también es cierto que ofrecen múltiples posibilidades muy interesantes. Sea como sea, el tema es que programar WebGL no es fácil y eso ha desincentivado el desarrollo 3D en la Web.

Obviamente, no tardaron en salir frameworks y librerías JavaScript que facilitan dicha tarea. La más famosa actualmente probablemente sea three.js. Vale la pena pasearse por su web y ver en su sección de «featured projects» la de cosas increíbles que es posible hacer hoy día con está tecnología. También es muy recomendable visitar su sección de ejemplos, menos espectacular, pero más ilustrativa.

Sin embargo, incluso con estos frameworks, no resulta muy fácil introducir elementos 3D en una Web, y mucho menos sin saber programar JavaScript.

A-Frame y el 3D sin JavaScript

A-Frame viene para introducir una aproximación diferente al mundo del 3D en la Web, ya que se basa en HTML. Los elementos 3D que vamos a introducir, los introduciremos del mismo modo que cualquier otro elemento HTML.

A-Frame Logo

A-Frame, un sencillo framework para 3D y Realidad Virtual en la Web

Veamos un sencillo ejemplo;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ejemplo básico A-Frame</title>
  <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
</head>
<body>
  <a-scene>
    <a-box id="cubo" width="1" height="1" depth="1" color="red"></a-box>
  </a-scene>
</body>
</html>

Podéis ver el resultado del código aquí.

Como podéis comprobar es extremadamente fácil. Con ese sencillo ejemplo ya tenemos un bonito cubo 3D de color rojo; si mantenemos pulsado el botón del ratón, podremos cambiar la orientación de la cámara y si pulsamos las teclas WASD, nos podremos desplazar por el escenario 3D. Finalmente, si pulsamos el botón de abajo a la derecha con el dibujo de unas Cardboard y nuestro dispositivo lo soporta (por ejemplo, un móvil Android con el navegador Chrome), podremos iniciar el modo de Realidad Virtual.

Así, tal cual. De esa forma tan sencilla y sin código JavaScript.

Obviamente, además de las cajas, existen muchos más elementos A-Frame. También podemos crear;

  • Otras figuras básicas 3D, como esferas, cilindros, planos, etc…
  • Cargar imagenes que podremos usar como texturas sobre los objetos 3D.
  • Cargar modelos 3D más complejos mediante archivos OBJ y Collada (DAE).
  • Añadir diferentes tipos de luces.
  • Algún efecto de ambiente como niebla o una imagen panorámica esférica (también llamadas fotografías de Realidad Virtual).
  • Incluso podemos añadir efectos de animación e interacción!
  • Y muchas más cosas.

Veamos otro ejemplo un poco más completo.

...
<a-scene fog="type: linear; near: 10; far: 15; color: #000022;">
  <a-light type="point" color="#FFFFAA" position="0 1.8 0"></a-light>
  <a-sphere id="sol" radius="0.5" color="#FFFFAA" position="0 1.8 0" shader="flat"></a-sphere>
  <a-entity id="planeta1">
    <a-sphere radius="0.25" color="#D62D59" position="6 1.8 0"></a-sphere>
    <a-animation attribute="rotation" to="0 360 0" easing="linear" dur="3000" repeat="indefinite">
    </a-animation>
  </a-entity>
  <a-entity id="planeta2">
    <a-entity>
      <a-sphere radius="0.6" color="#AD9397" position="8 1.8 0"></a-sphere>
      <a-ring radius-inner="1" radius-outer="1.5" color="#AD9397" side="double" rotation="30 40 50" position="8 1.8 0">
        <a-animation attribute="rotation" from="30 40 50" to="30 400 50" easing="linear" dur="4000" repeat="indefinite">
        </a-animation>
      </a-ring>
    </a-entity>
    <a-animation attribute="rotation" to="0 360 0" easing="linear" dur="6000" repeat="indefinite">
    </a-animation>
  </a-entity>
  <a-entity id="planeta3">
    <a-sphere radius="0.5" color="#1D6B8D" position="10 1.8 0"></a-sphere>
    <a-animation attribute="rotation" to="0 360 0" easing="linear" dur="10000" repeat="indefinite">
    </a-animation>
  </a-entity>
  <a-entity id="planeta4">
    <a-sphere radius="0.8" color="#9D463C" position="12 1.8 0"></a-sphere>
    <a-animation attribute="rotation" to="0 360 0" easing="linear" dur="15000" repeat="indefinite">
    </a-animation>
  </a-entity>
  <a-sky color="black"></a-sky>
</a-scene>
...

Podéis ver el resultado del código aquí.

En este otro ejemplo podemos ver como podemos animar diferentes objetos de forma sencilla sin necesidad de código JavaScript. Debido a su sencillez y la no necesidad de escribir código, A-Frame se plantea como una interesante herramienta para personas más próximas al mundo del diseño, que se sienten un poco desanimados al ver que para hacer cosas chulas en HTML5, suele ser necesario saber programar.

En la página de A-Frame podemos ver muchos más ejemplos de lo que es capaz, y el código fuente necesario.

Anime UI, uno de los ejemplos de A-Frame

Anime UI, uno de los ejemplos de A-Frame (hacer algo así con A-Frame es más sencillo de lo que parece)

A-Frame y la Realidad Virtual

Una de las ventajas de A-Frame es que los diferentes elementos que creamos forman parte del documento y, por lo tanto, son manipulables con JavaScript como cualquier otro elemento HTML. Que sea posible trabajar con A-Frame sin usar JavaScript no quiere decir que debamos de evitar su uso. De hecho, el potencial de A-Frame con JavaScript es claramente superior. No hay que olvidar que A-Frame soporta un modo de realidad virtual, y la realidad virtual es más real si viene acompañada de interacción. Para lograr la interacción del usuario con el entorno A-Frame ofrece la posibilidad de que simplemente mirando a un sitio podemos interactuar con él. Si bien existe la posibilidad de hacerlo sin JavaScript, las posibilidades de interacción son menores ya que el abanico de acciones es más limitado. En el caso de usar JavaScript el limite de dicha interacción tan solo está limitado por nuestra imaginación (y las limitaciones que implica que el usuario solo puede interactuar moviendo la cabeza).

Veamos un sencillo ejemplo;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ejemplo básico A-Frame</title>
  <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
</head>
<body>
  <a-scene>
    <a-camera position="0 0 4">
      <a-cursor color="blue"></a-cursor>
    </a-camera>
  </a-scene>
<script src="js/main.js"></script>

</body>
</html>

Código del main.js;

"use strict";var gScene = document.querySelector("a-scene");
if (gScene.hasLoaded) {
  init();
} else {
  gScene.addEventListener("loaded", init);
}function init() {
  var cubo = document.createElement("a-box");
  cubo.setAttribute("color", "red");
  cubo.setAttribute("scale", "1 1 1");
  cubo.addEventListener("mouseenter", enter);
  cubo.addEventListener("mouseleave", leave);
  gScene.appendChild(cubo);
}function enter() {
  var cubo = document.querySelector("a-box");
  cubo.setAttribute("color", "green");
  var scl = cubo.getAttribute("scale");
  scl.x = scl.y = scl.z = 1.5;
  cubo.setAttribute("scale", scl);
}function leave() {
  var cubo = document.querySelector("a-box");
  cubo.setAttribute("color", "red");
  var scl = cubo.getAttribute("scale");
  scl.x = scl.y = scl.z = 1;
  cubo.setAttribute("scale", scl);
}

Podéis ver el resultado del código aquí.

En este caso, podemos ver como se pueden crear objetos 3D de A-Frame mediante JavaScript, y como definir el comportamiento de los objetos cuando el usuario interacciona con ellos con la mirada. En el caso de no usar unas gafas de realidad virtual, la interacción se puede lograr mediante el mouse.

Así que nada, espero que este artículo os haya sido de interés. Ya no tenéis excusa para hacer vuestros primeros pinitos en el mundo 3D y la Realidad Virtual dentro de vuestras Webs. Saludos desde Espai. 😉

 

Escribe un comentario