性能插件stat.js的使用

最新推荐文章于 2024-05-31 23:56:09 发布

ljc_1

最新推荐文章于 2024-05-31 23:56:09 发布

阅读量1.1k

点赞数 2

分类专栏： threejs 文章标签： three.js

本文链接：https://blog.csdn.net/ljc_1/article/details/117649606

版权

threejs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何结合three.js和stat.js插件进行WebGL应用的性能监控。通过示例代码展示了如何在网页中集成stats.js，实时显示FPS、MS和内存占用等关键性能指标，帮助开发者优化3D渲染效率。

摘要由CSDN通过智能技术生成

threejs使用stat.js插件用于性能监听，插件最新下载地址为：http://github.com/mrdoob/stats.js
在这里插入图片描述

FPS Frames rendered in the last second. The higher the number the better.上一秒帧率，数量越高越好。序号：0
MS Milliseconds needed to render a frame. The lower the number the better.渲染一帧需要的时间，越低越好。序号：1
MB MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)花费的内存（Chrome需要在快捷链接后添加–enable-precise-memory-info参数）序号：2
CUSTOM User-defined panel support.（自定义面板）序号：3

以下是stat.js中的examples示例代码：

<!DOCTYPE html>
<html>
	<head>
		<title>stats.js - basic example</title>
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				margin: 0px;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<script src="../build/stats.min.js"></script>
		<script>
			//组件实例化
			var stats = new Stats();
			/**
			*	FPS Frames rendered in the last second. The higher the number the better.上一秒帧率，数量越高越好。序号：0
			*	
				MS Milliseconds needed to render a frame. The lower the number the better.渲染一帧需要的时间，越低越好。序号：1
			*	
				MB MBytes of allocated memory. (Run Chrome with --enable-precise-memory-info)花费的内存（Chrome需要在快捷链接后添加--enable-precise-memory-info参数）序号：2
			*
				CUSTOM User-defined panel support.（自定义面板）序号：3
			*/
			stats.showPanel( 0 );
			document.body.appendChild( stats.dom );

			var canvas = document.createElement( 'canvas' );
			canvas.width = 512;
			canvas.height = 512;
			document.body.appendChild( canvas );

			var context = canvas.getContext( '2d' );
			context.fillStyle = 'rgba(127,0,255,0.05)';

			function animate() {

				var time = performance.now() / 1000;

				context.clearRect( 0, 0, 512, 512 );
				//开始统计
				stats.begin();

				for ( var i = 0; i < 2000; i ++ ) {

					var x = Math.cos( time + i * 0.01 ) * 196 + 256;
					var y = Math.sin( time + i * 0.01234 ) * 196 + 256;

					context.beginPath();
					context.arc( x, y, 10, 0, Math.PI * 2, true );
					context.fill();

				}
				//结束统计
				stats.end();

				requestAnimationFrame( animate );

			}
			//循环调用
			animate();

		</script>
	</body>
</html>

在这里插入图片描述

//用于更新状态，重新计时，重新计算性能
stats.update();

ljc_1

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
性能插件stat.js的使用

threejs使用stat.js插件用于性能监听，插件最新下载地址为：http://github.com/mrdoob/stats.js以下是stat.js中的examples示例代码：<!DOCTYPE html><html> <head> <title>stats.js - basic example</title> <meta name="viewport" content="width=device-width, u
复制链接

扫一扫

专栏目录