索引
HT
的场景无论是3D
或者2D
均可以通过调用view.showDebugTip
方法来打开调试摘要信息,其中包含最重要的FPS
数据。根据FPS
我们可以简单的知道当前场景运行的流畅程度。此外我们还针对3D
提供更多的信息便于给出更准确的优化方向。
通过view.showDebugTip()
来打开调试信息,打开debugTip
之后HT
会在屏幕左上角增加一个div
显示信息文本,并且调用requestAnimationFrame
来进行全力
绘制,以便知道当前场景的帧率FPS
能到达多少
// 2D
graphView.showDebugTip();
// 3D
graph3dView.showDebugTip();
通过view.hideDebugTip()
来关闭调试信息,对应会移除调试div
并且不再进行requestAnimationFrame
驱动绘制
调试信息的头部包含几项最基础的信息,包括如下:
FPS
:frames per second
即帧率,表示一秒中HT
进行的绘制次数。一般如果FPS
数据是个位数就会比较感觉卡顿Datas
:场景中Data
的数量,即view.dm().getDatas()
的数量。一般我们建议能控制在千以内。万级别的Datas
单调度遍历都需要一定的开销Size
:场景画布的实际大小,画布决定了GPU
显卡到底要绘制多少的缓冲区。大部分场景的宽落在2000
以内,对于mobile
环境一般多在1000
左右或者更低的宽。另外部分情况下,例如大屏的硬件像素宽度可能高达 2 万,但实际像素是不会开具这么高,可以通过设置devicPixelRatio
来降分辨率
(在ht.js
引入之前设置):
<script>
htconfig = {
Default : {
devicePixelRatio : 0.5
}
};
</script>
<script src="ht.js"></script>
这里还有一点需要注意,mobile
端一般是需要设置上viewport
,不设置的情况下画布会撑到硬件像素点数量,再叠加上devicePixelRatio
作用会导致canvas
画布大小最终是实际硬件像素的若干倍最终导致很卡。具体设置方法如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
3D
调试信息提供了额外的一些数据,便于了解当前场景的性能指标,定位具体的性能问题:
Draw Calls
:绘制的次数统计。相同的材质通过batch
可以减少Draw Calls
所以多个Datas
可以一笔绘制。六面体由于六个面可以指定不同材质所以虽然一个Data
但是对应的Draw calls
统计是6
。该数值越小越好,通过批量手册批量来降低。Vertices
:场景中顶点总数量。该数值越小越好。该数值跟Faces
是正相关Faces
:场景中的总面数,该数值越小越好。面数是3D
场景很重要的指标,考虑web
的流畅性我们一般建议是控制面数在10
万级别比较合适。超过百万的面一般除非是特定高端显卡驱动,否则大部分建议设计师通过3D
设计工具来减面以优化流畅度(可以通过贴图高清来提升场景品质)Lines
:绘制的线条总数,包括物体线宽和polyline
等产生的线条Buffer Count
:HT
中创建的用于描述物体顶点,uv
等信息的Buffer
数量2D Dynamic Textures
:每帧根据2D
矢量动态生成的贴图数量;HT
中用2D json
矢量来做贴图时,本质上会把2D矢量
绘制到位图上,该绘制是性能开销比较重大。一般如果矢量没有动态变化信息,我们建议设置上texture.cache
来通知HT
把矢量缓存下来不再更新,具体参见:3D手册中对texture.cache
的说明2D Dynamic Pixels
:每帧根据2D
矢量动态生成的贴图像素点总和