La realidad aumentada (AR) está revolucionando la forma en la que interactuamos con el entorno digital, y hoy en día ya no es necesario depender de plataformas cerradas o de pago para crear este tipo de experiencias. En este artículo explicaré el paso a paso de mi tutorial inicial, todo gracias a GODOT, una software open source.

Godot Engine es una plataforma open source sumamente ligera y potente, ideal tanto para juegos 2D/3D como para experiencias inmersivas XR. A continuación, te presento el paso a paso detallado para que puedas crear tu propia experiencia de realidad aumentada para la web (WebXR) de manera muy sencilla y fácil de leer.

Paso 1: Descarga e Instalación de Godot

Lo primero que debes hacer es dirigirte a la página oficial, godotengine.org. Una vez allí, busca la sección de descargas. Para este tutorial, se requiere descargar la versión 4.7 o superior de Godot Engine. Sigue los pasos de instalación habituales de tu sistema operativo; notarás que el programa es sumamente rápido y ligero de iniciar.

Paso 2: Creación y Configuración del Proyecto

Al abrir Godot por primera vez, verás el gestor de proyectos. Haz clic en crear un nuevo proyecto y asígnale un nombre descriptivo, como «primer exar». Un punto crítico en este paso es la selección del motor de renderizado (Render). Debes elegir obligatoriamente la opción «Compatibilidad». No elijas «Mobile» ni otras opciones avanzadas, ya que el modo compatibilidad es el que nos permitirá generar la realidad aumentada directamente en navegadores web. Al crear el proyecto, entrarás a la interfaz principal donde verás el visor 3D, el inspector de propiedades a la derecha y el sistema de archivos en la parte inferior.

Paso 3: Ajustes Visuales y de Renderizado (Viewport)

Para que la cámara de tu celular pueda mostrar el mundo real detrás de los objetos virtuales, necesitamos hacer el fondo transparente.

1. Ve al menú superior y selecciona Project > Project Settings.
2. Dirígete a la sección Rendering y luego a Viewport.
3. Si no ves todas las opciones, activa el interruptor de «Advanced Settings» en la parte superior.
4. Busca y marca la casilla «Transparent background».
5. Sin salir de las configuraciones, busca el módulo XR en el buscador, entra a Shaders y habilita la opción correspondiente, guardando y actualizando el proyecto cuando se te solicite.

Paso 4: Preparación de las Plantillas de Exportación

Para que el proyecto funcione en la web, Godot necesita las plantillas adecuadas.

1. Ve a Editor > Manage Export Templates.
2. Busca la sección de plantillas web y asegúrate de marcar e instalar los web templates y móviles. Este proceso solo se hace la primera vez que configuras Godot para WebXR.
3. Luego, en Project > Export, añade la opción «Web» y deja las configuraciones por defecto.

Paso 5: Creación de la Escena 3D y Nodos

La jerarquía de los elementos es fundamental para que la realidad aumentada funcione:

• Nodo Principal: Crea un nodo llamado «Node 3D» y cámbiale el nombre a «Main» .
• Origen y Cámara AR: Añade un nodo hijo llamado XR Origin 3D (que será el ancla del usuario en el mundo). Dentro de este, añade un nodo XR Camera 3D (que representa la vista del usuario).
• El Objeto 3D: Selecciona el nodo «main» y añade un Mesh Instance 3D. En el panel inspector (a la derecha), asígnale un «Box Mesh» para crear un cubo . Nómbralo «cubo». Para que lo puedas ver bien en la experiencia, en sus propiedades de «Transform», cambia su escala a 0.2 (en todos los ejes) y muévelo en el eje Z a -1.
• Iluminación: Añade un nodo Omni Light 3D bajo «main» y elévalo un poco (posición Y = 0.5) para que el cubo no se vea plano y tenga sombras.
• Botón de Activación: Para poder entrar a la experiencia desde el navegador, crea un Canvas Layer y, dentro de él, un nodo Button. Llámalo «Button AR».

Paso 6: Añadir el Script de Lógica WebXR

Para que la magia suceda, selecciona tu nodo «main», haz clic derecho y selecciona Attach Script . Asegúrate de que el lenguaje sea GDScript. El código de este script (que el autor facilita en su Patreon) se encarga de verificar si el navegador soporta WebXR, solicita los permisos de sesión y, muy importante, habilita el «hit-test». Esta característica permite lanzar un rayo invisible desde la pantalla hacia el mundo real para detectar superficies planas y poder posicionar el cubo donde toques con el dedo.

El archivo del código está aquí -> https://www.patreon.com/emiliusvgs/posts/crea-realidad-166951555

Paso 7: Configuración de Pruebas en el Celular

Como los navegadores de escritorio no soportan WebXR de forma nativa con cámaras de entorno, debes probarlo en tu celular.

1. Ve a Editor > Editor Settings y busca la palabra «web».
2. En la sección de exportación, introduce la IP local de tu computadora en el «http host» y asegúrate de marcar la casilla «use tls».
3. En la esquina superior derecha de Godot, usa el botón de «Remote Deploy». Esto te generará una URL segura. Ábrela en el navegador de tu celular, pulsa el botón que creaste y verás cómo se activa tu cámara, permitiéndote posicionar el cubo en el mundo real.

Paso 8: Exportación Final y Alojamiento Web

Una vez estés feliz con tu experiencia, el último paso es publicarla en internet para que cualquiera pueda usarla:

1. Ve a Project > Export y selecciona tu perfil Web.
2. Elige una carpeta de destino en tu computadora y haz clic en «Export Project».
3. Ve a la carpeta donde exportaste los archivos y busca el archivo HTML principal (por ejemplo, primerxar.html) y renómbralo a index.html .
4. Sube todos estos archivos a tu proveedor de hosting (en el tutorial se recomienda Hostinger por su estabilidad para entornos AR/VR). Si los subes a una carpeta específica (ej. /ar), los usuarios solo tendrán que ingresar a [tudominio.com/ar](https://tudominio.com/ar) y la experiencia cargará automáticamente gracias al archivo index.html.