数字孪生平台示例解析——高质量花草场景效果

在线示例。更多精彩内容尽在数字孪生平台。

场景解析

场景主要由天空、地面和 3 种类型的花草（包含叶子花瓣和茎的单独实例的花、小圆形草、比较高的带动画的草）组成。为了使场景更加生动，还绘制了光晕和移动的蚂蚁蝴蝶。

绘制顺序如下：首先是靠近相机的物体和较大的物体，以便有效地利用深度缓冲区；然后是靠近地面的物体，接着是天空和地面。地平面具有透明的边缘，可以与背景天空球体一起模糊，因此它是在天空之后最后绘制的。

对于太阳光晕效果，我们可以用一个带有镜面高光的球体对象来模拟。它是最后在整个几何体上绘制的，所以无需深度测试。这样，在阳光下看时，就会感觉有点过曝，而当相机不面向太阳时，光晕就不那么明显了。

实例的瓦块化剔除

草和花是使用类似的着色器绘制的，其中的共同部分是实例定位。这些实例对象从 FP32 RGB 纹理获取变换。

所有实例着色器都使用相同的包括 COMMON_TRANSFORMS，它使用纹理中的 2 个采样点来检索 XY 平面中的平移、缩放和旋转。旋转以角度的正弦和余弦形式存储，以节省旋转数学运算。

原始变换存储在GrassPositions.ts中的数组 FLOWERS、GRASS1 和 GRASS2 中。但是这些数组具有所有对象实例的坐标，还没有被分割。为此，我们使用 sortInstancesByTiles 函数对它们进行处理。它创建了一个新的 FP32 数组，并重新排列位置旋转，并创建一个图块数组，指定着色器使用的最终纹理中的实例计数和起始偏移量。这些准备好的信息存储在 TiledInstances 对象中。该功能可以将分布在方形地面区域上的所有实例分割为任意 N2 块。在 Web 示例中，所有实例都被分为合理的 4x4 图块区域，包含 16 个图块。每个图块有一个小的填充，可以让它们稍微重叠。该填充具有草模型的大小，因此当图块被剔除时，放置在图块最边缘的实例不会突然消失。

这里可视化展示下实例如何分割成图块。让我们想象一个样本区域，其中有 20 个随机放置的对象，我们希望每个图块都剔除这些对象。让我们将这些实例重新排列成 2x2 网格，总共有 4 个图块：

以下是包含这些对象的纹理结构，显示每个实例的每个组件中存储的图块和数据：

这里，图块 0 的实例的偏移量 = 0 且计数 = 5，图块 1 的实例偏移量 = 5 且计数 = 4，依此类推。

利用这种结构我们可以在 4 个绘制调用里绘制所有 20 个实例（类似于批次绘制），并按每个图块批量剔除它们，而无需更新 GPU 上的任何数据。

CPU 上的图块边界框剔除也相对简单。它是在每一帧上完成的，可以在示例上控件的“统计”部分中看到当前渲染了多少个图块和独立实例。

对于绘制不同的对象有不同的实例着色器。小草和花瓣是最简单的——它们使用简单的漫反射着色。蒲公英的茎和叶应用镜面高光，用于渲染高草叶片的着色器使用顶点动画进行风模拟。

蚂蚁绘制

为了让地面显得更加真实，我们在上面随机画了一些蚂蚁。也是通过实例化进行绘制——在 2 次绘制调用中渲染了总共 68 只蚂蚁。

它们以随机半径和中心绕圈移动。它们通过两次绘制调用进行绘制，来实现在这些圆形路径内顺时针和逆时针旋转。在AntsShader.ts的代码中可以查看定位顶点的具体算法。

蝴蝶绘制

这么好的场景怎么能缺的了蝴蝶？ 绘制它们与蚂蚁类似，但在它们的高度上添加了正弦波。每个实例都从具有 4 种不同变体的纹理图集中获取其颜色。

与蚂蚁不同的是，蝴蝶有动画效果。这里在顶点着色器ButterflyShader.ts中使用了一个非常简单的技巧来为其设置动画：只需上下移动翼尖即可为其设置动画。翼尖被确定为具有高 X 坐标绝对值的顶点。当然，这不是翅膀围绕蝴蝶身体的正确圆周运动 - 翅膀会随着运动幅度的增加而明显拉长，如下图所示：