three.js性能优化

4,937 阅读3分钟
参考:火辣辣前端博客

 three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。在使用的时候,虽然three.js 做了优化,但是在使用不恰当的代码,也会产生性能损耗。帧率越低,给人感觉就越卡。这是我在开发中自己百度总结的,有不对的可以联系我啊

 1、预加载 在加载页面之前可以给个加载页面的缓冲,因为场景模型没有加载的时候会黑屏,加载一瞬间可能会出现闪屏等性能问题,十分影响用户体验的。  

2、能用BufferGeometry代替Geometry的尽量用BufferGeometry BufferGeometry 会缓存网格模型,性能要高效点。

网格模型生成原理

 1、Geometry 生成的模型是这样的 (代码)-> (CUP 进行数据处理,转化成虚拟3D数据) -> (GPU 进行数据组装,转化成像素点,准备渲染) -> 显示器 第二次操作时重复走这些流程。 2、BufferGeometry 生成模型流程 (代码) -> (CUP 进行数据处理,转化成虚拟3D数据) -> (GPU 进行数据组装,转化成像素点,准备渲染) -> (丢入缓存区) -> 显示器 第二次修改时,通过API直接修改缓存区数据,流程就变成了这样 (代码) -> (CUP 进行数据处理,转化成虚拟3D数据) -> (修改缓存区数据) -> 显示器 节约了GPU性能的运算性能。

 3、少在requestAnimationFrame()动画下面执行操作 因为requestAnimationFrame()每秒执行60次,你要是在里面加个for循环,你的代码就炸了。还要减少浮点计算,系统对浮点计算开支比较大,尽量写成小数乘法。

 4、学会使用clone()方法  

var box=new THREE.BoxGeometry(10,10,10);//创建一个立方体几何对象
var box2 = box.clone();//克隆几何体
box2.scale.set(2,2,2);//通过缩放调整大小

  clone()返回一个新的几何体对象,返回新的几何体对象包含原来的几何体顶点数据、顶点索引数据、UV坐标数据。就不用重新创建相同的对象,浪费时间

 5、纹理图片尺寸一定得是2的幂次方,并尽可能的小 使用 new THREE.TextureLoader().load( “water.jpg” )加载纹理贴图时,如果不是2的幂次方,那么three.js就会自动转为最合适的2的幂次方尺寸,并在控制台打印出黄色警告。这个不是three.js设置的,是webgl限制的,是为了适合Mipmap(为了加快渲染速度和减少图像锯齿,贴图被处理成由一系列被预先计算和优化过的图片组成的文件)设置。 图片尽可能的小,合并,图片越大不代表越清晰,也会和纹理过滤等各属性有关。降低图片大小,减少内存占用。

 6、跳帧设置 

var skip;
function render(){
  requestAnimationFrame();
  if(skip !== 0) {
	skip = ++skip % 2;
	return;
  } else {
	skip = ++skip % 2;
  }
  console.log("i",i);
}

  这样每到skip的时候跳过一次渲染执行,以减少渲染次数,在保证不影响用户体验的情况下,尽可能的多跳帧。  

7、对粒子群进行转换,而不是每个粒子 使用THREE.Sprite时,可以更好地控制单个粒子,但是当使用大量的粒子的时候,这个方法的性能会降低,并且会更复杂。此时可以使用THREE.SpriteCloud,可以轻松地管理大量的粒子,进行整体操作,此时对单个粒子的控制能力会减弱。  

8、模型的面越少越好,模型过于细致会增加渲染开销 three场景导入模型时,可以在保证最低清晰度的时候,降低模型的复杂度,面越多,模型越大,加载所需开销就越大  

9、性能检测插件(stats.js) 使用该插件进行检测帧率,网上有很多使用教程,可以自己百度  

10、使用chrome的插件three.js inspector,可以在控制台调试查看场景中的各个模型等