VR Mode Problems

CesiumJS
1

Hi,

I'm working an Cesium application which will be used on Google Cardboard. However, I have following problems in VR mode;

-Horizon disorientation: When I move my phone to any direction and then look back up phone's initial position the horizon disorients.

-I have also the problem mentioned in there:

https://groups.google.com/forum/#!topic/cesium-dev/bi8EiKJRrbQ

I'm using Google Chrome on Android to test my application.

Thanks

2

Hi there,

Can you clarify what you mean by horizon disorientation? Maybe a screenshot or video of what happens?

Thanks,

Gabby

3

Hi,

Here are the photos you asked,

Initial position

After moving the phone and turn back to initial position what happens

Thanks

4

I think you are running into something similar to this thread.
You may need to add some additional camera controls to make the camera behave as you want. Take a look at the Camera Tutorial.

5

Hi,

I tried to fix the camera position and direction every second, but I have still same problem. I doubt whether the problem isn't related to camera. Do you have any idea about that?

Thanks

6

It is related to the camera, because we need to adjust the camera position based on how the device is oriented. We use a class DeviceOrientationCameraController.js to take the device input and orient the camera. Can you provide a sample code snippet? If the camera control has regressed in any way, I’d like to open an issue in GitHub.

Thanks,

Gabby

7

Hi,

I attached a sample code has same issue.

Thanks

CZML Path.html (10.6 KB)

8

Ah, I think the issue here is the following line:

viewer.trackedEntity = ds.entities.getById('path');

``

That changes the camera so it’s “following” the entity, however, the VR camera movements combine with these in an unexpected way. Are you following a moving entity? That may be tricky to maintain correct camera orientation with VR.

9

Yes, like you said I was trying to moving an entity and following it. Now, I remove

viewer.trackedEntity = ds.entities.getById('path');

and removed complete czml variable but I have still same issue.

Now the previous code looks like that.

var terrainProvider = new Cesium.CesiumTerrainProvider({

url : ‘https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles’,

requestVertexNormals : true

});

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

terrainProvider : terrainProvider,

baseLayerPicker : false,

vrButton: true

});

viewer.camera.flyTo({

destination : Cesium.Cartesian3.fromDegrees(28.858093, 2.294694,350),

orientation : {

heading : Cesium.Math.toRadians(100.0),

pitch : Cesium.Math.toRadians(0.0),

roll : Cesium.Math.toRadians(0.0),

}

});

Sandcastle.finishedLoading();

}

if (typeof Cesium !== “undefined”) {

startup(Cesium);

} else if (typeof require === “function”) {

require([“Cesium”], startup);

}

10

I also tried to move camera by setting device motion sensor's alpha,beta and gamma datas manually, this time camera moved perfectly.

Here is the code partition I changed in DeviceOrientationCameraController.js.

  function DeviceOrientationCameraController(scene) {
        //>>includeStart('debug', pragmas.debug);
        if (!defined(scene)) {
            throw new DeveloperError('scene is required.');
        }
        //>>includeEnd('debug');

        this._scene = scene;

        this._lastAlpha = undefined;
        this._lastBeta = undefined;
        this._lastGamma = undefined;

        this._alpha = undefined;
        this._beta = undefined;
        this._gamma = undefined;

        var that = this;

        function callback(e) {
            var alpha = e.alpha;
            if (!defined(alpha)) {
                that._alpha = undefined;
                that._beta = undefined;
                that._gamma = undefined;
                return;
            }

            that._alpha = CesiumMath.toRadians(alpha);
            that._beta = CesiumMath.toRadians(e.beta);
            that._gamma = CesiumMath.toRadians(e.gamma);

        }

I changed last three lines as;

//i is defined as a global varible.

that._alpha = CesiumMath.toRadians(i++);
that._beta = CesiumMath.toRadians(i++);
that._gamma = CesiumMath.toRadians(i++);

I thought the problem was my device's sensor, but when I tried an another WebVR application it worked perfectly.

Sorry for bad explanation,

Thanks.

11

No worries, I’m glad you found a way to control the camera for your needs, and thanks for the code update!

12

Hi,

Actually, I've just changed the device motion input manually but VR mode
still doesn't work as expected when it uses real device input. What could I
do about that?

Bests

13

Here is the change I made, but it’s completely useless for user experience.

that._alpha = CesiumMath.toRadians(alpha);
that._beta = CesiumMath.toRadians(e.beta);
that._gamma = CesiumMath.toRadians(e.gamma);

//instead alpha,beta and gamma (real device inputs) I use my own

//i is defined as a global varible.

that._alpha = CesiumMath.toRadians(i++);
that._beta = CesiumMath.toRadians(i++);
that._gamma = CesiumMath.toRadians(i++);

14

What is i? You’re incrementing i each time you use it, is that the behavior you want? For example if i=0 initially, you’re inputting:

that._alpha = CesiumMath.toRadians(1);
that._beta = CesiumMath.toRadians(2);
that._gamma = CesiumMath.toRadians(3);

15

No, it's not the behavior I want. I change this code partition in
*DeviceOrientationCameraController.js
<https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/DeviceOrientationCameraController.js>
*just
for clarifying the problem. The code normally uses the device input for
alpha, beta, gamma. In that code, I change device input with an arbitrary i
variable. The reason I increment the variable "i" is ensuring VR camera
moves. If I use a constant variable camera wouldn't move because alpha,
beta and gamma variables never changes. Actually I'm inputting similar to
this;

that._alpha = CesiumMath.toRadians(1);
that._beta = CesiumMath.toRadians(2);
that._gamma = CesiumMath.toRadians(3);

that._alpha = CesiumMath.toRadians(4);
that._beta = CesiumMath.toRadians(5);
that._gamma = CesiumMath.toRadians(6);

...
...
...

that._alpha = CesiumMath.toRadians(100);
that._beta = CesiumMath.toRadians(101);
that._gamma = CesiumMath.toRadians(102);

Let me clarify the problem again,

After I change alpha, beta, gamma variables manually by using a constantly
increasing variable "i", VR camera moves as expected. My question is why
it's not working properly when it uses device input. I thought my device
sensor is not working properly but I tried another VR application and it
worked perfectly. Thus, I think there are some problems in class
*DeviceOrientationCameraController.js
<https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/DeviceOrientationCameraController.js>.*

Thanks