8

我正在尝试将此（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/ 找到了解决方案，将进行调查并报告。

4

1 回答 1

10

好的，我想出了如何使用本机 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

于 2013-08-11T19:22:44.743 回答