VR camera rotation problem in vr rowing app

Questions
1

Hello,

I am working on an app to let users row on an ergometer in a virtual environment. Most of it works but I have one problem. In Vr mode the camera follows a predefined track (a circle) and I need to rotate the camera with the track (just like a roller coaster), but the user should still be able to look around. I have tried a lot of ways to fix this but I can not find a good solution. What I do now is to reset the camera direction every 20 degrees. But this gives not a good Vr experience.

I have set up an example of the problem:

Babylon.js Playground

Can some one please help me.After hours trying to find a solution an am a bit desperate now.
Thanks,

Tijmen

P.S.
If you are interested in how 3d rowing look like.

https://ergometer-space.org/
select “demo replay” in the menu to let the rower row.

1 Like
2

https://www.babylonjs-playground.com/ts.html#VHMCZ0#2

I removed the Math.abs and incremented the y by the difference. Visually you need to rotate the difference of the angles of the lines tangent from current and previous render positions (it’s easy on a circle - 90 degrees from calculated rot). It works for me in the web browser on a desktop, but I think you may need to use quaternions on a VR headset.
edit: doesn’t work in my VR headset. i just got super dizzy!

3

Thank you. I tried to use the quaternions. But when I rotate using setting the y, I also get a second rotation which rotates the camera over the x axis (rotating the horizon). Or the device rotation still gets blocked. May be some one who know more about quaternions can find a fix.

Some tests using the quaternion:
https://www.babylonjs-playground.com/ts.html#SHBLU0

4

This is really broken, but may give you some ideas:
https://www.babylonjs-playground.com/ts.html#VHMCZ0#3

Again, I am just incrementing the rotation - not setting it. Have a look here as well, as that is how 90 degree rotations are done in VR mode:

1 Like
5

Thanks! I check it out.

6

Hi @tijmenvangulik,

Did you manage to use the WebUSB / WebHID experimental feature for the your row ergometer app? :slight_smile: Or are you using another technology to actually create a data connection between the device and the browser?

I found your webapp listed on GitHub while I was searching myself for how to use WebHID to read data from USB input devices into browser Javascript:

The USB device “RailDriver” (a Train Cab Controller) I’m connecting for my GeekTrains game shows up only for WebHID and not for WebUSB (there’s no Bluetooth option on RailDriver). Though these experimental web platform technology APIs seem very similar. But I got the input device working recently in Javascript and Babylon.js (see the dedicated thread in the Demos section).

Q

7

Yes I have got a working version. You can test it on https://ergometer-space.org. For webHid you need chrome canary with experimental features turned on. If you do not have an ergometer you can select the demo replay .For source code how to connect to hardware from javascript go to my repository https://github.com/tijmenvangulik/ErgometerJS
I never managed to correctly fix the vr rotation problem so I made a workaround to place the vr rower on a fixed position and let the world rotate around the rower. The end effect is the same.

Tijmen

8

Some more info, it is working in electron using node hid, on te web using web hid and for Cordova I made my own hid library.

Tijmen