Unity WebGL：本机部署，运行到手机

omegayy2025-01-15 12:43

Unity WebGL

简单介绍一下Unity WebGL的技术方案，在WebGL平台出包后，Unity的运行时C/C++代码是通过Emscripten编译成了WebAssembly/Wasm；游戏逻辑部分的C#代码是先通过il2cpp转成C++再编译转成的Wasm，Unity程序就就可以在支持WebAssembly的浏览器中运行了。图形部分使用WebGL做适配，目前Unity 2022默认出包WebGL 2.0版本，API对应OpenGL ES 3.0，功能基本可以匹配。

在本地数据访问、网络支持方面WebGL平台有明显差异，需要额外支持补充，这里不多做介绍。

打包

Unity安装WebGL模块，切换平台后，就可以打包进行测试了。Build And Run执行后，就可以自动打开浏览器运行了。

本机部署服务器

Unity自动部署的服务只能本机访问，想要进行移动端快速测试就很不方便。这里有个很简单的方法，可以快速进行本地部署，同局域网内访问。

💡 电脑主机和手机需要在同一局域网内，或者电脑主机可以被外网访问。

使用步骤

安装Visual Studio Code
安装Live Server插件
使用VSCode打开WebGL输出的目录，创建.vscode目录，并在里面创建settings.json文件。
创建HTTPS证书
1. macOS/或者WSL，Terminal执行命令；按提示输入密码和基础信息
  csharp 复制代码
```
openssl genrsa -aes256 -out localhost.key 2048
openssl req -days 3650 -new -newkey rsa:2048 -key localhost.key -x509 -out localhost.pem
```
2. Win，安装OpenSSL，执行上述命令。

填写setting.json 输入刚才生成的证书和key，以及密码，例如：

csharp 复制代码

{
  "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"
  }
}

在VSCode中点右下角Go Live按钮，浏览器就会自动打开我们的WebGL App了。
电脑查看本机ip地址，然后手机上访问 https://yourpcip:7777 即可。

💡 注意

因为ssl的证书是我们本地创建的，不被浏览器认可，如果弹窗安全提示我们选择继续访问。

Live Server不支持压缩设置，WebGL出包时，在Player Setting/Publish部分将压缩方式选择disable