20个值得收藏的WebGL性能优化技巧

WebGL 是一项功能强大的技术，允许开发人员使用基于 OpenGL ES 图形标准的 WebGL API 在 Web 浏览器中创建 3D 图形。然而，由于在 Web 环境的限制下实时渲染 3D 图形的复杂性，优化 WebGL 性能可能具有挑战性。

在这里插入图片描述

推荐：用 NSDT编辑器快速搭建可编程3D场景

1、使用 Three.js 并优化 WebGL

Three.js 是一个流行的 JavaScript 库，用于在 WebGL 中创建 3D 图形，它具有自己的一组优化功能，可以帮助提高 WebGL 性能。最重要的是，与其他图形引擎相比，Three.js 应用程序开发成本极具竞争力。这是与 Three.js 明确相关的附加点：

优化 Three.js 渲染调用：Three.js 提供了高效渲染 3D 场景的管道。但是，过多的渲染调用会影响性能。要优化 Three.js 中的渲染调用，请使用视锥体剔除等技术，其中涉及确定哪些对象在相机的视锥体中可见，并仅渲染这些对象。
Three.js 提供了对视锥体剔除的内置支持，你可以通过将要进行视锥体剔除的对象的 frustumCulled 属性设置为 true 来启用它。此外，还可以使用visible属性来控制对象的可见性并防止隐藏对象的不必要的渲染。
使用对象池：Three.js 对象（例如几何图形、材质和纹理）的创建和销毁成本可能很高。 Three.js 开发人员获得了对对象池的内置支持，他们可以使用 poolify 等库或实现自己的对象池逻辑来优化性能。
使用细节级别 (LOD)：细节级别 (LOD) 是一种根据距相机的距离使用具有不同细节级别的 3D 对象的不同版本的技术。 Three.js 提供对 LOD 的内置支持，你可以使用 THREE.LOD 类在场景中创建 LOD 对象。
使用纹理图集：纹理图集是包含多个较小纹理的大型纹理图像。纹理图集可以帮助减少纹理交换次数并提高 WebGL 性能。 Three.js 通过其 THREE.TextureLoader 和 THREE.Texture 类提供对纹理图集的支持。你可以手动创建纹理图集，也可以使用第三方工具（例如TexturePacker）为你的 Three.js 应用程序生成纹理图集。

编写高效且优化的代码是优化 WebGL 性能的第一步。这包括优化着色器，即在 GPU 上运行以计算 3D 对象外观的程序。以下是优化着色器的一些技巧：

保持简单：使用简单的数学运算并避免不必要的计算。尽可能简化计算，减少 GPU 的工作负载。
使用内置函数：WebGL 为常见运算提供内置函数，例如矩阵乘法、向量运算和三角函数。这些内置函数通常在硬件中实现，并且比用着色器代码编写的自定义函数更快。
最小化纹理查找：纹理查找的性能代价可能很高。使用纹理图集最大限度地减少着色器中的纹理查找数量，该纹理集将多个纹理组合成单个纹理，或者使用程序纹理而不是预先生成的纹理。
优化数据流：使用所有着色器调用都可以访问的统一变量和常量，将数据从 CPU 传递到 GPU。对于可以在 CPU 上预先计算的数据，避免使用每个顶点不同的属性和变量。

渲染是将 3D 模型转换为可以在屏幕上显示的 2D 图像。可以使用多种渲染技术来优化 WebGL 性能：

视锥体剔除：视锥体剔除是一种仅涉及渲染视锥体内可见对象的技术，视锥体是相机视图中可见的 3D 场景的部分。
细节级别 (LOD) 渲染：LOD 渲染是一种根据对象与相机的距离使用不同细节级别的技术。距离相机较远的对象可以以较低的细节级别进行渲染，以减少需要处理的几何体数量并提高性能。
遮挡剔除：这可以使用 z 缓冲或分层遮挡剔除等技术来实现，从而减少透支量并提高性能。
实例化：实例化是一种涉及使用单个绘制调用渲染同一对象的多个实例的技术，这可以显着减少渲染大量对象的开销。

纹理是 3D 图形的重要组成部分，因为它们提供了对象的视觉细节。然而，纹理会消耗大量内存和带宽，从而影响 WebGL 性能。纹理压缩是一种可以帮助优化纹理的内存使用和带宽要求的技术。

WebGL 支持多种纹理压缩格式，例如 ETC1、ETC2 和 ASTC，这些格式可以减小纹理的大小，而不会显着影响其视觉质量。以下是在 WebGL 中使用纹理压缩的一些技巧：

选择正确的纹理压缩格式：不同的纹理压缩格式在压缩率、视觉质量以及与各种设备和浏览器的兼容性方面有不同的权衡。根据适用性选择理想的纹理压缩格式。
使用 Mipmap：Mipmap 是预先生成的较低分辨率版本的纹理，可在渲染距相机不同距离的对象时使用。 Mipmap 可以改进纹理过滤并减少锯齿伪影，从而提高视觉质量和性能。
最小化纹理尺寸：使用尽可能最小尺寸的纹理来实现所需的视觉质量。较大的纹理需要更多的内存和带宽，这可能会影响性能。

渲染状态是控制 WebGL 如何渲染对象的设置，例如混合、深度测试和模板测试。优化渲染状态可以通过减少渲染期间所需的 GPU 处理量来提高性能。以下是一些提示：

最小化状态变化：通过将具有相似渲染状态的对象分组并按顺序渲染它们，最小化渲染期间状态变化的数量。
使用背面剔除：背面剔除是一种不渲染背向相机的对象面的技术。这可以减少需要处理的几何体数量并提高性能。尽可能启用背面剔除。
使用延迟渲染：延迟渲染是一种将对象渲染到多个渲染目标中的技术，稍后可以使用这些目标来执行复杂的光照计算。延迟渲染可以减少渲染过程中所需的光照计算次数并提高性能。
使用早期深度测试：早期深度测试是一种涉及在渲染管道中尽早执行深度测试的技术。这可以减少不必要的片段着色器执行量并提高性能。尽可能启用早期深度测试。
使用批量渲染：批量渲染是一种技术，涉及将具有相似属性（例如材质或纹理）的对象分组在一起，并在单个绘制调用中渲染它们。这可以减少CPU-GPU通信和状态变化的开销，从而提高性能。

应用这些优化可以帮助你在 WebGL 应用程序中实现流畅、高效、具有视觉吸引力的图形渲染。请记住始终测试和测量 WebGL 应用程序的性能，以确定需要改进的领域并相应地应用适当的优化。