1. Home
  2. Docs
  3. Verge3D用户手册
  4. 通用话题
  5. 场景优化技术

场景优化技术

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

几何体/网格

几何体处于一个3D应用程序的底层,因为它构成了一个模型的主要形态。为了获得更加光滑的反射和更快的渲染,你需要尽可能地保持网格规则。从一开始,你就需要确定场景中你想要的细节程度,并且在建模时贯彻它。

创建折痕时,最好使用平滑组而不是添加太多多边形。

在创建圆柱模型时,要尽量减少中心多边形的段数。

不要让用户根本不会看到的额外细节来使模型超限。如下图所示,橙色突出显示的边缘定义了整个模型的细节程度,你可以以此作为参考。

法线贴图

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

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

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

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

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

纹理

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

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

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

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

顶点颜色

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

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

材质数量

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

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

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

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

绘制调用

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

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

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

HDR照明

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

阴影

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

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

另外看看

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

Was this article helpful to you? Yes 1 No