# 优化技术

为了更好的WebGL性能需进行场景优化。

译注

本文是优化应用程序的重要参考,开发者应尽量遵循本建议。

mark

在这里,我们推荐一些优化技术,这些技术可以很好地创建基于Web的交互式体验,本文主要基于Soft8Soft在Verge3Day Europe 2019会议上的演示

原文

Here we recommend some optimization techniques that proved to work well for creating web-based interactive experiences. This chapter is mostly based on Soft8Soft's presentation at the conference Verge3Day Europe 2019.

# 模型/网格

模型是一个3D应用的基础,因为它构成了物体的主要形状。为了获得更平滑的反射和更快的渲染,应该尽可能让网格布线均匀。在一开始,就应该决定场景中要包含的细节级别,并在建模时贯彻到底。

原文

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.

topology.jpg

创建折痕时,最好使用光滑组而不是过度加线。

原文

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

crease.jpg

创建圆柱类型的模型时,应尽量减少中心部分的段数。

原文

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

cylindrical.jpg

不要因为增加那些用户根本不会看到的细节而使面数过多。如下图所示,橙色显示的边定义了整个模型的细节程度,可以作为建模参考。

原文

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.

details.jpg

# 法线贴图

优化WebGL性能的常用方法是,从高模到低模烘焙法线贴图来减少多边形的数量。

原文

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.

normal-map.jpg

但是,由于8位图像的精度有限,法线贴图可能会产生可见的伪影。下面是一些可能的解决方案,但它们是相当不切实际的:使用更高精度的图像会造成更大的文件,而第二种方法相当耗时并且不能保证干净的结果。然而第三种方法在某些情况下可能会起作用:如果是非常粗糙的表面,我们建议在材质上添加噪点以减少这些伪影。

原文

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.

normal-map-problems.jpg

根据我们的经验,我们发现光泽物体的最佳解决方案是使用具有平滑组的中模,并且不含法线贴图。

原文

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.

normal-map-best-solution.jpg

最后,在下列情况下,可以使用法线贴图而不是高模:

  • 模型有许多变化的表面。
  • 表面粗糙,不会产生细致的伪影。
  • 物体很远或很小,因此用户不会注意到任何伪影。
原文

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.

normal-map-usage.jpg

# 贴图

这是PBR流程(及一般流程)中使用的一组典型贴图。

原文

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

textures.jpg

如你所见,它们大多是黑白色。因此,可以把灰度图合并到一张图片的RGBA通道中,每张图片最多包含4张贴图。

原文

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.

textures-pack-rgba.jpg

如果只有一张黑白贴图,可以将它与任何已有的RGB贴图组合,方法是将其打包到Alpha通道中。最后,如果你没有要合并的图像,可以将黑白图像转换为jpeg格式,压缩率为95%,并启用灰度模式。

原文

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.

textures-pack-a.jpg

减小贴图大小的另一种方法是优化UV空间。UV展开越紧凑,图片使用贴图空间的效率就越高。这样可以获得较小的图片而不会损失质量 。

原文

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-space.jpg

# 顶点着色

使用顶点颜色而不是图片是加速加载和提高WebGL应用程序整体性能的有效方法。虽然它是以牺牲额外的段数为代价的,但是必须在模型上加线分离出不同的顶点颜色。

原文

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.

vertex-colors.jpg

你还可以使用顶点颜色来定义粗糙度、金属度或高光,以及任何其他参数。你可以在下面看到仅使用顶点颜色的此类材质的示例。

原文

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.

vertex-colors-pbr.jpg

# 材质数量

在场景中使用较少的不同材质(着色器)非常有用。WebGL中的着色器处理导致延长加载,这在Windows上尤其明显。此外,如果你使用较少的着色器,引擎在渲染时将花费更少的时间在它们之间进行切换,从而提高性能。

原文

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.

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

原文

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.

replacing-textures.jpg

以下是此类优化的示例。所有这些轮胎仅使用一种材质,并通过切换贴图实现配置。

原文

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

replacing-textures-example.jpg

为了减少材质的数量,你可以将两种或更多种简单材质组合成一个更大的材质。如果你计划在这些材质之间切换(例如,你正在制作配置器程序),此技术尤其有效,因为它以这种方式工作得更快,并且还允许动画过渡。

原文

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.

mixing-shaders.jpg

# 绘制调用

此外,还有另一个重要方面 – 绘制调用的数量。此数量可以从print performance info 拼图输出的几何缓冲区部分获得。如果每个模型仅分配一个材质,则这大致对应于单独模型的数量,而多材质模型需要更多的绘制调用来渲染它们。

原文

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.

因此,您应尽可能使用合并网格,并使用较少的单一材质,以减少绘制调用的次数并提高性能。

materials-number.jpg

如果你有一个动画物体,你仍然可以将它的各个部分合并在一起,然后使用骨骼进行动画制作,这有时比给单独物体做动画会更方便。

原文

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.

materials-number-armature.jpg

# HDR照明

如果仅使用HDR图像给场景照明,而不使用任何光源,它可以大大提高性能。一个HDR文件的大小应小于1 Mb。

原文

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-image.jpg

# 阴影

仅当它们有助于很好地呈现物体时才使用动态阴影。在下图中,工业机器人演示中使用的动态阴影强调了机器人模型的形状。由于模型本身可以旋转 ,因此阴影不会对用户隐藏任何模型部件。而另一方面,踏板车演示中的阴影会掩盖很多细节。

原文

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.

dynamic-shadows.jpg

如果物体没有在程序中移动,你可以烘焙阴影和AO贴图并将它们应用到物体下方的地面。

原文

If your object does not move in your app, you may bake shadow and ambient occlusion maps and apply them to the plane under the object.

baked-shadows.jpg

# 另见

查看资产压缩章节,了解如何使应用程序更加轻量。

疑问?

请在钉钉群:21935218交流。群内除聚集众多开发者,还有最新动态、视频教程、智能客服@宅小呗、答疑、直播、下载等实用功能。如需宅家呗提供技术支持,请加钉钉好友:zjbcool

Verge3D知识社区 客服
上次更新: 2020-8-16 12:51:23