幾天，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引擎是一個功能強大、跨平臺且易于學習和使用的游戲開發引擎，適用于各種規模的游戲項目，并為開發人員提供了豐富的工具和資源來加快游戲開發過程。