WebGL渲染引擎优化方向 -- 加载性能优化

创作时间:

作者:

@小白创作中心

WebGL渲染引擎优化方向 -- 加载性能优化

引用

CSDN

https://m.blog.csdn.net/Mapmost/article/details/138304563?spm=1001.2014.3001.5501

WebGL是一种强大的图形渲染技术，可以在浏览器中快速渲染复杂的3D场景。但是，由于WebGL的高性能和高质量要求，如果不注意性能优化，它可能会消耗大量的CPU和GPU资源，导致应用程序性能下降。本文将重点讨论WebGL渲染引擎的加载性能优化方向。

模型压缩

模型和贴图数据是整个加载过程中最为"重量级"的数据。因此，我们应当从建模阶段就定好规范，在保证外观效果的前提下，尽量使用较为精简(面数较少)的模型。在模型制作完成之后，我们也应当尽量选取一些压缩比较高的模型格式，例如glb、gltf等进行模型传输，除了修改模型格式外，我们还可以通过下面的方式加载网络传输：

gzip

对于一些纯字符编码的模型，如obj，dae等，在服务端开启gzip压缩，可以带来较好的压缩比。而且，使用gzip压缩是服务器与浏览器直接默认完成的，无需任何额外操作，对于开发者可以做到无感知。所以建议使用这类模型的都加上gzip压缩。其实我们可以默认所有文件都开启，比如js、css文件经过gzip压缩后传输量也会小很多。

来源：https://medium.com/@repgad.mr.site/what-is-gzip-introduction-to-this-method-of-compressing-information-in-the-network-b5610e4766d0

gltf draco

对于可以选取导出格式的项目来说，选取gltf格式加draco压缩的方式，可以得到较高的压缩比。不过使用draco压缩并不是没有代价的，有时候可能会造成模型的外观损坏。同时，解压模型也需要一些的时间。所以，对于小的模型，网络传输较快的，也就没必要上draco压缩了。

来源：isux-optimizing-3d-model
来源：isux-optimizing-3d-model

贴图压缩

上述描述的模型压缩只针对模型网格数据，不会对贴图进行处理，然而很多时候贴图文件往往大于模型。贴图尺寸也应该根据需要选取，不应该过大，一般最好不要超过4k，保持1024或者2048较好。贴图也最好使用2的n次幂的尺寸。下面介绍如何优化用于应用程序渲染的贴图文件。

对于常见的贴图一般使用jpg、png、tga等格式，但是这部分格式加载完毕后，png/jpg仍需要全部转码为纹理(texture)才能开始渲染，而具有相同尺寸的贴图纹理GPU占用内存大小相同，故压缩后的png/jpg对于渲染过程并没有优化。庆幸的是许多设备都有可直接用于渲染的GPU压缩纹理(compress texture)格式，压缩纹理可比由png直接转换的纹理减少5倍或以上的大小。如果直接提供压缩纹理格式，则不需要进行png的转码过程且可大大减少纹理内存。但由于GPU芯片提供商太多，设备的压缩纹理格式多种多样。

来源：isux-optimizing-3d-model

来源：isux-optimizing-3d-model

2019五月份，Binomial公司和google联合推出了Basis Universal压缩GPU纹理技术，Basis Universal支持多种常用的压缩纹理格式，将png转换为basis文件后，大小与jpg格式差不多，但在GPU上比png/jpg小6-8倍。在保持GPU性能效率的同时，提升Web端、桌面端和移动应用程序中图像传输的性能。此版本填补了图形压缩生态系统中的一个关键技术空白，同时也补充了Draco几何压缩的部分早期工作。