UniversalCamera No longer rotates from touch?

Pryme8 · December 7, 2020, 2:06am

If you go into your console in chrome and turn on the phone emulation when going to this scene:
https://playground.babylonjs.com/#0XYMA9#1
Everything works.

but if you change the camera from a free camera to a UniversalCamera everything stops working with touch controls.

Deltakosh · December 7, 2020, 6:29pm

@Cedric do you mind having a look?

Cedric · December 7, 2020, 6:44pm

@Deltakosh Sure! I’m on it

Cedric · December 8, 2020, 2:30pm

@Pryme8

Mouse events show up in the console but it doesn’t seem that’s it’s touch event. Not sure about that.
I’ve tried the PG on my device and I can zoom in/out but I can’t do it with Chrome emulation.
Is there an option to enable touch emulation?

Pryme8 · December 8, 2020, 4:05pm

Its also proven to not work on mobiles though not just emulation, only reason I figured it out is because clients were complaining that they could not rotate the camera on mobile.

Cedric · December 8, 2020, 7:36pm

ok, I’m continuing my investigation.

Pryme8 · December 8, 2020, 7:46pm

I appreciate you!

Cedric · December 9, 2020, 2:11pm

It’s a bit more clear.

On this line :

github.com

BabylonJS/Babylon.js/blob/55a7ee9f4dfe069a603d2b2f66b7522ff6c8a46d/src/Cameras/Inputs/freeCameraTouchInput.ts#L70



if (this._pointerInput === undefined) {
    this._onLostFocus = () => {
        this._offsetX = null;
        this._offsetY = null;
    };

    this._pointerInput = (p) => {
        var evt = <PointerEvent>p.event;

        let isMouseEvent = !this.camera.getEngine().hostInformation.isMobile && evt instanceof MouseEvent;
        if (!this.allowMouse && (evt.pointerType === "mouse" || isMouseEvent)) {
            return;
        }

        if (p.type === PointerEventTypes.POINTERDOWN) {
            if (!noPreventDefault) {
                evt.preventDefault();
            }

            this._pointerPressed.push(evt.pointerId);

hostInformation.isMobile is false when starting on a desktop webbrowser. It’s only updated when creating the Canvas. So, in order to get it to True, click the Run button to restart the playground and it should work.

And with that, I get the same behavior as on my device.

Let me know how it goes for you.

Pryme8 · December 9, 2020, 3:24pm

With doing that the touches seem to move the camera, but not in a predictable way or in a manor that allows you to rotate.

Doing the refresh did get them to at least register though, but I can confidently say the UniversalCamera is not controllable with touch.

What you have shown though makes me wonder. I might have to dig in now and look.

Cedric · December 9, 2020, 3:36pm

Maybe @PolygonalSun knows more about touch input

Pryme8 · December 9, 2020, 3:37pm

Yeah its really screwy its like it does not want to rotate, but does want to move forward.

sebavan · December 9, 2020, 4:29pm

@PolygonalSun maybe this should use the pointer prefix for the isMouse ?

PolygonalSun · December 9, 2020, 4:54pm

@sebavan, are you referring to making use of the eventPrefix value in the InputManager (which is propagated by Tools.GetPointerPrefix(engine))? If so, I’m not sure that would work for the this scenario.

In any case, lemme take a look at the code and see what’s going on with the Universal Camera

sebavan · December 9, 2020, 4:56pm

perfect !!!

PolygonalSun · December 9, 2020, 6:23pm

So here’s what I found. The reason that the UniversalCamera is failing to rotate when in emulation is because of a set boolean in the TouchCamera (which is inherited by UniversalCamera).

github.com

BabylonJS/Babylon.js/blob/51b5b233af58ea32b9509b785373f0e2f8cda030/src/Cameras/touchCamera.ts#L87


     */
    public getClassName(): string {
        return "TouchCamera";
    }

    /** @hidden */
    public _setupInputs() {
        var touch = <FreeCameraTouchInput>this.inputs.attached["touch"];
        var mouse = <FreeCameraMouseInput>this.inputs.attached["mouse"];
        if (mouse) {
            mouse.touchEnabled = false;
        } else {
            touch.allowMouse = true;
        }
    }
}

Because the path of inheritance looks like this:
Camera -> TargetCamera -> FreeCamera (default for PG) -> TouchCamera -> UniversalCamera
And the affected change is in the TouchCamera, this should explain why it works in the default PG but not when the camera is changed to UniversalCamera.

The fix for this would either be to remove the mouse.touchEnabled = false line from TouchCamera

Or add a flag to line 73 of freeCameraMouseInput.ts that accounts for emulators:

github.com

BabylonJS/Babylon.js/blob/51b5b233af58ea32b9509b785373f0e2f8cda030/src/Cameras/Inputs/freeCameraMouseInput.ts#L73


const element = engine.getInputElement();

if (!this._pointerInput) {
    this._pointerInput = (p) => {
        var evt = <PointerEvent>p.event;

        if (engine.isInVRExclusivePointerMode) {
            return;
        }

        if (!this.touchEnabled && evt.pointerType === "touch") {
            return;
        }

        if (p.type !== PointerEventTypes.POINTERMOVE && this.buttons.indexOf(evt.button) === -1) {
            return;
        }

        let srcElement = <HTMLElement>(evt.srcElement || evt.target);

        if (p.type === PointerEventTypes.POINTERDOWN && srcElement) {

Pryme8 · December 10, 2020, 3:26am

keep in mind its more then emulation. It did not on the phone really either. If you have a mobile client you can test it on try https://playground.babylonjs.com/#0XYMA9#41

torminator · December 18, 2020, 10:32pm

I can confirm that UniversalCamera touch events don’t work on iPhones and iPads (at least mine). But, by adding:

camera.inputs.attached.mouse.touchEnabled = true;

right after creating the camera, my mobile devices work again.

Pryme8 · December 18, 2020, 11:44pm

Aye now we are getting to the meat and pudding!

sebavan · December 19, 2020, 12:39am

@PolygonalSun a PR would be awesome if we can automate it ?

PolygonalSun · January 7, 2021, 7:25pm

@sebavan, sorry about the delay in response here but would you be able to clarify on what you mean?

Topic		Replies	Views
Universal Camera Touch input to mimic mouse Questions	4	679	October 30, 2020
Guys, i got a problem with on some Android pad can't use universalCamera to move on touch Questions camera	4	342	May 17, 2022
Universal camera with mouse scroll wheel and touch pinch Feature requests	12	2366	October 15, 2020
BABYLON.UniversalCamera doesn't rotate linearly when touching on smart devices Questions camera	4	594	March 16, 2021
Why universalcamera disable x rotation on touch screen? Questions	11	504	July 1, 2022

UniversalCamera No longer rotates from touch?

Related topics