WebXR immersive-ar add "displayLaserPointer" option to default experience creation

So I’ve been working on a webxr (specifically immersive-ar) project and something that I noticed was that every time I tapped on the screen, a dot would show up as long as I held my finger down. I couldn’t find any option to disable it, so I looked through the source code. Eventually I found that it was being enabled by the WebXRControllerPointerSelection feature. I still want the feature enabled, as it is a useful feature to have, however, I don’t want the pointer. So in order to fix it I had to do something like this: exp.pointerSelection.displayLaserPointer = false;.

That’s not super ideal, and was really hard to track down, so I thought it would be good to add as a root option when creating the experience, as it makes sense to have it on by default in any immersive-vr cases, but most immersive-ar cases would probably want it disabled.

1 Like

pinging @RaananW for visibility

This is a member of the feature and not the options, as this can be changed while the session is running. I prefer not to have it as part of the options.

What you can do, if you want, is to provide a different mesh that you control (this is this option - IWebXRControllerPointerSelectionOptions | Babylon.js Documentation). Otherwise, setting true/false on the feature is the best way to go :slight_smile:

@RaananW I can understand that, looks like I’ll just turn off the property manually, which is no big deal. I saw the custom mesh function, but as I don’t want the pointer at all, and I can’t set the mesh to undefined, I don’t think that will work for my use case.

I guess my biggest issue was that it was a pain in the butt trying to find the property that I needed to turn off, since it isn’t something that can be managed on creation. Only reference to pointer selection that I’ve found in the docs is a brief mention when talking about the experience helper: WebXR Experience Helpers | Babylon.js Documentation

Can the documentation at least be updated with an example or something similar for this use case? I feel it’s a very common scenario, as a pointer is useful for debugging, but no production ready AR app would want a laser/mesh pointer showing up on every tap.

Would the API docs be helpful in this case?

WebXRControllerPointerSelection | Babylon.js Documentation (babylonjs.com)

I agree with you that we might be missing docs, but we document our code fully so that it will be at least possible to find the method/parameter and understand what it does

@RaananW I was thinking more in the “Diving Deeper” section where examples could be provided. Just looking at the API docs I didn’t really know what “laserPointer” meant until I dived into the source code. Maybe it’s just me and no one else will run into this, but it was the one part of setting up WebXR with AR that wasn’t clear or straightforward (everything else was super easy).

1 Like

That’s always good to hear :slight_smile:

I’ll put it on my todo list to expand the docs. Sadly I can’t say when it’ll happen, but thanks a lot for the feedback!

1 Like

Do you have a working example of this issue so as to better understand? I’m interested in developing WebXR too, and would like to understand this gotcha. Big thanks to RaananW and all the team for BabylonJS!

I don’t have time to make a full PG, but here’s a snippet that will hopefully help:

// Create the default AR experience. We launch AR manually and don’t use Babylon’s UI.
this.#_experience = await scene.createDefaultXRExperienceAsync({
disableDefaultUI: true
// Disable the laser pointer on touch.
this.#_experience.pointerSelection.displayLaserPointer = false;
this.#_experience.pointerSelection.displaySelectionMesh = false;

Without the last two lines, every time you tap on the screen you’ll have a little dot appear where you touched. That’s the “laserPointer”. The “selectionMesh” is the same thing, but when it detects that you are tapping on a mesh.