Version: 2022.1
WebGL Networking
WebGL browser access to device features

Cursor locking and full-screen mode in WebGL

Cursor locking (using Cursor.lockState) and full-screen mode (using Screen.fullScreen) are both supported in Unity WebGLA JavaScript API that renders 2D and 3D graphics in a web browser. The Unity WebGL build option allows Unity to publish content as JavaScript programs which use HTML5 technologies and the WebGL rendering API to run Unity content in a web browser. More info
See in Glossary
, implemented using the respective HTML5 APIs (Element.requestPointerLock and Element.requestFullscreen). These are supported in Firefox and Chrome. Safari can’t currently use full-screen and cursor locking.

Enable cursor locking and full-screen mode in WebGL

Due to security concerns, browsers allow locking of the cursor or switching to full-screen mode only in direct response to a user-initiated event (like a mouse-click or key press). Because Unity doesn’t have separate events and rendering loops, it defers event handling until the browser no longer acknowledges a full-screen or cursor lock request issued from Unity scripting as a direct response to the event which triggered it. As a result, Unity triggers the request on the next user-initiated event, instead of the event that triggered the cursor lock or full-screen request.

To make this work with acceptable results, you should trigger cursor locking or full-screen requests on mouse/key down events, instead of mouse/key up events. This ensures that when the request is deferred to the next user-initiated event, it’s triggered when the user releases the mouse or key.

Use Unity’s UI.Button component to achieve the desired behaviour by creating a subclass of Button, which overrides the OnPointerDown method.

Note that browsers may display a notification message or prompt the user for permission before entering full-screen mode or locking the cursor.

WebGL Networking
WebGL browser access to device features