关于性能:测试一个程序,性能上是否有瓶颈,在3D世界里,经常使用帧数的概念,首先我们来定义一下帧数的意义。
帧数:图形处理器每秒钟能够刷新几次,通常用fps(Frames Per Second)来表示。如下是每秒钟59次刷新的应用:
当物体在快速运动时,当人眼所看到的影像消失后,人眼仍能继续保留其影像1/24秒左右的图像,这种现象被称为视觉暂留现象。是人眼具有的一种性质。人眼观看物体时,成像于视网膜上,并由视神经输入人脑,感觉到物体的像。一帧一帧的图像进入人脑,人脑就会将这些图像给连接起来,形成动画。
毫无疑问,帧数越高,画面的感觉就会越好。所以大多数游戏都会有超过30的FPS。为了监视FPS,看看你的程序哪里占用了很多的CPU时间,就需要学习一下性能监视器。
1、性能监视器Stats
在Three.js中,性能由一个性能监视器来管理,它的介绍在https://github.com/mrdoob/stats.js 可以看到。性能监视器的截图如下所示:
其中FPS表示:上一秒的帧数,这个值越大越好,一般都为60左右。点击上面的图,就会变成下面的另一个视图。
首先要引入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 οnlοad="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>
这节课我们讲了重要的游戏循环和性能测试的方法。当帧数较低的时候,你就要注意了,可能是你的代码性能太低了造成的。一般情况下,帧数都可以跑到60的。