Unity WebGL:本机部署,运行到手机

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

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

使用步骤

  1. 安装Visual Studio Code

  2. 安装Live Server插件

  3. 使用VSCode打开WebGL输出的目录,创建.vscode目录,并在里面创建settings.json文件。

  4. 创建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,执行上述命令。

  5. 填写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"
      }
    }
  6. 在VSCode中点右下角Go Live按钮,浏览器就会自动打开我们的WebGL App了。

  7. 电脑查看本机ip地址,然后手机上访问 https://yourpcip:7777 即可。

💡 注意

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

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

相关推荐
EQ-雪梨蛋花汤5 小时前
【Part 3 Unity VR眼镜端播放器开发与优化】第四节|高分辨率VR全景视频播放性能优化
unity·音视频·vr
魂断蓝桥6668 小时前
如何基于three.js(webgl)引擎架构,实现3D微信小游戏(第一课)
webgl·three.js·微信小游戏·three.js路径规划、三维a*算法、javascript三维导航,·three.js小游戏
与火星的孩子对话9 小时前
Unity进阶课程【六】Android、ios、Pad 终端设备打包局域网IP调试、USB调试、性能检测、控制台打印日志等、C#
android·unity·ios·c#·ip
幻世界11 小时前
【Unity智能模型系列】Unity + MediaPipe + Sentis + ArcFace模型:构建高效人脸识别比对系统
unity·游戏引擎
康康的幸福生活17 小时前
webgl2 方法解析: getContext()
webgl
漫游者Nova18 小时前
虚幻引擎Unreal Engine5恐怖游戏设计制作教程,从入门到精通从零开始完整项目开发实战详细讲解中英字幕
ue5·游戏引擎·虚幻·游戏开发完整教程·恐怖游戏开发
死也不注释1 天前
【Unity 编辑器工具开发:GUILayout 与 EditorGUILayout 对比分析】
unity·编辑器·游戏引擎
小赖同学啊1 天前
物联网中的Unity/Unreal引擎集成:数字孪生与可视化控制
物联网·unity·游戏引擎
Zlzxzw2 天前
使用unity创建项目,进行动画制作
unity·游戏引擎
庖丁解牛2 天前
3. Babylonjs 中获取相机方向相关
前端·webgl·游戏开发