search
githubEdit

WebXR Image Tracking

hashtag
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.

hashtag
Platform Support

Needle Engine supports image tracking across multiple platforms:

Platform
Technology
Status

iOS (Safari, Chrome)

Native WebXR via App Cliparrow-up-right

✅ Full support

Android

WebXR Image Tracking

✅ Supported (requires Chrome flag)

iOS (Alternative)

QuickLook Image Tracking

✅ Supported via Everywhere Actionsarrow-up-right

hashtag
iOS: Native WebXR Image Tracking 🎉

NEW: iOS now supports native WebXR image tracking through Needle Go - iOS WebXR App Cliparrow-up-right!

Users can experience your image tracking AR content instantly on iPhone and iPad via:

  • QR codes

  • Smart app banners

  • Direct links

No app installation required – powered by ARKit for high-quality tracking.

Try it nowarrow-up-right • Learn more about iOS WebXRarrow-up-right

hashtag
Android: WebXR Image Tracking

Android devices support WebXR Image Tracking through Chrome with a browser flag enabled.

:::info Enable WebXR Image Tracking on Android On Android, turn on "WebXR Incubations" in Chrome Flags:

  1. Open Chrome on your Android device

  2. Paste chrome://flags/#webxr-incubations in the address bar

  3. Enable the "WebXR Incubations" flag

  4. Restart Chrome :::

hashtag
Live Demo

Try the live demo →arrow-up-right

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

Image Marker

How to test:

  1. Open the demo on your device (iOS or Android)

  2. Tap the AR button to enter AR mode

  3. Point your camera at the marker image above

  4. Watch 3D content appear tracked to the marker!

hashtag
Setup in Unity or Blender

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

hashtag
Unity Setup

Image tracking component in Unity

Steps:

  1. Add a WebXRImageTracking component to a GameObject

  2. In the Tracked Images array, add your marker images

  3. Assign content to display when each image is detected

  4. Export and test on device

hashtag
Blender Setup

Image tracking component in Blender

Steps:

  1. Add a WebXRImageTracking component in the Needle Engine panel

  2. Add your marker images to the tracked images list

  3. Set up content to appear when images are detected

  4. Export and test on device

hashtag
Technical Details

hashtag
iOS: Full Native Support ✅

iOS image tracking works through Needle Go App Cliparrow-up-right with full ARKit support:

  • ✅ No browser flags required

  • ✅ No setup needed

  • ✅ High-quality ARKit tracking

  • ✅ Works in Safari and Chrome

  • ✅ Instant access via QR codes or links

Your Needle Engine project works automatically on iOS with image tracking enabled. Learn more →arrow-up-right

hashtag
Android: Browser Flag Required

Android uses the WebXR Image Tracking API, which is currently in draft specification status (Marker Tracking Explainerarrow-up-right).

Requirements:

  • Enable WebXR Incubations flag in Chrome (chrome://flags/#webxr-incubations)

  • Restart Chrome after enabling the flag

:::tip This is a temporary requirement while browser vendors finalize the specification. Once finalized, the flag won't be needed. :::

hashtag
Alternative Approaches

If you need image tracking without WebXR support, consider these alternatives:

1. Everywhere Actions (iOS QuickLook)

2. Camera-Based Libraries These require camera access permissions and use local computer vision:

:::tip For the best user experience on iOS, we recommend using the iOS WebXR App Cliparrow-up-right approach, which provides native ARKit tracking without requiring camera permissions or additional setup. :::

hashtag
Use Cases

Image tracking opens up many creative possibilities:

Marketing & Advertising:

  • Product packaging reveals 3D animations

  • Posters come to life with video content

  • Business cards show contact information in AR

Education & Museums:

  • Paintings display historical context

  • Textbooks show 3D models

  • Exhibits provide interactive information

Retail & E-commerce:

  • Product catalogs show 3D previews

  • Magazine ads become interactive

  • Store displays trigger AR experiences

Events & Entertainment:

  • Concert posters show ticket info

  • Movie posters play trailers

  • Event badges trigger AR content

hashtag
Best Practices

Image Marker Design:

  • Use high-contrast images

  • Include distinctive features

  • Avoid repeating patterns

  • Test at different sizes

  • Ensure good lighting conditions

Performance:

  • Keep tracked content lightweight

  • Use texture compression

  • Optimize 3D models

  • Test on target devices

User Experience:

  • Provide clear instructions

  • Show the marker image prominently

  • Handle detection/loss gracefully

  • Test in various lighting conditions

hashtag
Next Steps

Get Started:

Learn More:

Resources:

:::tip Need Help? Join our Discord communityarrow-up-right or visit our Forumarrow-up-right for support with image tracking and other AR features. :::

PreviousxrNextWebXR with Needle Engine

Last updated