如何在webgl

Question

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

Answer 1

我只是手动解压缩下载，从我可以告诉它只是一组纹理，凹凸贴图等，在静态光照下烘烤...使您能够使用WebGL / OpenGL将模型渲染为静态3D模型...快速粗略的检查表明，由你来识别所有各种假定的移动/动画位和凸起

这不是为了阻止你......事实上，这样一个静态数据集可能是一个很好的基石，可以在这个基础上滚动你自己的动画

一旦您静态渲染它，下一步就是创建一个picker ...这是一个交互式移动:(模型和/或相机和/或眼睛）的过程，以便您识别所需段（顶点/多边形）的XYZ位置，然后是这些段的分组。

假设您已经使用picker将整个头部划分为颈部，或者从脸部说出一只眼睛。现在，您可以将每个对象分成模型中自己的对象。这种分离允许您独立于其他对象移动每个对象。而最初整个模型是一个单一的对象，并且必须作为一个单一的blob移动

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

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

Answer 2

WebGL is just a rasterization library。它绘制线条，点和三角形。就是这样。其他一切都取决于你。

加载和绘制3D模型需要数百或数千行代码。能够选择模型的部分（眼睛，嘴巴，舌头）需要更多的代码和结构，其中没有任何内容与WebGL有关。动画这样的模型需要更多代码，这与WebGL无关。

我建议您使用像three.js这样的库来支持加载模型，选择部分模型以及为它们设置动画。告诉你如何直接在WebGL中完成所有这些操作基本上是一本完整的书，对于Stack Overflow上的一个问题来说，这个主题的范围太广了。

否则在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已经为你做了大部分工作。