杨轶—GMTC 2019 NativeGameOnMobileWeb 20190613

前端狗

2019/07/09 发布于 编程 分类

GMTC2019 

文字内容
1. 移动 Web 上玩转原生游戏 杨轶 木鸡科技联合创始人
2. 自我介绍
3. 自我介绍
4. 自我介绍 杨轶是上海木鸡网络科技有限公司的联合创始人,目前负责公司技术产品化和开发者技 术合作方面的工作,是木鸡科技 WEBIR 技术的布道者。 在联合创建木鸡科技之前,杨轶就职于 Intel 软件和服务集团,负责 x86 Android 游戏生 态在中国区的技术普及工作,专注于 x86 编译器、游戏底层代码优化、引擎和图形渲染 技术。 在 Intel 之前,杨轶作为 BSP 高级工程师服务于 Freescale 网络多媒体事业部,专注于解 决网络处理器性能优化问题。
5. 目录 1. 2. 3. 4. 5. 6. 7. 当今移动端浏览器为游戏开发准备了啥 Web 上游戏开发之现状 移动 Web 上能玩原生游戏吗 案例分析 WEB-IR,这种方案所要解决的关键问题 WEB-IR 工具链 我们的感悟并 Q&A
6. 当今移动端浏览器为游戏开发准备了啥 Web Audio API Web Audio API XHR/Fetch IndexedDB WebSocket WebRTC Web Worker Touch/Accelerometer Service Worker
7. Web 上游戏开发之现状 纯 Web 游戏引擎 Web 游戏渠道平台 原生游戏引擎 Web 版 小游戏框架 (基本在国内环境) 标准 HTML5 WebView 渠道 (多见于海外渠道) Based On
8. 移动 Web 上能玩原生游戏吗 轻游戏 2.0 移动端 Web 环境 代码动态 Profiling,Code Size 减至 1/3,加载启动提速 2X 编译器支持的阻塞机制,虚拟上下文切换,支持资源渐进加 载,支持 TCP/UDP select/poll 虚拟协程来模拟多线程 WASM 模块:函数多,加 载慢,编译慢,内存占用高 Web 天生不支持阻塞调 用,加载大资源是问题 使用 MultiThreading,BSD Socket 的游戏
9. 原生游戏在移动 Web 上的软件栈 原生程序运行时内存 Game Logic Native Part Game Logic Web Part Game Engine Core Browser Client/WebView Client WebAPI OS Layer 程序实际占用的内存(占用过 大可能导致系统崩溃或者被系 统杀掉) 我们移植原生游戏到移动 Web 一定要注意的是:内存的占用并不仅仅是原生游戏运行时所占用 的那块,还要考虑到原生游戏是运行在沙盒里面,整个沙盒工作时都在消耗内存——除去沙盒 自身的内存占用,还包括编译 WASM,编译 JS,页面内部对象管理,图像、音频解码,缓存 资源,JS 对象占用,调用 WebAPI 占用等等
10. 案例分析——一款贪吃蛇向的游戏 250 200 150 100 50 0 程序函数个数(K) 游戏首帧下载资源(MB) 游戏首帧启动时间(s) Unity WebGL WASM(iOS 无法编译,android 无法运行) 游戏资源占用内存(MB) WEB-IR WASM Tested with China Mobile 4G network,Device: Huawei Mate 8 (NXT-TL00) / iPhone 7 (32GB) Browser: Chrome 63.0.3239.111 / iOS Safari,OS: Android 7.0 / iOS 11.0.3 (15A432)
11. 案例分析——一款贪吃蛇向的游戏(关键点解析) v 代码动态 Profiling,Code Size 缩小到原来的 1/3,编译加载时间大幅度缩短 v 支持阻塞调用,资源文件可以同步读取,仅需要 8M 内存来做 Cache,按需下载的数 据很小,加载耗时明显减小,尤其在进入游戏首帧时 v 对原始 WASM 代码进行重编译,插入控制指令,并且 patch Unity 的 IL2CPP 库以支 持虚拟的多线程调用和 UDP 连接,解决了原生游戏所依赖的网络连接问题(其实这 里更建议使用 Unity 所提供的 UNET 及后续网络能力)
12. 案例分析——一款 MMO 向 3D 游戏 350 300 250 200 150 100 50 0 程序函数个数(K) 游戏首帧下载资源(MB) 游戏首帧启动时间(s) Unity WebGL WASM(iOS 无法编译,android 无法运行) Tested with China Mobile 4G network ,Device: Huawei Mate 8 (NXT-TL00) / iPhone 7 (32GB) Browser: Chrome 63.0.3239.111 / iOS Safari,OS: Android 7.0 / iOS 11.0.3 (15A432) 游戏资源占用内存(MB) WEB-IR WASM
13. 案例分析——一款 MMO 向 3D 游戏(解析) v 3D 游戏,需要更大的计算量和更多的资源,同时也展现了 Unity 3D 游戏的表现力 (这也是我们做这个方向的动力之源) v 由于原生游戏依赖了很多第三方库,Unity WebGL 版执行代码有超过 60K 个函数, 面临和前面贪吃蛇同样的问题,而且挑战更大 v Demo 版的资源已经有 300M,意味着完整游戏会在 GB 级,占用内存也就在 GB 级, 在手机浏览器环境是完全不可接受的 v MMO 游戏,所以也用到了 BSD Socket 和 Multi-Threading,不做调整 Unity WebGL 版依旧无法运行 v 基本采取和贪吃蛇一样的处理手段,有效函数控制在 20K 个,为了满足 iOS 对编译 WASM 的限制采取了 WASM 和 JS 混搭的 Hybrid 模式,同时配以 IndexedDB 来满足 资源持续存储并作为 Cache 加速再次加载的速度
14. 案例分析——一款 3D 动作游戏 v 一款中量级的 3D 单机游戏,这种量级的游戏更适合从原生游戏迁移 到移动 Web Ø 游戏画面绚丽,操作流畅,代入感强,开发团队对 Unity 的把控 很有经验,优化到位,很利于做移动 Web 端的迁移 Ø 这类型游戏是我们目前工作的重点——内容丰富,移植速度快 v 主要问题集中在加载上 Ø 执行代码动态 Profiling——缩短程序下载和编译时间,并保证全 WASM模式运行 Ø 资源渐进加载——缩短资源下载时间 Ø 预加载进入游戏首帧所用资源——快速初始化引擎,快速启动游 戏和进入游戏后的流畅运行 Startup Time (sec) Initial Download Size (MB) WebIR Unity (Emscripten) Android Chrome 21.36 31.63 iOS Safari 13.54 CRASHED 16.6 42.6 Tested with China Mobile 4G network Device: Huawei Mate 8 (NXTTL00) / iPhone 7 (32GB) Browser: Chrome 63.0.3239.111 / iOS Safari OS: Android 7.0 / iOS 11.0.3 (15A432)
15. 案例分析——一款解密游戏 v 解密游戏也非常适合做 Web 化,因为对操作要求不高,所以 基本可以忽略很多响应上的问题 v 重点还是加载,这个也是所有从原生迁移到 Web,尤其是移 动 Web 上的重点 v 这款游戏我们对比了资源包加载相同的情况下,WEB-IR 和 Unity WebGL 版的差异 Startup Time (sec) Initial Download Size (MB) WebIR Unity (Emscripten) Android Chrome 24.55 31.56 iOS Safari 20.64 CRASHED 33.4 33.4 Tested with China Mobile 4G network Device: Huawei Mate 8 (NXT-TL00) / iPhone 7 (32GB) Browser: Chrome 63.0.3239.111 / iOS Safari OS: Android 7.0 / iOS 11.0.3 (15A432)
16. 案例分析——实践中的关键 WASM 程序 所要编译的函 数 主要包括程序下载时间,程序编译时 间,资源下载时间,首帧资源解码时 间,引擎初始化时间等等,这个直接 影响了用户体验,是用户转化的重要 指标,也是能否成功登陆渠道的关键 点 游戏首帧启动 时间 越多的函数 WASM 编译的时间会越 长,从而导致启动时间延长,而且编 译时消耗的内存会越大,甚至导致浏 览器崩溃 主要包括两方面:一块是游戏自身 运行时内存占用,一块是游戏外周 边内存占用,主要包括 WASM 编 译,JS 编译,资源缓存,纹理/音 频解码等等 游戏运行时内 存占用
17. WEB-IR 所要解决的关键问题——重构 Unity WebGL 开发者针对 Unity 原生 版做好优化,并输出 Unity WebGL WASM 版 用 WEB-IR 编译器重 构Unity WebGL WASM 并生成 WEBIR 中间码 配合 WEB-IR 控制指 令和扩展库以支持动态 Profiling,阻塞 I/O, 虚拟上下文和虚拟协程 等特性 利用 WEB-IR 云端编译 服务和资源优化服务生 成优化 WASM 码和 Chunk 化资源,准备按 需加载
18. WEB-IR 所要解决的关键问题——动态 Profiling 载入初始 WASM, 基本函数,代码很 小,作为 Loader 加 载和启动都很快 Profiling 当遇到当前 WASM 没有的 函数时,切换到动态模式 不间断运行,并告知云端 需要更新函数 多次 Profiling 之后 WASM 内将覆盖 95%以上的函数,而且这些函数基本都 是常用的,从而达到运行效率和代码尺 寸的平衡 云端编译服务生成更新的 WASM 程序以供下次加 载
19. WEB-IR 所要解决的关键问题——资源渐进加载 大块资源文件被切割成若干个 Chunks,后续以 Chunk 为单位下载(Chunk 大小可调) 一般 Chunk只有在第一次访问时才下载(为提高访问效率,可以预加载一部分 Chunks) Chunk 下载到本地后会被以多种方式存储(这个主要取决于浏览器的能力) Chunk 里面解析出来的资源数据会被保存到内存 Cache 为高效访问 Chunk 的渐进加载是以阻塞 I/O 为前提的 云端服务会跟踪前端资源的加载 情况,为今后的预加载做准备 渐进加载无需开发者改任何 代码
20. WEB-IR 所要解决的关键问题——阻塞 I/O 思路: 当阻塞发生时,需要保存完整的调用栈信息 当 I/O 操作完成后,需要恢复以前的调用栈, 并让阻塞点之后的行为继续 构建时WEB-IR 编译器插入控制指令: 保存现场 搭建和浏览器事件循环的通道 暂停原生代码转换部分(WASM)的执行 运行时: 当阻塞操作完成,云端服务会根据请求动态生 成代码片段(code fragment)以确保正确完 成阻塞点后面的行为
21. WEB-IR 所要解决的关键问题——虚拟线程 调度器选择下一个可执行的虚拟 每一个虚拟线程都有自己的 线程,任何一个唤醒的线程离开 Context,当一个线程睡眠,他 队列开始执行,它的栈将被恢复, 的整个调用栈被保存 然后持续运行到下次睡眠 无论 JS 还是 WASM,目 前为止都不支持类似 Pthread 这样的多线程模 型 虚拟线程只是完成线程的形式, 实际是一个协程,需要执行例程 主动切换 像死循环、自旋锁这样的机制要 避免使用
22. WEB-IR 工具链——中间语言 v WEB-IR 以一种中间语言的代码格式支持整个技术框架,工具链所 build 产出的任何 代码都是基于 WEB-IR 中间语言之上 v WEB-IR 中间语言是和 WebAssembly 在相同级别的低级语言,基于的是 CFG 而不是 AST v WEB-IR 中间语言以纯文本的形式保存,这样可以方便代码底层修改和调试 v WEB-IR 中间语言可以通过源代码(目前是 C/C++)和 WebAssembly 二进制码生成
23. WEB-IR 工具链——框图 C/C++ webir-cc Browser Emscripten WEB-IR webir-run Browser Browser WASM wasm-webir
24. 我们的感悟 v 用好前人的肩膀,尽量不要重复造轮子 v 拓展思维,尝试做一些不一样的事情 v 很少有火箭科技,更没有黑魔法,在实践中不断地改良 v 时刻不要忘记真实环境的适配能力