WebGL优化小提示

  1. WebGL报告(webglreport)是获取当前浏览器的WebGL实现细节的好方法,尤其是在调试特定浏览器或设备的问题时。
  2. 为了提高性能,请避免在渲染循环中分配对象。尽可能重用对象和数组,并避免使用内置数组方法,如map和filter。每个新对象为垃圾收集器增加更多负担,在某些情况下,GC暂停可以每隔几秒发生一次,可以冻结一个应用程序许多个帧。
  3. 通过确保使用alpha,depth,stencil,antialias和preserveDrawingBuffer选项设置为false来创建上下文,从而节省内存并提高性能,除非另有要求。请注意,默认情况下alpha,depth和antialias都是启用的,必须明确禁用。
  4. 为了性能,请在渲染之前的初始化时来查询 attrubute 和 uniform变量的location。
  5. 顶点和片段着色器之间的Int精度默认限定符不同。当在两个着色器之间计算时,这可能导致令人惊讶的视觉差异。
  6. 为了便于移植,请将varying和uniform的空间要求保持在GLSL ES规范的限制范围内。考虑使用vec4变量而不是浮点数组,因为它们可能允许更紧密的压缩。请参阅GLSL ES规范中的A.7。
  7. 非二次幂纹理需要linear或nearest滤波,以及clamp-to-border或者clamp-to-edge wrapping。不支持Mipmap滤波和repeat wrapping。
  8. 当我们使用多个具有WEBGL_draw_buffers扩展的绘制缓冲区时,我们不想写入给定的绘制缓冲区时,将gl.NONE传递给绘制缓冲区参数列表。我们必须始终提供并关联帧缓冲区所具有的全部颜色区。
  9. 始终通过“use strict”指令启用严格模式。它略微改变了JavaScript语义,因此许多无声错误变成了运行时异常,这甚至可以帮助浏览器更好地优化我们的代码。
  10. 代码检查,例如JSHint(JSHint),是保持JavaScript代码清洁和无错误的宝贵工具。