Realidad virtual para la web con A-Frame

La realidad virtual y la realidad aumentada son campos en los que se está avanzando a pasos agigantados, especialmente en los últimos años con el lanzamiento de varias aplicaciones y juegos como por ejemplo Pokemon Go, los lentes de realidad Oculus Rift, Samsung Gear VR, Google Cardboard, etc.

Primero vamos a ver la definición de realidad virtual (wikipedia):

La realidad virtual es un entorno de escenas u objetos de apariencia real. La acepción más común refiere a un entorno generado mediante tecnología informática, que crea en el usuario la sensación de estar inmerso en él. Dicho entorno es contemplado por el usuario a través de un dispositivo conocido como gafas o casco de realidad virtual. Este puede ir acompañado de otros dispositivos, como guantes o trajes especiales, que permiten una mayor interacción con el entorno así como la percepción de diferentes estímulos que intensifican la sensación de realidad.

Actualmente se puede experimentar la realidad virtual desde cualquier navegador web que soporte WebGL y WebVR. WebGL es una especificación para poder renderizar objetos 3D dentro de un navegador web, y WebVR es la especificación para poder experimentar la realidad virtual desde un navegador web con el uso de lentes de realidad virtual.

En éste post vamos a usar A-Frame, que es un web framework para crear experiencias de realidad virtual en el navegador web. La forma de usarla es muy fácil, ya que sólo necesitamos saber HTML para poder crear nuestros gráficos en 3D. Si es que se quiere hacer algo mas complejo como hacerlo más dinámico y crear interacciones con el usuario, se puede usar javascript.

A-Frame es un proyecto open source creado por Mozilla, y el objetivo es poder desarrollar contenido de realidad virtual de una manera fácil. Este framework está construido en base a la librería three.js. A-Frame soporta varios de los lentes de realidad virtual como por ejemplo: Vive, Rift, Daydream, GearVR, Cardboard.

Esta librería te permite tener experiencias inmersivas con contenido en 360°. En caso no uses lentes de realidad virtual, te permite ver el contenido de 360° arrastrando el mouse (similar a Google Street View).

Ahora vamos al código!!!

Es hora de mostrar algunos ejemplos:

Primero debemos agregar una referencia a la librería de javascript:

<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>

Con esto ya estamos listos para crear nuestro contenido de realidad virtual en el “body” del html, es tan simple como crear un tag <a-scene> y dentro de éste, podemos agregar diferentes tags dependiendo de los objetos que queramos crear.

Aquí podemos ver un ejemplo de creación de una esfera, una caja, un cilindro y un plano como base:

https://thimbleprojects.org/ccrrvvaa/384544/

Aquí podremos ver el uso de tags como por ejemplo: a-box, a-sphere, a-cylinder y a-place. En cada uno se pueden configurar atributos como por ejemplo la posición (coordenadas x, y, z), rotación, color, etc.

También podemos crear interacciones con los objectos, como por ejemplo realizar una acción al darle clic en una esfera:

https://thimbleprojects.org/ccrrvvaa/384544/interactions.html

En éste ejemplo hacemos uso de javascript para registrar acciones, haciendo uso de AFRAME.registerComponent. Las interacciones como por ejemplo el “clic”, es detectado por el tag a-camera, a-cursor con el atributo rayOrigin: mouse. El atributo “rayOrigin” hace uso del concepto de raycasting, que sirve para detectar intersecciones con objetos mediante un “rayo” (usado para gráficos)

Adicionalmente podemos agregar visualizadores de imágenes en 360 grados:

https://thimbleprojects.org/ccrrvvaa/384544/image360.html

En éste ejemplo simplemente usamos el tag a-sky, donde se tiene el atributo “src” apuntando a la imagen equirectangular.

Les recomiendo usar A-Frame para sus proyectos de realidad virtual en la web, es muy fácil de usar y es open source. Adicionalmente se puede extender su funcionalidad agregando componentes usando javascript. Su documentación es buena y fácil de comprender.

Compartir...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *