Documentación de Needle Engine
Downloads
  • What is Needle Engine?
  • Testimonios
  • Get an overview

    • Samples and Showcase
    • Nuestra Visión 🔮
    • Resumen de Características
    • Resumen técnico
  • Resources

    • Pricing and Plans
    • Changelog
    • API Documentation
    • Support & Community
  • Integrations

    • Needle Engine para Unity
    • Needle Engine para Blender
    • Needle Engine como Web Component
    • Needle Engine en tu sitio web
    • Needle Cloud
  • Core Concepts

    • Estructura de un proyecto de Needle Engine
    • Everywhere Actions
    • Exportación de Activos a glTF
    • Frameworks, Bundlers, HTML
    • Testing on local devices
    • Despliegue y optimización
  • Advanced

    • VR & AR (WebXR)
    • Image Tracking (WebXR)
    • Redes
    • MaterialX
    • Editor Sync
  • Troubleshooting

    • Cómo Depurar
    • Preguntas Frecuentes (FAQ) 💡
    • Support and Community
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Scripting en Needle Engine
    • Introducción al Scripting para Desarrolladores de Unity
    • Componentes principales de Needle
    • Everywhere Actions
  • Components and Lifecycle

    • Crear y usar Componentes
    • @serializable y otros decoradores
    • Generación Automática de Componentes
    • Ejemplos de scripting
    • Community Contributions
    • Módulos Adicionales
  • Settings and APIs

    • Configuración de <needle-engine>
    • needle.config.json
    • Needle Engine API
    • three.js API
Help
Samples
Pricing
  • Needle Website
  • Needle Cloud
  • Support Community
  • Discord Server
  • X/Twitter
  • YouTube
  • Newsletter
  • Email
  • Feedback
  • Github
  • English
  • 简体中文
  • Español
  • Português
  • Français
  • हिन्दी
  • 日本語
  • Deutsch
  • Tiếng Việt
Downloads
  • What is Needle Engine?
  • Testimonios
  • Get an overview

    • Samples and Showcase
    • Nuestra Visión 🔮
    • Resumen de Características
    • Resumen técnico
  • Resources

    • Pricing and Plans
    • Changelog
    • API Documentation
    • Support & Community
  • Integrations

    • Needle Engine para Unity
    • Needle Engine para Blender
    • Needle Engine como Web Component
    • Needle Engine en tu sitio web
    • Needle Cloud
  • Core Concepts

    • Estructura de un proyecto de Needle Engine
    • Everywhere Actions
    • Exportación de Activos a glTF
    • Frameworks, Bundlers, HTML
    • Testing on local devices
    • Despliegue y optimización
  • Advanced

    • VR & AR (WebXR)
    • Image Tracking (WebXR)
    • Redes
    • MaterialX
    • Editor Sync
  • Troubleshooting

    • Cómo Depurar
    • Preguntas Frecuentes (FAQ) 💡
    • Support and Community
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Scripting en Needle Engine
    • Introducción al Scripting para Desarrolladores de Unity
    • Componentes principales de Needle
    • Everywhere Actions
  • Components and Lifecycle

    • Crear y usar Componentes
    • @serializable y otros decoradores
    • Generación Automática de Componentes
    • Ejemplos de scripting
    • Community Contributions
    • Módulos Adicionales
  • Settings and APIs

    • Configuración de <needle-engine>
    • needle.config.json
    • Needle Engine API
    • three.js API
Help
Samples
Pricing
  • Needle Website
  • Needle Cloud
  • Support Community
  • Discord Server
  • X/Twitter
  • YouTube
  • Newsletter
  • Email
  • Feedback
  • Github
  • English
  • 简体中文
  • Español
  • Português
  • Français
  • हिन्दी
  • 日本語
  • Deutsch
  • Tiếng Việt
  • Getting Started

    • Downloads
    • Needle Engine for Unity
    • Needle Engine for Blender
    • Needle Engine as Web Component
    • Needle Engine on your Website
    • Needle Cloud
    • Custom integrations
    • Support and Community
  • Core Concepts

    • Estructura de un proyecto de Needle Engine
    • Everywhere Actions
    • Exportación de Activos a glTF
    • Frameworks, Bundlers, HTML
    • Testing on local devices
    • Despliegue y optimización
  • Scripting

    • Scripting en Needle Engine
    • Introducción al Scripting para Desarrolladores de Unity
    • Crear y usar Componentes
    • Generación Automática de Componentes
    • Ejemplos de scripting
    • Community Contributions
  • Advanced

    • VR & AR (WebXR)
    • Image Tracking (WebXR)
    • Redes
    • MaterialX
    • Editor Sync
  • Troubleshooting

    • Cómo Depurar
    • Preguntas Frecuentes (FAQ) 💡
    • Support and Community
  • Reference

    • Resumen de Características
    • Resumen técnico
    • Componentes principales de Needle
    • needle.config.json
    • Configuración de <needle-engine>
    • @serializable y otros decoradores

Qué es el seguimiento de imágenes WebXR

El seguimiento de imágenes WebXR permite a los navegadores detectar y rastrear imágenes específicas en el mundo real a través de la cámara de un dispositivo, proporcionando datos de posición y orientación en tiempo real para anclar contenido virtual con precisión a marcadores físicos como pósteres, envases u obras de arte.

Al apuntar la cámara a una imagen reconocida, la API de seguimiento de imágenes actualiza continuamente la relación espacial entre los elementos virtuales y físicos, asegurando una alineación adecuada incluso cuando el dispositivo o la imagen se mueven.

El seguimiento de imágenes transforma las imágenes estáticas en disparadores de AR interactivos, permitiendo que las pinturas de museos muestren información superpuesta, que los envases de productos revelen animaciones 3D o que las tarjetas de visita muestren detalles de contacto flotantes, todo a través de estándares web sin requerir que los usuarios descarguen aplicaciones dedicadas, haciendo que las experiencias de AR sean instantáneamente accesibles a través de cualquier navegador web compatible.

Demo

Needle Engine es compatible con el seguimiento de imágenes WebXR (Demo en vivo) en Android y el seguimiento de imágenes QuickLook en iOS.

Inicie la escena a continuación en AR y apunte la cámara de su teléfono al marcador de imagen en una pantalla, o imprímalo.

Seguimiento de imágenes WebXR en Android

En Android, active "WebXR Incubations" en las Chrome Flags. Puede encontrarlas pegando chrome://flags/#webxr-incubations en la barra de direcciones del navegador Chrome de su teléfono Android.

Marcador de imagen

Explicación

El seguimiento de imágenes WebXR todavía está en fase de "borrador" y no está disponible de forma general

Hasta ahora, los proveedores de navegadores no han logrado ponerse de acuerdo sobre la API final de seguimiento de imágenes para WebXR. Mientras la especificación esté en fase de "borrador" (Explicación del seguimiento de marcadores), usted y los usuarios de su aplicación deben seguir estos pasos para habilitar el seguimiento de imágenes WebXR en dispositivos Android:

  1. Visite chrome://flags en su navegador Chrome de Android
  2. Busque y habilite la opción WebXR Incubations

Sin esa especificación, aún se puede solicitar acceso a la imagen de la cámara y ejecutar algoritmos personalizados para determinar la pose del dispositivo. La desventaja es que los usuarios tendrán que aceptar permisos adicionales como el acceso a la cámara, y el seguimiento no será tan preciso como con las capacidades nativas del dispositivo.

Aquí hay algunas bibliotecas para agregar seguimiento de imágenes basado en el acceso a la cámara y algoritmos locales de visión por computadora:

  • Integración experimental de AR.js con Needle Engine por FireDragonGameStudio
  • AR.js (código abierto)
  • Mind AR (código abierto)

Integraciones

El seguimiento de imágenes se puede configurar tanto en Unity como en Blender añadiendo un componente WebXRImageTracking a un objeto. Luego, añada sus imágenes al array Tracked Images.

captura de pantalla de UnityComponente de seguimiento de imágenes en Unity

captura de pantalla de BlenderComponente de seguimiento de imágenes en Blender

Referencias

  • Explicación del seguimiento de marcadores WebXR
  • API de dispositivos WebXR
  • caniuse: WebXR
  • Comportamientos preliminares de USD de Apple

Lectura adicional

  • Acciones de Needle Everywhere experiencias que se ejecutan en todas partes
  • Documentación de XR

Página traducida automáticamente usando IA

Suggest changes
Actualizado el: 15/8/25, 8:05
Prev
VR & AR (WebXR)
Next
Redes