Realidad Aumentada en el navegador – Parte II

Hace una semana les contaba que había estado experimentando con un par de frameworks y herramientas de realidad aumentada para el navegador.

Todo esto se debe a un evento en el que estoy participando donde estaremos enseñando a niños y adolescentes sobre programación, lógica y demás (StemFest), y para divertir un poco a los participantes (Que parece que serán 3000… sí, una locura :S) me puse a crear una aplicación que simule el juego de la búsqueda del tesoro.

Teniendo en cuenta las características del proyecto: Web + JavaScript. Este puede ser ejecutado por cualquier navegador en cualquier dispositvo (Celular o escritorio) y con esto, no tener la necesidad de crear una aplicación nativa para cada plataforma.

En fin, y manteniendo mi palabra, en vez de explicar el código paso a paso, paso a dejar el repositorio de código con todo el proyecto funcionando.

https://github.com/MatiasIac/STEMFestTauranga2019

(El proyecto irá variando en esta semana, pero el core seguirá siendo el mismo 🙂 )

Anuncios

Creando realidad aumentada en el navegador

Image

Hace muchos años atrás (Como 10) hablaba en un evento público sobre el futuro de algunas tecnologías. Que ya había empresas que estaba apostando a ellas y que las herramientas eran cada vez más accesibles y, por lo tanto, más fáciles de usar e implementar.

Hoy, cuando se habla de realidad aumentada siempre pensamos en celulares y aplicaciones al estilo PokemonGO. Aplicaciones construidas con Unity3D, ARKit y otros. Pero nos olvidamos de los principios de la realidad aumentada y las posibilidades que nos brindaba con equipos de casi costo nulo (Nulo en el sentido de que cualquier computadora o dispositivo con cámara podía ejecutarlas).

En fin… este tipo de tecnología nunca murió y, por el contrario, con mayor poder de cómputo en los dispositivos volvió con más fuerza.

Hoy (Hace unos días, pero es el momento en el que escribo el post en contraposición de cuando será publicado :)), me crucé con AR.js, una herramienta que, en conjunto con otras como Three.js y AFrame, nos permite llevar el mundo de la realidad aumentada a la Web. Y cuando digo “Web” me refiero a HTML + JavaScript puro y duro.

Por esto decidí hacer un pequeño ejemplo (Foto que acompaña el post) y paso a dejarlo por acá:

<!DOCTYPE html&gt;
<html lang="en"&gt;
    <head&gt;
        <meta charset="UTF-8"&gt;
        <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
        <meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
        <title&gt;Document</title&gt;
    </head&gt;
    <script src="https://aframe.io/releases/0.6.0/aframe.min.js"&gt;</script&gt;
    <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"&gt;</script&gt;
    <body style='margin : 0px; overflow: hidden;'&gt;
        <a-scene embedded arjs&gt;
            <a-assets&gt;
                <a-asset-item id="avo" src="avo/Avocado.gltf"&gt;</a-asset-item&gt;
            </a-assets&gt;
            <a-marker-camera preset='hiro'&gt;
                <a-entity gltf-model="#avo" scale="0.3 0.3 0.3"&gt;</a-entity&gt;
            </a-marker-camera&gt;
        </a-scene&gt;
    </body&gt;
</html&gt;