Parent VR camera to moving object

Hi all,

I’ve been trying to work out how to parent a VRDeviceOrientationFreeCamera to a moving object (in this case a car) while still allowing the player to look around freely.

I’ve tried using the good ol camera.parent = car, however this gives me an error ‘this.parent.getWorldMatrix is not a function’.

Pinging @trevordev

See this thread WebVR camera from driver's seat - Questions & Answers - HTML5 Game Devs Forum unfortunately the way the vr cameras are designed make this unsupported. This is planned to be addressed when webXR is supported by browsers but moving everything except the car is the current recommendation.

Well that sucks :frowning: moving the world would be completely impractical and probably impossible with physics added to the mix.

Thanks for the suggestion, but sadly it looks like despite all my efforts I might have to swap to Godot, or heaven forbid Unity, to make this game.

Do you thing something like creating a custom vr camera might be worth a try? Maybe something like this

Do you have any ideas when webXR might get mainstream browser support?


I would do exactly what you are suggesting. Prior to the VR camera, we had to create our own stereoscopic cameras using the babylon.js framework. The distance between the lenses in a typical stereo camera (the intra-axial distance) is about the distance between one’s eyes (known as the intra-ocular distance) and is about 6.35 cm, though a longer base line (greater inter-camera distance) produces more extreme 3-dimensionality.


Webxr won’t be mainstream before at least a year (still not even ratified)

Your best bet is definitely to create your own Webvr camera. We can help on the process as @trevordev can share guidance to do it.

We may even end up integrating it in the framework if that works:)

Yup, happy to be pinged if you get blocked. Integrating the new camera to communicate with the headset might be a bit tricky but all the logic needed should be visible in the engine.webVR.ts, webVRCamera.ts and vrExperienceHelper.ts files.

After a bit of mucking around I think I’ve figured out most of what I need to make this work.

I’ve created a custom camera input that inherits from the FreeCameraDeviceOrientationInput and takes the rotation quaternion from the devices orientation and the rotation quaternion of the car and multiplies them together to get the direction the camera should be pointing. Problem is its only half working and the camera is turning in the wrong direction.

My math isn’t that great and quaternions both figuratively and literally make my head spin (pun intended). If anyone here has a better idea of how to make this work, (maybe @trevordev), I’d really appreciate it.

I borrowed this awesome demo and put together a quick Babylon.js Playground with my camera setup

Looks like some good progress :slight_smile: ,

What devices should this be run on? I can’t seem to get rotation working on a phone or vr headset but here’s a playground that you can look around with the mouse. Instead of using the parentTo setting the camera as a regular child should work, see:

Some notes:

  • the rigCamera’s (each eye) need to be parented, not just the camera (this is one of the issues with the vr camera)
  • from the looks of this playground so far, getting it to display on a headset like vive might need special setup like I described in my last post

Thats worked perfectly! Parenting both eyes is a much simpler solution than my crazy quaternion custom input. Thanks @trevordev!