我正在尝试将此(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/找到了解决方案
将调查并报告。
最佳答案
好的,我想出了如何使用 native 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。
这是最新的 fiddle :http://jsfiddle.net/EqLL9/3/
随着我的进步,我会保持更新。
编辑:现在很好用。刚刚实现了法线,现在致力于环境反射和折射(再次纯粹通过着色器)。 http://relicweb.com/webgl/rt.html
关于Three.js 从 WebGLRenderTarget 检索数据(水模拟),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18167797/