WebXR Hit Test Module (AR picking real world geometry)

Been working on integrating WebXR Hit Test module to the Engine.
It allows to raycast representation of the real world geometry by underlying AR system. So applications are various, like: placing objects in your rooms, or pictures on walls. Painting stuff on real world. Basic LIDAR. And more ways to anchor experience to the real world geometry.

Please take a look at PR and let me know your thoughts: https://github.com/playcanvas/engine/pull/1926

Once deployed, this project will be good to test: https://playcanvas.com/project/672464/overview/ar-hit-test
Don’t forget to enable WebXR Hit Test Module in chrome://flags as it is still a draft spec.

And small tweet about it:


Engine is deployed now, here is a demo: https://playcanv.as/p/Kjol3uRS/


i not work?

What are you running the demo on @winson?


For this two demos , it can not work in my iphone & mac book,
Is there any tutorials to help me learn the ar in playcanvas?

WebXR is not supported on iOS Safari AFAIK and I don’t think works on Desktop Chrome with the webcam.

If you want to use AR in the browser on both Android and iOS, I would look at using 8th Wall.

Edit: This page will help with knowing what supports WebXR at the moment: https://caniuse.com/#feat=webxr

1 Like

thank you so mach

I wanted to try this demo out, and it does launch on my phone’s Chrome browser, but I can’t seem to plant grass? I tried tapping on the screen and also pointing it to different surfaces…

How does this demo actually work?

(I also enabled all WebXR flags in Chrome)

The way Hit API works, it “can” give you hit test results, but it does not guarantee them. It depends on your underlying AR system.
Demo works this way: you start it, look a bit around and on the floor, maybe walk a bit looking a bit on floor. So AR system recognises floor plane. While doing it, touch your finger on screen, on the floor, maybe move it a bit around. Eventually it will pick up for plane, and start drawing grass there.

Probably some UI could be added to notify that no hit test results been available yet, to understand why it is not reacting yet.

Also, simply expect some regressions in browsers, as it is experimental feature by W3C, and they change it times to times.

1 Like

Hi! I got the same problem with this:

But, I’m using the latest Google Chrome on my Android. Also, my browser is working correctly when I test the official Hit-Test demo (on my own server) from the Immersive Web Community Group.

These Chrome flags are enabled:

  • WebXR AR Module
  • WebXR Incubations
  • WebXR Device API
  • WebXR Hit Test

Hey @moka, is it possible to add better messaging to the user as to why AR and/or Hit Test might not be available? I’m assuming this can be for various reasons (not running under https, somehow being blocked within an iframe, and so on…)

1 Like

Does this test works? https://immersive-web.github.io/webxr-samples/hit-test.html
And this doesnt? https://playcanv.as/p/Kjol3uRS/

There has been a regression in WebXR AR Module in recent Chrome, they aware of it.
Bear in mind - it is very experimental feature in browsers, and is not production ready, only for early experiments. Also it is a subject to change.

The first link works for us but not the second one.

I have same problem

Could it be because that build is running in a iframe? How about:


Does that work?

Could it be because that build is running in a iframe? How about: https://playcanv.as/e/p/Kjol3uRS/

There is no difference.

My camera is activated but it looks like there’s no floor detection. I tried different rooms with different lights but no luck. Strangely, with the same device, it’s working well with the Hit-test example on Google Chrome and even the “AR scene viewer”.

I just can’t put grass on any floor.

I will investigate it.

1 Like

Also, it is/was working when using the WebXR API Emulator with Chrome in the developer console.

@moka Currently, it is not working for me because there is an error on the callback of hitTestStart().


The error is:

Failed to execute 'requestHitTestSourceForTransientInput' on 'XRSession': Hit test feature is not supported by the session.

Also, this return true, saying to me that Hit Test is available:

//It's true
this.availableHitTest.enabled = ! this.app.xr.supported || ! this.app.xr.hitTest || ! this.app.xr.hitTest.supported;

With the same device, I have no problem with this example: WebXR Hit Test Sample

This error come from the WebXR API itself.

Another test that can help you. If I set the profile to “generic-touchscreen”, I can reproduce the problem with my WebXR Emulator


The error: