javascript - 获取由 Three.js 中的displacementMap 置换的修改后的网格

Question

我正在尝试返回并导出被位移贴图替换的网格。

着色器正在根据这一行变换顶点(来自Three.js/src/renderers/shaders/ShaderChunk/displacementmap_vertex.glsl):

transformed += normalize( objectNormal ) * ( texture2D( displacementMap, uv ).x * displacementScale + displacementBias );

这是根据与该顶点的 uv 坐标混合的置换贴图来置换顶点。

我正在尝试创建此网格/几何图形，以便稍后可以将其导出。

我在这里创建了问题的“演示”: Github Page 我想要置换网格，如在视口(viewport)中看到的那样，在按exportSTL时向上。然而我只得到了未移位的飞机。

我明白为什么会发生这种情况，位移仅发生在着色器中，并没有真正直接位移平面的几何形状。

我还没有找到 Three.js 提供的方法，并且到目前为止还没有找到任何从着色器获取更改的方法。所以我尝试使用“demo.js”中的函数来完成此操作。但是，我是 WebGL/two.js 新手，在重新创建着色器的功能时遇到问题。

我发现导出器处理 morphTargets，但这些没有帮助。看完this question我尝试了 PlaneBufferGeometry，因为它更接近着色器 - 但这对我产生相同的结果。我认为this question最初试图产生类似的东西，但接受了一个不相关的问题。

最后，我想在 HTML Canvas 上绘制，然后实时更新纹理(我有这部分工作)。然后，用户可以导出网格以进行 3D 打印。

有没有办法 Three.js 可以给我修改着色器的几何形状？或者有人可以帮我将着色器线转换为“传统”Three.js 函数吗？也许这完全是错误的获取位移网格的方法？

更新 - 示例正在运行

感谢 DeeFisher 的示例，我现在可以计算 CPU 中的位移，正如 imerso 最初建议的那样。如果您点击Github Page现在，您将获得一个有效的示例。目前我不完全明白为什么我必须镜像 Canvas 才能最终获得正确的位移，但这在最坏的情况下是一个小麻烦。

Answer 1

要在仍然使用着色器进行位移的同时执行此操作，您需要切换到 WebGL2 并使用 Transform-Feedback(Google 搜索:WebGL2 Transform-Feedback)。

另一种方法是将纹理读回 CPU，并在仅使用 CPU 置换顶点的同时扫描它(Google 搜索:WebGL readPixels)。

两种替代方案都需要一些努力，因此目前没有代码示例。 =)