【翻译】WebGL 优化场景提高表现的基本操作

最新推荐文章于 2023-12-08 11:43:31 发布

maki077

最新推荐文章于 2023-12-08 11:43:31 发布

阅读量649

点赞数

分类专栏： webgl 文章标签： webgl html mesh

原文链接：https://www.soft8soft.com/docs/manual/en/introduction/Optimizing-WebGL-performance.html

版权

webgl 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

【原文出处】：

Optimizing scenes for better WebGL performance - Soft8Softhttps://www.soft8soft.com/docs/manual/en/introduction/Optimizing-WebGL-performance.html

优化场景以获得更好的WebGL性能表现

几何体/网格

额外补充：尽可能在制作模型时就优化好模型面数和模型拆分

法线图

贴图纹理

额外补充（略长） Diffuse、BaseColor、Albedo(Babylon的PBR材质的通道) 固有色，物体本身的颜色

优化场景以获得更好的WebGL性能表现

在这里，我们推荐一些优化技术，这些技术被证明对创建基于网络的互动体验非常有效。本章主要是基于Soft8Soft在2019年欧洲Verge3Day会议上的演讲。

Geometry / Meshes

Geometry lies at the root of a 3D application as it forms the main shape of a model. To get smoother reflections and faster rendering you should keep the mesh as regular as possible. In the beginning, you should decide on the level of details you want to have in your scene, and stick to that when modeling.

几何体/网格

几何图形是3D应用的根本，因为它构成了模型的主要形状。为了获得更平滑的反射和更快的渲染，你应该尽可能地保持网格的规则。在开始的时候，你应该决定你想在你的场景中拥有的细节水平，并在建模时坚持这样做。

额外补充：尽可能在制作模型时就优化好模型面数和模型拆分

思考哪些模型先加载，哪些模型之后加载，思路类似网页大批量图片的异步加载。否则最后导出glb的存储容量又大，又要返工拆分模型

When modeling creases, better use smooth groups instead of adding more polygons.

在建模褶皱时，最好使用平滑组而不是增加更多的多边形。

When working on a cylindrical model, make effort to reduce the number of polygons by its center.

在处理圆柱形模型时，努力减少其中心的多边形数量。

Do not overload a model with extra details that the user won't see anyway. As shown on the picture below, the edge highlighted with orange defines the level of details for the whole model, so you can use at as reference.

不要给模型增加额外的细节，反正用户不会看到。如下图所示，用橙色突出显示的边缘定义了整个模型的细节水平，所以你可以把它作为参考。

Normal Maps

A common way to optimize WebGL performance is to reduce the amount of polygons by baking a normal map from a high-poly model to a low-poly model.

法线图

优化WebGL性能的一个常见方法是通过将法线图从高聚物模型（高模、精摸、高多边形模型）烘焙到低聚物模型（低模）来减少多边形的数量。

However, normal maps may produce visible artifacts due to the limited precision of a 8 bit image. Some possible solutions are pictured below, but they are rather impracticable: using a higher precision image would produce a heavier file, while the second approach is rather time-consuming and does not guarantee a clean result. The third approach however may work in some cases: if you have rather rough surfaces we recommend to add noise to your materials to reduce those artifacts.

然而，由于8比特图像的精度有限，法线图可能会产生明显的伪影。一些可能的解决方案如下图所示，但它们是相当不切实际的：使用更高精度的图像会产生一个更重的文件，而第二种方法是相当耗时的，并不能保证一个干净的结果。然而，第三种方法在某些情况下可能有效：如果你有相当粗糙的表面，我们建议在你的材料中添加噪音以减少这些伪影。

From our experience, we found that the best solution for glossy objects would be using middle-poly geometry with smooth groups, and without any normal map.

根据我们的经验，我们发现，对于有光泽的物体，最好的解决方案是使用具有平滑组的中间多维几何，并且没有任何法线贴图。

Finally, here are some cases when you might want to use a normal map rather than a highly detailed mesh:

Your object consists of many varying surfaces.
You have a rough surface that does not produce precision artifacts.
Your objects are distant or small so the user won't notice any artifacts.

最后，这里有一些情况，你可能想使用法线贴图而不是高度详细的网格。

·你的物体由许多不同的表面组成。

·你有一个粗糙的表面，不会产生精度伪影。

·你的对象很远或很小，所以用户不会注意到任何伪影（瑕疵）。

Texturing

Here is a typical set of textures used in the PBR pipeline (and in general).

贴图纹理

下面是PBR管道中使用的一组典型的纹理（以及一般情况下）。

额外补充（略长） Diffuse、BaseColor、Albedo(Babylon的PBR材质的通道) 固有色，物体本身的颜色

Normal 法线贴图、bump 凹凸贴图、displacement 位移贴图

Metallness 金属度；Roughness粗糙度、Glossiness光泽度；Specular高光；Transparent透明Alpha

Bump凹凸贴图它绘制的是高度图（Height Map），或者我们叫做它为灰度图，因为它是简单的黑白纹理。每个像素代表表面上的点应该被凸起的数量。（但是并没有实质性地改变模型的顶点面数之类的，注意跟Displacement位移贴图的区别）

我们可以把黑白值当作单个的Float浮点值，0黑1白。

像素越白，凸起的数量越多
反之越黑，保持不变

Normal法线贴图可以向模型表面添加细节，如凹凸、刮痕、螺钉、划痕等（想象官府大门的凸起圆）,法线贴图不会影响网格的实际多边形性质，只会影响在平面上计算光照的方式。例如法线贴图的原理和为什么是蓝色的图片，请查阅【Blender】详解凹凸贴图 Bump/Normal/Displacement 三者的区别 - 知乎

AmbientOculussion 环境遮罩AO 、 Shadow lightmap ，网页端常用的是使用光影贴图模拟环境光遮罩的阴影效果

例如在Ambient通道添加lightmap，作为二套uv

例如使用lightmapTexture 和开启babylon的shadowmap为true，和设置2套uv

As you can see, most of them are black and white. Therefore you may combine b/w textures into the RGBA channels of a single image, up to 4 maps per image.

正如你所看到的，它们中的大多数是黑白的。因此，你可以将黑白纹理组合到一张图像的RGBA通道中，每张图像最多可以有4张图。

If you only have one b/w texture you may combine it with any existing RGB texture by packing it into the alpha channel. Finally, if you have no image to combine with, you can convert your b/w image into jpeg format with 95% compressing and the grayscale mode enabled.

如果你只有一个黑白纹理，你可以将它与任何现有的RGB纹理结合起来，把它打包到alpha通道。最后，如果你没有图像可供组合，你可以将你的黑白图像转换成jpeg格式，压缩率为95%，并启用灰度模式。

Another way to reduce the size of texture is to optimize the UV space. The more compact is your UV unwrapping, the more effectively your image will use the texture space. Therefore you can have smaller images without losing any quality.

另一个减少纹理尺寸的方法是优化UV空间。你的UV解包越紧凑，你的图像就越能有效地利用纹理空间。因此，你可以在不损失任何质量的情况下拥有更小的图像。

Vertex Colors

Using vertex colors instead of images is an efficient way to speed up the loading and improve the overall performance of your WebGL applications. Although it comes at the expense of additional edges which you have to add to your model in order to separate different vertex colors.

顶点着色

使用顶点颜色而不是图像是一种有效的方法，可以加快加载速度，提高WebGL应用程序的整体性能。虽然它是以额外的边为代价的，为了分离不同的顶点颜色，你必须在你的模型中添加这些边。

You can also use vertex colors to define roughness, metalness or specular surfaces, or any other parameters. Below you can see an example of such a material where only vertex colors are used.

你也可以使用顶点颜色来定义粗糙度、金属度或镜面，或者其他参数。下面你可以看到这样一个只使用顶点颜色的材料的例子。

Number of Shaders

This is very beneficial to have less different materials/shaders in your scene. Shader processing in WebGL leads to prolonged loading, which is especially noticeable on Windows. Also if you have less shaders, the engine will spend less time on switching between them while rendering, thus improving the performance.

着色器的数量

这对减少场景中不同的材质/着色器是非常有益的。WebGL中的着色器处理会导致加载时间过长，这在Windows上尤其明显。另外，如果你有较少的着色器，引擎在渲染时将花费较少的时间在它们之间切换，从而提高性能。

If you have similar materials that only differ by textures, you can use only one material and load/swap its textures at run time. For this, you can use the replace texture puzzle or do it with JavaScript. This not only will optimize the number of shaders but also will reduce the number of images loaded at application startup.

如果你有类似的材质，只是纹理不同，你可以只使用一种材质，并在运行时加载/交换其纹理。为此，你可以使用替换纹理拼图或用JavaScript来做。这不仅可以优化着色器的数量，还可以减少应用程序启动时加载的图像数量。

Here's an example of such the optimization. All these tires are represented by only one material and configured by swapping its textures.

下面是这样一个优化的例子。所有这些轮胎都只用一种材料来表示，并通过交换其纹理来配置。

In order to reduce the number of shaders, you can combine 2 or more simple materials into one bigger material. This technique is especially effective if you plan to switch between these materials (e.g. you are making a configurator app), because it works faster this way and also allows for animated transitions.

为了减少着色器的数量，你可以将2个或更多的简单材质组合成一个更大的材质。如果你打算在这些材质之间进行切换（例如，你正在制作一个配置器应用程序），这种技术就特别有效，因为这种方式工作得更快，而且还可以进行动画转换。

Draw Calls

In addition, there is another important aspect - the number of draw calls. This number can be obtained from the Geometry Buffers section of the print performance info puzzle's output. This roughly corresponds to the number of separate objects if only one material is assigned per object, while multi-material objects require even more draw calls to render them.

Therefore, you should strive to join meshes when possible, and use less unique materials, in order to reduce the number of draw calls and improve the performance.

描绘指令次数

此外，还有一个重要的方面--绘图调用的数量。这个数字可以从打印性能信息拼图的输出中的几何缓冲区部分得到。如果每个对象只分配一个材料，这大致相当于独立对象的数量，而多材料对象需要更多的绘制调用来渲染它们。

因此，在可能的情况下，你应该努力连接网格，并使用较少的独特材料，以减少绘制调用的数量，提高性能。

If you have an animated object, you can still join its parts together and use bones for animation, which is sometimes even more convenient when animating separate objects.

如果你有一个动画对象，你仍然可以把它的各个部分连接在一起，用骨头来做动画，这在给独立对象做动画时有时甚至更方便。

HDR Lighting

It helps a lot improve the performance if you lighten your scene by an HDR image only, without using any light sources. An HDR file may weight less than 1 Mb.

HDR照明

如果你只用HDR图像来照亮你的场景，而不使用任何光源，这对提高性能有很大的帮助。一个HDR文件的重量可能低于1 Mb。

Shadows

Use dynamic shadows only when they help present your object nicely. On the picture below, dynamic shadows used in the Industrial Robot demo emphasize the shape of the robot model. The model itself is allowed to be rotated so the shadows cannot hide any part of the object from the user. On the other hand, shadows in the Scooter demo would cloud many details.