Wave Equation: 5pt and 9pt Stencils

Er, JavaScript or WebGL doesn't seem to be running, so basically all you're going to see is the bare code...

varying vec2 texcoords;
uniform float time;
uniform float dt;
uniform sampler2D tex;

void main() { 
// Pick read location
  vec2 read=texcoords; // read from here
  float pix=1.0/1024.0; // texture coords per pixel

// Read locations, with optional mipmap bias
  vec4 C=texture2D(tex,read,0.0);
  if (C.r==0.0) { // first time setup
    gl_FragColor=vec4(0.25,0.25,0.25,1.0); return;
  }

// Direct neighbors
  vec4 L=texture2D(tex,read+vec2(-pix,0.0),0.0);
  vec4 R=texture2D(tex,read+vec2(+pix,0.0),0.0);
  vec4 T=texture2D(tex,read+vec2(0.0,+pix),0.0);
  vec4 B=texture2D(tex,read+vec2(0.0,-pix),0.0);

// Blurring (for stability)
  vec4 N = 0.25*(T+B+R+L);
  C = 0.9*C + 0.1*N; //weighted average of me and neighbors

/* 5 point version: */
  // height drives velocity
  C.x += 0.1*(R.z - L.z);
  C.y += 0.1*(T.z - B.z);

// velocity convergence drive height
  C.z += 0.1*(R.x - L.x);
  C.z += 0.1*(T.y - B.y);

/* 9 point version:
  // Diagonal neighbors
  vec4 LT=texture2D(tex,read+vec2(-pix,+pix),0.0);
  vec4 RT=texture2D(tex,read+vec2(+pix,+pix),0.0);
  vec4 LB=texture2D(tex,read+vec2(-pix,-pix),0.0);
  vec4 RB=texture2D(tex,read+vec2(+pix,-pix),0.0);

// height drives velocity
  C.x += 0.1/3.0*((RT.z+R.z+RB.z) - (LB.z+L.z+LT.z));
  C.y += 0.1/3.0*((RT.z+T.z+LT.z) - (LB.z+B.z+RB.z));

// velocity convergence drive height
  C.z += 0.2/3.0*((RT.x+R.x+RB.x) - (LB.x+L.x+LT.x)
                 +(RT.y+T.y+LT.y) - (LB.y+B.y+RB.y));
*/

// Write out new color
  gl_FragColor=C;
  gl_FragColor.a=1.0; // alpha is opaque
}

// Setup to render into an offscreen buffer
// (See mrdoob.github.com/three.js/examples/webgl_rtt.html)

var w=512, h=512; // size of offscreen tex (pixels)

var options={
minFilter: THREE.LinearMipmapLinearFilter,  // we want mipmaps
magFilter: THREE.LinearFilter,  // we want nice filtering
format:THREE.RGBAFormat, // texture has 4 channels: RGBA
type:THREE.FloatType // uncomment for float (default is byte)
};
sim.texRTTold = new THREE.WebGLRenderTarget( w,h, options );
sim.texRTT = new THREE.WebGLRenderTarget( w,h, options );

// The offscreen buffer has its own camera and scene
sim.cameraRTT = new THREE.OrthographicCamera( 0,1, 1,0, -100, 100 );
sim.sceneRTT = new THREE.Scene();

sim.sphereRTT = new THREE.Mesh( 
   new THREE.SphereGeometry(0.02,10,10), 
   new THREE.MeshBasicMaterial( { color: 0x5500cc} ) 
);
sim.sceneRTT.add( sim.sphereRTT );

// Here's how to run a shader into the offscreen buffer
var plane=new THREE.Mesh(
   new THREE.PlaneGeometry(1,1),
   sim.frag=new THREE.ShaderMaterial( {
     uniforms: { 
        time: { type: "f", value: 0.0 },
        dt: {type: "f", value: 0.0 },
        tex: {type: "t", value: sim.texRTTold },
     },
     vertexShader: lib.simpleVertexShader,
     fragmentShader: PixAnvil.loadTab("Frag")

} )
);
plane.position.set(0.5,0.5,0.0); // center it
sim.sceneRTT.add(plane);

// Here's the easy way to draw texRTT onscreen:
var cubeShow = new THREE.CubeGeometry( 10,0.0001,10 );
var easyShow = new THREE.Mesh( cubeShow, 
  new THREE.MeshBasicMaterial( { color: 0xf0f0f0, map: sim.texRTT } ) 
);
easyShow.position.set(0,6,5);
scene.add( easyShow );

// Add a brown TV frame (so you can see background)
var frame = new THREE.Mesh( cubeShow, new THREE.MeshBasicMaterial( { color: 0x884422 } ) );
frame.position.set(0,6.1,5);
frame.scale.set(1.1,1,1.1);
scene.add( frame );

// Ground
var groundTex=THREE.ImageUtils.loadTexture( "textures/checkerboard_noisy.jpg" );
groundTex.wrapS=groundTex.wrapT=THREE.RepeatWrapping;
groundTex.repeat=new vec2(25.0,25.0);

sim.ground = new THREE.Mesh(
  new THREE.CubeGeometry(50,50,0.0001),
  new THREE.MeshLambertMaterial(
    {color: 0xffccaa, opacity: 1, map:groundTex})
);
sim.ground.position.z=-1;  /* hack for radius 1 */
sim.ground.receiveShadow=true;
scene.add(sim.ground);

// Sun-like spotlight
var l=new THREE.SpotLight();
sim.light = l;
l.position.set( -50, -100, 100 );
l.castShadow=true;
l.shadowCameraNear = 50; 
l.shadowCameraFar = 500; 
l.shadowCameraFov = 10; // degrees field of view
scene.add(l);

// Camera control:

// Update camera coordinate system
var s=camera;
if (!s.X) { // startup: create initial coordinates
    s.X=new vec3(1,0,0);
    s.Y=new vec3(0,0,1);
    s.Z=new vec3(0,-1,-0.2); // camera Z is world Y
    s.P=new vec3(0,-5,1.3); // initial location
}

// Move camera via keyboard
var move=new vec3(0,0,0); // sums current frame motion

// X control via A and D
if (lib.key['a']) move.pe(new vec3(-1,0,0));
if (lib.key['d']) move.pe(new vec3(+1,0,0));
// Y control via W and S
if (lib.key['w']) move.pe(new vec3(0,0,-1));
if (lib.key['s']) move.pe(new vec3(0,0,+1));
// Z control via Q and Z
if (lib.key['q']) move.pe(new vec3(0,+1,0));
if (lib.key['z']) move.pe(new vec3(0,-1,0));

move.te(5.0*lib.dt); // meters/second motion rate
s.P.pe(s.X.t(move.x).p(s.Y.t(move.y)).p(s.Z.t(move.z)));

// Rotate camera via mouse
var speed=0.01; // radians per mouse pixel
if (lib.mouseleft) { // move Z with mouse
    s.Z.pe(s.X.t(-lib.mousedx*speed).p(
           s.Y.t( lib.mousedy*speed)));
}

// Keep level: make sure X is horizontal.
s.X.z=0.0;
s.Y.crossVectors(s.Z,s.X.normalize());

// Orthonormalize
s.X.crossVectors(s.Y,s.Z).normalize();
s.Y.crossVectors(s.Z,s.X).normalize();
s.Z.normalize();

// Write coordinate system into matrix
s.matrixAutoUpdate=false; // don't trash
s.matrixWorldNeedsUpdate=true; // show
  
var m=s.matrix; // the camera's matrix

// Utility function: set a matrix column
function setCol(m,col,vec) {
  m.elements[4*col+0]=vec.x;
  m.elements[4*col+1]=vec.y;
  m.elements[4*col+2]=vec.z;
}

setCol(m,0,s.X);
  setCol(m,1,s.Y);
  setCol(m,2,s.Z);
  setCol(m,3,s.P); // position from sim