WebAR

WebAR (Realidad Aumentada Web) es una tecnología que permite a los usuarios experimentar la Realidad Aumentada (RA) directamente en el navegador web de su dispositivo (móvil o escritorio), sin necesidad de descargar o instalar ninguna aplicación nativa.

Para saber más: Realidad eXtendida (XR)

En esencia, WebAR utiliza las capacidades del navegador (acceso a la cámara, sensores de movimiento, geolocalización, gráficos 3D a través de WebGL) para superponer contenido digital interactivo sobre el mundo real

Estas herramientas ofrecen gran flexibilidad y son ideales para desarrolladores:

Herramienta	Tipo	Descripción	Uso Típico
AR.js	Librería + A-Frame	Es la librería más ligera y popular. Funciona perfectamente con A-Frame para crear RA basada en marcadores y, lo más importante para su caso, geolocalización (gps-new-entity-place).	Proyectos educativos, mapas interactivos, prototipos rápidos.
Three.js	Librería 3D	El motor fundamental de JavaScript para gráficos 3D. No es una herramienta de AR en sí misma, pero muchos proyectos de WebAR se construyen directamente sobre él.	Experiencias de RA personalizadas y de alto rendimiento.
A-Frame	Framework	Simplifica Three.js, permitiendo escribir código 3D/AR utilizando etiquetas HTML sencillas. Es la pareja ideal de AR.js.	Desarrollo rápido de escenas 3D interactivas.

AR.jS

<!DOCTYPE html>
<html>
<head>
    <title>AR.js Location-based Mínimo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">
    
    <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
    
    <script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
    
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
</head>

<body>
    <a-scene 
        vr-mode-ui='enabled: false' 
        arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false' 
        renderer='antialias: true; alpha: true'>

        <a-camera gps-new-camera='gpsMinDistance: 5'></a-camera>

        <a-box 
            color="red" 
            depth="1" height="1" width="1" 
            
            gps-new-entity-place="latitude: 37.176128; longitude: -3.599709; altitude: 5"> 
        </a-box>
        
    </a-scene>
</body>
</html>

A. Sección <head> (Inicialización)

Esta sección define el entorno y carga los componentes que permiten que AR.js funcione.

Parte del Código | Nombre | Función -- | -- | -- aframe.min.js | Motor 3D | Carga A-Frame, el marco de trabajo que permite crear escenas 3D en HTML. aframe-look-at-component | Orientación | Componente opcional pero recomendado para que los objetos puedan rotar automáticamente para "mirar" a la cámara. aframe-ar-nft.js | AR.js Core | Carga la librería principal de AR.js, la cual inyecta los componentes de geolocalización, como gps-new-camera y gps-new-entity-place.

Exportar a Hojas de cálculo

B. Sección <body> (La Escena)

Esta es la parte visible que define la Realidad Aumentada.

4. <a-scene> (El Contenedor)

HTML

<a-scene 
    vr-mode-ui='enabled: false' 
    arjs='sourceType: webcam; videoTexture: true; debugUIEnabled: false' 
    renderer='antialias: true; alpha: true'>

• vr-mode-ui='enabled: false': Desactiva el botón de VR, ya que estamos en modo AR.

• arjs='...': Configura AR.js.

  • sourceType: webcam: Usa la cámara del dispositivo.

  • videoTexture: true: Muestra la transmisión de la cámara como fondo.

  • debugUIEnabled: false: Oculta la interfaz de depuración de AR.js.

5. <a-camera> (El Usuario)

HTML

<a-camera gps-new-camera='gpsMinDistance: 5'></a-camera>

• gps-new-camera: Este es el componente clave de AR.js. Asigna la ubicación geográfica del usuario a la cámara de la escena 3D.

• gpsMinDistance: 5: Es un ajuste de optimización que reduce la cantidad de llamadas a la API de geolocalización si el usuario se mueve menos de 5 metros.

6. <a-box> (El Contenido AR)

HTML

<a-box 
    color="red" 
    depth="1" height="1" width="1" 
    gps-new-entity-place="latitude: 37.176128; longitude: -3.599709; altitude: 5"> 
</a-box>

• <a-box>: Es una entidad A-Frame simple (un cubo). Podría ser cualquier cosa: <a-gltf-model>, <a-text>, etc.

• gps-new-entity-place: Este es el componente que vincula la entidad (el cubo) a una ubicación geográfica fija en el mundo real.

  • latitude / longitude: La ubicación exacta donde aparecerá el objeto.

  • altitude: La altura vertical (en metros) a la que debe aparecer el objeto, relativa al suelo del usuario.

Este es el esqueleto más simple y estable para empezar a crear contenido AR con geolocalización.

Bibliografía:

• Sharad Jain (2023) Understand basics of WebAR and Augmented Reality, Medium, Nov 14, 2023 https://medium.com/antaeus-ar/intro-to-webar-9fcb455416b3