Three.js从WebGLRenderTarget(water sim)中检索数据

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