Manual de WebAR Fácil

Español · English

Puedes crear tu propio index.html, cargar una imagen JPG/PNG, asociarle contenido y programar la interacción. El seguimiento de imágenes funciona con webcam de escritorio y cámara móvil sin calibración manual.

Empieza aquí

El recorrido recomendado utiliza HTML declarativo. Un script y etiquetas para imagen/modelo; cámara y controles incluidos, sin JavaScript de aplicación.

Primera aplicación con HTML: probar el repositorio y copiar un HTML completo para tu sitio.
Referencia de etiquetas: atributos de escena, marcador y modelo; rutas y errores de carga.
Recetas declarativas: tamaño, giro, clips, retención y reinicio.
Instalación y distribución: archivos locales, alojamiento remoto, ESM y NPM.

Elegir una integración

Tu aplicación	Ruta recomendada
Imagen y GLB, varios marcadores o SLAM con controles incluidos	HTML declarativo
Mostrar un modelo al detectar un celular	Reconocimiento de celulares
Botones e interacción propios sobre las etiquetas	Recetas, eventos DOM
MP4/chroma, gestos y cambios de contenido sin reiniciar	Interacción declarativa
Recursos Blob o control explícito del motor	Programática avanzada, recetas avanzadas
Renderer Three.js o proyecto A-Frame existente	Three.js, A-Frame
Sustituir captura, tracking, WASM u odometría	API avanzada

Referencia y guías

Necesidad	Documento
Escenas, marcadores y modelos mediante etiquetas	Referencia declarativa
Inicializar, cargar targets y cambiar de modo	WebAREngine
Clases, tipos y firmas exactas	API generada, contrato JSON
Crear y compilar imágenes	Marcadores
Contenido independiente por imagen	Varios marcadores
Eventos, tolerancia y calidad	Eventos y diagnóstico
GLB, Draco, Meshopt y animaciones	Modelos
MP4 y chroma key	Vídeo
Gestos, crossfade y actualizaciones en vivo	Interacción
Evidencia de deriva y recuperación	Validación de odometría
Medir y comparar iPhone/Android	Diagnósticos, protocolo físico
Indicador de superficie y confirmación	Colocación
Escena automática o renderer propio	Three.js
Integración con el framework A-Frame	A-Frame
WebXR y odometría WASM	Seguimiento espacial
Guardar y relocalizar un mapa local	Mapas
Cámara, foco y presupuesto de CPU	Cámara y rendimiento
HTTPS, CSP y publicación estática	Despliegue
Fallos conocidos y soluciones	Problemas frecuentes
Módulos internos y extensiones	Arquitectura, API avanzada
Contrato para agentes y asistentes	Guía para IA
Vocabulario	Glosario

Ejemplos ejecutables

Con el servidor iniciado, abre:

Galería de 31 ejemplos. GLB, gestos, vídeo, mapas locales, colocación y escala métrica experimental.
HTML declarativo: imagen y GLB sin JavaScript propio.
SLAM declarativo: odometría sin marcador.
Vídeo/chroma declarativo: MP4 original incluido.
Gestos y contenido en vivo: cambios de modelo, pausa y velocidad.
Colocación guiada: propuesta de superficie y confirmación.
Pruebas iPhone/Android (tools/device-tests.html en el repositorio): diagnóstico y resultados manuales.
Aplicación programática: alternativa avanzada con ciclo de vida explícito.
Script clásico programático.
Renderer propio con ESM: avanzado.
Dos marcadores con API programática.
MP4 con chroma mediante API.
Compilador de imágenes (tools/compile.html en el repositorio), calibración opcional (tools/calibrate.html en el repositorio), benchmark (tools/benchmark.html en el repositorio).

Los enlaces a ejemplos requieren HTTP/HTTPS. Abrir un HTML con file:// no inicia correctamente módulos, Workers ni cámara. Para consultar el manual como sitio: npm run dev y http://127.0.0.1:5173/docs/.

Alcance real

La biblioteca es MIT; los componentes de terceros conservan sus licencias. No utiliza un SDK cerrado ni suscripciones. No garantiza 60 FPS de análisis en todos los dispositivos, ni tracking perfecto. WebXR depende del navegador y hardware. El fallback ofrece odometría y mapa local, con deriva posible; no certifica un suelo semántico ni reconstruye una malla completa del entorno.

La referencia de firmas se genera desde las declaraciones TypeScript del build. El documento histórico de diseño en archive/ no define la API vigente.

Contribuir al desarrollo de la librería

Consulta la arquitectura, la guía de contribución y las pruebas en dispositivos. Para preparar una distribución, consulta compilación local y publicación.