Three.js：如何从网络工作者加载动画 .json 模型？

Question

序言

我已经在这个问题上苦苦挣扎了将近两个星期，但离解决方案还差得远。我问了一些我认为会引导我走向正确方向的子问题：

• Three.js - How to deserialize geometry.toJSON()? (where is geometry.fromJSON?)
• Three.js: How to create new 'morphing' geometry if I have all necessary buffers?

其中，第二个仍然是相关的，但似乎没有人在咬人，尽管有赏金。所以我现在直接问完整的问题，我会尽量不做任何假设。 （提示）解决方案将不胜感激。

问题

我在.json 文件中有几个大型动画 3D 模型，例如可能用THREE.JSONLoader 加载。它们的格式有点像这样：

{
    "metadata": { "formatVersion": 3, ... },
    "vertices": [...],
    "normals": [...],
    "faces": [...],
    "morphTargets": [
        { "name": "...", "vertices": [...] },
        ...
    ],
    "morphNormals": [
        { "name": "...", "normals": [...] },
        ...
    ]
}

在从主线程执行所有操作时，我已经能够使动画正常工作。但是加载和处理这些大文件会使 GUI 冻结很长时间。所以我需要把这一切都委托给一个web-worker，然后在主线程中成功创建动画。

另外，我需要将结果通过transferable objects发回主线程，这样就不会有原始数据的克隆阻塞主线程。据我了解，WebGL 使用Float32Arrays，其缓冲区是可传输的对象。所以我确信这是可以做到的。

在我看来，所需的过程如下：

1. (UI) ➝ 发送文件名 ➝ (worker)
2. (worker) ➝ 下载 ➝ 进程 ➝ 发送缓冲区（包括 morphTargets） ➝ (UI)
3. (UI) ➝ 在不复制任何缓冲区的情况下重建动画

我遇到问题的是 2 和 3。确切地说，需要在工作人员中创建哪些缓冲区，以及如何使它们在 UI 端表现得像正确的 (Buffer)Geometry？

我的尝试

我知道已经存在一个相关问题：

• How to efficiently convert THREE.Geometry to ArrayBuffer, File or Blob?

但这个问题似乎过时了。我很可能应该使用THREE.BufferGeometry，它没有被提及（可能是因为它还不存在）。接受的答案有点复杂，需要我在主线程中做一些原始工作，比如下载模型并渲染它以生成缓冲区。

事实证明，BufferGeometry 还不支持动画。一位satori99 最近提交了pull request 以添加此支持。我一直在使用该代码，但到目前为止，还无法将其应用于我的情况。看来支持还是很不完善的。

这是我最新的拙劣尝试：

• main thread (communication with worker)
• main thread (using the BufferGeometry)
• web worker

Answer 1

当我决定解决它时，我想我可能遇到了和你一样的问题。

我得出的结论是，使用 THREE.Geometry 是个问题，而专注于创建直接使用 JSON Object Format 4.3 的 JSON 文件是一个更好的解决方案。

这种格式将所有数据存储在 TypedArrays 中，加载/解析时无需对这些数据进行计算。所以加载速度要快得多，而且在大多数情况下，我不必为使用工作人员而烦恼，因为加载过程中不再有任何暂停。

不幸的是，这种格式缺少许多旧 JSON 格式已经支持的功能。但它是three.js json资产未来的首选格式，所以它会改变。

就变形动画而言，现有着色器只要通过正确的变形数据缓冲区就可以正常工作，但当前的 WebGLRenderer 不会为 BufferGeometry 执行此操作，只有常规几何。

这是 BufferGeometry 变形的主要障碍。

当我创建 PR 时，我遵循了 WebGLRenderer 用于为常规几何创建缓冲区的相同内部逻辑，但从那时起渲染器代码可能发生了一些变化。特别是在 dev 分支中。

这周我会再看一遍。因为我也需要让它为我的项目工作:)