Unity3D WebGL 相关踩坑记录 1

发表于 分类于 本文字数： 2.7k 阅读时长 ≈ 2 分钟

Unity3D发布手机版可用的项目，基于2019.4版本，问题主要集中在以下几点：

  • Unity3D WebGL 在移动端上不再弹出移动端浏览器警告。
  • 自定义加载 Logo 和背景色等样式，未找到修改位置。
  • 触摸等交互方式要适配移动端。目前使用了lean。
  • UI等界面元素适配移动端。
  • 将 WebGL 内容嵌入 Hexo Next 博客中。

非重要修改点为：

  • 默认全屏，或者有窗口尺寸选项，这个可能要通过JS来实现。
  • 加载时的自定义 Logo ，目前测试可以使用 PNG 和 Base64 编码的图片，理论上应该可以使用 SVG 格式的图片，有待测试。
  • 加载时候的界面背景色未找到修改的位置。
Unity3D WebGL 在移动端上不再弹出移动端浏览器警告
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
compatibilityCheck: function(e, t, r) {
       t();
    /*UnityLoader.SystemInfo.hasWebGL ? UnityLoader.SystemInfo.mobile ? e.popup("Please note that Unity WebGL is not currently supported on mobiles. Press OK if you wish to continue anyway.", [{
		text: "OK",
		callback: t
	}]) : ["Edge", "Firefox", "Chrome", "Safari"].indexOf(UnityLoader.SystemInfo.browser) == -1 ? e.popup("Please note that your browser is not currently supported for this Unity WebGL content. Press OK if you wish to continue anyway.", [{
		text: "OK",
		callback: t
	}]) : t() : e.popup("Your browser does not support WebGL", [{
		text: "OK",
		callback: r
	}])*/
},
buildCompatibilityCheck: function(e, t, r) {
    function n() {
        if ("undefined" == typeof e.graphicsAPI) return ! 0;
        for (var t = 0; t < e.graphicsAPI.length; t++) {
            var r = e.graphicsAPI[t];
            if ("WebGL 2.0" == r && 2 == UnityLoader.SystemInfo.hasWebGL) return ! 0;
            if ("WebGL 1.0" == r && UnityLoader.SystemInfo.hasWebGL >= 1) return ! 0;
            e.print("Warning: Unsupported graphics API " + r)
        }
        return ! 1
       }
       t();
    //n() ? !UnityLoader.SystemInfo.hasThreads && e.multithreading ? r("Your browser does not support multithreading.") : t() : r("Your browser does not support any of the required graphics API for this content.")
},

当使用Unity3D 2019.4发布了WebGL项目后，会在Build目录下生成一个UnityLoader.js文件，这个文件感觉主要是加载Unity3D WebGL的内容，而且是一个压缩版的。

  1. 使用网上的JS格式美化工具，将整个JS代码进行格式美化，使代码可读。
  2. 要修改的代码集中在2628到2654行之间，不同的代码格式美化工具，可能行数会有不同。
  3. 找到 compatibilityCheck: function(e, t, r) 和 buildCompatibilityCheck: function(e, t, r) 这两个方法，将其方法体注释掉，添加 t();

注意，这样虽然屏蔽了所有浏览器的警告提示，可以在手机浏览器，包括微信内，都可以打开 Unity3D WebGL 的内容。但是在某些浏览器内因为内核的问题，导致内容不会加载，也没有相关提示，只显示一个灰色的色块。目前已知有问题的浏览器是Mac端的Safari。

Unity3D WebGL 代码嵌入 Hexo Next 页面中
1
2
3
4
5
6
7
<head>
  <script src="Build/UnityLoader.js"></script>
  <script>UnityLoader.instantiate("unityContainer", "Build/WebGL_Build.json");</script>
</head>
<body>
  <div id="unityContainer" style="width: 800px; height: 450px;"></div>
</body>
  • <head> 标签内的两个 script 引用，和 <body> 内的div引用，需要复制到引用该 WebGL 的 html 界面对应位置，注意，这里必须是由Hexo生成的Html界面。
  • 目前使用的Next深色主题，背景色为 RGB(51, 51, 51, 1)，宽度为800px。
  • UnityLoader.js 必须 和Unity 打包好的资源文件放在相同的目录下。例如生成的 html 界面名字为post1.html，同级目录下存放WebGL的文件夹。文件夹内存放 UnityLoader.js 脚本和相关的WebGL资源。
    可以通过修改 <script> 标签内的引用路径，将该资源存放到其他位置。