cocos creator 3.8如何在代码中打印drawcall,fps

Profiler 模块

新版的cocos creator3D已经把dc,fps统一放到这个Profiler模块里了,在源码的位置是:
Web路径 :engine/cocos/profiler/profiler.ts
原生路径 :engine/native/cocos/profiler/Profiler.cp

Profiler 是 Cocos Creator 3D 引擎内置的性能分析工具,主要用于实时监控游戏运行时的核心指标,包括:

  • 核心状态:FPS、帧耗时、GPU 类型、多线程状态等。

  • 对象统计:渲染节点数量、对象实例数量及其峰值。

  • 内存统计:内存分配总量、对象计数及峰值。

  • 性能统计:各代码块(如渲染、逻辑)的耗时分布及调用频率。

profiler.stats

我们核心状态信息都在这个profiler.stats里,如果项目需要再界面上显示dc,fps等信息,可以在这里获取

stats 字段全解析

statsIProfilerState 类型的对象,用于存储引擎运行时的核心性能指标。以下是其所有字段的详细含义:

1. fps (帧率)

作用 :实时显示每秒渲染的帧数(Frames Per Second)。
理想值 :≥ 60(流畅),30 ≤ FPS < 60(可接受),< 30(卡顿)。
监控点 :游戏整体性能的核心指标,反映设备负载和代码效率。
数据来源 :通过 PerfCounter 每帧计算时间差统计。

2. draws (绘制调用次数)

作用 :统计每帧的 Draw Call 数量。
优化关键 :Draw Call 过多会显著降低渲染性能(尤其在移动端)。
合理范围 :移动端建议 ≤ 100,PC 端可放宽至 200~300。
数据来源 :通过 device.numDrawCalls 获取 GPU 提交的绘制指令次数。

3. frame (帧时间)

作用 :统计每帧的总耗时(毫秒)。
计算公式帧时间 = 1000 / FPS
性能瓶颈 :若帧时间波动大(如突增至 50ms),需定位耗时操作。
数据来源 :记录从 beforeUpdateafterPresent 的完整帧生命周期时间。

4. instances (实例化数量)

作用 :统计每帧的 GPU Instancing 实例化对象数量。
优化手段 :高 instances 值表明有效利用了实例化技术,降低 Draw Call。
合理值 :根据场景复杂度动态调整,无固定上限。
数据来源 :通过 device.numInstances 获取实例化渲染的提交次数。

5. tricount (三角形数量)

作用 :统计每帧渲染的 三角形总数
性能影响 :三角形过多会导致顶点处理负载过高(尤其移动端)。
合理值 :移动端建议 ≤ 10 万/帧,PC 端可适当放宽。
数据来源 :通过 device.numTris 获取 GPU 处理的三角形总数。

6. logic (逻辑耗时)

作用 :统计游戏逻辑( update 生命周期)的耗时(毫秒)。
优化重点 :若 logic 耗时高,需检查脚本中的复杂计算或循环。
合理范围 :建议 ≤ 5ms/帧。
数据来源 :记录 beforeUpdateafterUpdate 的时间差。

7. physics (物理耗时)

作用 :统计物理引擎计算(碰撞检测、刚体模拟)的耗时(毫秒)。
优化手段 :简化碰撞体形状、减少物理对象数量。
合理范围 :建议 ≤ 5ms/帧。
数据来源 :记录 beforePhysicsafterPhysics 的时间差。

8. render (渲染耗时)

作用 :统计渲染管线(场景裁剪、材质提交、Draw Call 执行)的耗时(毫秒)。
优化关键 :高 render 值需优化材质复杂度、减少渲染对象。
合理范围 :建议 ≤ 10ms/帧。
数据来源 :记录 beforeDrawafterRender 的时间差。

9. present (呈现耗时)

作用 :统计将帧缓冲区提交到屏幕的耗时(毫秒)。
平台差异 :移动端受垂直同步(VSync)影响较大。
异常值 :若 present 突增,可能因分辨率过高或 GPU 负载过载。
数据来源 :记录 afterRenderafterPresent 的时间差。

10. textureMemory (纹理内存)

作用 :统计显存中 纹理资源 占用的内存总量(单位:MB)。
优化手段 :使用压缩纹理格式(如 ASTC、PVRTC),及时释放未用纹理。
合理值 :根据设备显存容量动态控制。 • 数据来源 :通过 device.memoryStatus.textureSize 获取。

11. bufferMemory (缓冲区内存)

作用 :统计显存中 缓冲区对象 (顶点/索引/Uniform 缓冲区)占用的内存总量(单位:MB)。
优化手段 :减少动态缓冲区更新频率,合并小缓冲区。
数据来源 :通过 device.memoryStatus.bufferSize 获取。

关键代码逻辑

数据更新机制

afterPresent 方法中,通过以下代码更新统计值:

// 更新 Draw Call、Instance、三角形数量
this._profilerStats.draws.counter.value = device.numDrawCalls;
this._profilerStats.instances.counter.value = device.numInstances;
this._profilerStats.tricount.counter.value = device.numTris;

// 更新显存占用
this._profilerStats.bufferMemory.counter.value = device.memoryStatus.bufferSize / (1024 * 1024);
this._profilerStats.textureMemory.counter.value = device.memoryStatus.textureSize / (1024 * 1024);

性能数据渲染

通过 generateNode 方法创建 MeshRendererMaterial ,将性能数据绘制到屏幕:

// 创建专用材质和网格
this._meshRenderer.material = _material; // 使用内置 shader 'util/profiler'
this._meshRenderer.node.layer = Layers.Enum.PROFILER; // 指定渲染层级

应用场景与优化建议

  1. 卡顿排查 :若 fps 骤降,结合 logic / render 耗时定位瓶颈。

  2. 内存泄漏 :监控 textureMemory 是否持续增长,及时释放未引用资源。

  3. 渲染优化 :高 draws 时启用合批(Batching)或实例化(Instancing)。

  4. 物理优化 :高 physics 时简化碰撞体或降低物理更新频率。

通过 cclegacy.profiler.showStats() 可实时查看性能面板,深入分析引擎运行状态。

2赞

专业对口了属于是,推荐使用cc_debuger_realtime,集成了FPS预览:

除此之外,还可以实时查看节点树、修改节点和组件的内容、查看动态图集和静态图集、拦截日志、查看手机缓存目录的文件、实时预览切换spine动画、龙骨动画、Animation动画,甚至能实时注入JS代码到运行时中去执行。

以上功能都支持远程调试。

欢迎免费试用:【cc_debuger_realtime】重磅工具插件,cocoser 必备,免费试用

1赞

你这个比我牛多了

解释得很详细,优化是多方面指标的共同成果