Hello . 大家好
今天给大家带来外网的一篇关于移动端顶点动画优化的干货


今天介绍一种在Puzzling Places（一款3d拼图游戏）里面在单个draw中使用不同的轴在顶点着色器中为各个不同的小对象设置动画的方法。         

更多精彩图片 请登录

做手游会面临一系列挑战。这些挑战之一是有限的处理能力以及有限的内存带宽。移动设备通常具有共享架构，其中内存在 GPU 和 CPU 之间共享。由于这些资源在两个处理器之间共享，因此很容易对输入和输出施加压力并导致瓶颈。这意味着移动项目对drawcall、贴图大小、overdraw等非常敏感。
对于Puzzling Places 中的最新拼图，我们决定在建筑物的一侧添加铃铛动画。在一般的工作流程中，你可以轻松地将每个铃铛单独作为actor放置，并在其中使用一段代码使其围绕铃铛的某个轴旋转。轴将是局部空间的原点。然而，这会导致每多一个铃铛就多一个draw，而且还有相关的各种状态变化。就性能而言，考虑到我们计划拥有 20 个左右，这是不可行的。
我将在此处介绍的解决方案是通过一次draw用为顶点着色器中的铃铛设置动画。这带来了两个需要克服的挑战，第一个是在顶点着色器中以某种方式让每个铃铛的轴心位置可用，第二个是在同一draw/shader中围绕该轴心独立移动.

更多精彩图片 请登录

1设置中心轴
如果你想将一些信息传递给顶点/片段着色器，通常选择很少。但是可以将信息作为统一方式传递，例如，由你的 CPU 设置的值，该值在该绘制调用期间有效。如果我们想设置风速之类的东西，这个办法就比较有用。因为这个值对于所有的铃铛都是一样的。然而，对于铃铛本身的中心轴，我们需要以某种方式为不同的顶点设置不同的值。为此，我们可以使用顶点属性，这些属性因顶点而异。
我们可以使用任何顶点属性来放中心轴位置（法线、uv、顶点颜色等），这里我选择了 UV。至于怎么去存值，你可以使用任何你想要的 3D 软件（包括编写 python 工具或在 Unreal 引擎本身中执行）。我使用了 Blender 中的几何节点。
在这个例子中，我们有两种类型的铃铛，大的和小的。所有大的作为一个组都处于相同的高度。同样，小的也处于相同的高度。所以我们实际上不需要为 UV 中的铃铛存旋转轴的高度，因为稍后可以在着色器中简单计算出来。我们在顶点颜色中存放了shader正在处理的铃铛类型。

更多精彩图片 请登录

更多精彩图片 请登录

图-1- 不同的铃铛类型你看到的整个模型都是使用同一个shader渲染的。为确保没有其他动画，用模型的某一个属性来存放它正在处理的模型的哪个部分（比如顶点颜色）。属性值在 0 到 0.1 之间表示它是普通网格，0.1 和 0.2 表示它是附件之一（僧侣、老虎等。它们使用单独的较小纹理），0.2 到 0.3 小铃铛和 0.3 到 0.4 大铃铛. 我们有更多的案例区分，因为我们以不同的方式为铃铛的内部设置动画。
只要某一个属性是独立的（没有一个顶点的某一个属性有好几个状态的情况），你就可以在顶点颜色的单个通道中存多达 256 个状态。当然，稍后在shader中读取和解码此信息会产生一定的成本，对于我们只有几个状态的例子来说，这可以忽略不计。

更多精彩图片 请登录

更多精彩图片 请登录

图-2-顶点颜色用于区分不同的模型要存实际的中心轴，你需要在铃铛内的每个顶点UV 上存该铃铛的中心轴 XY 值。你可以自动执行此操作。例如，你可以把铃铛摆在和uv的0-1对应的位置，然后使用相机投影设置从 UV 空间所在的投影空间推断出实际世界位置。这个操作可以用节点或者python工具，但是由于我们没有太多的铃铛要处理，所以就手动处理。从自上而下的视图投影后，对于每个铃铛，我们只需读取轴心所在位置的顶点值，并将该铃铛内所有顶点的 UV 设置为该值。
下一步是引入几何节点。为避免精度问题，我们根据模型的边界信息将 UV 归一化到 0–1 。这个过程稍后在shader中反向完成，以获得每个中心轴的真实局部空间位置。

更多精彩图片 请登录

图-3-归一化几何节点中uvs中的轴点为了可视化，规范化空间如下所示。在下图中，红色和绿色代表归一化空间中所有附件的像素位置（不是中心轴）的 XY 值。

更多精彩图片 请登录

图-4-归一化空间的可视化最后，你的 UV 看起来像这样。

更多精彩图片 请登录

图-5- 中心轴被存储的 UV ，每个黄点是该铃铛中心轴在归一化空间中自上而下的投影位置

2引擎中心轴的重构
现在我们在 UV 中有了中心轴信息，我们可以简单地在引擎中重构。整个shader很复杂，所以我只关注相关部分。

更多精彩图片 请登录

图-6- 渲染寺庙、铃铛和附件的整个着色器首先，我们需要根据顶点颜色进行id区分，以了解我们正在处理的模型的哪一部分。使用简单的step函数，你可以在数学上构建逻辑门，根据输入数字是否在给定范围内为你提供 0/ 1（假/真）。

更多精彩图片 请登录

更多精彩图片 请登录

图-7- 第一张图：用于确定顶点颜色是否在一定范围内的函数，第二张图：为不同的网格部分构造不同的布尔情况。使用 Min、Max、Multiply、1-x 等函数，你现在可以使用类似于 OR 和 AND 的函数与此同时，我们需要从 UV 中读取normalize的中心轴位置，并执行与我们在blender的几何节点中所做的normalize相反的操作。用于normalize的边界信息需要与 blender 中使用的数字相同。

更多精彩图片 请登录

图 -8- 使用 UV、normalize重建 pivtos。星形部分是图 -7- 中id区分的输入。确定着色器处理的网格的哪一部分，以确定中心轴的正确高度。

更多精彩图片 请登录

图 -9- 使用 Max 和 multiply 来模拟 OR 和 IF 功能。这是图-8-中星形部分的左边这样中心轴部分就完成了。你现在可以在着色器中为铃铛设置动画。


3动画部分

为铃声设置动画的核心概念是查看变换矩阵。虚幻材质编辑器本身不支持数据类型矩阵。这是 Unreal 中让人头疼的设计之一。虽然构建一个并不难，但你将需要一个像这样的函数来进行向量矩阵乘法。

更多精彩图片 请登录

更多精彩图片 请登录

图-10- 通过设置空间的轴来围绕一个点旋转一个向量。命名可能会造成混淆，这不是角度/点类型的函数。这是来自 Pivot 的查看功能。我可能应该更改名称。XYZ column是观察矩阵，pivot是要应用观察矩阵的空间的原点，point是顶点在局部空间中的位置剩下的就简单了。正如我的 Look At Matrix 文章中所述，你可以使用一系列叉积构建坐标系。重要的一点是，视角向量应与铃铛局部空间的底部向量对齐，因为这是铃铛指向的方向。

更多精彩图片 请登录

图-11-使用叉积构造坐标系的轴为了确定铃铛应该的朝向，我只需使用 sine和 time 在铃铛的中心轴下方的圆圈内移动一个点。这一点是铃铛旋转的目标。风力和铃铛类型决定了这个圆圈的半径。为了增加真实感，与旁边的铃铛相比，每个铃铛在时间上都有一点偏移。因此，不仅每个铃铛都有自己的动画，动画还会从一个铃铛衔接到另一个，就像风吹一样。

更多精彩图片 请登录

图-12- 构造视角向量。星号处输入是添加到 sin 以改变动画的每个铃铛的中心轴动画中还有更多细节，例如较大的铃铛内部的弯曲以及根据风的不同强度改变sine，这里不会介绍这些细节。

更多精彩图片 请登录

图 -13- 控制旋转强度的较小细节最后要介绍的是应用实际动作。在材质编辑器中，你通常只能设置顶点位移，而不是实际的顶点位置。因此，作为最后一步，在使用视角矩阵转换位置后，你需要从未移动的位置中减去它以获得增量向量作为偏移量传递。值得一提的是，如果你想在保持动画不变的同时旋转你的actor，你应该在局部空间中进行所有这些计算，并在最后将结果转到世界空间中。

更多精彩图片 请登录

图-14- 应用转换前的最后步骤。输入 A 是顶点颜色的遮罩，以确保动画仅应用于网格的相关部分，B 是旋转后的变换顶点，C 是未变换顶点的局部位置。
4改进
现在的设置已经过优化，但我们可以做得更好。对于初学者，我使用的是顶点颜色，但只使用其中可用的 4 个通道中的一个。所以我使用的内存是我需要的内存的 4 倍。
正如我之前所说，移动设备对带宽压力很敏感。由于每个顶点都存在顶点属性，因此顶点颜色上额外未使用的内存与你拥有的顶点数量成线性比例关系，并且会在顶点着色器处理顶点时对带宽施加不必要的压力。
一种解决方案是使用轴心的顶点颜色。但正如之前提到的，Blender/Unreal 在网格的顶点颜色上强制使用整数类型，由于缺乏精度，这对于中心轴之类的东西来说并不理想。你当然可以采用 3 个 int 通道并将其存储为你自己的 float，但这需要一些编程工作，并且会产生运行时成本。
更好的解决方案可能是采用一个有 float 4 的属性，它就可以同时处理id区分和中心轴处理。这可以替换 uv+color 组合，它浪费了属性上的 8 个插槽（颜色 4 个插槽 + uv 2 个插槽，就算有些没有填充任何值，由于体系结构，它也会四舍五入到 8 个）。在 Unreal 中一个很好的属性是 normal。虚幻引擎强制将法线打包到你的顶点着色器，即使你有一个未使用它的无光照着色器。所以如果你把数据存到法线，你的内存就不会有什么变化，同时可以访问你需要的信息。
Unreal 中法线的主要问题是某些操作发生在顶点着色器的后台。由于时间不够，我们最终没有使用任何这些改进。
原文：https://medium.com/realities-io/ ... in-ue4-e564c6029588
         

- End -

   

Hello . 大家好
今天给大家带来外网的一篇关于移动端顶点动画优化的干货


今天介绍一种在Puzzling Places（一款3d拼图游戏）里面在单个draw中使用不同的轴在顶点着色器中为各个不同的小对象设置动画的方法。         

更多精彩图片 请登录

做手游会面临一系列挑战。这些挑战之一是有限的处理能力以及有限的内存带宽。移动设备通常具有共享架构，其中内存在 GPU 和 CPU 之间共享。由于这些资源在两个处理器之间共享，因此很容易对输入和输出施加压力并导致瓶颈。这意味着移动项目对drawcall、贴图大小、overdraw等非常敏感。
对于Puzzling Places 中的最新拼图，我们决定在建筑物的一侧添加铃铛动画。在一般的工作流程中，你可以轻松地将每个铃铛单独作为actor放置，并在其中使用一段代码使其围绕铃铛的某个轴旋转。轴将是局部空间的原点。然而，这会导致每多一个铃铛就多一个draw，而且还有相关的各种状态变化。就性能而言，考虑到我们计划拥有 20 个左右，这是不可行的。
我将在此处介绍的解决方案是通过一次draw用为顶点着色器中的铃铛设置动画。这带来了两个需要克服的挑战，第一个是在顶点着色器中以某种方式让每个铃铛的轴心位置可用，第二个是在同一draw/shader中围绕该轴心独立移动.

更多精彩图片 请登录

1设置中心轴
如果你想将一些信息传递给顶点/片段着色器，通常选择很少。但是可以将信息作为统一方式传递，例如，由你的 CPU 设置的值，该值在该绘制调用期间有效。如果我们想设置风速之类的东西，这个办法就比较有用。因为这个值对于所有的铃铛都是一样的。然而，对于铃铛本身的中心轴，我们需要以某种方式为不同的顶点设置不同的值。为此，我们可以使用顶点属性，这些属性因顶点而异。
我们可以使用任何顶点属性来放中心轴位置（法线、uv、顶点颜色等），这里我选择了 UV。至于怎么去存值，你可以使用任何你想要的 3D 软件（包括编写 python 工具或在 Unreal 引擎本身中执行）。我使用了 Blender 中的几何节点。
在这个例子中，我们有两种类型的铃铛，大的和小的。所有大的作为一个组都处于相同的高度。同样，小的也处于相同的高度。所以我们实际上不需要为 UV 中的铃铛存旋转轴的高度，因为稍后可以在着色器中简单计算出来。我们在顶点颜色中存放了shader正在处理的铃铛类型。

更多精彩图片 请登录

更多精彩图片 请登录

图-1- 不同的铃铛类型你看到的整个模型都是使用同一个shader渲染的。为确保没有其他动画，用模型的某一个属性来存放它正在处理的模型的哪个部分（比如顶点颜色）。属性值在 0 到 0.1 之间表示它是普通网格，0.1 和 0.2 表示它是附件之一（僧侣、老虎等。它们使用单独的较小纹理），0.2 到 0.3 小铃铛和 0.3 到 0.4 大铃铛. 我们有更多的案例区分，因为我们以不同的方式为铃铛的内部设置动画。
只要某一个属性是独立的（没有一个顶点的某一个属性有好几个状态的情况），你就可以在顶点颜色的单个通道中存多达 256 个状态。当然，稍后在shader中读取和解码此信息会产生一定的成本，对于我们只有几个状态的例子来说，这可以忽略不计。

更多精彩图片 请登录

更多精彩图片 请登录

图-2-顶点颜色用于区分不同的模型要存实际的中心轴，你需要在铃铛内的每个顶点UV 上存该铃铛的中心轴 XY 值。你可以自动执行此操作。例如，你可以把铃铛摆在和uv的0-1对应的位置，然后使用相机投影设置从 UV 空间所在的投影空间推断出实际世界位置。这个操作可以用节点或者python工具，但是由于我们没有太多的铃铛要处理，所以就手动处理。从自上而下的视图投影后，对于每个铃铛，我们只需读取轴心所在位置的顶点值，并将该铃铛内所有顶点的 UV 设置为该值。
下一步是引入几何节点。为避免精度问题，我们根据模型的边界信息将 UV 归一化到 0–1 。这个过程稍后在shader中反向完成，以获得每个中心轴的真实局部空间位置。

更多精彩图片 请登录

图-3-归一化几何节点中uvs中的轴点为了可视化，规范化空间如下所示。在下图中，红色和绿色代表归一化空间中所有附件的像素位置（不是中心轴）的 XY 值。

更多精彩图片 请登录

图-4-归一化空间的可视化最后，你的 UV 看起来像这样。

更多精彩图片 请登录

图-5- 中心轴被存储的 UV ，每个黄点是该铃铛中心轴在归一化空间中自上而下的投影位置

2引擎中心轴的重构
现在我们在 UV 中有了中心轴信息，我们可以简单地在引擎中重构。整个shader很复杂，所以我只关注相关部分。

更多精彩图片 请登录

图-6- 渲染寺庙、铃铛和附件的整个着色器首先，我们需要根据顶点颜色进行id区分，以了解我们正在处理的模型的哪一部分。使用简单的step函数，你可以在数学上构建逻辑门，根据输入数字是否在给定范围内为你提供 0/ 1（假/真）。

更多精彩图片 请登录

更多精彩图片 请登录

图-7- 第一张图：用于确定顶点颜色是否在一定范围内的函数，第二张图：为不同的网格部分构造不同的布尔情况。使用 Min、Max、Multiply、1-x 等函数，你现在可以使用类似于 OR 和 AND 的函数与此同时，我们需要从 UV 中读取normalize的中心轴位置，并执行与我们在blender的几何节点中所做的normalize相反的操作。用于normalize的边界信息需要与 blender 中使用的数字相同。

更多精彩图片 请登录

图 -8- 使用 UV、normalize重建 pivtos。星形部分是图 -7- 中id区分的输入。确定着色器处理的网格的哪一部分，以确定中心轴的正确高度。

更多精彩图片 请登录

图 -9- 使用 Max 和 multiply 来模拟 OR 和 IF 功能。这是图-8-中星形部分的左边这样中心轴部分就完成了。你现在可以在着色器中为铃铛设置动画。


3动画部分

为铃声设置动画的核心概念是查看变换矩阵。虚幻材质编辑器本身不支持数据类型矩阵。这是 Unreal 中让人头疼的设计之一。虽然构建一个并不难，但你将需要一个像这样的函数来进行向量矩阵乘法。

更多精彩图片 请登录

更多精彩图片 请登录

图-10- 通过设置空间的轴来围绕一个点旋转一个向量。命名可能会造成混淆，这不是角度/点类型的函数。这是来自 Pivot 的查看功能。我可能应该更改名称。XYZ column是观察矩阵，pivot是要应用观察矩阵的空间的原点，point是顶点在局部空间中的位置剩下的就简单了。正如我的 Look At Matrix 文章中所述，你可以使用一系列叉积构建坐标系。重要的一点是，视角向量应与铃铛局部空间的底部向量对齐，因为这是铃铛指向的方向。

更多精彩图片 请登录

图-11-使用叉积构造坐标系的轴为了确定铃铛应该的朝向，我只需使用 sine和 time 在铃铛的中心轴下方的圆圈内移动一个点。这一点是铃铛旋转的目标。风力和铃铛类型决定了这个圆圈的半径。为了增加真实感，与旁边的铃铛相比，每个铃铛在时间上都有一点偏移。因此，不仅每个铃铛都有自己的动画，动画还会从一个铃铛衔接到另一个，就像风吹一样。

更多精彩图片 请登录

图-12- 构造视角向量。星号处输入是添加到 sin 以改变动画的每个铃铛的中心轴动画中还有更多细节，例如较大的铃铛内部的弯曲以及根据风的不同强度改变sine，这里不会介绍这些细节。

更多精彩图片 请登录

图 -13- 控制旋转强度的较小细节最后要介绍的是应用实际动作。在材质编辑器中，你通常只能设置顶点位移，而不是实际的顶点位置。因此，作为最后一步，在使用视角矩阵转换位置后，你需要从未移动的位置中减去它以获得增量向量作为偏移量传递。值得一提的是，如果你想在保持动画不变的同时旋转你的actor，你应该在局部空间中进行所有这些计算，并在最后将结果转到世界空间中。

更多精彩图片 请登录

图-14- 应用转换前的最后步骤。输入 A 是顶点颜色的遮罩，以确保动画仅应用于网格的相关部分，B 是旋转后的变换顶点，C 是未变换顶点的局部位置。
4改进
现在的设置已经过优化，但我们可以做得更好。对于初学者，我使用的是顶点颜色，但只使用其中可用的 4 个通道中的一个。所以我使用的内存是我需要的内存的 4 倍。
正如我之前所说，移动设备对带宽压力很敏感。由于每个顶点都存在顶点属性，因此顶点颜色上额外未使用的内存与你拥有的顶点数量成线性比例关系，并且会在顶点着色器处理顶点时对带宽施加不必要的压力。
一种解决方案是使用轴心的顶点颜色。但正如之前提到的，Blender/Unreal 在网格的顶点颜色上强制使用整数类型，由于缺乏精度，这对于中心轴之类的东西来说并不理想。你当然可以采用 3 个 int 通道并将其存储为你自己的 float，但这需要一些编程工作，并且会产生运行时成本。
更好的解决方案可能是采用一个有 float 4 的属性，它就可以同时处理id区分和中心轴处理。这可以替换 uv+color 组合，它浪费了属性上的 8 个插槽（颜色 4 个插槽 + uv 2 个插槽，就算有些没有填充任何值，由于体系结构，它也会四舍五入到 8 个）。在 Unreal 中一个很好的属性是 normal。虚幻引擎强制将法线打包到你的顶点着色器，即使你有一个未使用它的无光照着色器。所以如果你把数据存到法线，你的内存就不会有什么变化，同时可以访问你需要的信息。
Unreal 中法线的主要问题是某些操作发生在顶点着色器的后台。由于时间不够，我们最终没有使用任何这些改进。
原文：https://medium.com/realities-io/ ... in-ue4-e564c6029588
         

- End -