Safari iOS full screen experience. Problem with ArcCamera controls

Questions
1

Hello Dear Community!

I’m creating a Fisheye video player, and I’m having issues with full-screen experience on iOS.

Unfortunately, there is no support for full-screen API on iOS Safari. So for the full screen, I did

canvas.full-screen {
  width: 100vh;
  height: 100vw;
  transform: rotate(90);
  position: fixed;
  top: 0;
  left: 0;
}

Their result satisfies me. However, I’m using a camera, and now controls on iOS remain the same as for vertical mode.

What will be the best approach to resolve that? How can I force the arc camera to work like this?
UP → Right
Right → Down
Down → Left
Left → Up

2

Ohhhh interesting use case :slight_smile: @PolygonalSun do you have any tricks up your sleeves for it ?

2 Likes
3

So it looks like the canvas is being rotated but input still thinks that it’s in a different orientation. For this to work with transform: rotate(90), you might need to override the _checkInputs so that it converts the values for inertialAlphaOffset to equal inertialBetaOffset (new X = old Y) and inertialBetaOffset to equal a negative value of the old inertialAlphaOffset (new Y = old Y * -1). I currently can’t think of a better approach with the transform value but how about a different approach.

What if, rather than rotating the canvas, you lock the canvas’ orientation and rotate the camera by redefining the upVector (eg. camera.upVector = new Vector3(-1,0,0))? I’m not 100% sure if that’d work for your use case but it might be worth a try.

2 Likes
4

Thank you! camera.upVector seems to be the best approach.

5

upVector kind of works :slight_smile:

No, I’m having an issue the camera thinks the bottom of the sphere (360 videos) is on the left instead of the bottom. (So I cannot make full rotate on to the left).

Do you know what will be the best approach to fix it?

// EDIT

So looks like the video is rotated by 90deg which is what I wanted but the camera-input movement remains the same.

// EDIT 2

I tried to rebuild angles after applying upVector using rebuildAnglesAndRadius() but didn’t help.

// EDIT 3

I tried to manipulate limits and helped a little bit but the camera control experience is still weird.
I added to arc camera following lines:

    // rotate camera by 90deg
    this.camera.upVector = new Vector3(-1, 0, 0);

    // up limit
    this.camera.lowerAlphaLimit = 0.01;

    // down limit
    this.camera.upperAlphaLimit = Math.PI - 0.01;
    
    // left limit
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    this.camera.lowerBetaLimit = null;
    
    // right limit
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    this.camera.upperBetaLimit = null;

@PolygonalSun Do you think I’m digging in good way? I’m gonna also try first approach with overriding _checkInputs method.

7

I’m not sure if modifying the limits will help in this scenario but if you’re just handling a single input for rotation, there’s an additional approach I could recommend trying. You could manually handle the inputs in your code:

scene.onPointerObservable.add((ev) => {
        let evt = ev.event;
        let moveY = evt.movementX ||
                    evt.mozMovementX ||
                    evt.webkitMovementX ||
                    evt.msMovementX ||
                    0;
        let moveX = evt.movementY ||
                    evt.mozMovementY ||
                    evt.webkitMovementY ||
                    evt.msMovementY ||
                    0;
        if (ev.event.buttons > 0) {
            camera.inertialAlphaOffset -= moveX / 1000;
            camera.inertialBetaOffset += moveY / 1000;
        }
    }, BABYLON.PointerEventTypes.POINTERMOVE);

In this example, when there’s a finger down and it’s dragging, it will take the deltas of the x and y and swap them and add (or subtract) them to the inertial alpha and beta offsets. When these variables have values, they will move the camera and decrease them until they hit zero. The 1000 is a sensibility/sensitivity value because the values added to these offsets needs to be very small, given how often they’re incremented.

Note: In this example, there is no call to your camera’s attachControl function since we’re handling the controls manually.

1 Like
8

@PolygonalSun

That absolutely makes sense to me. Thank you for pointing attachControl thing. I will try this approach tomorrow and definitely share the results here.

10

Hello @singerxt just checking in, did Dave’s ideas work for you? :smiley:

11

Hey @carolhmj!

I didn’t test it and my project is over. Thx