(WebXR) How do I add collision detection to the webXR camera?

From my understanding using the WebXR experience helper gives you access to the WebXR camera which uses two sub cameras for VR sessions. Enabling collision for the main WebXR camera doesn’t affect anything, as the rigid cameras are used for rendering. So is there a way to add collision for teleporting?

1 Like

I am interested too, and I wonder if setting the mesh checkCollisions (Mesh - Babylon.js Documentation) to true works in WebXR (I did not try).

I tried setting the checkCollisions parameters, but it didnt work. It used to work that way with the WebVR experience Helper, but the webxr experience works different.

Summoning our XR master @RaananW :slight_smile:

I just need to understand what you are trying to achieve. Since the XR camera is controlled by the device itself, it will be possible to make the camera stop when colliding with a mesh. Want to explain the use case?

Im trying to adding collision detection to the xr cam/vr device so i can detect when the user is leaving the play area for example a room. Also i want to add collision to the teleportation mesh, but i dont know how to access it.

Collision detection only works when you have a camera direction which is defined by the movement applied to your camera by input sources (mouse, keyboard, gamepad). As this is not yet implemented in WebXR, the camera has no “direction” and therefore cannot collide with the world. Collision will work when you have a smooth movement of the camera, but not when you set a new position (teleportation). Try changing the position of a free camera with collision detection on and you will see that no collision is detected, even if you moved to the center of an object.

Smooth movement using the controller will be implemented here in the future. You can track it here - [WebXR] Allow movement with controllers · Issue #7442 · BabylonJS/Babylon.js · GitHub .

If it is just about detecting whether the user is out of the scene, you can add an invisible box/sphere around the player (or use its ellipsoid) and check for collisions with the walls.

Having said that - I would suggest you to try and find a better way to control the user’s room state. Collision detection is relatively expensive, and the user can still move freely on his own.

I would recommend using hot spots - WebXR Selected Features - Babylon.js Documentation instead of collision detection. On each hotspot you provide enough room for the user to travel around, but not enough room to go through walls.


Thanks that was helpful, one more question. Is it possible to experiment with the locomotion right now? For example, if I want to implement multiple movement-methods like pointing at something and automatically moving towards the target (slowly) or like a grab hook (fast) or like dragging for movement in some form. I want to try out unconventional stuff, as part of a bachelor work.
Is this currently possible in WebXR? Or would it be better to switch to unity for example?

Everything is possible in WebXR, you are asking whether or not it’s possible with Babylon. It is, if you implement it yourself. Movement with the controllers is rather straight forward - you have the thumbstick, change the camera’s position when it is used. But at the moment we don’t have this feature implemented for you to use. We have no secrets, everything is open sourced :grin:

Create a mesh (can call it ‘collider’), set visibility to 0, turn on collisions and set its position to the webXR camera position collider.position = webXRcamera.position

If you want to move forward use const newPosition = webXRcamera.getFrontPosition(0.5) then collider.lookAt(newPosition).
Create a forward vector, then collider.moveWithCollisions(forwards)

Ok thanks, thats what i thought. I have no problem implementing it myself.