WebGL优化的技巧--持续更新中

Webgl性能瓶颈，图形绘制是异步的流水线绘制以及浏览器的本身的缺陷。尝试优化的方法如下：

• 找到性能瓶颈，尝试降低CPU或者GPU的时钟频率去测试哪个效率低
• 纹理受限，可以采取 减少canvas的长宽或者使用低分辨率的纹理测试；webgl 纹理绑定伸展和收缩效果时，gl.NEAREST 是最快的但会产生块状效果，gl.LINER因为是取平均值，会产生模糊
• 将Mip映射应用于纹理贴图
• 处理webgl丢失上下文的问题
• 不要经常切换program，在切换program和在着色器中使用if else语句都需要进行考量

高级shader优化，基本思路是找到性能瓶颈，尝试降低CPU或者GPU的时钟频率去测试哪个效率低：

• 避免在顶点数组数据中使用常量
• 在webgl中，使用drawElements()的gl.TRIANGLE_STRIP 结合退化三角形 比使用drawArrays()的gl.TRIANGLE方式节省内存,并且减少使用drawArrays和drawElements的次数
• 顶点组织顺序按照数组排序，不要使用乱序，因为难以命中缓存
• 减少使用drawArrays和drawElements的次数
• 避免绘制时从GPU读回数据或状态,例如，gl.getError() gl.readPixels(), 影响流水线的实现
• 用webgl inspector找出冗余的调用，因为webgl是的状态是跨帧持续的，减少使用改变webgl状态的方法。比如gl.enable(XXX)，只执行一次就行了

模型优化：

• 用细节层次简化模型（LOD技术）

其他新的怪异想法：

• 利用WebAssembly技术，提高Web应用程序的性能;
• 利用OffscreenCanvas+Web Worker方案，OffscreenCanvas是另外一个作为幕后计算的Canvas与幕前显示的Canvas做频繁替换