Change Surfers

Realidad Virtual en las webs

La realidad virtual va ganando más terreno y su evolución en los últimos tiempos se está viendo plasmada en las páginas webs. ¿Qué aporta el uso del 3D para producir sensación de realidad en las webs tradicionales? ¿Qué se necesita para poder desarrollarlas y para crear una propia? WebVR y A-Frame son la respuesta a todas tus dudas.

A la hora de pensar en páginas webs nuestra mente, automáticamente, piensa en dos dimensiones: un scroll vertical y otro horizontal. Sin embargo, en los últimos años, el mundo del desarrollo web se está abriendo camino a más dimensiones y a utilizar todo el potencial de los nuevos dispositivos que salen al mercado. Gracias a las gafas de realidad virtual, sensores y auriculares de nuestros teléfonos móviles, podemos dejar atrás las páginas bidimensionales y ofrecer una experiencia adaptada a las nuevas tendencias y a las necesidades de los usuarios. Todo ello dando un salto innovador y pasando del mero entretenimiento a la rentabilidad de la web, convirtiéndolas aún en espacios más atractivos.

Sin duda, utilizar la tecnología 3D en nuestra página nos permite crear sensaciones mucho más inmersivas para los usuarios. Realizar presentaciones de productos en tres dimensiones, mostrar en vivo cualquier tipo de maqueta o boceto, recrear tiendas virtuales o visualizar fotos o vídeos en 360 grados, son algunos de los ejemplos de cómo podemos exprimir todo su potencial. 

Esta idea es posible gracias a WebVR, una API de Javascript que permite a los desarrolladores generar esa experiencia inmersiva de realidad virtual a través de la web haciéndolas accesibles desde una URL. De esta forma nuestro navegador puede entender e interpretar todo el ecosistema de realidad virtual que generemos. Tan sólo se necesita un dispositivo RV -aunque desde el ordenador también puede valer-, que el navegador sea compatible y programar nuestra web con un framework que trabaje en 3D. 

A-Frame: la solución

El framework A-Frame, sirve para crear aplicaciones web que hacen uso del 3D y la realidad virtual. Es un framework muy sencillo y fácil de usar. Con tan solo unas pocas líneas de código podremos conseguir un resultado asombroso. Además, A-Frame ha crecido tanto que se ha llegado a convertir en una de las comunidades más grandes y acogedoras que existen de realidad virtual en la web. 

Utiliza componentes como si fueran simples elementos de HTML, no es necesario instalar ni compilar ningún paquete adicional. Tan solo tenemos que añadir un <script> en el <HEAD> del HTML e ir añadiendo en el <BODY> las etiquetas que vayamos a necesitar para nuestro desarrollo. 

En el siguiente código podemos ver un ejemplo con varias figuras 3D. Dentro de la etiqueta <a-scene> debemos generar los elementos que queramos. En nuestro caso vamos a generar un cubo, una esfera, un cilindro, un plano y un cielo con un color determinado en hexadecimal de forma muy simple. 

<html>
  <head>
    <meta charset="utf-8">
    <title>Hello, WebVR! • A-Frame</title>
    <meta name="description" content="Hello, WebVR! • A-Frame">
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  </head>
  <body>
     <a-scene background="color: #FAFAFA">
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
    </a-scene>
  </body>
</html>

El resultado sería el siguiente: 

Es un ejemplo básico, pero suficiente para ver todo el potencial que tiene utilizar A-Frame en nuestros desarrollos de realidad virtual. Dentro de su web podemos encontrar ejemplos muy potentes, simples y versátiles que nos darán una idea de lo que podemos llegar a programar en unas pocas líneas de código. 

Es cierto que no se puede saber cómo evolucionarán o qué acogida tendrán los sitios web en realidad virtual, pero está claro que este tipo de innovación es una oportunidad para que el usuario disfrute de una experiencia más inmersiva y consuma mucha más información de una forma diferente y llamativa. También es cierto, que en los últimos años se ha creado un auténtico ecosistema para desarrollar sitios web en tres dimensiones. Desde complejos motores 3D, como Unity o Unreal Engine, hasta herramientas más ligeras como A-Frame que hacen que se empiecen a dar los primeros pasos en realidad virtual de una forma muy sencilla, añadiendo ese ‘extra’ a la web que hará que destaque por encima de cualquier otra de la competencia.