Empaques y carteles interactivos
Haz aparecer un personaje, una maqueta o un producto sobre una imagen impresa. Utiliza modelos 3D en formato GLB.
Probar un GLB con marcadorCódigo abierto · MIT · Creada en Colombia
Crea realidad aumentada con HTML y JavaScript
WebAR Fácil es una librería de código abierto para crear experiencias de realidad aumentada que se abren en el navegador de Android, iPhone y computador.
Prueba WebAR Fácil ahora
- Imprime el marcador o muéstralo en otra pantalla.
- Pulsa «Iniciar AR», permite el acceso a la cámara y apunta al marcador.
Cargando el SDK…
Qué puedes crear con WebAR Fácil
Personajes animados
Elige qué animación se reproduce en un personaje (modelo 3D). Puedes cambiar de clip y ajustar la velocidad durante la experiencia.
Probar los controles de animaciónCatálogos y variantes de producto
Alterna entre modelos o cambia su color con la cámara abierta. Úsalo para mostrar variantes de un mismo producto.
Probar el catálogoModelos que puedes manipular
Deja que el visitante explore un objeto 3D. Puede tocar para seleccionarlo, arrastrar para girarlo y pellizcar para escalarlo.
Probar gestos con un marcadorVídeo sobre una imagen
Reproduce un MP4 al escanear una página. Con chroma key puedes integrar una persona grabada sobre un fondo de color uniforme.
Probar vídeo con chromaFichas educativas y exposiciones
Combina un modelo, un vídeo y un texto sobre la misma imagen. Úsalo para explicar una pieza o complementar una ficha didáctica.
Probar una escena con tres contenidosRecorridos con varios marcadores
Asigna contenido independiente a cada tarjeta, señal o pieza de una exposición. Cada marcador conserva su propio estado.
Probar dos marcadoresEtiquetas y mensajes personalizados
Convierte el texto escrito por el visitante en un rótulo de realidad aumentada. Puede cambiarlo mientras la escena está activa.
Escribir sobre un marcadorColocación en superficies
Coloca un modelo 3D en formato GLB sobre una superficie sin usar una imagen impresa. El SLAM óptico usa la cámara para estimar la posición. La escala es relativa, así que el tamaño del modelo se ajusta visualmente.
Probar un GLB con SLAM ópticoDiseño con luz interactiva
Ajusta la iluminación virtual para mostrar cómo cambia el aspecto de los materiales de un modelo mientras está colocado.
Probar la iluminación con SLAMMontajes que puedes recuperar
Guarda un mapa óptico en el navegador y vuelve al mismo lugar para intentar recuperar la colocación del contenido.
Probar mapas localesExperiencias para guardar y compartir
Usa el visor a pantalla completa y guarda una foto o un vídeo de la escena en los navegadores compatibles.
Probar pantalla completa y capturaCómo crear tu primera experiencia de realidad aumentada
- Añade el script de WebAR Fácil a tu archivo HTML.
- Elige un JPG o PNG como marcador y pon su ruta en
webar-target. - Pon la ruta de tu modelo GLB en
webar-modely abre la página desde tu servidor.
<script defer src="https://realidad-aumentada.com.co/webar-facil/webar-facil.min.js"></script>
<webar-scene>
<webar-target src="./marcador.jpg" target-id="poster">
<webar-model src="./modelo.glb" size="0.3"></webar-model>
</webar-target>
</webar-scene>