获取转换后的 3D 顶点

Question

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

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

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

Answer 1

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

一种方法是在 JavaScript 中运行与着色器本身相同的数学运算。见this answer

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

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

另外需要注意的是，如果您需要将顶点值读回 JavaScript，则需要调用 gl.getBufferSubData，这被认为很慢。是否太慢取决于您的需求。