Problem with Pointer Lock

[tbgeorge]

Hello all,

I'm trying to get a basic fps camera into my scene, but nothing I do to enable control when the pointer is locked seems to work.

I can get the pointer to lock no problem, but when it is locked and hidden, it doesn't rotate the camera, but after I lock it and unlock it once, it moves the camera when it is not locked. 

Does anyone have any suggestions on this? I'm using the standard Pointer Lock API and using the camera.attachControl(canvas) and camera.detachControl(canvas) function calls.

The problem is illustrated here http://www.babylonjs-playground.com/#219IXL#0

After locking and unlocking the pointer once, the camera will follow the mouse without having to click. I need this to happen when the pointer IS locked.

[tbgeorge]

BUMP... I've been trying stuff for hours and have gotten nowhere. 

engine.switchFullscreen(true) ... does nothing

engine.isPointerLock = true ... does nothing

I can only get the camera to react to the mouse movement without having to left click if I say attachControl(canvas) when the pointer lock is disabled. Obviously this is not the functionality I need. I've looked at several tutorials that do it such as this: http://p215008.mittwaldserver.info/Maze/ But as far as I can tell, I'm doing nothing different when it comes to controls/camera.

I did try to manually adjust the camera rotation via an event listener on "mousemove" which worked when the pointer was locked, but it isn't as smooth as the built-in camera controls and also causes some issues with my HUD.

Any help is greatly appreciated.

[aWeirdo]

Hi @tbgeorge

i'm not sure why it won't rotate during pointerLock,

it could be a playground bug or a recent update that bugged it, it used to work fine and i can't see in your code why it shouldn't (maybe @Deltakosh knows?).

In Temechon's shooter demo  it works fine and he is doing nothing more as far as i can see, try running it locally on a apache server (xampp). 

 

But you can also add that functionality yourself if it doesn't work.
It should be rather simple, find the freeCamera and it's "click to rotate" code in the babylon.max.js on repo / dist folder and copy & edit to your needs  

and then i cleaned up your PG a bit (you still can't rotate camera during pointerlock and playground editor may need to be closed it sometimes bugs the view)

http://www.babylonjs-playground.com/#219IXL#15

 

Edit: 

I just quickly checked other browsers, and there is definetely something bugged..

Chrome: Can't rotate with mouse during lock. Can move with arrow keys

Firefox: same as chrome.

Edge: Can rotate camera during lock. Can move with arrow keys.

[tbgeorge]

16 hours ago, aWeirdo said:

Hi @tbgeorge

i'm not sure why it won't rotate during pointerLock,

it could be a playground bug or a recent update that bugged it, it used to work fine and i can't see in your code why it shouldn't (maybe @Deltakosh knows?).

In Temechon's shooter demo  it works fine and he is doing nothing more as far as i can see, try running it locally on a apache server (xampp). 

 

But you can also add that functionality yourself if it doesn't work.
It should be rather simple, find the freeCamera and it's "click to rotate" code in the babylon.max.js on repo / dist folder and copy & edit to your needs  

and then i cleaned up your PG a bit (you still can't rotate camera during pointerlock and playground editor may need to be closed it sometimes bugs the view)

http://www.babylonjs-playground.com/#219IXL#12

 

Edit: 

I just quickly checked other browsers, and there is definetely something bugged..

Chrome: Can't rotate with mouse during lock. Can move with arrow keys

Firefox: same as chrome.

Edge: Can rotate camera during lock. Can move with arrow keys.

Ok great, glad it's not just me. I ended up just using an event listener for 'mousemove' and adding up rotations and applying them on update.

[GameMonetize]

Is it better? http://www.babylonjs-playground.com/#219IXL#14

[aWeirdo]

@Deltakosh afraid not,

Updated PG, fixed a error on my part.. wrote "null" instead of "false" by mistake.. woops

But it's still the same sadly

http://www.babylonjs-playground.com/#219IXL#16

 

[GameMonetize]

The weird thing is that it works on EDGE!

[GameMonetize]

OK I know why

This is because of jQuery PEP (the tool we use in the Playground to simulate pointer events). This framework does not transmit evt.movementX and evt.movementY (which are required for pointerlock),

 

So if you remove this reference from your code it should just work

[leanderr]

Sorry for digging out corpses. If you keep the mouse clicked on the last provided Playground it freezes camera rotation. I have the same issue in my projects. All other browsers except Firefox work great...

http://www.babylonjs-playground.com/#219IXL#16

[Guest]

Not sure to understand: if you click once you will turn on pointerlock. You have to release the mouse at least once to let the other events come

[leanderr]

For Firefox: As soon as you're pointerlocked whenever you click it will freeze the mouse input / camera movements. I'm not sure how to circumvent the behaviour in case you want to use some dragging or other clicking mechanics while pointerlocked. I also believe there will be camera lag / framedrop-like behaviour of the camera with the code provided.

Still considering this PG: http://www.babylonjs-playground.com/#219IXL#16

 

[aWeirdo]

Also happens (still FF) using engine.switchFullscreen(true);
http://www.babylonjs-playground.com/indexStable.html#219IXL#145

Looks like something is blocking the onMouseMove events in FF when pointerLocked & pointerDown, ( no console.logs )

http://www.babylonjs-playground.com/indexStable.html#219IXL#147

"Bug" located;

Appears un-related to Babylon ?. FF mousemove event isn't fired in the above scenario, but pointermove is.

http://www.babylonjs-playground.com/indexStable.html#219IXL#150

More notes;
Isn't it just amazing how browser developers communicate and agree how things should work? no? yeah.. nope.

FF will not do "mousemove"
Chrome will not do "pointermove"
Opera will not do "pointermove"
Edge will do both.

[leanderr]

 

On 5/26/2018 at 2:07 AM, Deltakosh said:

[...] You have to release the mouse at least once to let the other events come

Line 28 or 29, of the provided PG shows this is not true for Firefox...

http://www.babylonjs-playground.com/#219IXL#151

Are there any workarounds or tips to fix this issue? Any fixes soon? It actually renders my whole project unusable in Firefox.

[Guest]

Unfortunately we do not control Firefox engine., so there is nothing we can do about it. You may want to ping them on their bugzilla website?

 

By the way, this PG: http://www.babylonjs-playground.com/#219IXL#151 works for me in FF. What are you seeing on your side?

 

[aWeirdo]

@Deltakosh 
http://www.babylonjs-playground.com/#219IXL#151 Doesn't work in latest FF for me, still no mousemove event with the combination of pointerlock + pointerdown + pointermove.. 

I suppose some kind of FF check could be used? If FF, use pointermove, else mousemove, only seems to be firefox which is acting up..
These kind of bugs are always sad to encounter..

[Guest]

are you on Windows?

[aWeirdo]

Yes,
Win 10, 17134.48
FF, 60.0.1

[leanderr]

On 5/31/2018 at 5:36 PM, Deltakosh said:

Unfortunately we do not control Firefox engine., so there is nothing we can do about it. You may want to ping them on their bugzilla website?

 

By the way, this PG: http://www.babylonjs-playground.com/#219IXL#151 works for me in FF.

 

I have the same Setup as @aWeirdo which setup are you using @Deltakosh? What are you seeing on your side? So you're saying you can use FF and drag mouse in this playground and the camera is still turning?

[Guest]

Yep