Three.js Retrieve data from WebGLRenderTarget (water sim)

Question

I am trying to port this (http://madebyevan.com/webgl-water/‎) over to THREE. I think I\'m getting close (just want the simulation for now, don\'t care about caustics/refrac

Answer 1

Ok, I figured out how to read the data using native webgl calls:

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

The simulation now animates. However, it doesn't seem to be functioning properly (probably a dumb error I'm overlooking). It seems that the height values are never being damped and I'm not sure why. The data from buf1 is used in the fragment shader, which calculates the new height (red in RGBA), damps the value (multiplies by 0.99), then renders it to a texture. I then read this updated data from the texture back into buf1.

Here's the latest fiddle: http://jsfiddle.net/EqLL9/3/

I'll keep this updated as I progress along.

EDIT: Works great now. Just got normals implemented, and now working on environment reflection and refraction (again purely though shaders). http://relicweb.com/webgl/rt.html