Documentation de Needle Engine
Downloads
  • What is Needle Engine?
  • Témoignages
  • Get an overview

    • Samples and Showcase
    • Notre Vision 🔮
    • Aperçu des fonctionnalités
    • Vue d'ensemble technique
  • Resources

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

    • Needle Engine pour Unity
    • Needle Engine pour Blender
    • Needle Engine en tant que Web Component
    • Needle Engine sur votre site Web
    • Needle Cloud
  • Core Concepts

    • Structure d'un projet Needle Engine
    • Everywhere Actions
    • Exporter des Assets vers glTF
    • Frameworks, Bundlers, HTML
    • Tester sur les appareils locaux
    • Déploiement et Optimisation
  • Advanced

    • VR & AR (WebXR)
    • Image Tracking (WebXR)
    • Réseau
    • MaterialX
    • Synchronisation de l'Editor (Editor Sync)
  • Troubleshooting

    • Comment déboguer
    • Questions et Réponses (FAQ) 💡
    • Support and Community
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Scripting dans Needle Engine
    • Introduction au Scripting pour les Développeurs Unity
    • Composants principaux de Needle
    • Everywhere Actions
  • Components and Lifecycle

    • Créer et utiliser des Composants
    • @serializable et autres décorateurs
    • Génération automatique de composants
    • Exemples de Scripting
    • Community Contributions
    • Modules supplémentaires
  • Settings and APIs

    • <needle-engine> Configuration
    • 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?
  • Témoignages
  • Get an overview

    • Samples and Showcase
    • Notre Vision 🔮
    • Aperçu des fonctionnalités
    • Vue d'ensemble technique
  • Resources

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

    • Needle Engine pour Unity
    • Needle Engine pour Blender
    • Needle Engine en tant que Web Component
    • Needle Engine sur votre site Web
    • Needle Cloud
  • Core Concepts

    • Structure d'un projet Needle Engine
    • Everywhere Actions
    • Exporter des Assets vers glTF
    • Frameworks, Bundlers, HTML
    • Tester sur les appareils locaux
    • Déploiement et Optimisation
  • Advanced

    • VR & AR (WebXR)
    • Image Tracking (WebXR)
    • Réseau
    • MaterialX
    • Synchronisation de l'Editor (Editor Sync)
  • Troubleshooting

    • Comment déboguer
    • Questions et Réponses (FAQ) 💡
    • Support and Community
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Scripting dans Needle Engine
    • Introduction au Scripting pour les Développeurs Unity
    • Composants principaux de Needle
    • Everywhere Actions
  • Components and Lifecycle

    • Créer et utiliser des Composants
    • @serializable et autres décorateurs
    • Génération automatique de composants
    • Exemples de Scripting
    • Community Contributions
    • Modules supplémentaires
  • Settings and APIs

    • <needle-engine> Configuration
    • 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

    • Structure d'un projet Needle Engine
    • Everywhere Actions
    • Exporter des Assets vers glTF
    • Frameworks, Bundlers, HTML
    • Tester sur les appareils locaux
    • Déploiement et Optimisation
  • Scripting

    • Scripting dans Needle Engine
    • Introduction au Scripting pour les Développeurs Unity
    • Créer et utiliser des Composants
    • Génération automatique de composants
    • Exemples de Scripting
    • Community Contributions
  • Advanced

    • VR & AR (WebXR)
    • Image Tracking (WebXR)
    • Réseau
    • MaterialX
    • Synchronisation de l'Editor (Editor Sync)
  • Troubleshooting

    • Comment déboguer
    • Questions et Réponses (FAQ) 💡
    • Support and Community
  • Reference

    • Aperçu des fonctionnalités
    • Vue d'ensemble technique
    • Composants principaux de Needle
    • needle.config.json
    • <needle-engine> Configuration
    • @serializable et autres décorateurs

Qu'est-ce que le suivi d'image WebXR

Le suivi d'image WebXR permet aux navigateurs de détecter et de suivre des images spécifiques dans le monde réel via la caméra d'un appareil, fournissant des données de position et d'orientation en temps réel pour ancrer précisément le contenu virtuel à des marqueurs physiques comme des affiches, des emballages ou des œuvres d'art.

En pointant la caméra vers une image reconnue, l'API de suivi d'image met continuellement à jour la relation spatiale entre les éléments virtuels et physiques, assurant un alignement correct même lorsque l'appareil ou l'image se déplace.

Le suivi d'image transforme les images statiques en déclencheurs de RA interactifs, permettant aux peintures de musée d'afficher des informations superposées, aux emballages de produits de révéler des animations 3D, ou aux cartes de visite de montrer des détails de contact flottants — le tout via des standards web sans obliger les utilisateurs à télécharger des applications dédiées, rendant les expériences de RA instantanément accessibles via n'importe quel navigateur web compatible.

Démo

Needle Engine prend en charge le suivi d'image WebXR (Démo en direct) sur Android et le suivi d'image QuickLook sur iOS.

Lancez la scène ci-dessous en RA et pointez la caméra de votre téléphone vers le marqueur d'image sur un écran, ou imprimez-le.

WebXR Image Tracking on Android

Sur Android, veuillez activer "WebXR Incubations" dans les Chrome Flags. Vous pouvez les trouver en collant chrome://flags/#webxr-incubations dans la barre d'adresse du navigateur Chrome de votre téléphone Android.

Marqueur d'image

Explicateur

WebXR Image Tracking est encore en phase de "brouillon" et n'est pas généralement disponible

Jusqu'à présent, les fournisseurs de navigateurs n'ont pas réussi à s'accorder sur l'API de suivi d'image finale pour WebXR. Tant que la spécification est en phase de "brouillon" (Explicateur de suivi de marqueurs), vous et les utilisateurs de votre application devez suivre ces étapes pour activer le suivi d'image WebXR sur les appareils Android :

  1. Rendez-vous sur chrome://flags dans votre navigateur Chrome Android
  2. Trouvez et activez l'option WebXR Incubations

Sans cette spécification, il est toujours possible de demander l'accès à l'image de la caméra et d'exécuter des algorithmes personnalisés pour déterminer la pose de l'appareil. L'inconvénient est que les utilisateurs devront accepter des autorisations supplémentaires comme l'accès à la caméra, et le suivi ne sera pas aussi précis qu'avec les capacités natives de l'appareil.

Voici quelques bibliothèques pour ajouter le suivi d'image basé sur l'accès à la caméra et les algorithmes de vision par ordinateur locaux :

  • Experimental AR.js integration with Needle Engine by FireDragonGameStudio
  • AR.js (open source)
  • Mind AR (open source)

Intégrations

Le suivi d'image peut être configuré dans Unity et Blender en ajoutant un composant WebXRImageTracking à un objet. Ajoutez ensuite vos images au tableau Tracked Images.

unity screenshotComposant de suivi d'image dans Unity

blender screenshotComposant de suivi d'image dans Blender

Références

  • Explicateur de suivi de marqueurs WebXR
  • WebXR Device API
  • caniuse: WebXR
  • Comportements USD préliminaires d'Apple

Pour en savoir plus

  • Needle Everywhere Actions expériences qui fonctionnent partout
  • Documentation XR

Page automatiquement traduite par l'IA

Suggest changes
Dernière mise à jour: 15/08/2025 08:05
Prev
VR & AR (WebXR)
Next
Réseau