Custom pointer in touch buttons for WebXR

Questions
,
1

Hello everyone, I am trying to modify the little dot that appears when you reach near a touch button 3D in webXR, with a controller or hand tracking. I am attaching a video pointing at it.

I found the IWebXRControllerPointerSelectionOptions but I couldnt make it work. (By the way, it says LasTer instead of Laser).

The reason I am trying to modify this pointer is because if I use sessionManager.worldScalingFactor, the pointer stays small and becomes invisible in some scales.

Here is the playground used in the video.

I know this is your area @RaananW so I will tag you once again. :wink:

Thank you!

2

That’s a bug with world scaling factor and should be fixed in my next PR.

If you do want to change it you will need to pass a function to options.customSelectionMeshGenerator . This function needs to return a mesh - the mesh you want to use instead of the torus.

If you want to share a playground that doesn’t work, I will be happy to see what’s wrong with the code :slight_smile:

I am working on fixing the worldScale issue in a few moments

1 Like
3

Thank you for the quick answer!

I tried but its not working, is this the right approach?

xr_pointerSelection = xr.baseExperience.featuresManager.enableFeature(BABYLON.WebXRFeatureName.POINTER_SELECTION, "latest", {
xrInput: xr.input,
    customSelectionMeshGenerator: () => box,
});

Here is the PG.

1 Like
4

Is this working?

Babylon.js Playground (babylonjs.com)

You need to clone the mesh. Also - it is possible to pass the options straight in the configuration, so it doesn’t need to recreate the feature.

1 Like
5

I think I have the names wrong, what the PG is doing is changing the pointer sphere end of the laser pointer in the hands, that is working.

But I want to change the other one, the one that appears when the finger is close to the mesh button as you can see at the end of the video, what would the name of that element be? Can It be changed?

6

I see. This is near interaction and not pointer selection.

In thi case you can change the material used, but not the mesh itself. This mesh is not scaled correctly when using world scale, and I will fix it asap.

1 Like
8

This will solve it - Fix a few issues with world scale in XR by RaananW · Pull Request #14756 · BabylonJS/Babylon.js (github.com)

1 Like