WebGL and Unity: Mobile & Desktop

WebGL and Unity: platform allows you to Run your App made with Unity Game Engine in the Web Browser (like Google Chrome or Safari) on Desktop and Mobile devices without installation.

In this Article, you will learn How to Build and Test Unity games and apps for WebGL platform as fast as possible. Unity Asset called Sensor Camera (docs) will be used for Demonstration on Video.

How to Build and Test Unity apps on WebGL platform

When you Build for WebGL in the way that Unity provides for developers, then Unity runs its own web server without the opportunity to customize it and make your app accessible on the local network.

Unity WebGL on Desktop (Windows, macOS)

You can test your App on the Desktop computer in a Web Browser (which is opened automatically after the building), but not on Mobiles, which can often show a different experience than Desktop Apps.

WebGL and Unity on Mobile Platforms (iOS & Android)

You can Test your Application on Mobiles with Mobile Web Browsers in several ways:

1. Time-Consuming Method (easy):
   Upload a New Build Every Time to any Web Hosting Service and Open the App in an Internet Browser via HTTPS. You can use your Own Website or a 3rd-party website like itch.io:
   Account > Dashboard > Create a New Project (HTML) > Save & View Page.
2. Fast Method (one-time initial setup is required):
   Run your Own Local Web Server on a Desktop computer, and then Open your App (which is hosted on this computer) on your Mobile Phone via Wi-Fi network.

Local Web Server on Desktop (Windows, macOS) for Testing a Unity Mobile App on WebGL via Wi-Fi network

1. Build the App with Unity for WebGL in a New Folder.
2. Create a self-signed HTTPS certificate in the Build Folder for Testing Purposes.
   • macOS:
     1. Open the Terminal app and Switch to the Build Folder with the Change Directory command using Full Directory Path like:
        cd /Users/makaka.org/Documents/bitbucket/sensor-camera/build_webgl
     2. Create a Private Key with Any Password:
        openssl genrsa -aes256 -out localhost.key 2048
     3. Create the Certificate using Your Password, localhost for Common Name/Host Name, and other requested information with random values:
        openssl req -days 3650 -new -newkey rsa:2048 -key localhost.key -x509 -out localhost.pem
        .
   • Windows:
     1. Install OpenSSL.
     2. Add the bin folder of OpenSSL to the Windows environment:
        Windows Start (Right Click) > System > About > Advanced system settings > System Properties > Advanced > Environment Variables > System variables > Path > Edit > New > Indicate path to bin folder of OpenSSL.
     3. Windows Start > Command Prompt.
     4. Next, execute the same actions as on macOS.
3. Install the Visual Studio Code.
4. Install the Live Server extension for Visual Studio Code.
5. In the Build Folder, Create a Folder called “.vscode” with the “settings.json” File inside.
6. Fill the “settings.json” file with the next information, using Full Directory Paths to Created Files:
   

   {
     "liveServer.settings.port": 7777,
     "liveServer.settings.https": {
       "enable": true,
       "cert": "/Users/makaka.org/Documents/bitbucket/sensor-camera/build_webgl/localhost.pem",
       "key": "/Users/makaka.org/Documents/bitbucket/sensor-camera/build_webgl/localhost.key",
       "passphrase": "123456"
     }
   }

7. Open the Build Folder in Visual Studio Code > File > Open Folder.
8. Start your Local Live Server with the Go Live Button in the Bottom Right Section (Status Bar) of Visual Studio Code to turn the server on/off.
   
   App will be running on the Desktop computer with the next address: https://127.0.0.1:7777 .
   
   You will see the page with the message “Your Connection is not Private” and the error: NET::ERR_CERT_AUTHORITY_INVALID — It’s OK for Testing Purposes. Click the Advanced Button and then the Proceed to 127.0.0.1 (unsafe) button.
9. Connect your Mobile Device (Android or iOS) and your Desktop computer with a Running Web Server to the same Wi-Fi network.
10. Get the IP address of a Desktop Computer on WLAN in the Wi-Fi Router’s Settings page (Connected Devices section) or using one of the following methods:
    • Windows Command Prompt:
      Windows Start > Run > cmd > OK > ipconfig > IP.
    • Windows 11:
      Windows Start > Settings > Network & internet > Properties > IP.
    • Windows 10:
      Windows Start > Settings > Network & internet > Wi-Fi > Advanced Settings > IP
      .
    • macOS:
      • System Settings > Network > Wi-Fi > Details > IP address.
      • Open the Terminal app and use one of these commands:
        • ipconfig getifaddr en0;
        • ifconfig and find en0 section in the output message.
11. Open Web Browser on your Mobile Device (Google Chrome or Safari) and visit the target IP address with HTTPS protocol and the target port, e.g., https://192.168.1.4:7777 .
12. Click the Advanced Button and then the Proceed to 192.168.1.4 (unsafe) button. Wait a while for the application to load.
    
    Now, with each New Building of App on Desktop, it will be available at the target IP-address on your Mobile Device immediately. Use a New Tab for Every New Build to avoid cache issues.
13. Option: Check the console in Google Chrome for Mobiles to catch the warnings and errors. Open your Mobile WebGL App in one tab, and open chrome://inspect in another tab. So, you can see the log with errors and warnings in a separate tab.

Behavior of Motion Sensors on Mobile WebGL: Gyro & Accelerometer

HTTPS:

• Android: access without permission request.
• iOS: requests permission after tap on screen.

HTTP:

• iOS: the scene can be opened, but you will get Zero Data from Motion Sensors.
• Android: throws an error about the impossibility to access the device orientation and the scene can’t be opened: “ReferenceError: DeviceOrientationEvent is not defined.”

Error “Unable to parse Build/[File_Name].framework.js.gz” for Gzip

You can also see “Unable to parse Build/[File_Name].framework.js.br” for Brotli compression format.

When you Build WebGL app for the 1st time, you can encounter the such error that the app can’t be run. There are 2 ways to solve this issue.

Solution 1: without access to server configuration

If you don’t have access to server configuration, then you can enable the next setting:
Project Settings > Player > WebGL > Publishing Settings > Decompression Fallback > Check.

Solution 2: with access to server configuration

If you have access to server configuration, then turn on the compression in Unity:
Project Settings > Player > WebGL > Publishing Settings > Compression Format > Gzip (recommended).

It should work in most cases (like for itch.io) — this is preferable over disabling compression completely.

And then turn on the compression on the Server side by customizing the handling of compressed files.

WebGL and Unity Assets

Not All Projects on Unity can be run on WebGL due to platform limitations. So you need to check the description and documentation of Unity Assets to make sure that your project will work on WebGL. If there are no platform indications at all, feel free to reach support to find out that before purchasing.

The Unity Assets listed below will work on WebGL platform.
Learn Docs for each asset separately for more details.

Sensor Camera (docs) uses a Motion Sensor (Gyroscope/Accelerometer) on the player’s mobile device to control the game camera from a first-person view (just like in FPS Games).

Football (docs) — cross-platform Unity Asset in the sport arcade genre with realistic physics of football net, goal movement and the target movement inside the goal, advanced scoring & audio systems.

Basketball Game 3D (docs) — sport arcade with realistic physics of basketball net & ring, ring growing, hoop movement, advanced scoring & audio systems.

Throw Object 3D (docs) — highly customizable Advanced Throwing System for Unity: Mobile & Desktop. 2 Modes. 2 Demos. 10 Throwing Objects. 80+ Customizable Parameters.

AR Unity Assets for WebGL

There is a challenge about the possibility of publishing AR applications via WebGL in Unity. Currently, the Unity AR Foundation, ARKit, and ARCore do not support such an option, but there are 3rd-party solutions:

• Universal AR (UAR) SDK.
• Image Tracking.
• Plane Detection.
• Face Tracking.

Russian Version of Tutorial: Mobile WebGL for Unity