深度乾貨：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上所投入的主要精力在於搭建數據驅動框架、組件化機制以及核心功能的迭代，目前我們已經更多得投入在優化上，相信很快也會有成果展示給大家。