threejs 优化

预计阅读时间: 2 分钟

TODO: 待迁移文章内容

优化核心思路

  • 减少CPU和GPU的数据交换:
    • 合批(Batch)
    • 减少顶点数、三角形数
    • 视锥裁剪
    • 避免每帧提交Buffer数据
      • CPU版的粒子、动画会每帧修改、提交数据,可移至GPU端。
    • 减少渲染状态设置和查询
      • 例如:glGetUniformLocation会从GPU内存查询状态,耗费很多时间周期。
      • 避免每帧设置、查询渲染状态,可在初始化时缓存状态。
    • 启用GPU Instance
    • 开启LOD
    • 避免从显存读数据
  • 减少过绘制:
    • 避免Tex Kill操作
    • 避免Alpha Test
    • 避免Alpha Blend
    • 开启深度测试
      • Early-Z
      • 层次Z缓冲(Hierarchical Z-Buffering,HZB)
    • 开启裁剪:
      • 背面裁剪
      • 遮挡裁剪
      • 视口裁剪
      • 剪切矩形(scissor rectangle)
    • 控制物体数量
      • 粒子数量多且面积小,由于像素块机制,会加剧过绘制情况
      • 植物、沙石、毛发等也如此
  • Shader优化:
    • 避免if、switch分支语句
    • 避免for循环语句,特别是循环次数可变的
    • 减少纹理采样次数
    • 禁用clip或discard操作
    • 减少复杂数学函数调用