Marcador Personalizado

Realidad Aumentada Basada en Web

Introducción

Los marcadores son imágenes de referencia que nos sirven para ubicar modelos tridimensionales en nuestro entorno. Podemos reconocerlas porque se encuentran enmarcadas dentro de un rectángulo negro.

Existen imágenes predefinidas que se usan por defecto, como la clásica Hiro.

Aquí veremos cómo crear una imagen personalizada para usarla en un proyecto de realidad aumentada con las bibliotecas A-Frame y AR.js

Pasos a seguir:

Estas son las sencillas instrucciones para generar un marcador personalizado con el cual mostrar nuestros modelos 3D en Realidad Aumentada:

Diseño del marcador
Generar el archivo .patt
Usar el marcador

1. Diseño del marcador

En nuestro editor de imágenes favorito, creamos un nuevo documento en formato RGB, en formato cuadrado, por ejemplo 512 x 512 pixeles.

importante:

El color de fondo debe ser un gris claro con los valores

R: 240, B:240, G:240

A continuación, dibuja en color negro la imagen que servirá de marcador.

Una vez que tenemos la imagen, la salvamos en un formato sin pérdida de calidad, como png o gif.

2. Generar el archivo .patt

La imagen es la referencia visual que mostramos a la cámara. Sin embargo, la información que requiere AR.js es la interpretación numérica de la imagen, un archivo de texto con la extensión .patt de la palabra inglesa pattern.

Usaremos la herramienta en línea que está en el siguiente URL:

https://ar-js-org.github.io/AR.js/three.js/examples/marker-training/examples/generator.html

Esta es la presentación del sitio, con una imagen de muestra de AR.js

Damos clic al botón Upload y seleccionamos la imagen.

Tomar en cuenta que hicimos la imagen sin el marco negro, que es añadido por ésta aplicación.

Se muestra una previsualización de cómo quedará el marcador.

Si estamos de acuerdo con el resultado, damos clic en el botón Download Marker

El archivo descargado tiene el nombre genérico pattern-marker.patt, que cambiaremos por uno más adecuado.

También damos clic en el botón Download Image, que descarga la imagen marker.png la cual también renombraremos.

Al abrir en un visualizador la imagen descargada, notamos que ya tiene el marco negro.

Guardamos ambos archivos en la carpeta de imágenes de nuestro folder raíz, o en donde elijamos hacerlo.

Renombramos ambos archivos, sin cambiar sus extensiones.

Si abrimos el archivo .patt en un editor de texto, notamos que los colores están interpretados con números: el gris de fondo es 240, y el color negro 0

El marcador personalizado se usa en una etiqueta A-Frame que hace referencia al tipo de cámara que se usará:

<a-marker
                type="pattern"
                preset="custom"
                url="assets/nefertiti.patt"
                raycaster="objects: .clickable"
                emitevents="true"
                cursor="fuse: false; rayOrigin: mouse;"
                id="markerA"
            >

3. usar el marcador

Un ejemplo de uso:

<!doctype html>
<html>
    <head>
        <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
        <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
        <script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
        <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-detector.js"></script>
        <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-handler.js"></script>
    </head>

<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
	<a-scene 
	embedded arjs='sourceType: webcam; 
	detectionMode: mono_and_matrix; matrixCodeType: 3x3;' renderer='precision: medium;'
	embedded 
    gesture-detector
	>
		
		<a-marker
                type="pattern"
                preset="custom"
                url="assets/marker.patt"
                raycaster="objects: .clickable"
                emitevents="true"
                cursor="fuse: false; rayOrigin: mouse;"
                id="markerA"
            >
                <a-entity
                    scale="0.9 0.9 0.9"
                    animation-mixer="loop: repeat"
                    gltf-model="#animated-asset"
                    class="clickable"
                    gesture-handler
                ></a-entity>
            </a-marker>
			
		<a-entity camera></a-entity>
	</a-scene>
</body>
</html>