通用

优化技术

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

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

几何体/网格

几何体是一个3D应用程序的基础,因为它构成了模型的主要形状。为了获得更平滑的反射和更快的渲染,应该尽可能保持网格的规则。在一开始,就应该决定场景中要包含的细节级别,并在建模时坚持使用。

topology.jpg

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

crease.jpg

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

cylindrical.jpg

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

details.jpg

法线贴图

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

normal-map.jpg

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

normal-map-problems.jpg

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

normal-map-best-solution.jpg

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

  • 物体由许多不同的表面组成。
  • 表面粗糙,不会产生细致的伪影。
  • 物体很远或很小,因此用户不会注意到任何伪影。 normal-map-usage.jpg

贴图

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

textures.jpg

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

textures-pack-rgba.jpg

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

textures-pack-a.jpg

减小贴图大小的另一种方法是优化UV空间。UV展开越紧凑,图片使用贴图空间的效率就越高。因此,你可以拥有较小的图像而不会失去任何质量 。

uv-space.jpg

顶点着色

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

vertex-colors.jpg

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

vertex-colors-pbr.jpg

材质数量

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

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

replacing-textures.jpg

以下是此类优化的示例。所有这些轮胎仅使用一种材质,并通过replace texture进行配置。

replacing-textures-example.jpg

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

mixing-shaders.jpg

绘制调用

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

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

materials-number.jpg

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

materials-number-armature.jpg

HDR照明

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

hdr-image.jpg

阴影

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

dynamic-shadows.jpg

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

baked-shadows.jpg

另见

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

Copyright © zjbcool.com 2019 all right reserved,powered by Gitbook最后更新: 2020-01-21 10:32:21

results matching ""

    No results matching ""