鲁达 前几天，Cocos2d-x v3.11 已经发布，除去物理引擎升级，JSB 新内存模型，Tizen 平台支持等亮眼功能外，还有很重要的一点更新是，我们在 Web 引擎上强化了渲染器性能。总的来说，在行业对 WebGL 支持越来越好的背景下，我们大幅度强化了 WebGL 渲染器的实现，让其支持自动批处理渲染。
背景介绍
WebGL 是 OpenGL ES 的 Web 版本，它的诞生就是为了给 Web 平台带来更强劲的 2D/3D 渲染能力，可以说是为游戏行业而生。为什么说行业对 WebGL 支持越来越好呢?主要有下面几点利好：
腾讯 X5 引擎的 Android 版本在上个月完成了 blink 内核的集成，这意味着 Android 平台上 QQ 浏览器和微信浏览器也都拥有了强大的 WebGL 支持。
Android 5.0 版本以上的系统浏览器也是默认支持 WebGL 的。
而 iOS 平台的 WebGL 支持从 iOS 8 开始就已经非常完备了。
也就是说两大移动平台对 WebGL 的支持已经趋向成熟。
Cocos2d-html5 自 2012 年诞生之日起就具有完备的 WebGL 支持，和 Canvas 的表现统一性也一直保持得很好。如果接触得早，会知道早在 v3.1 中，我们就已经彻底升级过一次渲染器，将渲染和逻辑分离。而这次，在行业重大利好的情况下，我们决定再次升级 WebGL 渲染器。最终，v3.11 相较于 v3.10 在 bunnymark 测试中取得了 4 倍以上的成绩，让我们很受鼓舞。
Bunnymark 测试运行画面：
Bunnymark 测试数据(均是 WebGL 渲染模式下的数据)：
当然，这次升级还没有结束，我们测试仍然还有很大的优化空间，在后续版本中，我们将持续投入在 WebGL 渲染器的优化上，这些优化也会被同步到 Cocos Creator 中。
主要优化概述
在 v3.11 中我们完成的主要优化点如下：
1.在 Android 浏览器上默认开启 WebGL(支持的话)
目前开启 WebGL 的环境有下面这些：
WebGL 模式下，通过直接将渲染指令发送给 GPU 完成在 GPU 中的渲染，除此之外，一些计算也会在 GPU 上完成，相比 Canvas 渲染模式来说高效很多。
目前开启 WebGL 的环境有下面这些：
所有主流桌面端浏览器
iOS 8.0 以上版本的所有浏览器
QQ 浏览器内核 6.2 版本以上(包含微信最新版本)
百度浏览器 6.2 版本以上
Android 5.0 以上的系统浏览器和 WebView
2.WebGL 自动批处理渲染
众所周知，draw call(渲染指令的调用次数)是优化的重点，draw call 的降低，就等同于渲染性能提升，发热和耗电量下降。
自动批处理渲染是在 WebGL 模式下专门针对 draw call 的一种常见优化技术，在渲染游戏场景的过程中，如果发现使用同样贴图和混合模式的精灵，就会自动将他们的渲染指令合并为一个，将多个精灵在一次 draw call 中绘制出来。
在 v3.11 开发过程中，经过 5 个版本的自动批处理实现迭代，自动批处理渲染已经可以显著得降低 draw call，在完全不改动游戏的情况下即可得到明显的性能提升，如果游戏本身设计对批处理更友好，那么会得到更大的提升，大型游戏控制 draw call 在 50 以下是完全有可能的。
下面是使用了 v3.11 内测版本的腾讯欢乐斗地主 web 版本的性能优化前后对比(均为 WebGL 渲染模式)：
3.音频系统升级
除了渲染以外，我们对音频系统做了一次升级，提升了音频系统在 Android 平台上的适配度，降低了内存占用。
音频的播放方式主要分为两种：DOM Audio 和 WebAudio。之前的版本中，可以使用 WebAudio 的情况下都会选择使用 WebAudio，因为它拥有更强大的音频控制和多音轨播放能力。而在测试过程中，我们发现 WebAudio 占用内存非常高。因为 Web 环境中对音频是软解码，所有数据都保存在内存中，而 DOM Audio 的内存占用则更加稳定。所以我们在 v3.11 中，我们将 playMusic 接口改为使用 DOM Audio，playEffect 接口继续使用 WebAudio，因为音效往往比较短，所以占用内存不多。这样可以有效得降低音频资源的内存占用，下面这张图是 v3.11 优化前后的音频占用内存对比。
4.让无法批处理的 Sprite 共享全局的渲染数据缓存，并减少 WebGL 函数调用
对于无法自动批处理的 Sprite，目前已将渲染数据缓存合并为一个共享缓存，降低 WebGL 函数调用频率和缓存更新频率，这个优化对于中低端安卓机器比较有效。
5.将顶点位置运算从 GPU 转移到 CPU(Mobile friendly)
这个版本中，我们将精灵顶点位置的运算从 GPU shader 中移到了 CPU 中，减轻 GPU 的运算压力和发热量，这个改进在中低端机器上得到的效果较为明显。
未来优化方向
在这些优化之后，大家可以放心得在安卓上开启 WebGL 渲染模式，看看自己的游戏表现，相信可以让 Web 端的体验更上一层楼。
当然，优化还远远没有结束，下一个阶段我们会继续在三个方向上深入优化 Web 引擎的体验：
进一步提升 WebGL 渲染性能
降低引擎内部的计算损耗
降低引擎的内存使用
与此同时，我们的重点产品 Cocos Creator 和 Web 引擎共享同一套底层渲染机制，所以也将享受这些修改带来的优势。前一个阶段，我们在 Cocos Creator 上所投入的主要精力在于搭建数据驱动框架、组件化机制以及核心功能的迭代，目前我们已经更多得投入在优化上，相信很快也会有成果展示给大家。
游戏多发布此文仅为传递信息，不代表游戏多认同其观点或证实其描述。