DeviceOrientationCamera + skybox + mobile = unexpected results

Questions
1

Hi All,

I’m very very new to Babylon, but I’m an instant fan, I’ve enjoyed using the framework over the last while!

I have a question about some unexpected behaviour when using the DeviceOrientationCamera on a mobile device, I’m too new to say whether it’s a bug or if I’m probably just not using the framework properly.

You can see the running code on my website https://pici.ly, and I have the same code here (with a different texture): https://www.babylonjs-playground.com/#AH8IP6#5

The background is a skybox - I took a Babylon sphere object, added a texture to it and put the camera in the middle. Everything looks great on the website when running from my desktop.

The trouble is when run from a mobile device, the sky box orients in completely the wrong direction to what I expect. I’ve tried setting these properties:

camera.invertRotation
camera.inverseRotationSpeed

to invert the camera rotation but they don’t seem to have any effect when run from a mobile device.

Can anyone advise on how I can get round this?

Thanks!
Reuben

2

Pinging @belfortk

3

Hi @ReubenH and welcome to the forum!

Can you clarify what’s wrong with the orientation? I pulled up your site on my phone (iOS) on chrome and safari and it looks like the beach has the same orientation as the one on your website.

I also pulled up the playground you provided and the orientations look the same. I swapped out your texture for textures/earth.jpg just to be sure.

Can you maybe provide a screenshot of what you’re seeing?

4

Cheers for getting back @belfortk.

I wonder if this is an Android issue, I haven’t tested this on iOS Chrome yet - but I am not seeing the expecting behaviour on my device, which is for the sphere mesh with texture to behave like a skybox:

Phone Tilted Up - should show the sky, but as per the picture is showing the ground

example
example1100×1008 23.5 KB

5

The behaviour I am expecting…

Problem-orientation
Problem-orientation1200×900 12.3 KB

6

…when you tilt the device down, the skybox should orient upwards and you should see the ground
Problem-orientation-down

Cheers

7

What phone are you using, if I may ask? the device orientation camera should works exactly like you describe.

8

Hey @RaananW I’ve tried using a Samsung S7 and S10+, and get the same result.

I’ve got the same code running here: https://www.babylonjs-playground.com/#AH8IP6#7 using “textures/earth.jpg”.

As shown in my screenshot, an actual phone oriented up is showing the ground and vice versa.

I’m also surprised that the following properties do not seem to have any effect on the camera rotation, from the phone gyroscope, but they do have an effect when triggered from a mouse:

camera.invertRotation
camera.inverseRotationSpeed

thanks form the help

9

Regarding the variables:

    /**
     * Reverses mouselook direction to 'natural' panning as opposed to traditional direct
     * panning
     */
    public invertRotation = false;

    /**
     * Speed multiplier for inverse camera panning
     */
    public inverseRotationSpeed = 0.2;

So, they won’t help you sadly. we will check and see what’s the issue

10

Cheers @RaananW, appreciate the help!

11

The issue is due to the fov setting and not the device orientation camera:

https://www.babylonjs-playground.com/#AH8IP6#14

One less debugging to do. Try for now to not use fov or (and believe me it is hard for me to write this) set it to be a negative value:

https://www.babylonjs-playground.com/#AH8IP6#15

Now we need to find out why positive fov on ths DO-Camera works weird :slight_smile:

1 Like
12

Cheers @RaananW, setting the fov to a negative value does the trick!

The camera also has be reoriented slightly to view the scene the scene in the same way but that works for me.

1 Like