关于 Unity WebGL 的探索

转载自作者yaukey 博客地址(http://www.cnblogs.com/yaukey/)
　　出于各种各样的可描述和不可描述之原因，我们现在需要把项目移植到 Web 端，第一次被告知这个需求时我直接给出了不可能的答复，之前从来没有考虑过这个平台的兼容性，现在项目算是做完了结果要这样折腾一番我觉得是需要消耗非常可怕的人力物力但未必能有很好的效果，性价比很低，但是最终我还是妥协了，硬着头皮接下来，也硬着头皮上，毕竟，技术依然是为了市场和商业服务。
　　既然接下了这个活儿（很不情愿的），那就得开始寻找方案，运营方提出使用 Unity 已经放弃维护的 WebPlayer，这个方案我们内部商讨后决定放弃，直接奔向 WebGL。
　　在记录这些文字时，我尚未完全解决所有的基础问题，也许最终无法通过或者受限于技术能力而夭折，但是通过这些记录也许能帮到后面想要踩这些坑的人。
　　查找了 Unity 的官方资料，我们如果需要使用 WebGL 需要面对以下几个挑战：
Native Plugin：也就是说各种原生插件（C/C++等编译的本地机器码库），我们的挑战是使用了 SLua。
多线程：WebGL 端无法支持任何多线程代码，因为 JavaScript 没有多线程的实现，C# 端使用的类似 System.Threading 等库最终都不会被编译成相应的 js 代码。
网络模块：传统的 Socket 无法使用，必须使用 WebSocket 或者 xxx，System.Net，尤其是 UnityEngine.Net.Sockets 都未在 WebGL 端实现，所以将无法被正确编译转换；Unity 中可以使用 WWW 和 UnityWebRequest，或者使用新版支持 WebGL 的 Unity Networking API；或者直接在 JavaScript 中使用 WebSockets 和 WebRTC 来实现网络层功能。
渲染：WebGL 的图形 api 是基于 OpenGL ES 2.0；GI 只支持 Baked GI（我们没使用）；Procedural Materials 不支持（我们没使用）；Linear Rendering 不支持（我们没使用）；MovieTextures 不支持（我们没使用）；WebGL Shader code restrictions：目前理解为在 shader 代码中只支持使用常量，循环的索引值或者联合体来作为访问数组和矩阵的索引，唯一的例外是在 Vertex Shader 中访问 uniform 时可以使用任意的表达式，另外还有循环的限制，不可以使用 “计数循环-初始化一个变量时赋给一个常量值，每次循环时增加或减少一个常量值” 以外的方式，并且不支持 while 循环。（目前大致看来我们没有使用数组或矩阵的下标表达式，也没有使用复杂的循环，后期可能还需要仔细排查）。
Audio 有几乎一大半的 api 不支持，后面需要做兼容修改，应该不少麻烦。
其它暂不考虑，以上几项直接决定我们是否可以先 Port 出来，效率问题都先不考虑。
　　先从 Native Plugin 入手，Lua 这是需要迈过的第一道坎儿。官方给了两个很好的文档：WebGL: Interacting with browser scripting 和 Unity WebGL中的底层插件，WebGL 是通过 IL2CPP 将所有的 C# 代码转换成 C++，这样便可以使用基于 LLVM 的 Emscripten 的工具链将所有的 C++ 代码编译成基于 asm.js 的 JavaScript 代码，这样便可以在支持 Html5 的浏览器上运行。
　　我们使用了 SLua 插件，所以我现在需要使用 Lua 的源代码来参与编译和打包过程即可。很庆幸我们项目在今年大家开会讨论后决定从原来的 LuaJit 升级为 Lua 5.3，如果是 LuaJit 项目本身的编译产生了大量针对目标平台的汇编代码来最终生成的，具有极大的平台特异性，所以就算是使用 LuaJit 的源码也是无法使用 WebGL 的，依然需要直接使用 Lua 5.1 或者 5.3 的源码。
　　新建一个空的 Unity 工程，导入 SLua 插件，切换到 WebGL 平台，在 Plugins 中新建文件夹 WebGL，新建一个 C 代码文件比如：lua.dll.c，然后将最新版 Lua5.3 源码解压到本地的一个目录：(LuaSrcDir)，所有代码都在(LuaSrcDir)/src 中，将 slua.c 也拷贝进来，但是要排除 lua.c，luac.c 这两个文件。
　　　在 lua.dll.c 中加入以下内容：

define LUA_COMPAT_5_1

define LUA_COMPAT_5_2

// Lua source code only, relative .

include “$(LuaSrcRelativePath)/src/lapi.c”

include “$(LuaSrcRelativePath)/src/lauxlib”

include “$(LuaSrcRelativePath)/src/lbaselib.c”

…
// Add all lua source file *.c, exclude lua.c, luac.c.
//#include “$(LuaSrcRelativePath)/src/lua.c” //#include “$(LuaSrcRelativePath)/src/luac.c”

include “$(LuaSrcRelativePath)/src/slua.c”

注意：以上所有内容都是添加 Lua 的源文件，不包括头文件，具体开头使用要使用哪些预编译宏，取决于你的项目。
另外由于 Lua 5.3 向下兼容的问题，如果定义了 LUA_COMPAT_5_1后，LUA_COMPAT_MODULE 会被定义，那么就会编译兼容实现：luaL_findtable，而 SLua 中为了兼容多写了一份，所以这时候可以删掉 slua.c 中的实现，否则编译会出现重定义的错误。
　　接下来在 Unity Player Setting 中加入预编译宏 LUA_5_3 将 SLua 切换到 5.3 的实现版本，然后就直接将某个示例场景添加的构建列表，BuildAndRun，就可以看到 SLua 的 Demo 场景正确的运行在浏览器上了。
　　至此，Lua 的 Native Plugin 部分已完成，可以往下走了。

WebSocket.org 网站提供了最近本的 WebSocket 的使用示例，其标准规范定义以及相关的的 API 文档都比较全，同时支持安全的 wss 协议。

目前主流的浏览器都支持 WebSocket，可以在这里 WebSocket.org 测试你的浏览器是否支持。

所有的定义和接口都是基于 javascript 的，所以在 Unity 中使用需要创建一份 javascript 的实现，这里可以先参考 Unity 的官方示例：Simple Web Sockets for Unity WebGL。它完整的实现了链接的建立，关闭，消息的收发，但是作为简单的 Demo，健壮性和扩展性肯定是不足的，这里我建议购买使用 Best HTTP，其完整的包装了 WebSocket，在上层提供了统一简单的接口，扩展性也很好，健壮性也不错，基本涵盖了所有的事件到 C# 端处理。不过需要注意的是，默认的消息数据类型是 arrayBuffer，没有处理 binary，如果需要的话自己去扩展下，这部分在 Simple Web Sockets for Unity WebGL 可以找到参考，或者阅读下 API 文档。

这部分都是基于 Build WebGL 平台的实现，如果想在编辑器下，那么必须有在 C# 端实现的 WebSocket 协议，Best HTTP 自己实现了 C# 端的协议支持，不过你也可以使用 websocket-sharp，Unity 的 Demo 也使用了这个。

至于如何创建插件以上的示例都有，不赘述。我后来选定的方案是，使用 Best HTTP 的 javascript 下的 WebSocket 实现 + websocket-sharp
，不完整使用 Best HTTP 的原因是我们项目已有自己的网络底层实现，只需要在 WebGL 平台替换相应的网络连接关闭，以及数据的收发即可，所以我进行了剥离，只选取我要的部分进行修改完善。在 C# 端的接口只提供名为 WebSocket 的类，里面处理各个平台即可。

截至以上部分，完整的实现了需要的 WebSocket 网络支持，接下来只需要在 WebGL 平台下替换项目中的网络接口即可。

另外，过程中发现了 5.6.1 的一个 Bug：同时开启 Development Build 和 Use pre-built Engine 构建出的 WebGL 应用无法正确执行 javascript 插件代码，会出现类似如下的错误：

“An error occured running the Unity content on this page. See your browser JavaScript console for more info. The error was:
ReferenceError: webSocketInstances is not defined”

目前已经给官方提交了 Bug 并得到确认，如果使用的话请注意。

当尝试完这部分工作后，又得到一个重磅消息：处于某种原因，项目 WebGL 版本移植工作暂停，恢复时间待定。