ThreeJS学习笔记（7）- 程序的性能

来源：互联网发布：java多线程lock接口编辑：程序博客网时间：2024/06/07 09:32

关于性能：测试一个程序，性能上是否有瓶颈，在3D世界里，经常使用帧数的概念，首先我们来定义一下帧数的意义。

帧数：图形处理器每秒钟能够刷新几次，通常用fps（Frames Per Second）来表示。如下是每秒钟59次刷新的应用：

当物体在快速运动时,当人眼所看到的影像消失后，人眼仍能继续保留其影像1/24秒左右的图像，这种现象被称为视觉暂留现象。是人眼具有的一种性质。人眼观看物体时，成像于视网膜上，并由视神经输入人脑，感觉到物体的像。一帧一帧的图像进入人脑，人脑就会将这些图像给连接起来，形成动画。
毫无疑问，帧数越高，画面的感觉就会越好。所以大多数游戏都会有超过30的FPS。为了监视FPS，看看你的程序哪里占用了很多的CPU时间，就需要学习一下性能监视器。

1、性能监视器Stats

在Three.js中，性能由一个性能监视器来管理，它的介绍在https://github.com/mrdoob/stats.js 可以看到。性能监视器的截图如下所示:

其中FPS表示：上一秒的帧数，这个值越大越好，一般都为60左右。点击上面的图，就会变成下面的另一个视图。

MS表示渲染一帧需要的毫秒数，这个数字是越小越好。再次点击又可以回到FPS视图中。

首先要引入stats.min.js文件，代码如下：

<!DOCTYPE html><html><head><title></title><style type="text/css">body{margin:0;}div#canvas-frame {border: none;cursor: pointer;width: 100%;height: 600px;background-color: #EEEEEE;}</style><script src="js/three.js"></script><script src="js/jquery.js"></script><script src="js/stats.min.js"></script><script>//定义场景并初始化var scene;function initScene(){scene = new THREE.Scene();}//定义相机并初始化var camera;function initCamera(){camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,1,10000);camera.position.set(0,100,500);camera.lookAt(new THREE.Vector3(0,0,0));}//定义渲染器并初始化var renderer;function initRenderer(){renderer= new THREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight);$("#canvas-frame").append(renderer.domElement);renderer.setClearColor(0x39609b,1);}//定义性能监视器Stats的使用var stats;function initStats(){stats = new Stats();            stats.domElement.style.position = 'absolute';            stats.domElement.style.left = '0px';             stats.domElement.style.top = '0px';            $("#canvas-frame").append(stats.domElement);}//定义灯光并初始化var light;function initLight(){light=new THREE.DirectionalLight(0xFF0000,1.0,0);light.position.set(100,100,200);scene.add(light);}var line;//添加渐变线function initObject(){var geometry = new THREE.Geometry();var material = new THREE.MeshBasicMaterial({ vertexColors: true });var color1=new THREE.Color(0x444444);var color2=new THREE.Color(0xFF0000);var p1=new THREE.Vector3(-100,0,100);var p2=new THREE.Vector3(100,0,-100);geometry.vertices.push(p1);geometry.vertices.push(p2);geometry.colors.push(color1,color2);line=new THREE.Line(geometry,material);scene.add(line);}var mesh;//添加3D文字function init3DText(fontloader){var fontloader;fontloader = new THREE.FontLoader();fontloader.load('fonts/helvetiker_bold.typeface.json',function(font){var text="FOX";var g=new THREE.TextGeometry(text,{font:font,size:50,height:30,});g.computeBoundingBox();//3D文字材质var m = new THREE.MeshBasicMaterial({color:0xffff00});mesh = new THREE.Mesh(g,m);// 加入到场景中scene.add(mesh);  });}//添加网络线function initNetLine(){var geometry = new THREE.Geometry();geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );for ( var i = 0; i <= 100; i ++ ) {var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.2 } ) );line.position.z = ( i * 10 ) - 500;scene.add( line );var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 0.2 } ) );line.position.x = ( i * 10 ) - 500;line.rotation.y = 90 * Math.PI / 180;scene.add( line );}}function threeStart(){initScene();initCamera();initRenderer();initStats();initLight();initObject();//init3DText();//initNetLine();// 渲染animate();}        function animate(){line.position.y -= 1;            requestAnimationFrame( animate );             // 渲染            renderer.render(scene,camera);stats.update();        }</script></head><body onload="threeStart();"><div id="canvas-frame"></div></body></html>

这节课我们讲了重要的游戏循环和性能测试的方法。当帧数较低的时候，你就要注意了，可能是你的代码性能太低了造成的。一般情况下，帧数都可以跑到60的。

阅读全文

0 0