遊戲DrawCall分析利器-SpectorJS使用入門

1、什麼是DrawCall

一個DrawCall就是CPU向GPU發送一次繪製命令，例如，某個場景的DrawCall是80，代表該場景每個渲染幀內GPU需要繪製80次。每一次DrawCall都需要傳輸紋理、頂點數據以及渲染上下文切換，是非常消耗性能的操作，DarwCall過高會直接影響遊戲的整體性能，帶來卡頓、CPU佔用率高、設備發燙等問題。所以遊戲的DrawCall越低越好，應該儘可能多的將節點數據合併，減少提交和繪製次數。

如果發現DrawCall已經過高，如何判斷哪些DrawCall是可以合併的呢？Web端有個強大的工具 SpectorJS，可以很方便的查看當前渲染狀態、DrawCall等信息，以可視化的方式來幫助分析。（ SpectorJS的作者也是微軟開發的WebGL引擎 BabylonJS的開發者）

2、安裝SpectorJS

SpectorJS工具提供了npm模塊、Chrome擴展程序等多種安裝方式。本文以Chrome擴展程序爲例。

通過 Chrome瀏覽器的菜單，進入“擴展程序”界面，輸入“Spector”，然後安裝即可，如下所示。提示：如果你未搜索到Spector，請科學上網:)

3、使用SpectorJS

3.1

SpectorJS安裝完成後，Chrome瀏覽器的地址欄右側將會出現一個紅色小圖標，如下所示。默認情況下， SpectorJS處於非工作狀態。

3.2

點擊這個紅色圖標，圖標變成綠色， SpectorJS開始工作，將重新加載當前頁面，並注入調試代碼用來收集當前Web頁面的渲染信息，如下所示。

3.3

點擊這個綠色圖標，將會彈出一個提示窗口，如下所示。

3.4

點擊這個窗口上方的紅色圓圈，稍等片刻， SpectorJS收集完信息後，會自動新打開一個Chrome頁面，並展示收集到的渲染信息，如下所示。例如，本Web頁面有4個DrawCall，則SpectorJS大約生成4-6張截圖，從圖中左側圖列可以看出，每一張截圖對應一個DrawCall，通過比較不同圖片的差異，就能看出本次DrawCall究竟繪製了什麼，從而幫助判斷DrawCall是否可以合併。