获取转换后的 3D 顶点

Question

我有一个 webgl 着色器，它基于 three.js 使用骨架和 SkinnedMesh 为我生成模型（参见下面的示例图片）。

问题在于，据我所知，three.js 没有提供任何选项来获取由使用的着色器计算产生的顶点。 有什么方法可以直接从 webgl 使用的缓冲区或通过任何其他方式获取这些顶点，因为我需要它们将结果保存为客户端的 3d 对象文件（例如，作为 .obj 或 .stl）。

很遗憾，我无法提供源代码，但我希望这是一个关于 webgl 的相当普遍的问题，这可能足以帮助我？

Answer 1

没有“简单”的方法来获取变换后的顶点

一种方法就是 运行 在 JavaScript 中使用着色器本身正在执行的相同数学运算。参见

另一种方法是尝试使用 变换反馈 让 GPU 将计算结果写回缓冲区。 转换反馈 仅适用于 WebGL2，不适用于 WebGL1，而且 three.js，至少 r123 没有内置支持来帮助您。添加支持将需要修改 three.js 的源代码，因为为了使用转换反馈，您必须在编译和链接着色器时调用一些函数，据我所知，three.js 中没有钩子可以做到这一点，所以您必须修改源。特别是你需要在调用 gl.linkProgram 之前调用 gl. transformFeedbackVaryings 以告诉 WebGL 你希望它写出哪些变量。

有一个简短的非 three.js 使用变换反馈写出值的示例 here

还有一个警告是，如果您需要将顶点值读回 JavaScript，您将需要调用 gl.getBufferSubData，这被认为很慢。是否太慢取决于您的需求。