Needle Engine Documentation
Downloads
  • What is Needle Engine?
  • Testimonials
  • Get an overview

    • Samples and Showcase
    • Our Vision 🔮
    • Feature Overview
    • Technical Overview
  • Resources

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

    • Needle Engine for Unity
    • Needle Engine for Blender
    • Needle Engine as Web Component
    • Needle Engine on your Website
    • Needle Cloud
  • Core Concepts

    • Structure of a Needle Engine project
    • Everywhere Actions
    • Exporting Assets to glTF
    • Frameworks, Bundlers, HTML
    • Testing on local devices
    • Deployment and Optimization
  • Advanced

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

    • How To Debug
    • Questions and Answers (FAQ) 💡
    • Support and Community
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Scripting in Needle Engine
    • Scripting Introduction for Unity Developers
    • Needle Core Components
    • Everywhere Actions
  • Components and Lifecycle

    • Creating and using Components
    • @serializable and other decorators
    • Automatic Component Generation
    • Scripting Examples
    • Community Contributions
    • Additional Modules
  • 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?
  • Testimonials
  • Get an overview

    • Samples and Showcase
    • Our Vision 🔮
    • Feature Overview
    • Technical Overview
  • Resources

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

    • Needle Engine for Unity
    • Needle Engine for Blender
    • Needle Engine as Web Component
    • Needle Engine on your Website
    • Needle Cloud
  • Core Concepts

    • Structure of a Needle Engine project
    • Everywhere Actions
    • Exporting Assets to glTF
    • Frameworks, Bundlers, HTML
    • Testing on local devices
    • Deployment and Optimization
  • Advanced

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

    • How To Debug
    • Questions and Answers (FAQ) 💡
    • Support and Community
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Scripting in Needle Engine
    • Scripting Introduction for Unity Developers
    • Needle Core Components
    • Everywhere Actions
  • Components and Lifecycle

    • Creating and using Components
    • @serializable and other decorators
    • Automatic Component Generation
    • Scripting Examples
    • Community Contributions
    • Additional Modules
  • 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 of a Needle Engine project
    • Everywhere Actions
    • Exporting Assets to glTF
    • Frameworks, Bundlers, HTML
    • Testing on local devices
    • Deployment and Optimization
  • Scripting

    • Scripting in Needle Engine
    • Scripting Introduction for Unity Developers
    • Creating and using Components
    • Automatic Component Generation
    • Scripting Examples
    • Community Contributions
  • Advanced

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

    • How To Debug
    • Questions and Answers (FAQ) 💡
    • Support and Community
  • Reference

    • Feature Overview
    • Technical Overview
    • Needle Core Components
    • needle.config.json
    • <needle-engine> Configuration
    • @serializable and other decorators

What is WebXR Image Tracking

WebXR image tracking enables browsers to detect and track specific images in the real world through a device's camera, providing real-time position and orientation data to anchor virtual content precisely to physical markers like posters, packaging, or artwork.

By pointing the camera at a recognized image, the image tracking api continuously updates the spatial relationship between the virtual and physical elements, ensuring proper alignment even as the device or image moves.

Image tracking transforms static images into interactive AR triggers—allowing museum paintings to display overlaid information, product packages to reveal 3D animations, or business cards to show floating contact details—all through web standards without requiring users to download dedicated apps, making AR experiences instantly accessible through any compatible web browser.

Demo

Needle Engine supports WebXR Image Tracking (Live Demo) on Android and QuickLook Image Tracking on iOS.

Start the scene below in AR and point your phone's camera at the image marker on a screen, or print it out.

WebXR Image Tracking on Android

On Android please turn on "WebXR Incubations" in the Chrome Flags. You can find those by pasting chrome://flags/#webxr-incubations into the Chrome browser address bar of your Android phone.

Image Marker

Explainer

WebXR Image Tracking is still in a "draft" phase and not generally available

So far, browser vendors haven't been able to agree on the final image tracking API for WebXR. As long as the specification is in "draft" phase (Marker Tracking Explainer), you and your app's users need to follow these steps to enable WebXR ImageTracking on Android devices:

  1. Visit chrome://flags on your Android Chrome browser
  2. Find and enable the WebXR Incubations option

Without that spec, one can still request camera image access and run custom algorithms to determine device pose. The downside is that users will have to accept additional permissions like camera access, and the tracking will not be as accurate as with the native capabilities of the device.

Here are some libraries to add image tracking based on camera access and local computer vision algorithms:

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

Integrations

Image Tracking can be setup in both Unity and Blender by adding a WebXRImageTracking component to an object. Then add your images to the Tracked Images array.

unity screenshot
Image tracking component in Unity

blender screenshot
Image tracking component in Blender

References

  • WebXR Marker Tracking Explainer
  • WebXR Device API
  • caniuse: WebXR
  • Apple's Preliminary USD Behaviours

Further reading

  • Needle Everywhere Actions experiences that run everywhere
  • XR documentation
Suggest changes
Last Updated: 8/15/25, 7:13 AM
Prev
VR & AR (WebXR)
Next
Networking