如何将 2D 逐帧动画放在 3d 模型上（混合动画）答案

【问题标题】：How to put 2D frame-by-frame animation on 3d model (hybrid animation)如何将 2D 逐帧动画放在 3d 模型上（混合动画）
【发布时间】：2014-05-19 13:01:57
【问题描述】：

我想做一个卡通 3D 角色，其中面部特征是平面绘制的，并且是 2D 动画。有点像泡泡孔雀鱼角色。

我正在努力寻找一种好的方法来做到这一点。我正在使用 Libgdx，但我认为潜在的方法可以适用于任何游戏引擎。

以下是我想到的想法，但每个都有缺点。有没有办法做到这一点？我只是在和我的孩子们玩一个低成本的 Wii 游戏（一个 Nickelodeon 舞蹈游戏），它使用这种类型的动画来制作面部。

想法：

UV 动画 - 有没有办法设置游戏模型（FBX 格式），以便将某些 UV 存储在各种皮肤中？然后 UV 可以跳转到精灵贴图中的各个位置。

投影面 - 这个想法很复杂。将纹理投影到模型上，并使用顶点着色器统一移动投影纹理的 UV。所以基本上，你需要一个投影矩阵来设置模型来移动面部投影。但是您需要在面部框架精灵周围有足够的填充，以使模型的其余部分远离精灵贴图的其他部分。这会导致复杂的片段着色器不适合移动设备。

随模型移动平面 3D 贴花 - 单独显示与模型对齐并在游戏中作为单独网格进行批处理的 3D 贴花。贴花可能只是一个四边形，您可以在其中更改每个动画帧上顶点的 UV 属性。但是，此方法不会环绕面部的曲率。也许可以将其分解为每个眼睛和嘴巴的单独贴花，但仍然看起来不太好，并且需要为每个模型创建一个单独的文件来定义贴花的位置。

为每一帧动画分离骨骼 - 为每一帧动画在网格中建模一个重复的面部，并为每个面部赋予一个独特的骨骼。通过在 0 和 1 之间切换骨骼比例来为面部设置动画。如果动画帧数超过几帧，这个想法很快就会失效。

每帧更新部分皮肤 - 将皮肤复制到 FBO。将最新的动画帧绘制到包含面部的 FBO 颜色纹理部分。这种方法的缺点是，您需要为模型的每个实例在内存中单独复制一份纹理，并且 FBO 必须每帧都进行缓冲区恢复（成本高昂），或者您必须重新绘制整个每帧都将皮肤放入 FBO（也很昂贵）。

我还有其他比这些更困难的想法。感觉一定有更简单的方法。

编辑：

还有一个想法... 统一的 UV 偏移和顶点颜色 - 此方法将使用顶点颜色，因为它们很容易在所有游戏引擎和建模包中得到支持，但在许多情况下未使用。在纹理中，创建一条动画帧。为第一帧设置面部 UV。使用 Alpha 0 为所有顶点着色，除了面顶点可以着色为 Alpha 1。然后将 UV 面偏移统一传递给顶点着色器，并在将其添加到 UV 之前将其乘以顶点颜色上的阶跃函数。这避免了上述所有方法的缺点：所有东西都可以被包装到模型的所有实例共享的一个纹理中，并且模型上除了可能在面部的位置之外不会有二次像素。这里的缺点是模型更重（每个顶点有四个额外的属性，尽管颜色可能会被烘焙到单个字节）。

【问题讨论】：

标签： opengl opengl-es libgdx shader 3d-modelling

【解决方案1】：

您的着色器可以接收 2 个纹理，一个用于身体，一个用于面部。脸部是透明的，因此您可以将其覆盖在身体的顶部。然后你只需要根据动画发送不同的面部纹理。

【讨论】：

这可能是最简单的方法。但是有几个缺点……动画帧不能被合成到单个纹理上，所以如果屏幕上有很多角色实例，就会发生很多纹理绑定。即使只有面部在视觉上需要两个，也会为角色的每个像素进行两次纹理查找。手机有点贵。我认为我的贴花创意和骨骼创意会更高效，但更难实现。

【解决方案2】：

我在为我的 3d 场景中的背景广告牌实现 2d 动画时遇到了同样的问题。

我认为使用贴花是最简单的解决方案，实现动画就像根据动画对象更新贴花的 TextureRegion 一样简单：

TextureRegion frame = animation.getKeyFrame(currentFrameTime, true);
decal.setTextureRegion (frame);

我猜你的情况真正的问题是在场景中定位贴花。一种解决方案是使用您的 3D 建模软件对“幻像”网格进行建模，该网格将存储贴花的位置。

“幻影”网格不会与所有其他 3d 元素一起渲染，而是用于确定贴花顶点的位置。您唯一需要做的就是复制“幻影”位置顶点并将它们粘贴到贴花上。

我还没有实现这个解决方案，但理论上它可以相对容易地完成。

希望这个想法对您有所帮助，如果您发现任何其他解决方案/代码，我将不胜感激。

【讨论】：