Hola a todos hoy traigo un demo interesante sobre como AR.JS y AFrame. Llevo un par de días investigando acerca de realidad aumentada en la web, ya que existen muchos frameworks y herramientas muy útiles para crear contenido de realidad aumentada pero muchos de estos son mas complicados de utilizar para principiantes o son herramientas de pago un tanto caras para ser utilizadas por usuarios normales.
En toda esta búsqueda encontré AR.JS la cual es una biblioteca liviana para Realidad Aumentada en la Web, que viene con características como seguimiento de imágenes, AR basado en ubicación y seguimiento de marcadores. Lo interesante de esta libreria es que se lleva muy bien con AFrame la cual es una librería para crear experiencias de realidad virtual en la web.
AFrame es un framework web para construir experiencias de realidad virtual (VR) el equipo de Mozilla VR desarrolló A-Frame para ser la forma más fácil y poderosa de desarrollar contenido WebVR. Como un proyecto totalmente abierto, A-Frame ha crecido hasta convertirse en una de las comunidades de VR más grandes y acogedoras. Puedes leer un poco mas sobre WebVR en esta publicación anterior que realicé.
Para crear contenido en realidad aumentada utilizando AFrame es posible utilizarlo de dos formas
- AR.js con seguimiento de imagen + AR basado en ubicación
- AR.js con Seguimiento de marcadores + AR basádo en ubicación (Marker Tracking + Location Based AR)
AR.js funciona tanto con AFrame como con three.js. si quieres saber mas sobre como utilizar esta librería consulta la documentación oficial https://ar-js-org.github.io/AR.js-Docs/.
En el siguiente ejemplo vamos a probar AR.js utilizando marcador. Un marcador es un objeto impreso con una figura la cual al ser escaneada con la cámara mostrara el objeto tridimensional que hallamos creado en A-Frame. Recuerda que tenemos que correr estos ejemplos en un servidor web.
Lo primero que hay que hacer es poner codigo HTML las etiquetas básicas e incluimos la version de AR.JS que queremos utilizar. para este ejemplo la etiqueta de marker based y la etiqueta de A-Frame
<!DOCTYPE html>
<html>
<head>
<!-- script de A-Frane version1 1.0.0 -->
https://aframe.io/releases/1.0.0/aframe.min.js
<!-- script de AR.JS con soporte de marker + location -->
https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js
</head>
<body style="margin : 0px; overflow: hidden;">
</body>
</html>
Luego de eso es necesario agregar una escena de AFrame incluyendo los parametros de arjs.
<a-scene embedded arjs> </a-scene>
dentro de la escena agregamos un marcador de tipo hiro (puedes descargar la imagen de este enlace: https://raw.githubusercontent.com/AR-js-org/AR.js/master/data/images/hiro.png)
<a-marker preset="hiro"> </a-marker>
dentro del marcador de hiro pondremos una esfera que se proyectará en la imagen.
<a-sphere position="0 0 0" radius="1.25" color="#EF2D5E"></a-sphere>
el código completo quedaría así:
<!DOCTYPE html> <html> <head> <!-- script de A-Frane version1 1.0.0 --> https://aframe.io/releases/1.0.4/aframe.min.js <!-- script de AR.JS con soporte de marker + location --> https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js </head> <body style="margin : 0px; overflow: hidden;"> <a-scene embedded arjs> <a-marker preset="hiro"> <a-sphere position="0 0 0" radius="0.6" color="#EF2D5E"></a-sphere> </a-marker> <a-entity camera></a-entity> </a-scene> </body> </html>
Al momento de escanear la imagen con el celular se veria de la siguiente manera:
- Si quieres acceder a este ejemplo puedes consultar este repositorio en Github: https://github.com/daviddagb2/DemosAR/tree/master/demo001
- Demo en github: https://daviddagb2.github.io/AR/demos/demo001/
Próximamente estaremos compartiendo mas ejemplos sobre usos de la libreria AR.JS y AFrame.
Blanchard Space 
WOW funciona perfecto pero tengo muchas dudas, ¿es posible hacer con una imagen que funcione como marcador? algo así como crear una imagen con vectores o en .png o no sé una imagen de picakachu en lugar del código en blanco y negro? Y mi otra pregunta es la esfera se creo como parte del código? o esta almacenada en el servidor y se invoca cuando acercas el marcador? Si se creó con el código veo complicado que me inventé una imagen más pro solo con las etiquetas a.sphere pero supongo que se pueden cargar imágenes animadas ¿sabes que formatos son?
Me gustaMe gusta