游戏DrawCall分析利器-SpectorJS使用入门

冷不防 2023-06-12 08:34 20阅读 0赞

## 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”，然后安装即可，如下所示。![f0719de28e842eb011c7c18e73606a60.png][]提示：如果你未搜索到Spector，请科学上网:)

## 3、使用SpectorJS ##

#### 3.1 ####

`SpectorJS`安装完成后，Chrome浏览器的地址栏右侧将会出现一个红色小图标，如下所示。![76846786e555d0131294d255b39928a6.png][]默认情况下， `SpectorJS`处于非工作状态。

#### 3.2 ####

点击这个红色图标，图标变成绿色， `SpectorJS`开始工作，将重新加载当前页面，并注入调试代码用来收集当前Web页面的渲染信息，如下所示。![c0cd57740fd44003fbcac1e096ec77a5.png][]

#### 3.3 ####

点击这个绿色图标，将会弹出一个提示窗口，如下所示。![9eda795e14c3be421fe616194946ec41.png][]

#### 3.4 ####

点击这个窗口上方的红色圆圈，稍等片刻， `SpectorJS`收集完信息后，会自动新打开一个Chrome页面，并展示收集到的渲染信息，如下所示。![947c1678985356fb7a4720e22fef23ee.png][]例如，本Web页面有4个DrawCall，则SpectorJS大约生成4-6张截图，从图中左侧图列可以看出，每一张截图对应一个DrawCall，通过比较不同图片的差异，就能看出本次DrawCall究竟绘制了什么，从而帮助判断DrawCall是否可以合并。

[f0719de28e842eb011c7c18e73606a60.png]: /images/20230531/9d279f53d95e4984959cca911ed76499.png
[76846786e555d0131294d255b39928a6.png]: /images/20230531/e11ce26d1023473b8f197492c2d7c146.png
[c0cd57740fd44003fbcac1e096ec77a5.png]: /images/20230531/572dbb9d852847879590059507476913.png
[9eda795e14c3be421fe616194946ec41.png]: /images/20230531/421942466f044745a956649a149d1752.png
[947c1678985356fb7a4720e22fef23ee.png]: /images/20230531/fdc22ac71ddd4552ade21137a7973fbd.png