¡Hola Aumentados! hoy traigo excelentes noticias, por fin alguien escucho las plegarias de todos aquellos que deseamos desarrollar aplicaciones de Realidad Aumentada con librerías (gratuitas) y que además cuenten con un gran equipo de desarrollo y soporte online. Gracias AR.js
En general los desarrolladores pequeños y medianos gastan mucho dinero en librerias que al final dejan un poco o mucho que desear, no cometan ese error.
Continuemos con esta gran noticia.
Ya todos sabemos de lo que es capaz de hacer Ar.js (AR.js Augmented Reality on the web), esa genialidad de permitirnos visualizar nuestras aplicaciones de realidad aumentada en móviles Android y iOS, sumándole la visualización en navegadores web como Safari, Google Chrome, Mozilla Firefox entre otros.
El único problema que tenía hasta el momento (lo cual para mí no era un problema) era que utilizaba marcadores monocromáticos pero también utiliza QR Code y de cierta manera marcadores personalizados, pero ahora todo esto empezará a acabarse pues ha llegado el image tracking, que nos permitirá utilizar imágenes a colores para nuestros marcadores.
Ahora bien, sumándole la Geolocalización, móviles y computadores de mesa (desktop y laptops), facilidad de programar y diferentes lenguajes que podemos utilizar para programar las aplicaciones. Todo esto son unos golazos de parte de AR.js (Ar.js 3 – Librerías pagas 0).
Dejémonos de charla y vamos a la acción.
- DOCUMENTACION OFICIAL DE AR.js https://ar-js-org.github.io/AR.js-Docs/
- Nueva web de GitHub de AR.js https://github.com/AR-js-org/AR.js
Estos serán los nuevos <script src=VERSION DE SCRIPT> que deben estar en la parte superior de tus proyectos, solo puedes utilizar uno, ya sea Image Tracking o Marker Tracking pero no ambos.
- AR.js with Image Tracking + Location Based AR:
- AR.js with Marker Tracking + Location Based AR:
También se puede importar una versión específica reemplazando la palabra clave maestra con la etiqueta de versión:
aquí un ejemplo:
<script src="https://raw.githack.com/AR-js-org/AR.js/3.0.2/aframe/build/aframe-ar-nft.js">
hagamos el primer ejemplo:
- Crea un nuevo proyecto con el código que encontraras en la parte inferior.
- Córrelo utilizando un servidor en nuestro caso Microsoft Visual Studio Code (si estas con un host y dominio personal: utiliza siempre Https://)
- Abre la página web desde tu teléfono.
- Utiliza esta imagen como marcador:
- y aquí está el código, luego de todo esto. Ya debería de funcionar perfecto:
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script> <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script> <style> .arjs-loader { height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; display: flex; justify-content: center; align-items: center; } .arjs-loader div { text-align: center; font-size: 1.25em; color: white; } </style> <body style="margin : 0px; overflow: hidden;"> <!-- minimal loader shown until image descriptors are loaded --> <div class="arjs-loader"> <div>Loading, please wait...</div> </div> <a-scene vr-mode-ui="enabled: false;" renderer="logarithmicDepthBuffer: true;" embedded arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;" > <!-- we use cors proxy to avoid cross-origin problems --> <a-nft type="nft" url="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/trex-image/trex" smooth="true" smoothCount="10" smoothTolerance=".01" smoothThreshold="5" > <a-entity gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf" scale="5 5 5" position="50 150 0" > </a-entity> </a-nft> <a-entity camera></a-entity> </a-scene> </body>
Que tal estas nuevas noticias
Muchas gracias amigo muy buenos los tutoriales. Solo una pregunta probé tu ejemplo, también el de la documentación AR.js en Github, probé igual en hosting con https, en PC y Smarthphone y noto que la velocidad de carga en el mensaje Loading please wait se mucho tiempo, se puede mejorar ese tiempo de carga o no. Gracias de antemano.
Hola Luis muchas gracias por escribirme. En este tipo de aplicaciones son muchos los factores que pueden afectarla. Me atreveria a decir que en tu caso puede ser un problema de conexion a internet y el peso del modelo o video que estas utilizando. Esto hace que el tiempo de carga sea muy lento.
Hola, muy buena información. Por ahora los test que realizé se quedan en «Loading, please wait» y no se mueven de ahí. endiferentes servidores me ocurre igual y creo que es algo que les está ocurriendo a muchos. Alguna idea sobre este problema? Gracias!!!
Hola Nicolas, muchas gracias por tu comentario, un poco tarde la respuesta… lo siento. espero encontraras la respuesta a tu pregunta en caso de que no sea asi aqui va la respuesta. Esto pasa por varias razones que van desde los llamados a los scripts hasta mal direccionamiento de tus marcadores o modelos, incluso muchas veces si hay algo mal en el codigo te puede generar el error de loading, el problema incluso va hasta el tipo de dispositivo que estas estas utilizando para hacer realidad aumentada. Pero el principal problema de esto es el https sea donde sea que estes utilizando tu aplicacion debe de utilizar https adicional a esto verificar que estas utilizando cross-origin
Hola, muy buena información. Por ahora los test que realizé se quedan en «Loading, please wait» y no se mueven de ahí. endiferentes servidores me ocurre igual y creo que es algo que les está ocurriendo a muchos. Alguna idea sobre este problema? Gracias!!!
Hola Nicolas muchas gracias por escribirme. Esto es debido a que tienes un error en tu codigo.
No tienes ningún error en el código, tanto el nft como el modelo estaban alojados usando heroku y como dejó de ser gratis, el creador original de ese contenido lo ha cambiado. Debes usar un nft y un modelo 3d alojados en otro sitio
Hola Angel, asi es, muchas gracias por tu comentario, en ocasiones aparecen errores que son muy simples de solucionar, lo ideal es siempre trabajar con nuestros propios archivo.