跳至正文

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

  • Cocos

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是否可以合并。

标签:

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注