WebXR Image Tracking

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.

Platform Support

Needle Engine supports image tracking across multiple platforms:

iOS: Native WebXR Image Tracking 🎉

NEW: iOS now supports native WebXR image tracking through Needle Go - iOS WebXR App Clip!

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 now • Learn more about iOS WebXR

Android: WebXR Image Tracking

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

Live Demo

Try the live demo →

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

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!

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.

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

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

Technical Details

iOS: Full Native Support ✅

iOS image tracking works through Needle Go App Clip 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 →

Android: Browser Flag Required

Android uses the WebXR Image Tracking API, which is currently in draft specification status (Marker Tracking Explainer).

Requirements:

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

Alternative Approaches

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

1. Everywhere Actions (iOS QuickLook)

• Works on iOS without App Clip
• Uses Apple's QuickLook with USDZ
• Limited to QuickLook capabilities
• Learn more about Everywhere Actions

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

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

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

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

Next Steps

Get Started:

• Unity Integration - Set up image tracking in Unity
• Blender Integration - Set up image tracking in Blender
• iOS WebXR Guide - Enable native iOS support

Learn More:

• XR Documentation - Full XR capabilities
• Everywhere Actions - Alternative AR approaches
• Deployment Guide - Publish your AR experience

Resources:

• Live Demo - Try it now
• WebXR Marker Tracking Explainer
• WebXR Device API
• caniuse: WebXR