Use Three.js+Augumented reality for all browsers on web (image and surface detection) + react

Questions
, , , , , ,
1

Hi guys
I tested different ways for run AR on web for image tracking like :

and Webxr
Now I want to find a new one that worked for all browsers and have plane detection and high performance
I use react.js for front - and for 3d parts three.js

Can you help me what is the best way?
Performance and fast detection is important for me

4 Likes
2

Welcome to Javascript land where the adoption of new technologies is painfully slow, we’ve been promised a more powerful, more performant WebGPU for years now, native support for XR, raw power with wasm, multi treading with webworkers … They all “kinda” works, the development experience can only be described as torture and always lacking some key features (image tracking in your case), even in the rare cases where the stars are aligned and everything is implemented as it should, you’ll have SAFARI saying “NO, i’ll implement my own version”, cause apple, of course.

Take a look at the immersive-web/marker-tracking, it’s the closest thing to native, “kinda” works with no guaranties for cross browser support (Apple, of course).

Sorry for the sarcasm :slightly_smiling_face:

1 Like
3

Thanks
Do you know that Can we use webxr for all browsers?
what about zappar . Did you test them?I mean three js zappar sdks

4

Hi there

Did you test MindAR? If yes, whats your opinion on that?

I got it running and image tracking in a react webapp.
But i have not much comparision with native apps.

Cheers

1 Like
5

You are basically running into the core limitation of WebAR right now: there is no true “works on all browsers with plane detection and image tracking and high performance” solution.

WebXR itself does not work on all browsers. It works best on Chrome-based browsers on Android. Safari has very limited WebXR support and does not properly support things like image tracking or plane detection in a consistent way. So if your goal is full cross-browser including iOS Safari, pure WebXR is not enough today.

The immersive-web marker tracking proposal exists, but support is experimental and not production safe across devices. Plane detection in WebXR is also still behind flags or limited to certain environments.

If you want maximum compatibility across Android and iOS browsers, you basically have three realistic options:

  1. Use a commercial SDK like Zappar. Their Three.js SDK works well and they handle a lot of the cross-browser issues internally. It is not fully native WebXR under the hood, but they’ve solved many practical problems. Downside is cost and vendor lock-in.

  2. Use 8th Wall. It has strong image tracking and surface detection and works on Safari and Chrome. Performance is generally solid. Again, commercial and paid.

  3. Build with AR.js / WebARKit style libraries, but performance and tracking quality will not match ARKit or ARCore level surface detection.

If performance and fast detection are critical for you and you’re building something client-facing, commercial SDKs like Zappar or 8th Wall are currently the most stable path. If this is experimental or internal, WebXR is fine but you must accept browser fragmentation.

Since you’re using React with Three.js, you can integrate Zappar’s Three.js SDK relatively cleanly. If you’re using react-three-fiber, you’ll need some custom hooks and lifecycle handling, but it’s manageable.

Short answer: No, you cannot use WebXR for all browsers reliably today. If you need true cross-browser including iOS Safari with plane detection, you need a commercial WebAR SDK right now.