opengl/webgl常见的性能优化

发布时间：2025-06-18 10:51

采用节能设备和技术是能源审计后的常见优化措施。 #生活常识# #环保节能技巧# #能源审计#

opengl/webgl 的性能优化是一个永远的话题，涉及到的东西也很多，这里对自己了解到的性能优化做个总结。

1. 避免在 shader 中做逻辑判断，比如 if else。

有的人可能会很疑惑，为何要这样？这和 GPU 的基本调度有关系，GPU 的基本调度单位叫做 wavefront, 就是指一组完全相同的计算指令，在 GPU 的几个计算单元中并行执行，每一个指令的输入数据不同而已。这样并行度很高，可以极大程度提高性能。但是一旦引入 if else，就会把 wavefront 破坏掉，比如现在有 10 个计算单元在并发执行，但是碰到 if，在 5 个计算单元中为 true, 在 5 个计算单元中为 false, 这样会造成新的计算指令，那么之前的并行运算将无法继续。新的计算指令需要排队等待执行，或者新的指令要转移到新的计算单元上，这个过程涉及到数据的复制转移，会比较耗时，会严重破坏并行度。

但是有些场景下，shader 中完全不用逻辑判断又不行，那该如何呢？可以考虑使用 shader 的内置函数，比如 step 函数，案例如下：

float a;

if(b >1){

a = 1;

}else{

a = 0.5;

}

可以优化为：

float a;

float temp = step(b, 1);

a = temp * 0.5 + (1 - temp);

2. 减少三角形数量

较少三角形的数量大体上可以从以下几个角度入手：

(1). 空间分割技术：包括八叉树，四叉树做空间分割，将不在当前可视区域物体剔除掉

(2). 遮挡检测技术：视锥体范围内，有些物体会被前面的物体遮挡，这些被遮挡的物体其实是不需要渲染的。遮挡查询有多种技术方案实现，比如通过扩扑性，硬件遮挡查询。扩扑性比较麻烦，我这里推荐硬件遮挡查询技术，实现起来相对比较容易。

(3). LOD 技术：根据物体距离摄像头的距离，动态调节物体三角形的数量。

(4). 图元类型的优化：使用 GL_TRIANGLE_FAN 或者 GL_TRIANGLE_STRIP 替代 GL_TRIANGLES，因为这样可以重用顶点，减少三角形的数量。

(5). 使用顶点索引的方法做渲染：使用 glDrawElements 替代 glDrawArrays，因为前者通过索引的方式可以减少三角形的数量。

3. 纹理的优化

(1). 纹理的长宽最好是 2 的幂。

(2). 纹理压缩：纹理压缩在 opengl es 3.0 和 webgl 2.0 上有比较好的支持，经压缩后的纹理可以减少图形数据，节省宽带。常见的压缩格式为 ETC，Khronos 公司提供有 ETC 格式压缩的免费压缩包，在 opengl/webgl 程序中使用 glCompressedTexImage2D 函数加载被压缩的纹理。

(3). 纹理的上传：传统的纹理上传比较耗时，可以考虑使用两个 PBO 上传纹理，性能会有较大的提升。

(4). 纹理的合成：如果有很多个小的纹理，每一个纹理单独加载，效率比较低下。可以考虑将多个小纹理合成到一个纹理上，仅仅加载一次，然后在程序中使用的时候，使用不同的纹理坐标范围来加载不同的纹理。

4. 减少系统内存向 GPU 内存传送数据的次数

具体可以从如下方面入手：

(1). 尽可能使用 VBO/VAO

(2). 在 opengl es 3.0/webgl 2.0 上可以使用 Transform Feedback, 该方案可以使用 GPU 做通用运算，把计算的结果存入 VBO 中，在后期的渲染流程中使用该 VBO 作为输入。

(3). 批次合并：比如一个最小包围体内有多个物体，可以将这些物体的三角形合并在一起，一次性的发送到 GPU。

(4). 使用 instance: 如果要渲染多个重复的物体，可以使用 instance 特性。

5. 针对在复杂计算的优化：

(1). 使用延迟着色：针对在片段着色器中有复杂计算，并且很多顶点不能通过深度测试的场景，延迟着色可以很大程度上提高渲染性能。

(2). 开启多个渲染线程：每个渲染线程的 viewPort 设置为屏幕的一个区域，可以充分利用 CPU 和 GPU

网址：opengl/webgl常见的性能优化 https://www.yuejiaxmz.com/news/view/1056377