Three 之 three.js （webgl）性能优化、提高帧率的思路/方向整理

Three 之 three.js （webgl）性能优化、提高帧率的思路/方向整理

目录

Three 之 three.js （webgl）性能优化、提高帧率的思路/方向整理

一、简单介绍

二、优化方向

1、创建多量物体时 ，BufferGeometry （或者InstancedBufferGeometry）创建

2、合理执行渲染方法.render()

3、减少没必要执行的代码在周期性渲染函数中的执行

4、减少模型面数，必要可以用法线贴图增加模型细节替代

5、共享几何体和材质

6、渲染帧率的优化，其实就是合理调用 render （补充第 2 点），有实操些代码

7、网格合并

8、尽量重用Material和Geometry

9、删除模型时，将材质和几何体从内存中清除

10、在循环渲染中避免使用更新 （真正需要更新才更新，补充 2，含代码 ）

11、Instance、Merge 性能对比

参考博文

---

一、简单介绍

Three js 开发的一些知识整理，方便后期遇到类似的问题，能够及时查阅使用。

本节介绍， three.js （webgl）性能优化方面，整理一下常用的优化方法或者方向，供大家一个优化思考的方向，如果有不足之处，欢迎指出，或者你有更好的方法，欢迎留言。

用ThreeJS加载大模型总要遇到性能问题，性能优化一般包括加载性能优化、渲染帧率优化、内存优化等。

在CPU、显卡等硬件设备性能一定情况下，为了更好的用户体验，一般项目开发中需要对Threejs项目代码进行性能优化，避免卡顿现象，所以下面就对Threejs性能优化几种方式进行简单介绍。

模型面数比较少的情况下，不仅threejs渲染模型的时候运行性能高，通过网络加载面数少的模型，因为文件体积小，加载速度自然也快。

二、优化方向