Question

我正在尝试将此（http://madebyevan.com/webgl-water/）移植到三。我想我已经接近了（现在只想要模拟，不关心焦散/折射）。我想让它与着色器一起使用GPU提升。

这是我使用着色器的当前三个设置：http://jsfiddle.net/EqLL9/2/ （第二个较小的平面用于调试WebGLRenderTarget中当前的内容）

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

如果我可以从rtTexture读回数据并更新每帧的数据纹理（buf1），那么模拟应该正确动画。如何直接从WebGLRenderTarget读取数据？所有示例都演示了如何将数据发送到目标（呈现给它），而不是从中读取数据。或者我做错了吗？有些东西告诉我，我必须使用多种纹理，并以某种方式来回交换，类似于Evan的做法。

TL; DR：如何在这样的调用之后将数据从WebGLRenderTarget复制到DataTexture：
// render to rtTexture renderer.render( sceneRTT, cameraRTT, rtTexture, true );

编辑：可能在jsfiddle / gero3 / UyGD8 / 9 /找到了解决方案将调查并报告。

Answer 1

好的，我想出了如何使用原生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。

这是最新的小提琴：http://jsfiddle.net/EqLL9/3/

随着我的进步，我会随时更新。

编辑：现在很棒。刚刚实现了法线，现在正在进行环境反射和折射（再次纯粹是着色器）。 http://relicweb.com/webgl/rt.html

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

1 个答案: