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）。平台能力已覆盖城市时空数据的集成、多源数据资源的发布管理，以及数字孪生应用开发工具链，满足企业开发者用户快速搭建数字孪生场景的切实需求，助力实现行业领先。