Three.js Abrufen von Daten aus WebGLRenderTarget (Wasser-Sim)

Question

Ich versuche, dies (http://madebyevan.com/webgl-water/) zu DREI zu portieren. Ich denke, dass ich nah dran bin (will nur die Simulation für den Moment, kümmere mich nicht um Ätzmittel/Refraktion). Ich würde es gerne mit Shadern für den GPU-Boost arbeiten lassen.

Hier sind meine aktuellen DREI Setup mit Shadern: http://jsfiddle.net/EqLL9/2/ (die zweite kleinere Ebene ist für das Debuggen, was in der WebGLRenderTarget aktuell ist)

Was mit Ich kämpfe Daten lesen wieder aus dem WebGLRenderTarget (rtTexture in meinem Beispiel). In diesem Beispiel sehen Sie, dass die 4 Eckpunkte um den Mittelpunkt herum nach oben verschoben sind. Dies ist korrekt (nach 1 Simulationsschritt), da es damit beginnt, dass der Mittelpunkt der einzige Verschiebungspunkt ist.

Wenn ich die Daten aus der rtTexture lesen und die Datenstruktur (buf1) für jeden Frame aktualisieren könnte, sollte die Simulation richtig animiert werden. Wie liest man die Daten direkt aus einem WebGLRenderTarget? Alle Beispiele zeigen, wie Daten an das Ziel gesendet (rendern), nicht von FROM gelesen werden. Oder mache ich alles falsch? Irgendetwas sagt mir, dass ich mit mehreren Texturen arbeiten muss und irgendwie ähnlich wie Evan hin und her tauschen muss.

TL; DR: Wie kann ich das Kopieren von Daten von einem WebGLRenderTarget zu einem DataTexture nach einem Aufruf wie folgt aus:
// render to rtTexture
renderer.render(sceneRTT, cameraRTT, rtTexture, true);

EDIT: die Lösung bei jsfiddle/gero3/UyGD8/9/ Will gefunden haben recherchieren und melden Sie sich zurück.

Answer 1

Ok, habe ich herausgefunden, wie die Daten unter Verwendung nativer webgl Anrufe zu lesen:

// 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; 

Die Simulation beseelt jetzt. Es scheint jedoch nicht richtig zu funktionieren (wahrscheinlich ein dummer Fehler, den ich übersehen habe). Es scheint, dass die Höhenwerte niemals gedämpft werden und ich bin mir nicht sicher warum. Die Daten von buf1 werden im Fragment-Shader verwendet, der die neue Höhe berechnet (rot in RGBA), den Wert dämpft (mit 0,99 multipliziert) und dann in eine Textur rendert. Ich lese dann diese aktualisierten Daten von der Textur zurück in buf1.

Hier ist die neueste Geige: http://jsfiddle.net/EqLL9/3/

Ich werde dies dem Laufenden halten, wie ich entlang Fortschritte.

EDIT: Funktioniert jetzt gut. Es wurden gerade Normalen implementiert und nun arbeiten wir an der Reflektion und Refraktion der Umgebung (wiederum rein durch Shader). http://relicweb.com/webgl/rt.html