玩大了！ 阿里工程师的年会竟然这样搞？(6)

客观因素如：大屏分辨率、设备显卡等不考虑，但需要更多从可控条件来解决部分性能问题。一般衡量动画是否卡顿用fps衡量，如果在30-60帧之内肉眼基本无感知，再往下，会感受到很明显的卡顿。第一版开发完成之后，在mac上的帧率只有20+到40。肯定达不到标准，所以从以下几个方面开始优化。

[本文来自：www.11jj.com]

1.尽量重用Material和Geometry，或者缓存模型；

BufferGeometry 会缓存网格模型，性能要高效点。网格模型生成原理。

Geometry 生成的模型是这样的 （代码）-> (CUP 进行数据处理，转化成虚拟3D数据) -> (GPU 进行数据组装，转化成像素点，准备渲染) -> 显示器第二次操作时重复走这些流程。

BufferGeometry 生成模型流程 (代码) -> (CUP 进行数据处理，转化成虚拟3D数据) -> (GPU 进行数据组装，转化成像素点，准备渲染) -> (丢入缓存区) -> 显示器第二次修改时，通过API直接修改缓存区数据，流程就变成了这样(代码) -> (CUP 进行数据处理，转化成虚拟3D数据) -> (修改缓存区数据) -> 显示器。

2.减少渲染的对象,或者渲染的时候让对象不可见：渲染过不再需要的对象可以设置visible = false，或者直接从scene中remove，两者的区别可以参考Three.js scene.remove vs. visible=false；

3.谨慎地在render()中操作：一般FPS为60也就意味着一秒会执行60次如果render()中有有实例化或是赋值操作很容易会崩溃；

4.选择合适的对象：粒子我就是用Sprite代替Mesh实现的；

5.考虑光源的影响：会影响场景中对象的渲染；

6.渲染的对象时side属性尽量用FrontSide，DoubleSide会导致更多的渲染，也是减少渲染的方法；

7.可以用着色器来渲染，用更底层的glsl来实现。

优化完之后的状态：在mac上基本上都是60fps。保证了最终效果的实现：