El año pasado hablamos sobre ARjs y su capacidad de crear con pocas líneas de código un ejemplo simple de realidad aumentada. Hoy he querido ahondar más sobre esta excelente librería. A inicios de este mes recibí un correo de un usuario donde me preguntaba cómo agregar más archivos 3d dentro del ejemplo.
En realidad, despúes de crear el primer ejemplo dejé de hacer seguimiento a esta librería debido a diferentes pendientes laborales y familiares (excusas). Hoy quiero resarcirme de esta labor y generar otro tutorial de la misma calidad.
Recuerden que ARJS es una librería ligera y a la vez potente pues se puede crear realidad aumentada para Mobile y Web con pocas líneas de código, y además se integra fácilmente con diversas librerías que interactúen con servicios online.
Para ello, vamos a repasar sobre ARjs.
¿Qué es ARjs y por qué es importante?
ARjs (Augmented Reality Javascript) fue creado por Jerome Etienne bajo la idea de ser open source, la cual es la clave de desarollo de la plataforma. Está orientado a relacionarse con otras librerías, sobre todo se integra con three.js y aframe (este último vamos a explicar con detalle). Además es de fácil lectura a través de diferentes dispositivos.
Para agregar objetos 3D es necesario utilizar una de las dos librerías empleadas Three o Aframe. Si bien Three está ampliamente conocido por sus innumerables usos en aplicativos online, hoy quiero darle énfasis a Aframe, porque esta librería está diseñada para ser utilizada en plataformas de realidad virtual o mejor dicho: plataformas WEBVR.
A-frame para importar elementos interactivos
La realidad virtual es prima de la aumentada, así que vamos a visitarla y pedirle que nos preste algo de su tecnología para este ejemplo 😉
A frame no tiene problemas con latencia y framerate en navegadores. Se han dado ejemplos que muchas de sus aplicaciones llegan a los 90 fps. Los navegadores tradicionales soportan los gráficos 2D y esta librería utiliza mínimos recursos. Respecto a los archivos 3D, A frame procesa objetos 3d y geometrías a través de WebGL.
Respecto a este tema podemos explicar que los formatos de soporte 3D son gLTF (el jpg en 3D), dae (collada), obj (wavefront) y también lee componentes de Three.
Además A-frame soporte links, videos youtube o vimeo, sonido, textura, lectura de cámara y un largo etceterá.
Recursos 3D
- Google Blocks -> https://vr.google.com/objects
- Sketchfab -> https://sketchfab.com/
- Clara.io -> http://clara.io/
- Archive3D -> http://archive3d.net/
- Sketchup’s 3D Warehouse -> https://3dwarehouse.sketchup.com/
- TurboSquid -> http://www.turbosquid.com/Search/3D-Models/free
Tutorial: ARJS + A-FRAME | geometría
Necesitamos descargar la librería ARJs y obviamente tener un editor de código como Sublime. Una vez teniendo estos dos elementos vamos a revisar los archivos ARJs y buscaremos el ejemplo en cuestión.
AR.js master -> aframe -> examples -> mobile-performance.html
<!DOCTYPE html>
<!-- include aframe -->
<script src="vendor/aframe/build/aframe.js"></script>
<!-- include aframe-ar.js -->
<script src="../build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1;'>
<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - mobile performance in a-frame
<br/>
Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
</div>
<!-- enable artoolkit on this scene -->
<a-scene stats embedded arjs='sourceType: webcam; detectionMode: mono; maxDetectionRate: 30; canvasWidth: 240; canvasHeight: 180'>
<!-- define the object which gonna be put on this marker -->
<a-box position='0 0.5 0' material='opacity: 0.5; side: double'>
<a-torus-knot radius='0.26' radius-tubular='0.05'>
<a-animation attribute="rotation" to="360 0 0" dur="3000" easing='linear' repeat="indefinite"></a-animation>
</a-torus-knot>
</a-box>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</body>
</html>Utilizando aframejs y aframe-ar.js
El archivo inicial hace dos llamadas a las dos librerías principal
De esta manera el aframe estará conectado para el trabajo de importar archivos 3D (aframe.js) y podrá proyectarse en la realidad aumentada a través del otro js. (aframe-ar.js)
<script src="vendor/aframe/build/aframe.js"></script>
<!-- include aframe-ar.js -->
<script src="../build/aframe-ar.js"></script>Estos archivos son locales, pero podemos llamarlo los archivos que están en la nube.
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>Importando el escenario
En esta sección hacemos un llamado a la cámara (webcam) y la forma de detección. Además, incorporemos dos elementos geométricos como es la caja (box) y torus-knot. También se puede ver que se ha incorporado una simple animación como la rotación. Finalmente conectamos con el marcador llamado hiro.
<a-scene stats embedded arjs='sourceType: webcam; detectionMode: mono; maxDetectionRate: 30; canvasWidth: 240; canvasHeight: 180'>
<!-- define the object which gonna be put on this marker -->
<a-box position='0 0.5 0' material='opacity: 0.5; side: double'>
<a-torus-knot radius='0.26' radius-tubular='0.05'>
<a-animation attribute="rotation" to="360 0 0" dur="3000" easing='linear' repeat="indefinite"></a-animation>
</a-torus-knot>
</a-box>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
Es importante entender este conjunto de códigos pues nos permitirá descubrir la versatilidad de nuestras librerías. Así se vería el ejemplo. Se dan cuenta que hemos creado realidad aumentad con menos de 10 lineas de código. A frame demuestra ser muy eficiente para proyectar objetos 2d y 3d y ARJS es potente por su ligereza, potencia y capacidad de visualizarse en casi todos los smartphone, tanto antiguos como nuevos.
Creando nuestro propio ejemplo
Los ejemplos que vimos anteriormente tienen la opacidad muy reducida por ello, los objetos tienen transparencia. Se reestablece agregando 1.0.
Vamos a crear nuestro propio ejemplo. Quiero mostrar 3 elementos: 2 geométricos como un caja y una rueda (torus); y un texto con color. Los elementos tienen textura 😉
Modificaremos la escena de esta manera:
<a-scene stats embedded arjs='sourceType: webcam; detectionMode: mono; maxDetectionRate: 30; canvasWidth: 240; canvasHeight: 180'>
<!-- define the object which gonna be put on this marker -->
<a-box position='0 0.5 0' material='opacity: 0.5; side: double' src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Flag_of_Peru.svg/1200px-Flag_of_Peru.svg.png" >
<a-text value="Emiliusvgs" color="blue" align="center" >
<a-torus radius='1.26' radius-tubular='0.05'src="https://pbs.twimg.com/profile_images/1011093470847623173/g41aVL7H_400x400.jpg">
<a-animation attribute="rotation" to="360 120 250" dur="6000" easing='linear' repeat="indefinite"></a-animation>
</a-text>
</a-torus>
</a-box>
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>Box: para la caja se importará un arhivo de textura de la bandera peruana con transparencia. Además esta textura se apreciará por ambos lados.
<a-box position='0 0.5 0' material='opacity: 0.5; side: double' src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Flag_of_Peru.svg/1200px-Flag_of_Peru.svg.png" >Texto: Se me ocurrió agregar un texto que diga Emiliusvgs y en vez de agregar textura, le agregamos color. En este caso el azul. Finalmente centramos el texto.
<a-text value="Emiliusvgs" color="blue" align="center" >Torus: Lo implementé con un radio más amplio, con la textura de mi foto de twitter. La animación es una rotación pero no simple, pues no rota en una sola dirección.
<a-torus radius='1.26' radius-tubular='0.05'src="https://pbs.twimg.com/profile_images/1011093470847623173/g41aVL7H_400x400.jpg">
<a-animation attribute="rotation" to="360 120 250" dur="6000" easing='linear' repeat="indefinite"></a-animation>
El ejemplo quedaría de esta manera 😉 Es importante que lo ejecutes online para verificar todo el entorno y la visualización de los elementos. Pruébalo tu mismo -> http://emiliusvgs.com/arjs/geometrico.html
Como podrán ver se proyecta una caja semitransparente con la bandera de Perú, en el centro de esta caja aparece mi nombre y alrededor de estos dos elementos hay una vara circular que se mueve de manera irregular. ¿Genial, no?
Conoce más sobre cómo trabajar con ARJS y A-frame con este tutorial
buenas! muy interesante el articulo, un cliente me esta pidiendo que muestre unacarta de un restaurante en Vr como podria implementar unas simples imagenes a VR