如何在webgl中创建网格动画

Question

我是WebGL领域的新手，我应该动画一个人脸，我有多边形的网格，从https://sketchfab.com/models/4d07eb2030db4406bc7eee971d1d3a97下载，我如何选择眼睛，嘴巴等上的点并移动它们来创建表情？提前感谢

Answer 1

WebGL is just a rasterization library。它绘制直线、点和三角形。就这样。其他的一切都由你决定。

加载和绘制3D模型需要数百或数千行代码。能够选择模型的各个部分(眼睛、嘴巴、舌头)需要更多的代码和结构，这些都与WebGL无关。动画这样的模型还需要更多的代码，这与WebGL无关。

我建议您使用像three.js这样的库，该库支持加载模型、选择模型的各个部分以及对模型进行动画处理。直接告诉你如何在WebGL中做所有这些事情基本上会是一整本书，对于一个关于堆栈溢出的问题来说，这个主题太宽泛了。

否则，在WebGL中做这件事会有很多工作要做。

首先，你需要编写一个3D引擎，因为正如我上面所说的，WebGL is just a rasterization library。它不能为你做3D。你必须写代码让它做3D。

所以你想要加载一个3d模型。您链接到此图像

​

​

要在WebGL中渲染该图像，需要编写多种着色器。看着这张图片，你至少需要写一些shadow casting system，某种normal mapping shader with lighting和bloom post processsing system (见他头顶上的发光)。这些主题中的每一个都是一本关于3D图形的书中的一整章。WebGL不会为你做这件事。它只画三角形。你必须提供让WebGL绘制这些东西的所有代码。

最重要的是，您需要制作某种类型的scene graph来表示头部的不同部分(眼睛、耳朵、鼻子、嘴巴……)这假设模型被设置为多个部分。它可能只是一个单独的网格。

假设它被设置为多个部分，您将需要实现一个skinning system。这是一本关于3d图形的书的另一个完整的章节。例如，蒙皮系统可以让你张开和闭上眼皮或嘴巴。如果没有蒙皮系统，构成头部的多边形将会飞离。另一种选择是使用形状混合系统，如果你在共享相同拓扑的多个模型之间变形，但使用这样的系统很难分别为眼睛和嘴巴设置动画。

在所有这些之后，您可以开始实现一个动画系统，它允许您移动蒙皮系统的骨骼来进行动画。

然后，最重要的是，您需要弄清楚如何从您链接到的模型中获取数据，并将其转换为您在上面花了几个月编写的引擎可以使用的数据。

我只是猜测你可能不知道它会做多少工作，因为WebGL不会为你做任何事情，因为它只画三角形。如果您真的想学习所有这些内容并自己动手，那么我可以从http://webglfundamentals.org开始学习WebGL的基础知识，并从他们的扩展开始，直到您可以完成所有这些工作为止。这将是一次很棒的学习经历。我只是猜测你需要几个月的时间才能在你自己的WebGL代码中加载头部和动画部分。

或者，您可以跳过所有这些，只使用已经为您完成了大部分工作的use a library。

Answer 2

我只是手动解压下载，从我可以告诉它只是一组纹理，凹凸贴图，等等，烘焙在静态照明…为了使您能够使用WebGL/OpenGL将模型渲染为静态3D模型...粗略地检查一下，您就可以确定所有各种假定的移动/动画比特和浮点

这并不是为了让你泄气。事实上，这样的静态数据集可能是一个很好的基础，可以在它提供的基础上滚动您自己的动画

静态渲染后，下一步是创建一个picker ...这是一个过程，在此过程中，您可以交互地移动：(模型和/或相机和/或眼睛)，以便确定所需分段(顶点/多边形)的XYZ位置，然后确定这些分段的分组。

假设您使用picker将整个头部与颈部分开，或将一只眼睛与面部分开。现在，您可以在模型中将每个对象分离到各自的对象中。这种分隔允许您将每个对象作为一个整体独立于其他对象进行移动。而最初整个模型是一个单独的对象，并且必须作为一个整体斑点移动

现在，原始源数据集已成为一组独立可移动的对象，您可以引入不属于原始数据集的新图形功能。这就是它变得有创意的地方。以编程方式，您可以动态移动网格的子部分。顶点和边组。挑战是，您还必须同时在这些顶点/边的不同纹理文件中移动所有相应的条目，这将是一场噩梦，并且不是给定数据集的预期用例。

由于纹理文件的分层集完全符合静态渲染/照明的当前状态，因此您选择的数据集非常逼真。也许对你有好处的是，从一个简单的网格开始，或者在许多方面更容易地动态合成你自己的网格“从头开始”，你可以更容易地识别不同的对象来动画它们，执行你自己的所有光照等，给它提供后期处理快照。