Image Tracking EXPERIMENTAL CHROME BROWSER
Image Tracking is an experimental and unstable WebXR API. To use it in Chrome, you must enable the #webxr-incubations flag at chrome://flags.
Image Tracking refers to the ability to detect, track, and continuously update the pose of a real-world image. Once an image is recognized in the user’s environment, WebXR gives you a transformation matrix representing the image’s position, rotation, and scale in the real world. This makes it possible to attach virtual UI, 3D models, or interactive content directly to printed surfaces, books, screens, posters, product packaging, and more.
In the next example, once you enter the immersive session and scan the following QR code, a Reactylon 3D mesh is rendered directly on top of the detected image.
const xrExperience = useXrExperience();
useEffect(() => {
const imageTracking = featuresManager.enableFeature(WebXRImageTracking.Name, "latest", {
images: [
{ src: '/textures/image-recognition/qr-reactylon.png', estimatedRealWorldWidth: 0.04 }
]
}) as WebXRImageTracking;
}, []);
Video captured with Samsung Galaxy S24.
Learn More
For a deep understanding, please refer to WebXR documentation: https://immersive-web.github.io/marker-tracking/.
