three.js性能优化-(持续更新)

本文持续更新~~~

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

2019-08-22更新———————

1、disppose()方法得重要性

每当你创建一个three.js中的实例时,都会分配一定数量的内存。当你场景中几何体(geometry,bufferGeometry),材质(material),纹理(texture),渲染目标(WebFLRenderTarget)或者其他杂项废弃不用时,这时这些对象在你得代码里已经结束了他们得生命周期,但是three.js系统并不会帮你回收对象,他们依然存在于你的内存中,你需要手动使用dispose(),去主动释放这些资源。

对于纹理的内部资源仅在图像完全被加载后才会分配。如果你在图像被加载之前废置纹理,什么都不会发生。 没有资源被分配,因此也没有必要进行清理。

2、查看渲染场景信息

WebGLRenderer.info —— 渲染器中的一个特殊属性,具有一系列关于显存和渲染过程的统计信息。 除此之外,它还告诉你有多少纹理、几何体和着色器程序在内部存储。 如果你在你的应用程序中注意到了性能问题,一个较好的方法便是调试该属性,以便轻松识别内存泄漏。

 

2019-08-08更新————-

1、矩阵变换优化

Matrix transformations

这是官网给出的建议,也就是说,当你需要去更新你场景中对象矩阵的时候,会涉及到计算,如果只是静态对象,并且操作不频繁,你可以关闭matrixAutoUpdate参数,手动去更新矩阵

Matrix transformations

但是当你采用第二种方式,去手动更新对象的矩阵,就需要关闭matrixAutoUpdate参数了

2018-08-06———-

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()方法

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

5、纹理图片尺寸一定得是2的幂次方,并尽可能的小

使用 new THREE.TextureLoader().load( “water.jpg” )加载纹理贴图时,如果不是2的幂次方,那么three.js就会自动转为最合适的2的幂次方尺寸,并在控制台打印出黄色警告。这个不是three.js设置的,是webgl限制的,是为了适合Mipmap(为了加快渲染速度和减少图像锯齿,贴图被处理成由一系列被预先计算和优化过的图片组成的文件)设置。

图片尽可能的小,合并,图片越大不代表越清晰,也会和纹理过滤等各属性有关。降低图片大小,减少内存占用。

6、跳帧设置


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

7、对粒子群进行转换,而不是每个粒子

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

8、模型的面越少越好,模型过于细致会增加渲染开销

three场景导入模型时,可以在保证最低清晰度的时候,降低模型的复杂度,面越多,模型越大,加载所需开销就越大

9、性能检测插件(stats.js)

使用该插件进行检测帧率,网上有很多使用教程,可以自己百度

three.js stats

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

但是你需要将你的场景对象暴漏出来给window,这个插件才可以读取到你的场景信息

three.js inspector

欢迎转载,转载需带着文章出处链接~~

three.js性能优化-(持续更新)》有1个想法

发表评论

电子邮件地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据