Cómo Crear tu Primera Experiencia en WebAR Sin Saber Programar: Tutorial Paso a Paso

Categorías: Videojuegos, Realidad aumentada Etiquetas: #WebAR, #RealidadAumentada, #DesarrolloSinCodigo, #Modelado3D, #AnimacionDigital, #InnovacionEducativa, #DiseñoInteractivo

El impacto de la Webar en la creación de contenido visual

Webar (Realidad Aumentada basada en la web) es una tecnología fascinante, pero al pensar en crear este tipo de experiencias, es muy común imaginarnos líneas de código interminables, servidores complejos y un nivel de ingeniería de software que parece inalcanzable. Al fin y al cabo, para alguien cuyo fuerte es la narrativa, el cine o el diseño visual, el mundo de la programación puede resultar genuinamente abrumador. Por suerte, es exactamente ahí donde el Webar entra en escena como un salvavidas que elimina todas esas barreras técnicas y nos devuelve el control, demostrando que para crear proyectos interactivos ya no se necesita ser un experto en sistemas, sino simplemente tener una buena historia que contar y las herramientas adecuadas.

Sin embargo, la tecnología ha avanzado a pasos agigantados hacia la democratización. Hoy en día, no necesitas ser un ingeniero de sistemas para hacer que una imagen plana cobre vida frente a la cámara de un celular. En este artículo, quiero compartir mi experiencia personal y un tutorial detallado sobre cómo construir una aplicación de Realidad Aumentada en la web (WebAR) de forma sencilla, utilizando herramientas de “arrastrar y soltar” y modelos 3D gratuitos.

Todo este proceso nació de la necesidad de crear un proyecto universitario sobre prevención sísmica. Aunque mi ambición inicial era simular un terremoto completo con vibraciones en el teléfono y físicas complejas, la realidad técnica me superó. No sé programar, y esos detalles técnicos se salían de mis manos. Así que decidí ser práctico: seguí una guía para principiantes recomendada por la plataforma MindAR y logré montar una experiencia visual, limpia y funcional sin escribir una sola línea de código. Aquí te explico exactamente cómo lo hice.

¿Qué es la Webar y por qué es el futuro de la realidad aumentada?

Antes de entrar en el tutorial práctico, es fundamental entender con qué estamos trabajando al utilizar el WebAR (término que significa Realidad Aumentada basada en la web). Tradicionalmente, si querías que alguien viera tu proyecto inmersivo, tenías que obligarlo a ir a la App Store o Google Play, descargar una aplicación pesada, instalarla y luego escanear un marcador. Esa fricción hacía que mucha gente simplemente perdiera el interés antes de empezar.

El WebAR rompe esa barrera por completo. Al ser una experiencia nativa de internet, el WebAR permite que los modelos 3D y las animaciones se ejecuten directamente en el navegador de tu teléfono móvil (como Chrome o Safari), superponiendo el mundo digital sobre tu entorno físico de manera inmediata. El usuario solo necesita escanear un código QR con su cámara normal, hacer clic en un enlace y listo: gracias a la accesibilidad del WebAR, el contenido aparece mágicamente sin requerir instalaciones previas. Para los creadores independientes, educadores y estudiantes, el WebAR es una herramienta invaluable porque hace que el arte y el conocimiento estén al alcance de cualquier persona con un dispositivo inteligente.

Preparando a Nuestros “Actores”: La Búsqueda de Modelos 3D

Como estudiante de medios audiovisuales, veo la creación de WebAR como si fuera la producción de un cortometraje. Si el editor web es mi “set de grabación”, entonces necesito actores, utilería y una locación. Dado que no poseo conocimientos avanzados en modelado 3D desde cero, la solución lógica fue recurrir a los inmensos repositorios colaborativos que existen en internet.

La plataforma por excelencia para esto es Sketchfab, una inmensa biblioteca digital donde artistas de todo el mundo comparten sus creaciones, muchas de ellas de forma gratuita bajo licencias Creative Commons. Para mi proyecto de prevención en aulas, necesitaba estudiantes, pupitres y elementos de una escuela.

El Formato glTF: El Estándar 3D para WebAR

Un punto crítico antes de descargar cualquier cosa es entender el formato. Para que los modelos 3D carguen rápido en un navegador móvil mediante WebAR, no podemos usar formatos pesados de la industria del cine o la arquitectura. Necesitamos el formato glTF (o su variante binaria .glb). Este formato es conocido como el “JPEG del 3D” porque comprime las texturas, las animaciones y la geometría del modelo en un paquete muy ligero.

Selección de Activos Visuales

Para darle vida a mi escena, seleccioné cuidadosamente activos creados por la comunidad. El objetivo era tener animaciones que simularan las acciones de los estudiantes antes y durante la emergencia. Utilicé los siguientes modelos, dando todo el crédito a sus talentosos creadores originales:

• Para el movimiento inicial, utilicé la animación del estudiante caminando, titulada Teen Boy walking, creada por el usuario spiderfoyo.
• Para mostrar la acción de buscar refugio de manera segura, implementé la animación de agacharse llamada Crouched Walking, desarrollada por el artista LeyamaTk.
• Como utilería principal del aula, integré el modelo de un pupitre escolar básico llamado Mesa, diseñado por kajetudo.
• Para contextualizar el entorno, usé la entrada de una escuela titulada School_[entrance], modelada por Comicaroid.
• Finalmente, para darle realismo a los pasillos y muros donde ocurre la acción, incorporé detalles arquitectónicos fundamentales bajo el nombre de Otros elementos estructurales, creados por el diseñador Miguel Troyano Moreno (@mtroyano).

Tener estos elementos listos y descargados en formato glTF en mi computadora fue el verdadero punto de partida de la producción.

Tutorial Webar Paso a Paso: Construyendo la Escena sin Código

Con mis modelos 3D listos y optimizados, era el momento de ensamblar la experiencia. Para ello, me basé directamente en un excelente artículo de la comunidad de MindAR titulado “Beginner Guide: 10-Year-Olds Can Build a Web AR App. So do you!” (Yuen, 2021). Este artículo está enfocado en personas sin perfil técnico y enseña a crear lo que se conoce como “Imágenes Aumentadas” (Augmented Images-web ar).

Las web ar es un tipo de AR donde el contenido virtual se ancla y aparece encima de una imagen del mundo real, como un póster, la portada de un libro etc.

Paso 1: Inicialización en Pictarize Studio

El tutorial recomienda el uso de Pictarize, una plataforma de creación visual interactiva que funciona íntegramente online. Lo maravilloso de Pictarize es que es un editor WYSIWYG (lo que ves es lo que obtienes). Es decir, funciona con una lógica de “arrastrar y soltar”, eliminando por completo la necesidad de escribir código JavaScript o HTML.

Lo primero que hice fue acceder a su página web y lanzar el editor (Studio). Creé una cuenta gratuita para asegurarme de que mi proyecto no se borrara al cerrar la pestaña. Una vez dentro de mi cuenta, seleccioné la opción de crear un “Proyecto en Blanco” (Blank Project).

Paso 2: Definiendo la Imagen Objetivo (Target Image en webar)

Cuando abres el proyecto en blanco, te encuentras con un espacio 3D vacío. El primer paso crucial es decirle al programa cuál será la imagen del mundo real que la cámara del celular debe rastrear. A esto se le llama Target Image o imagen objetivo.

Para mi proyecto universitario, diseñé un póster informativo sobre sismos. Subí la imagen JPG de ese póster a la plataforma de Pictarize. El software procesa la imagen automáticamente, buscando puntos de alto contraste y asimetrías que le sirvan a la cámara del teléfono para reconocerla . Una vez procesada, la imagen de mi póster apareció flotando plana en el centro del escenario virtual. Este póster digital sirve como el “suelo” o el ancla sobre la cual vamos a colocar a nuestros actores 3D.

Paso 3: Subiendo y Posicionando el Contenido 3D

Con el póster base establecido, llegó el momento más divertido: dirigir la escena. Necesitaba importar los modelos de Sketchfab que había descargado previamente.

En Pictarize, el proceso es sumamente intuitivo. Opción de “Añadir Contenido” (Add Content), luego a “Subir Recursos” (Upload Assets) y simplemente arrastré los archivos glTF descomprimidos desde mi escritorio hacia el navegador. Subí al chico caminando (spiderfoyo), al chico agachado (LeyamaTk), la mesa (kajetudo) y los elementos estructurales (Comicaroid y mtroyano).

Ajustes de Escala y Rotación

Al soltar un modelo 3D en la escena, rara vez aparece con el tamaño o la orientación perfecta. Aquí es donde usamos el ratón para hacer los ajustes. Haciendo clic sobre el modelo del estudiante, aparecieron unas flechas de colores (los manipuladores de los ejes X, Y, y Z). Reduje la escala de los personajes y asi no se ven gigantes en comparación con el póster, lo roté para que miraran hacia el frente, y ubiqué la mesa escolar justo al lado de el para crear la composición.

No programé físicas de gravedad ni colisiones; solo posicioné visualmente los elementos y así, al escanear la imagen, el usuario ve un diorama claro sobre cómo buscar refugio.

Paso 4: Publicación y Pruebas en el Mundo Real

Una vez que estuve satisfecho con los modelos 3D superpuestos en mi póster digital, y eso nos lleva al último paso fue materializar el trabajo. En el mundo de la programación tradicional, este paso implicaría configurar servidores, dominios y certificados de seguridad. En la plataforma que usamos, fue cuestión de dos clics.

Podemos encontrar en la esquina superior derecha del editor, hice clic en el botón “Publish” (Publicar) y luego en “Build” (Construir). El sistema tardó unos segundos en empaquetar todos mis modelos 3D, la imagen objetivo y las reglas de visualización en un servidor en la nube.

Al terminar, la plataforma me proporcionó un enlace web único y un Código QR. Este fue el momento de la verdad. Imprimí mi póster en una hoja de papel normal, pegué el código QR en una esquina, tomé mi teléfono móvil, abrí la cámara y escaneé el código. Mi navegador se abrió, pidió permiso para usar la cámara, y al apuntar hacia la hoja de papel impresa… ¡magia! Los estudiantes animados, la mesa y las paredes del colegio aparecieron flotando sobre mi escritorio físico, ejecutando sus animaciones de forma fluida, con esto ya tendriamos nuestra webar .

Desafíos y la Realidad del Creador Independiente en el web ar

A lo largo de la creación de este artículo de investigación y de mi proyecto universitario, me di cuenta de una verdad importante sobre el desarrollo de tecnología interactiva: es vital conocer nuestras propias limitaciones y trabajar inteligentemente alrededor de ellas.

El Reto de las Físicas de Simulación

Como mencioné al principio de este texto, mi idea original era sumamente ambiciosa. Quería que el usuario, al apuntar su cámara, experimentara una falsa sensación de sismo. Había leído que mediante código se podía hacer que el teléfono vibrara rítmicamente en las manos del usuario y que los modelos 3D interactivos se sacudieran de forma caótica en la pantalla, calculando colisiones de escombros en tiempo real.

La realidad es que, al intentar profundizar en cómo se hace eso, me encontré con un muro de lenguajes de programación, scripts de eventos de JavaScript y configuraciones de interfaces de programación (APIs) de hardware que no entendía en absoluto. Como estudiante de artes visuales y no de ingeniería de sistemas, intentar forzar la implementación de lógicas matemáticas complejas solo me generó frustración.

El Valor de la Simplicidad

Acepté que no podía programar la vibración ni las físicas de destrucción. Sin embargo, esto no demeritó el proyecto. Al contrario, me permitió enfocar toda mi energía en lo que sí sabía hacer: contar una historia de forma visual. Me aseguré de que las animaciones de los estudiantes descargadas de Sketchfab fueran muy claras. Me enfoqué en la estética visual, en elegir los mejores ángulos y en que el flujo de escanear la imagen fuera lo más fácil posible para el usuario final.

A veces, en el desarrollo de proyectos multimedia educativos, una representación visual estática pero bien curada tiene un impacto comunicativo mucho más fuerte que un sistema técnico a medio terminar.

WebAR y la democratización tecnológica: Realidad aumentada al alcance de todos

El verdadero logro de este tipo de plataformas no es que nos permitan hacer proyectos escolares rápidos, sino el inmenso impacto que tienen en la democratización del conocimiento y la creación. Hace solo cinco años, crear una experiencia de Realidad Aumentada que pudiera correr en cualquier navegador web requería un equipo multidisciplinario y un presupuesto considerable.

Hoy, gracias a herramientas como Pictarize y a repositorios colaborativos como Sketchfab, la barrera de entrada ha desaparecido. Cualquier artista gráfico, educador de escuela primaria, o aficionado al cine puede enriquecer sus narrativas visuales. Podemos tomar un libro tradicional y hacer que sus personajes salgan de la página, o podemos tomar un cartel sobre medidas de seguridad y convertirlo en un pequeño teatro digital que capture la atención de una generación de jóvenes acostumbrados al contenido interactivo.

Conclusión

El desarrollo de WebAR se ha transformado de una tarea de nicho para ingenieros informáticos en una herramienta de expresión accesible para cualquier tipo de creador. Mi experiencia montando este proyecto demuestra empíricamente que no es necesario saber programar para generar valor tecnológico.

Siguiendo el paso a paso detallado en este artículo desde la concepción de la idea, la búsqueda de activos tridimensionales optimizados en glTF, hasta el uso de editores visuales sin código es posible integrar el mundo digital con el mundo físico en cuestión de horas. Reconocer nuestras limitaciones técnicas, como mi incapacidad para programar físicas complejas o vibraciones hápticas, no debe ser un freno, sino una invitación a utilizar la creatividad visual y el diseño para transmitir el mensaje deseado.

Al final del día, la tecnología de Realidad Aumentada es solo un lienzo más. Lo verdaderamente importante no es el código que corre en el fondo, sino la capacidad que tenemos de combinar recursos gráficos de la comunidad para contar historias que informen, eduquen y sorprendan a nuestro público.

Créditos

• Autor : Daniel González Rueda
• Editor Académico / Calificador: Prof. Iván Pinzón Romero
• Escuela Académica: Escuela de Estudios Transversales
• Código Estudiantil / Asignatura: UCUVS-8SEMESTRE
• Institución: Universidad Central

Fuentes

Challenor, J., & Ma, M. (2019). A review of augmented reality applications for history education and heritage visualisation. Multimodal Technologies and Interaction, 3(2), Article 39. https://doi.org/10.3390/mti3020039

eIitro. (s. f.). School entrance [Modelo 3D]. Sketchfab. https://sketchfab.com/3d-models/school-entrance-62bf26754b2e42fd960dccfc3f9f6ceb

Ibáñez, M. B., & Delgado-Kloos, C. (2018). Augmented reality for STEM learning: A systematic review. Computers & Education, 123, 109–123. https://doi.org/10.1016/j.compedu.2018.05.002

Khronos Group. (2021). glTF 2.0 specification [Especificación técnica]. GitHub. https://github.com/KhronosGroup/glTF

Klopfer, E., & Squire, K. (2008). Environmental Detectives—the development of an augmented reality platform for environmental simulations. Educational Technology Research and Development, 56(2), 203–228. https://doi.org/10.1007/s11423-007-9037-6

LeyamatK. (s. f.). Crouched walking [Modelo 3D]. Sketchfab. https://sketchfab.com/3d-models/crouched-walking-9e13041f4baa49f692e36250d5b2d294

Mozilla Developer Network. (2026, 2 de junio). WebXR Device API. MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API

Pictarize. (s. f.). Pictarize Studio: Plataforma no-code para la creación de realidad aumentada web [Plataforma web]. https://app.pictarize.com/

Qiao, X., Ren, P., Dustdar, S., Liu, L., Ma, H., & Chen, J. (2019). WebAR: Web-based augmented reality state of the art, series and challenges. IEEE Access, 7, 177757–177774. https://doi.org/10.1109/ACCESS.2019.2956487

Realidad Aumentada Empezando desde cero. (2026, 26 de febrero). Tutorial de realidad aumentada WebAR con MindAR y JavaScript [Video]. YouTube. https://www.youtube.com/watch?v=qiwSnK1eZfA

spiderfoyo. (s. f.). Teen boy walking [Modelo 3D]. Sketchfab. https://sketchfab.com/3d-models/teen-boy-walking-87fd7e83d84c4529a4a72712c9a85472

Troyano Moreno, M. [@mitroyano]. (s. f.). Library earthquake [Modelo 3D]. Sketchfab. https://sketchfab.com/3d-models/library-earthquake-57b55b41553f4c4ba327a3ea8c34059f

Yuen, H. K. (2021, 13 de agosto). Beginner Guide: 10-Year-Olds Can Build a Web AR App. So do you! MindAR. https://www.mindar.org/webar-for-beginners/