Three.js从WebGLRenderTarget（water sim）检索数据

我正在尝试移植这个(‎) 到三点了。我想我已经接近了（现在只需要模拟，还不关心焦散/折射）。我想让它与GPU增强的着色器一起工作

以下是我当前使用着色器的三种设置： （第二个较小的平面用于调试WebGLRenderTarget中当前的内容）

我正在努力从WebGLRenderTarget（在我的示例中为rtTexture）读回数据。在该示例中，您将看到围绕中心点的4个顶点向上位移。这是正确的（在1个模拟步骤之后），因为它从中心点作为唯一位移点开始

如果我可以从rtTexture读取数据并在每一帧更新数据纹理（buf1），那么模拟应该正确设置动画。如何直接从WebGLRenderTarget读取数据？所有示例都演示了如何将数据发送到目标（渲染到目标）或者我做错了吗？有些东西告诉我，我将不得不使用多种纹理，并以某种方式来回交换，就像埃文所做的那样

TL；DR：在这样的调用之后，如何将数据从WebGLRenderTarget复制到DataTexture：

//渲染到rtTexture

render.render（scenert、cameraRTT、rtTexture、true）；

编辑：可能在jsfiddle/gero3/uigd8/9找到了解决方案/

---

将进行调查并报告。

好的，我找到了如何使用本机webgl调用读取数据的方法：

// Render first scene into texture
renderer.render( sceneRTT, cameraRTT, rtTexture, true );

// read render texture into buffer
var gl = renderer.getContext();
gl.readPixels( 0, 0, simRes, simRes, gl.RGBA, gl.UNSIGNED_BYTE, buf1.image.data );
buf1.needsUpdate = true;

模拟现在可以动画了。但是，它似乎没有正常工作（可能是我忽略了一个愚蠢的错误）。高度值似乎从未被阻尼，我不知道为什么。来自buf1的数据用于碎片着色器，该着色器计算新高度（RGBA中的红色），阻尼值（乘以0.99），然后将其渲染为纹理。然后，我将此更新的数据从纹理读回buf1

以下是最新的小提琴：

我会随着进度不断更新

---

编辑：现在效果很好。刚刚实现了法线，现在正在处理环境反射和折射（还是纯粹通过着色器）.

好的，修复了模拟。我没有使用双WebGLRenderTargets实现双缓冲。最新的是：非常好。下面是另一个在three.js框架内实现GPGPU的示例：@WestLangley谢谢，看起来很酷。我已经更新了模拟，并将其放在我的主站点上（仍然是一个WIP）：这可能会有帮助：threejs.org/examples/webgl_postprocessing_godrays.html接受不完全令人满意的答案将导致问题的视图计数很差，因为每个人都认为这一切都很好。我正在研究类似的水模拟。就像你的情况一样，阻尼不起作用。双缓冲是如何解决的阻尼问题？