深度干货：Cocos2d-x v3.11在HTML5方向的优化
前几天，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开始就已经非常完备了。
Cocos2d-html5自2012年诞生之日起就具有完备的WebGL支持，和Canvas的表现统一性也一直保持得很好。如果接触得早，会知道早在v3.1中，我们就已经彻底升级过一次渲染器，将渲染和逻辑分离。而这次，在行业重大利好的情况下，我们决定再次升级WebGL渲染器。最终，v3.11相较于v3.10在bunnymark测试中取得了4倍以上的成绩，让我们很受鼓舞。
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上所投入的主要精力在于搭建数据驱动框架、组件化机制以及核心功能的迭代，目前我们已经更多得投入在优化上，相信很快也会有成果展示给大家。