【性能优化黑科技·认知篇】你的三维场景为什么卡?先搞懂这几个指标!

by STANCH

"这个场景好卡!鼠标拖了它不动啊!"

这是很多三维开发人员会收到的真实反馈,就比如作者本人,在参与的智慧场馆项目中,就接到了这样的三维场景需求:在一个可容纳数万人员的奥体场馆中,需要用人员模型实时渲染其分布,并实现整个系统的流畅交互。

什么是流畅交互?

本文将从三维场景性能指标入手,依托 Mapmost SDK for WebGL 积累的实战经验,为大家详细拆解常用的性能指标盘点行之有效的监测手段分享实用优化策略

Mapmost SDK for WebGL体育馆人流仿真

一、性能监测的指标

#帧率(FPS)

帧率表示的是每秒钟显示的图像帧数量,如一个动画或视频的帧率为60 FPS,那么它每秒钟会播放60帧图像。

在三维场景中,帧率小于30FPS时交互明显卡顿,3044FPS时为流畅,4559FPS为高度流畅,60FPS以上为极致流畅。

#内存占用

当计算机运行时,应用程序以及正在使用的数据会被加载到内存中,这样处理器可以快速访问这些数据。如果内存不足,计算机可能会在运行程序时变得迟缓,出现"卡顿"现象,这是因为系统不得不频繁地在内存与硬盘之间进行数据交换。

#CPU/GPU占用率

CPU和GPU占用率是衡量硬件资源使用效率的关键指标,直接反映了三维场景对系统资源的消耗情况。

通常情况下,当我们在运行游戏或者高负荷应用时,显卡的占用率可能会达到70%至90%,而CPU的占用率在同样场景下常常维持在50%至80%之间。

在绝大多数情况下,低于30%的占用率表明硬件未被充分利用,而高于90%则可能导致系统卡顿或崩溃,因此,合理控制占用率显得尤为重要。

#绘制调用(DrawCall)

绘制调用是渲染管线 中的一个重要概念,指的是CPU向GPU发送的一个绘制命令,告诉GPU:"请根据我提供的数据,画一个物体(或一部分物体)。但是DrawCall越多,CPU和GPU之间的通信越频繁,性能就会下降。在实现体育馆人流时,如果不加优化,加载30000人员模型意味着30000次DrawCall的调用,场景卡顿的原因也来源于此。

二、性能监测的方式

#浏览器开发者工具Chrome Dev Tools

在谷歌浏览器中按F12打开开发者工具 切换到 Performance 下可以监测浏览器页面各项性能指标,在这里能看到白屏时间、FPS、资源加载时间线、内存变化曲线等信息。点击录制,开发者工具会在网页运行时捕获性能指标。

白屏时间,图中约为150ms

谷歌浏览器Performance面板

打开开发者工具后,使用快捷键Ctrl+Shift+P ,在弹出的对话框中输入fps,选择"Show frames per second(FPS) meter",浏览器左上角就会实时显示帧率曲线。**注意:**开发者工具不能关闭。

显示实时帧率

#JS性能监测工具stats.js

这款工具是 Three.js 作者开发的,可以通过CDN和NPM的方式引入,用于实时监测Web应用程序的性能指标,帮助开发者快速了解页面渲染、CPU占用率、内存使用等关键数据。

分别表示帧率、渲染一帧所需的毫秒数、占用的内存

三、性能优化的方式

性能优化是平衡视觉效果与运行效率的关键。无论是海量数据渲染、动态交互还是多端适配,均需通过系统性策略实现流畅体验,下面简单介绍几种性能优化的方式,在后面几篇文章会给大家详细讲。

  • 细节层次(LOD):通过不同层级使用不同的细节模型来减少渲染时的内容,从而降低性能开销。

Mapmost SDK for WebGL加载具有LOD的3DTiles

  • 合并几何体:将多个几何体合并为一个几何体可以减少绘制调用(DrawCall)次数。如,Mapmost SDK for WebGL通过合并几何体和纹理实现千万级构件高性能加载。

Mapmost SDK for WebGL预制构件加载

  • **纹理压缩与管理:**通过压缩算法压缩纹理减少纹理内存占用和带宽消耗,提高渲染效率,如,Mapmost SDK for WebGL支持KTX2纹理格式的模型加载,实现倾斜的高性能加载。
  • **利用实例化渲染:**通过单次绘制调用(Draw Call)在GPU上批量渲染多个相同的对象,减少了CPU与GPU之间的通信开销,显著提高渲染性能。
  • **控制渲染频率:**对于一些静态或变化缓慢的内容,可以适当降低渲染频率以节省资源。

在三维场景的开发中,性能是不可忽视的重要指标。本文介绍了关键的性能指标,如帧率、内存占用、及CPU/GPU利用率等。通过了解这些指标,开发者能够识别潜在的性能瓶颈,从而进行有效的优化。通过合理的性能监测和优化手段 ,结合Mapmost SDK for WebGL产品的成功案例 ,我们可以实现流畅的三维场景交互体验

持续关注性能,不仅是技术发展的必然要求,更是提升用户满意度的关键所在。您可以**此处跳转官网体验**Mapmost SDK for WebGL产品!

关注 Mapmost,持续更新 GIS、三维美术、计算机技术干货

Mapmost 是一套以三维地图和时空计算为特色的数字孪生底座平台,包含了空间数据管理工具(Studio)、应用开发工具(SDK)、应用创作工具(Alpha)。平台能力已覆盖城市时空数据的集成、多源数据资源的发布管理,以及数字孪生应用开发工具链,满足企业开发者用户快速搭建数字孪生场景的切实需求,助力实现行业领先。

更多应用场景,点击此处前往Mapmost官网体验!

相关推荐
五点六六六4 小时前
前端常见的性能指标采集
前端·性能优化·架构
软件测试-阿涛4 小时前
【性能测试】Jmeter+Grafana+InfluxDB+Prometheus Windows安装部署教程
测试工具·jmeter·性能优化·压力测试·grafana·prometheus
海底火旺6 小时前
单页应用路由:从 Hash 到懒加载
前端·react.js·性能优化
鼠鼠我捏,要死了捏8 小时前
深入解析MongoDB分片原理与运维实践指南
mongodb·性能优化·sharding
拾光拾趣录9 小时前
内存泄漏的“隐形杀手”
前端·性能优化
鼠鼠我捏,要死了捏1 天前
基于Redisson实现高并发分布式锁性能优化实践指南
性能优化·分布式锁·redisson
笑衬人心。1 天前
后端项目中大量 SQL 执行的性能优化
sql·spring·性能优化
贵州晓智信息科技1 天前
Unity 性能优化全攻略
unity·性能优化·游戏引擎
UWA1 天前
UWA DAY 2025 游戏开发者大会|全议程
游戏·unity·性能优化·游戏开发·uwa·unreal engine
未来之窗软件服务1 天前
网站访问信息追踪系统在安全与性能优化中的关键作用——网络安全—仙盟创梦IDE
安全·web安全·性能优化·仙盟创梦ide·东方仙盟