在开发布料模拟之前，我想使用 WebGPU 开发强大的代码基础。 这就是为什么我想从 Wavefront .OBJ 文件加载器开始渲染 3D 模型。 这样，我们可以快速渲染 3D 模型，并构建一个简单而强大的渲染引擎来完成此任务。 一旦我们有了扎实的基础，我们就可以轻松实现布料模拟部分了。

推荐：用 NSDT编辑器 快速搭建可编程3D场景

1、Wavefront .OBJ 文件

.OBJ 是一种文件格式，包含由 Wavefront Technologies 公司创建的 3D 几何图形的描述。 典型的 .OBJ 文件的结构包含一组：

• 顶点
• 法线
• 纹理坐标
• 面

让我们看一个例子。 .obj 金字塔定义如下：

v  0  0  0
v  1  0  0
v  1  1  0
v  0  1  0
v  0.5  0.5  1.6

f  4// 1// 2//
f  3// 4// 2//
f  5// 2// 1//
f  4// 5// 1//
f  3// 5// 4//
f  5// 3// 2//

渲染此文件，我们可能会看到一个如下图所示的金字塔：

那么问题出现了：

我们如何将这种文件格式加载到我们的程序中？

我们将了解如何使用现成的 .OBJ 文件来执行此操作，以渲染复杂的几何图形。 利用别人的劳动来免除我们的辛苦工作的美妙之处。

如果你手头有FBX、GLTF等其他格式的模型，可以使用这个3D格式转换工具将其转换为.OBJ文件：

https://3dconvert.nsdt.cloud

2、我们如何找到 .OBJ 文件？

我使用 Google 查找 .OBJ 文件。 也就是说，如果我找到一个我喜欢的文件，我必须将其加载到 Blender 等软件中，原因如下：

• 格式一致性：当使用 Google 查找 .OBJs 文件时，它们都有一些小的格式特性。 例如，他们可以定义带或不带斜线的顶点和面。 我想用Blender加载和导出以保证文件内容的格式。
• 几何体的定位：有时，模型的定位方式是我们不想要的。 纠正 Blender 中的初始位置可以节省我们一些时间和代码。

让我们看一个例子。 对于这个项目，我想使用著名的斯坦福兔子。 该文件可以在这里找到：

3、如何在 Blender 中准备几何体

下载文件后，我们需要在Blender等3D软件中打开它进行检查。 我们立刻就可以看到这个位置有问题：

我想将兔子居中，使其身体位于原点。 要做到这一点非常简单。 以下是这些步骤：

将原点放在兔子上。 右键单击，然后导航到“设置原点”>“原点到几何体”。

将兔子移动到场景原点。 右键单击，然后导航至“捕捉”>“光标选择”。

兔子现在以原点为中心：

原文链接：http://www.bimant.com/blog/webgpu-obj-loader/