获取变换后的 3D 顶点

Question

我有一个 webgl 着色器，它使用骨架和 SkinnedMesh 基于 Three.js 为我生成模型（请参见下面的示例图片）。问题在于，据我所知， Three.js 没有提供任何选项来获取所使用的着色器计算产生的顶点。有没有办法直接从 webgl 使用的缓冲区或通过任何其他方式获取这些顶点，因为我需要它们将结果保存为客户端的 3d 对象文件（例如，作为 .obj 或 .stl）。不幸的是，我无法提供源代码，但我希望这是一个关于 webgl 的相当普遍的问题，这可能足以帮助我？

Answer 1

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

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

另一种方法是尝试使用变换反馈来让 GPU 将数学运算的结果写回缓冲区。变换反馈仅在 WebGL2 中有效，在 WebGL1 中无效，此外，在 Three.js 中，至少从 r123 开始还没有内置支持来帮助您。添加支持需要修改 Three.js 的源代码，因为为了使用变换反馈，您必须在编译和链接着色器时调用一些函数，并且据我所知， Three.js 中没有钩子来执行此操作，因此您必须修改源代码。特别是，您需要gl. transformFeedbackVaryings在调用之前调用gl.linkProgram，以便告诉 WebGL 您希望它写出哪些变量。

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