three、webgl模型加载及通用优化简述

参考资料

1. https://juejin.cn/post/6984065689086607373
2. https://www.cnblogs.com/wodom/p/15423650.html
3. https://blog.csdn.net/weitaming1/article/details/84540706
4. https://www.wenjiangs.com/article/nrvfesfr.html
5. https://zhuanlan.zhihu.com/p/143642146

模型、预处理层面优化方法

1. 模型压缩
   • gltf draco
   • VAO
2. gzip等贴图压缩，纹理图片尺寸一定得是2的幂次方
3. 使用渲染烘焙软件，进行材质贴图的烘焙，贴到colorMap或者自发光map
4. 模型拆分，根据实际需要将模型拆分成多个部分，分成主要部分和其他次要部分，然后根据实际需要进行分别加载和展示
5. 模型减面

浏览器层面优化

1. 使用indexedDB等浏览器缓存
2. web worker多线程加载处理
3. wasm（WebAssembly），二进制程序充分发挥硬件能力以达到提高代码执行效率
4. 打开浏览器gpu、硬件加速选项

预处理与渲染引擎结合

1. batch处理，同材质物体合并
2. LOD
3. 实力化几何体、InstancedMesh

渲染优化

应用层面

1. 各种剔除 Culling (视椎体剔除，背面剔除、遮挡剔除)

   • 视椎体剔除(算出物体的中心到面的最小距离（带正负方向的）与包围球的半径做比较，如果小于半径，就表示在外面。)
   • 背面剔除
   • 遮挡剔除(虽然 gpu 有深度测试，会将有遮挡的物体进行剔除，但是我们仍然希望在提交 GPU 之前对遮挡关系进行判断，提前剔除掉一些东西，减少渲染压力。)

2. 使用clock时钟，在需要时主动降低刷新率

3. 基于GPU拾取

几何层面

1. 可能地把计算放在每个对象或逐顶点上 通常来讲，游戏需要计算的对象、顶点和像素的数目排序是对象数 < 顶点数 < 像素数。 实现高斯模糊和边缘检测时，我们把采样坐标的计算放在了顶点着色器中，这样的做法远好于把它们放在片元着色器中。

2. 尽可能使用低精度的浮点值进行运算

3. 在使用插值寄存器把数据从顶点着色器传递给下一个阶段时，我们应该使用尽可能少的插值变量。比如，把两个纹理坐标打包在同一个四维变量中。

4. 尽可能不要使用全屏的屏幕后处理效果。如果美术风格实在是需要使用类似Bloom、热扰动这样的屏幕特效，我们应该尽量使用fixed/lowp进行低精度运算（纹理坐标除外，可以使用half/mediump）。那些高精度的运算可以使用查找表（LUT）或者转移到顶点着色器中进行处理。

5. 尽量把多个特效合并到一个Shader中。例如，我们可以把颜色校正和添加噪声等屏幕特效在Bloom特效的最后一个Pass中进行合成。

代码优化规则

1. 尽可能不要使用分支语句和循环语句。

2. 尽可能避免使用类似sin、tan、pow、log等较为复杂的数学运算。我们可以使用查找表来作为替代。

3. 尽可能不要使用discard操作，因为这会影响硬件的某些优化。