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做频繁替换

 

你可能感兴趣的:(学习笔记,WebGL)