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;

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.