几天，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 上所投入的主要精力在于搭建数据驱动框架、组件化机制以及核心功能的迭代，目前我们已经更多得投入在优化上，相信很快也会有成果展示给大家。

游戏多发布此文仅为传递信息，不代表游戏多认同其观点或证实其描述。

ocos引擎是一个开源的游戏开发引擎，由Cocos公司开发和维护。它提供了一套全面的工具和框架，用于创建2D和3D游戏、应用程序和其他交互式内容。Cocos引擎支持跨平台开发，可在多个主流平台上运行，包括iOS、Android、Windows、Mac和Web等。

以下是Cocos引擎的一些关键特点和组件：

Cocos2d-x：Cocos2d-x是Cocos引擎的2D游戏开发框架，使用C++编写。它提供了高性能的渲染引擎、场景管理、动画、碰撞检测、粒子效果等功能，使开发人员可以轻松创建各种类型的2D游戏。

Cocos Creator：Cocos Creator是Cocos引擎的可视化编辑器和开发环境，用于创建2D和3D游戏。它支持基于组件的开发模式，提供了可视化的场景编辑器、动画编辑器、脚本编辑器等工具，使开发人员可以直观地设计、构建和调整游戏内容。

Cocos2d-JS：Cocos2d-JS是Cocos引擎的JavaScript版本，可用于开发基于Web的游戏和应用程序。它结合了Cocos2d-x和HTML5技术，支持使用JavaScript或TypeScript编写游戏逻辑，并可以在Web浏览器中运行。

Cocos Creator 3D：Cocos Creator 3D是Cocos引擎的3D游戏开发工具，提供了可视化的编辑器和功能强大的渲染引擎。它支持创建3D场景、模型、动画、物理效果等，并具有与Cocos Creator相似的工作流程和开发环境。

Cocos Play：Cocos Play是Cocos引擎的移动游戏社交平台，提供了用户管理、社交分享、排行榜、游戏存档等功能，使开发人员可以更好地与用户进行互动和营销。

总体而言，Cocos引擎是一个全面、灵活和跨平台的游戏开发工具，适用于各种类型和规模的游戏项目。它具有强大的性能和丰富的功能，同时提供了易于学习和使用的工具和文档，为开发人员提供了一个强大的平台来实现他们的创意和构建高质量的游戏。

它也有以下优点：

跨平台支持：Cocos引擎支持多个平台，包括iOS、Android、Windows、Mac和Web等。这使得开发人员可以使用相同的代码库同时发布游戏到不同的平台，节省了开发时间和资源成本。

强大的性能：Cocos引擎具有高效的渲染引擎和优化的游戏逻辑处理能力，可以实现流畅的游戏性能。它使用了底层的图形库和硬件加速技术，可以处理复杂的游戏场景和特效。

丰富的功能和工具：Cocos引擎提供了丰富的功能和工具，包括图形渲染、动画、物理引擎、碰撞检测、音频管理等。这些功能可以帮助开发人员快速创建各种类型的游戏，并提供了灵活的自定义选项。

容易上手和学习：Cocos引擎使用简单易懂的API和脚本语言（如C++和Lua），使得开发人员可以迅速上手并快速实现想法。它还提供了详细的文档和示例代码，以及活跃的社区支持，可以帮助开发人员解决问题和获取帮助。

开发效率高：Cocos引擎提供了可视化编辑器和预览工具，使开发人员能够实时预览和调试游戏内容。它还支持快速迭代和热更新，可以在开发过程中实时修改和调整游戏内容，提高了开发效率。

支持多种开发语言：Cocos引擎支持多种编程语言，包括C++、Lua、JavaScript和TypeScript等。这使得开发人员可以根据自己的喜好和经验选择最适合他们的语言进行游戏开发。

Cocos引擎是一个功能强大、跨平台且易于学习和使用的游戏开发引擎，适用于各种规模的游戏项目，并为开发人员提供了丰富的工具和资源来加快游戏开发过程。