Ecosistema 8th Wall Open Source

Curso Práctico de Realidad Aumentada Web

Bienvenido al hub definitivo de desarrollo WebXR. Explora la barra lateral para acceder a guías modulares optimizadas y libres de licencias privativas. Diseñado para su consumo directo en navegadores modernos sin aplicaciones intermedias.

Módulos y Capacidades Disponibles:
Rostro
Física
Imágenes
Cielo
Assets
Módulo 01

Efectos Faciales y Filtros Morfológicos

Captura los puntos clave del rostro del usuario para superponer elementos tridimensionales complejos o aplicar mallas geométricas cosméticas en tiempo real.

Paso a Paso para Implementarlo:

  1. Estructura la Escena: Llama a la primitiva `xrextras-generate-face-mesh` para instanciar dinámicamente la geometría facial.
  2. Mapeo UV: Diseña una textura adaptada al mapa de rostros canónico e inyéctala directamente en el material.
  3. Anclajes Rígidos: Utiliza el componente `xrextras-face-anchor` (especificando `point: nose` o `forehead`) para fijar accesorios estables.

Código Base de Producción:

<a-scene 8thwall-xr xrface>
  <a-camera position="0 1.6 0" face-look-controls></a-camera>
  <a-entity xrextras-face-mesh material="src: #maquillaje; transparent: true;"></a-entity>
</a-scene>
Módulo 02

Interactividad y Eventos Táctiles (Gestos)

Traduce pulsaciones bidimensionales y gestos táctiles multitouch (`pinch-to-scale`, `drag`) directamente al espacio vectorial 3D tridimensional de la escena.

Paso a Paso para Implementarlo:

  1. Activar Gestos Globales: Añade `gesture-detector` a la escena principal para escuchar eventos de pantalla.
  2. Clases Colisionadoras: Agrega la clase `.cantap` al objeto y asígnale el componente `gesture-handler`.

Código Base de Producción:

<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe-gesture-detector-component@master/dist/aframe-gesture-detector-component.min.js"></script>
<a-scene 8thwall-xr gesture-detector>
  <a-entity class="cantap" gltf-model="#modelo.glb" gesture-handler></a-entity>
</a-scene>
Módulo 03

Image Tracking (Rastreo de Imágenes Planas)

Permite reconocer imágenes objetivos en dos dimensiones (tarjetas de visita, pósteres, revistas) y hacer emerger contenido interactivo perfectamente alineado sobre ellas.

Paso a Paso para Implementarlo:

  1. Compilar el Target: Procesa tu imagen de destino y asígnale un nombre único (ej: `poster-marcas`). En el entorno abierto de 8th Wall, puedes declarar este mapa de características directamente en el array de inicialización local.
  2. Vincular el Target en A-Frame: Usa la entidad primitiva primitiva `xrextras-named-image-target` pasando el nombre exacto asignado al asset.
  3. Comportamiento Reactivo: Todo elemento hijo que metas dentro de esa entidad heredará la rotación, escala y posición de la imagen física real en tiempo real.

Código Base de Producción:

<a-scene 8thwall-xr="imageTargets: ['poster-marcas']" xrweb>
  <a-assets>
    <a-asset-item id="videoPromo" src="assets/promo.mp4"></a-asset-item>
  </a-assets>

  <!-- El motor busca activamente el mapa físico de 'poster-marcas' -->
  <a-entity xrextras-named-image-target="name: poster-marcas">
    <!-- Este plano flotará exactamente sobre la imagen física -->
    <a-video src="#videoPromo" width="1" height="0.6" rotation="-90 0 0"></a-video>
  </a-entity>
</a-scene>
Módulo 04

Sky Effects y Segmentación del Horizonte

Identifica los bordes del cielo mediante visión artificial avanzada y reemplázalo dinámicamente con universos espaciales, auroras boreales o cualquier entorno virtual 360°.

Paso a Paso para Implementarlo:

  1. Activar Módulo Sky: Configura los parámetros iniciales del motor inyectando el flag de segmentación semántica `xrsky`.
  2. Crear la Máscara de Oclusión: Usa el componente nativo de oclusión de cielo de 8th Wall (`xrextras-sky-mask`) para recortar de forma milimétrica el contorno de edificios o árboles físicos.
  3. Inyectar Domo Virtual: Inserta tu esfera o cielo enriquecido. El motor se asegurará de superponer el entorno real (primer plano) sobre tu fondo modificado automáticamente.

Código Base de Producción:

<a-scene 8thwall-xr xrsky>
  <a-assets>
    <img id="espacioProfundo" src="textures/universo.jpg">
  </a-assets>

  <!-- 1. Máscara automática que recorta edificios reales -->
  <a-entity xrextras-sky-mask></a-entity>

  <!-- 2. Fondo inyectado en la porción de cielo recortada -->
  <a-sky src="#espacioProfundo" rotation="0 -90 0"></a-sky>
</a-scene>
Módulo 05

Optimización Extrema de Assets 3D (glTF/glb)

Asegura tiempos de carga instantáneos en redes móviles mediante compresión de topologías por vértices utilizando librerías open source.

Código Base de Producción:

<a-scene gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;">
  <a-asset-item id="modelo" src="assets/comprimido.glb"></a-asset-item>
  <a-entity gltf-model="#modelo"></a-entity>
</a-scene>