Project 3D point to 2D screen space WebXR (AR)

Questions
,
1

Hey guys,

I’m working on a WebXR AR app and I’m trying to project the 3D location of a mesh onto 2D screen space so I can place a DOM element on the screen over the mesh. I found this PG, which does what I want without AR: Babylon.js Playground

I took that PG and made some modifications by introducing WebXR immersive-ar, but switched the camera that was being used. It isn’t working though, and I’m kind of at a loss at this point. Here is the PG: https://playground.babylonjs.com/#YU7J32#117 (link only works on Android, cause WebXR immersive-ar)

I’m wondering if there’s anything wrong with the logic, or if there is an easier, AR/WebXR specific way of doing what I want?

Thanks!

2

cc @RaananW

3

Awesome task!!!

You almost made it TBH :slight_smile:

The first issue is that you have exceptions thrown in your click callback. canvasZone does not exist (at least not the way you are looking for it), so the click itself fails, and the button stays in its place. The second issue is that webxr’s dom overlay is using the device pixel ratio, which the project function (in this case) doesn’t.

You can solve it this way:

WebXR Projection Test | Babylon.js Playground (babylonjs.com)

1 Like
4

Perfect! That works great!! Thanks!

1 Like