Three.js WebGLRenderTarget（ウォーターシム）からデータを取得

Question

私はこの（http://madebyevan.com/webgl-water/）をTHREEに移植しようとしています。私は近づいていると思う（ちょうど今はシミュレーションが必要で、腐食/屈折については気にしない）。私はそれをGPUのブーストのためのシェーダで動作させたいと思っています。

は、ここに私の現在の3つの設定使用してシェーダです：http://jsfiddle.net/EqLL9/2/ （第2小さな平面WebGLRenderTargetで現在何デバッグするためです）

私は私の例ではWebGLRenderTarget（rtTextureから戻ってデータを読んでいると戦っています）。この例では、中心点を囲む4つの頂点が上に移動していることがわかります。これは、中心点が変位の唯一の点であることから始まるので、正しい（1つのシミュレーションステップ後）。

rtTextureからデータを読み込み、各フレームのデータテクスチャ（buf1）を更新することができれば、シミュレーションは正しくアニメーション化されるはずです。 WebGLRenderTargetから直接データを読み取るにはどうすればよいですか？すべての例は、データをターゲットに送信する方法（レンダリングする方法）を示しています。あるいは私はそれをすべて間違っているのですか？何か私には、複数のテクスチャで作業しなければならず、何とかEvanのやり方と同じように前後にスワップする必要があります。

TL; DR：どのように私はこのような呼び出しの後DataTextureにWebGLRenderTargetからデータをコピーすることができます
// render to rtTexture
renderer.render(sceneRTT, cameraRTT, rtTexture, true);

EDIT：jsfiddle/gero3/UyGD8/9/ で解決策を見つけたかもしれないだろう調査し、報告する。

Answer 1

[OK]を、私はネイティブ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