Three.js 快速入门教程【十四】利用Stats.js监控渲染帧率和性能优化 ...

系列文章目录

Three.js 快速入门教程【一】开启你的 3D Web 开发之旅
Three.js 快速入门教程【二】透视投影相机
Three.js 快速入门教程【三】渲染器
Three.js 快速入门教程【四】三维坐标系
Three.js 快速入门教程【五】动画渲染循环
Three.js 快速入门教程【六】相机控件 OrbitControls
Three.js 快速入门教程【七】常见几何体类型
Three.js 快速入门教程【八】常见材质类型
Three.js 快速入门教程【九】光源类型
Three.js 快速入门教程【十】常见的纹理类型
Three.js 快速入门教程【十一】天空盒的多种实现方式
Three.js 快速入门教程【十二】外部模子加载
Three.js 快速入门教程【十三】外部模子加载后常见的处理操作
Three.js 快速入门教程【十四】利用Stats.js监控渲染帧率和性能优化

---

  

---

一、媒介

         在利用 Three.js 进行 3D 图形开发时，相识场景的渲染性能，特别是渲染帧率（FPS），对于优化和调试应用步伐至关重要。Stats.js 是一个轻量级的 JavaScript 库，用于实时监控和显示应用步伐的性能指标，其中就包罗渲染帧率。在本篇教程中，我们将学习如安在 Three.js 项目中集成 Stats.js 来检察渲染帧率。
  

---

二、熟悉渲染帧率

   在 Three.js 里，通常利用 requestAnimationFrame 函数来创建渲染循环,在这个渲染循环中，每次调用 renderer.render()函数就获取一帧的canvas图像，不停调用就形成一连动画并更新到canvas， 而帧率就是指浏览器每秒能够成功渲染并展示的动画帧数，也即每秒调用renderer.render()函数次数。
  

---

三、为什么需要关注渲染帧率？

   在Three.js开发过程中，帧率（FPS）是衡量应用性能的焦点指标。60 FPS意味着每秒渲染60帧，这是流畅动画的黄金标准。当帧率低于30 FPS时，用户会明显感受到卡顿。通过实时监控帧率，我们可以：
  

• 快速定位性能瓶颈
  
• 优化渲染性能
  
• 确保跨装备兼容性
  
• 提升用户体验
  

---

四、Stats.js 的引入与集成

4.1 初始化

1. //引入性能监视器stats.js
2. import Stats from 'three/addons/libs/stats.module.js';
4. const stats = new Stats();
5. //显示模式
6. stats.showPanel(0); // 0: fps, 1: ms, 2: mb,

复制代码

4.2 集成到 Three.js 渲染循环

1. // 主渲染循环
2. function animate() {
3.   requestAnimationFrame(animate);
4.   // 执行渲染
5.   renderer.render(scene, camera);
6.    // 更新 Stats
7.   stats.update();
8. }
9. animate();

复制代码

  通过在每次渲染后调用 stats.update()，Stats.js 会盘算并更新当前的渲染帧率等性能指标，并在页面上显示出来
  面板支持三种模式由stats.showPanel()入参决定：

• 0：帧率（FPS，Frames Per Second）：此模式下，Stats.js 会显示当前应用步伐的渲染帧率，即每秒渲染的帧数。较高的帧率通常意味着更流畅的动画和交互体验。比方在 Three.js 项目中，假如场景复杂导致帧率较低，可能就需要优化场景或硬件来提高这个数值。
  

• 1：每帧耗时（MS，Milliseconds per frame）：该模式显示渲染每一帧所花费的时间，单位为毫秒。这个指标可以资助开发者相识渲染的性能瓶颈，因为每帧耗时越短，理论上可以达到的帧率就越高。假如每帧耗时较长，可能需要查抄代码中是否有耗时的盘算或复杂的图形操作。
  

• 2：内存利用环境（MB，Megabytes of memory used）：此模式用于监控应用步伐的内存利用量，以兆字节（MB）为单位。通过观察内存利用环境，开发者可以发现是否存在内存泄漏或不合理的内存占用，及时优化代码以开释不须要的内存资源。
  
  
  
  

也可以通过setMode动态切换模式

1. stats.setMode(0);//显示帧率

复制代码

---

五、实战配置详解

5.1 自定义显示位置

1. const stats = new Stats();
2. stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom
4. //为面板添加class=stats
5. stats.dom.classList.add('stats')
6. document.body.appendChild(stats.dom);

复制代码

css改变面板位置为右上角：

1. .stats {
2. position: fixed!important;
3.   top: 20px!important;
4.   left:auto!important;
5.   right: 20px!important;
6.   z-index: 1000;
7. }

复制代码

页面元素：

运行结果：

5.2 动态调解渲染频率，优化性能

1. function adaptiveRender() {
2.   if (stats.getFPS() < 50) {
3.   //当帧率小于50，关闭渲染器自动清除功能，提高性能
4.     renderer.autoClear = false;
5.     // 其他优化措施
6.   } else {
7.     renderer.autoClear = true;
8.   }
9. }

复制代码

  renderer.autoClear 是 WebGLRenderer 的一个属性，它用于控制在每次渲染之前是否主动打扫画布的颜色缓冲区、深度缓冲区和模板缓冲区，当一连多次渲染不需要打扫画布时（如分阶段渲染），关闭主动打扫可减少 GPU ，优化性能
  5.3 性能快照对比

1. let baseMemory;
3. function startProfile() {
4.     baseMemory = stats.current().memory;
5. }
7. function endProfile() {
8.     const diff = stats.current().memory - baseMemory;
9.     console.log(`内存变化：${diff} MB`);
10. }

复制代码

5.4 主动化性能报告

1. setInterval(() => {
2.     const report = {
3.         fps: stats.current().fps,
4.         frameTime: stats.current().ms,
5.         memory: stats.current().memory
6.     };
7.     analytics.send(report); // 发送到监控平台
8. }, 10000);

复制代码

---

五、总结

          通过以上先容，我们掌握了在 Three.js 项目中集成了 Stats.js 来实时监控和显示渲染帧率。这对于优化 Three.js 应用步伐的性能非常有资助。你可以根据实际需求调解 Stats.js 的显示面板类型，检察更多性能指标，然后根据指标进行渲染优化。
  更多three.js入门知识点请关注该系列教程后续的更新。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。