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监控渲染帧率和性能优化
文章目录
- 系列文章目录
- 一、前言
- 二、认识渲染帧率
- 三、为什么需要关注渲染帧率?
- 四、Stats.js 的引入与集成
- 4.1 初始化
- 4.2 集成到 Three.js 渲染循环
- 五、实战配置详解
- 5.1 自定义显示位置
- 5.2 动态调整渲染频率,优化性能
- 5.3 性能快照对比
- 5.4 自动化性能报告
- 五、总结
一、前言
在使用 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 初始化
//引入性能监视器stats.js
import Stats from 'three/addons/libs/stats.module.js';const stats = new Stats();
//显示模式
stats.showPanel(0); // 0: fps, 1: ms, 2: mb,
4.2 集成到 Three.js 渲染循环
// 主渲染循环
function animate() {requestAnimationFrame(animate);// 执行渲染renderer.render(scene, camera);// 更新 Statsstats.update();
}
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动态切换模式
stats.setMode(0);//显示帧率
五、实战配置详解
5.1 自定义显示位置
const stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom//为面板添加class=stats
stats.dom.classList.add('stats')
document.body.appendChild(stats.dom);
css改变面板位置为右上角:
.stats {position: fixed!important;top: 20px!important;left:auto!important;right: 20px!important;z-index: 1000;
}
页面元素:
运行效果:
5.2 动态调整渲染频率,优化性能
function adaptiveRender() {if (stats.getFPS() < 50) {//当帧率小于50,关闭渲染器自动清除功能,提高性能renderer.autoClear = false;// 其他优化措施} else {renderer.autoClear = true;}
}
renderer.autoClear 是 WebGLRenderer 的一个属性,它用于控制在每次渲染之前是否自动清除画布的颜色缓冲区、深度缓冲区和模板缓冲区,当连续多次渲染不需要清除画布时(如分阶段渲染),关闭自动清除可减少 GPU ,优化性能
5.3 性能快照对比
let baseMemory;function startProfile() {baseMemory = stats.current().memory;
}function endProfile() {const diff = stats.current().memory - baseMemory;console.log(`内存变化:${diff} MB`);
}
5.4 自动化性能报告
setInterval(() => {const report = {fps: stats.current().fps,frameTime: stats.current().ms,memory: stats.current().memory};analytics.send(report); // 发送到监控平台
}, 10000);
五、总结
通过以上介绍,我们掌握了在 Three.js 项目中集成了 Stats.js 来实时监控和显示渲染帧率。这对于优化 Three.js 应用程序的性能非常有帮助。你可以根据实际需求调整 Stats.js 的显示面板类型,查看更多性能指标,然后根据指标进行渲染优化。
更多three.js入门知识点请关注该系列教程后续的更新。
相关文章:
Three.js 快速入门教程【十四】使用Stats.js监控渲染帧率和性能优化
系列文章目录 Three.js 快速入门教程【一】开启你的 3D Web 开发之旅 Three.js 快速入门教程【二】透视投影相机 Three.js 快速入门教程【三】渲染器 Three.js 快速入门教程【四】三维坐标系 Three.js 快速入门教程【五】动画渲染循环 Three.js 快速入门教程【六】相机控件 Or…...
基于RapidOCR与DeepSeek的智能表格转换技术实践
基于RapidOCR与DeepSeek的智能表格转换技术实践 一、技术背景与需求场景 在金融分析、数据报表处理等领域,存在大量图片格式的表格数据需要结构化处理。本文介绍基于开源RapidOCR表格识别与DeepSeek大模型的智能转换方案,实现以下典型场景: …...
简单多状态 dp 问题(典型算法思想)—— OJ例题算法解析思路
目录 一、面试题 17.16. 按摩师 - 力扣(LeetCode) 算法代码: 代码思路解析: 问题分析: 动态规划定义: 状态转移方程: 初始化: 填表: 返回值: 优化空…...
【电路笔记 TMS320C6***DSP】外部存储器接口 A EMIFA向FPGA(作为异步存储器)写入数据的示例
目录 DSP和FPGA的连接DSP端:传输数据给FPGAFPGA端:接收数据 EMIFA(External Memory Interface A)的“异步存储器”(Asynchronous Memory)指的是那些不与系统时钟同步进行读写操作的外部存储设备。这类存储器…...
pgsql 查看数据库、表、索引大小等
查询数据库大小 -- 查询单个数据库大小 select pg_size_pretty(pg_database_size(postgres)) as size;-- 查询所有数据库大小 select datname, pg_size_pretty (pg_database_size(datname)) AS size from pg_database; 查询表大小 -- 查询单个表大小 select pg_size_pretty(p…...
物联网感知层采集的数据 经过etl 后 ,输送给ai 训练模型 和模型本身调优
在物联网(IoT)系统中,感知层采集的数据经过 ETL(Extract, Transform, Load) 处理后,可以作为 AI 模型的训练数据,用于模型训练和调优。以下是实现这一过程的详细步骤和技术方案: 一、数据流程概述 数据采集:通过传感器和物联网设备采集原始数据。ETL 处理:对原始数据…...
C语言基础
一、基础 C语言文件 后缀 .c为源文件 .h为头文件 以 Visual studio 为例右键点击源文件点击添加,新建项 .c为C语言文件,.cpp为C文件 后缀不同编译器会按照不同的编译语法进行编译 .cpp以C语法 第一个程序 #include <stdio.h> //包含 st…...
pinginfoview网络诊断工具中文版
介绍 pinginfoview中文版本是一款实用的网络诊断工具,它专为中文用户设计,提供了方便易用的界面,使得在Windows环境下进行ping测试变得更加简单。该工具是由NirSoft开发的一款免费的桌面应用程序,尽管官方可能并未正式发布中文版…...
Anyting LLM LLM温度设置范围
在Anything LLM中,LLM(Language Model)的温度设置是一个关键参数,它影响着模型生成文本时的随机性和确定性。关于Anything LLM的LLM温度设置范围,虽然没有官方的明确数值范围说明,但通常温度参数的设置遵循…...
鸿蒙Android4个脚有脚线
效果 min:number122max:number150Row(){Stack(){// 底Text().border({width:2,color:$r(app.color.yellow)}).height(this.max).aspectRatio(1)// 长Text().backgroundColor($r(app.color.white)).height(this.max).width(this.min)// 宽Text().backgroundColor($r(app.color.w…...
RecyclerView与ListView的优化
RecyclerView与ListView的优化 一、基础概念对比 1.1 ListView与RecyclerView概述 ListView和RecyclerView都是Android中用于展示列表数据的重要控件,但RecyclerView是更现代化的解决方案,提供了更多的灵活性和性能优势。 ListView特点 Android早期…...
【人工智能】GPT-4 vs DeepSeek-R1:谁主导了2025年的AI技术竞争?
前言 2025年,人工智能技术将迎来更加激烈的竞争。随着OpenAI的GPT-4和中国初创公司DeepSeek的DeepSeek-R1在全球范围内崭露头角,AI技术的竞争格局开始发生变化。这篇文章将详细对比这两款AI模型,从技术背景、应用领域、性能、成本效益等多个方…...
2025年Cursor最新安装使用教程
Cursor安装教程 一、Cursor下载二、Cursor安装三、Cursor编辑器快捷键(1) 基础编辑快捷键(2) 导航快捷键(3) 其他常用快捷键 一、Cursor下载 Cursor官方网站(https://www.cursor.com/ ) 根据自己电脑操作系统选择对应安装包 二、Cursor安装 下载完成后…...
原码、反码和补码的介绍和区别
在计算机中,有符号整数的表示方法主要有 原码、反码和补码,它们解决了二进制数表示正负数及简化运算的问题。以下是分步说明: 1. 原码(Sign-Magnitude) 定义:最高位为符号位(0正1负)…...
STM32 进阶 定时器
在stm32中定时器大概分为4类 1、系统定时器:属于arm内核,内嵌在NVIC中 2、高级定时器:可以用来刹车和死区 3、通用定时器:可以用来输出pwm方波 4、基本定时器:只能记数 系统定时器注意: 1、系统定时器…...
山东大学:《DeepSeek应用与部署》
大家好,我是吾鳴。 今天吾鳴要给大家分享一份由山东大学出版的DeepSeek报告——《DeepSeek应用与部署》,这份报告讲述了AIGC的发展历程,DeepSeek应用场景和DeepSeek如何本地化部署。报告一共80页PPT,文末有完整版下载地址。 内容摘…...
【无标题】FrmImport
文章目录 前言一、问题描述二、解决方案三、软件开发(源码)四、项目展示五、资源链接 前言 我能抽象出整个世界,但是我不能抽象你。 想让你成为私有常量,这样外部函数就无法访问你。 又想让你成为全局常量,这样在我的…...
Android14 OTA升级
因Vendor Freeze的缘故,若开启Non-AB OTA, 则会遇到交叉编译vendor和system的增量升级包时需要检查fingerprint而导致编译失败,从而无法做到增量升级包升级。高版本一般都是打开AB模式。 AB 和 non AB 切换相关宏 /vendor_ap_s0/device/mediatek/system/mssi_64_cn/SystemCo…...
监听 RabbitMQ 延时交换机的消息数、OpenFeign 路径参数传入斜杠无法正确转义
背景 【MQ】一套为海量消息和高并发热点消息,提供高可用精准延时服务的解决方案 我现在有一个需求,就是监听 RabbitMQ 一个延时交换机的消息数,而 RabbitTemplate 是不存在对应的方法来获取的。 而我们在 RabbitMQ 的控制台却可以发现延时交…...
宇树科技嵌入式面试题及参考答案(春晚机器人的公司)
目录 设计一个带看门狗(Watchdog)的嵌入式系统,描述故障恢复流程 在资源受限的 MCU 上实现 OTA 升级功能,描述关键设计点 如何实现 OTA(空中升级)功能?描述固件校验和回滚机制的设计要点 推挽输出与开漏输出的区别?举例说明其在 GPIO 控制中的应用 UART、SPI、I2C …...
Linux内核自定义协议族开发指南:理解net_device_ops、proto_ops与net_proto_family
在Linux内核中开发自定义协议族需要深入理解网络协议栈的分层模型。net_device_ops、proto_ops和net_proto_family是三个关键结构体,分别作用于不同的层次。本文将详细解析它们的作用、交互关系及实现方法,并提供一个完整的开发框架。 一、核心结构体的作用与层级关系 struct…...
【Go语言快速上手】第一部分:数据类型(数组、切片、映射)与控制语句
文章目录 一、复合类型Ⅰ 数组1. 语法2. 示例3. 特点4. 数组的传递 Ⅱ 切片1. 定义2. 语法3. 示例4. 特点5. 切片的创建6. 切片的操作切片的扩展切片的拷贝 Ⅲ 映射1. 定义2. 语法3. 示例4. 特点5. 映射的创建6. 映射的操作示例:插入、访问和删除判断键是否存在示例…...
系统架构评估中的重要概念
(1)敏感点(Sensitivity Point) 和权衡点 (Tradeoff Point)。敏感点和权衡点是关键的架构 决策。敏感点是一个或多个构件(和/或构件之间的关系)的特性。研究敏感点可使设计人员 或分析员明确在搞清楚如何实现质量目标时应注意什么。权衡点是影响多个质量属性的特性, …...
shell逐行读取文件 远程操作服务器
代码示例 while read ip; doecho "uninstalling test programs in $line" ssh root$ip bash -s < remote_remove_tool.shdone < installed_ips总结 ✅ 作用: 逐行读取 installed_ips 文件中的 IP 地址通过 SSH 连接到远程服务器ÿ…...
盛铂科技SCP4000射频微波功率计与SPP5000系列脉冲峰值 USB功率计 区别
在射频(RF)和微波测试领域,快速、精准的功率测量是确保通信系统、雷达、卫星设备等高性能运行的核心需求。无论是连续波(CW)信号的稳定性测试,还是脉冲信号的瞬态功率分析,工程师都需要轻量化、…...
【每日八股】计算机网络篇(三):IP
目录 DNS 查询服务器的基本流程DNS 采用 TCP 还是 UDP,为什么?默认使用 UDP 的原因需要使用 TCP 的场景?总结 DNS 劫持是什么?解决办法?浏览器输入一个 URL 到显示器显示的过程?URL 解析TCP 连接HTTP 请求页…...
vtk 3D坐标标尺应用 3D 刻度尺
2d刻度尺 : vtk 2D 刻度尺 2D 比例尺-CSDN博客 简介: 3D 刻度尺,也是常用功能,功能强大 3D 刻度尺 CubeAxesActor vtkCubeAxes调整坐标轴的刻度、原点和显示效果,包括关闭小标尺、固定坐标轴原点,以及设置FlyMode模…...
探秘基带算法:从原理到5G时代的通信变革【十】基带算法应用与对比
文章目录 三、算法在现代通信系统中的应用3.1 5G 通信中的应用3.1.1 信道编码与调制解调3.1.2 大规模 MIMO 技术3.1.3 案例分析:5G 基站与终端实现 3.2 卫星通信中的应用3.2.1 抗干扰与纠错编码3.2.2 信号处理与调制解调3.2.3 案例分析:卫星通信系统实例…...
消费级、工业级、汽车级、军工级、航天级芯片区别对比
汽车电子行业,经常会由于降本原因,听到“消规、工规、车规”方面的讨论。常见的芯片等级一般是按照使用温度、辐射、抗干扰等来分级。等级分为以下5类: 民用级(消费级)、工业级、汽车级(车规级)、军工级、航…...
迷你世界脚本背包接口:Backpack
背包接口:Backpack 彼得兔 更新时间: 2023-10-25 10:29:21 具体函数名及描述如下: 序号 函数名 函数描述 1 getBackpackBarIDRange(...) 获取道具背包栏ID范围(起始ID~结束ID) 2 getBackpackBarSize(...) 获取道具背包栏大小 3 setGridItem(.…...
javaSE基础
java跨平台性: Java 语言编写的程序,一次编译后,可以在多个操作系统上运行。是由于其增加了一个中间件 JVM,JVM 负责将 Java 字节码转换为特定平台的机器码,并执行。 Java 程序从源代码到运行需要经过三步:…...
电脑的系统版本是windows7的,下载pycharm的哪个版本比较好呢?
李升伟 整理 在Windows 7系统上选择PyCharm版本时,需综合考虑系统兼容性、Python版本适配性以及开发需求。以下是具体建议和操作指南: 1. 选择PyCharm的兼容版本 推荐版本:PyCharm 2020.3.5及之前的旧版本。 原因:自2021年起&a…...
【前端基础】3、HTML的常用元素(h、p、img、a、iframe、div、span)、不常用元素(strong、i、code、br)
HTML结构 一个HTML包含以下部分: 文档类型声明html元素 head元素body元素 例(CSDN): 一、文档类型声明 HTML最一方的文档称为:文档类型声明,用于声明文档类型。即:<!DOCTYPE html>…...
安装mysql
1、安装数据库 下载链接 https://downloads.mysql.com/archives/community/ 下载zip安装包,解压到某个路径下,将bin文件夹添加到系统环境变量 。 然后终端输入指令 mysql --version 验证 2、初始化数据库 打开命令提示符(以管理员身份&am…...
关于 QPalette设置按钮背景未显示出来 的解决方法
若该文为原创文章,转载请注明原文出处 本文章博客地址:https://hpzwl.blog.csdn.net/article/details/146047054 长沙红胖子Qt(长沙创微智科)博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV…...
记一次ScopeSentry搭建
介绍 Scope Sentry是一款具有资产测绘、子域名枚举、信息泄露检测、漏洞扫描、目录扫描、子域名接管、爬虫、页面监控功能的工具,通过构建多个节点,自由选择节点运行扫描任务。当出现新漏洞时可以快速排查关注资产是否存在相关组件。 目前功能 插件系…...
【每日学点HarmonyOS Next知识】Web Header更新、状态变量嵌套问题、自定义弹窗、stack圆角、Flex换行问题
【每日学点HarmonyOS Next知识】Web Header更新、状态变量嵌套问题、自定义弹窗、stack圆角、Flex换行问题 1、HarmonyOS 有关webview Header无法更新的问题? 业务A页面 打开 webivew B页面,第一次打开带了header请求,然后退出webview B页面…...
优选算法的智慧之光:滑动窗口专题(二)
专栏:算法的魔法世界 个人主页:手握风云 目录 一、例题讲解 1.1. 最大连续1的个数 III 1.2. 找到字符串中所有字母异位词 1.3. 串联所有单词的子串 1.4. 最小覆盖子串 一、例题讲解 1.1. 最大连续1的个数 III 题目要求是二进制数组&am…...
Android ChatOn-v1.66.536-598-[构建于ChatGPT和GPT-4o之上]
ChatOn 链接:https://pan.xunlei.com/s/VOKYnq-i3C83CK-HJ1gfLf4gA1?pwdwzwc# 添加了最大无限积分 删除了所有调试信息 语言:全语言支持...
十一、Redis Sentinel(哨兵)—— 高可用架构与配置指南
Redis Sentinel(哨兵)—— 高可用架构与配置指南 在分布式应用中,Redis 主从复制(Master-Slave)虽然能提供读写分离的能力,但它 无法自动故障转移(failover)。如果主节点(Master)发生故障,系统管理员需要手动将某个从节点(Slave)提升为主节点,并重新配置所有从节…...
【STM32】玩转IIC之驱动MPU6050及姿态解算
目录 前言 一.MPU6050模块介绍 1.1MPU6050简介 1.2 MPU6050的引脚定义 1.3MPU6050寄存器解析 二.MPU6050驱动开发 2.1 配置寄存器 2.2对MPU6050寄存器进行读写 2.2.1 写入寄存器 2.2.2读取寄存器 2.3 初始化MPU6050 2.3.1 设置工作模式 2.3.2 配置采样率 2.3.3 启…...
《张一鸣,创业心路与算法思维》
张一鸣,多年如一日的阅读习惯。 爱读人物传记,称教科书式人类知识最浓缩的书,也爱看心理学,创业以及商业管理类的书。 冯仑,王石,联想,杰克韦尔奇,思科。 《乔布斯传》《埃隆马斯…...
深入浅出:UniApp 从入门到精通全指南
https://juejin.cn/post/7440119937644101684 uni-app官网 uniapp安卓离线打包流程_uniapp离线打包-CSDN博客 本文是关于 UniApp 从入门到精通的全指南,涵盖基础入门(环境搭建、创建项目、项目结构、编写运行)、核心概念与进阶知识&#x…...
低空经济-飞行数据平台 搭建可行方案
搭建一个飞行数据平台是低空经济中至关重要的一环,它能够实现对飞行器的实时监控、数据分析、路径优化以及安全管理。以下是搭建飞行数据平台的详细步骤和技术方案: 一、平台的核心功能 实时监控: 实时获取飞行器的位置、速度、高度、电池状态等数据。提供可视化界面,展示飞…...
【四.RAG技术与应用】【12.阿里云百炼应用(下):RAG的云端优化与扩展】
在上一篇文章中,我们聊了如何通过阿里云百炼平台快速搭建一个RAG(检索增强生成)应用,实现文档智能问答、知识库管理等基础能力。今天咱们继续深入,聚焦两个核心问题:如何通过云端技术优化RAG的效果,以及如何扩展RAG的应用边界。文章会穿插实战案例,手把手带你踩坑避雷。…...
3-7 WPS JS宏 工作表移动复制实例-2(多工作簿的多工作表合并)学习笔记
************************************************************************************************************** 点击进入 -我要自学网-国内领先的专业视频教程学习网站 *******************************************************************************************…...
【智能机器人开发全流程:硬件选型、软件架构与ROS实战,打造高效机器人系统】
文章目录 1. 硬件层设计(1) 传感器选型(2) 计算平台 2. 软件架构设计(1) 核心模块划分(2) 通信框架 3. 关键实现步骤(1) 硬件-软件接口开发(2) SLAM与导航实现(3) 仿真与测试 4. 典型框架示例基于ROS的移动机器人分层架构 5. 优化与扩展6. 开源项目参考 1. 硬件层设计 (1) 传感…...
【CSS—前端快速入门】CSS 选择器
CSS 1. CSS介绍 1.1 什么是CSS? CSS(Cascading Style Sheet),层叠样式表,用于控制页面的样式; CSS 能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果;能够做到页面的样式和 结构分离; 1…...
二、QT和驱动模块实现智能家居-----5、通过QT控制LED
在QT界面,我们要实现点击“LED”按钮就可以控制板子上的LED。LED接线图如下: 在Linux 系统里,我们可以使用2种方法去操作上面的LED: ① 使用GPIO SYSFS系统:这需要一定的硬件知识,需要设置引脚的方向、数值…...
在UI设计中使用自定义控件
生成: 自定义控件完成: 看控件的父类是谁: 在想使用的窗口中: 拖动一个与他父类相同类型的控件: 点击控件右键 这样就是你自定义的控件了 运行后: //点击QSpinBox,滑块跟着移动void (QSpinBox::…...