Use your fingers or mouse to control the model (hold shift key or use mouse wheel to zoom it). Canvas is matched to your browser window.

Terrain from float texture

2D Flat Wave is useful but not very impressive. This application is the second step to make 3D Big Wave. We use 2D float texture data as z heights of corresponding (x,y) points on N×N square grid (N = 1024).

This vertex shader uses 2D float texture to make terrain. N×N points (x,y) of the aPos attribute make (0,0, 1,1) square. They are used to get the z coordinate from texture too.

<script id="shader-vs-show" type="x-shader/x-vertex"> 
  attribute vec2 aPos;
  uniform mat4 mvMatrix;
  uniform mat4 prMatrix;
  uniform float d;
  varying vec4 color;
  uniform sampler2D uTexSamp;
  const vec4 dirDif = vec4(0., 0., 1., 0.);
  const vec4 dirHalf = vec4(-.4034, .259, .8776, 0.);
void main(void) {
   float h = texture2D(uTexSamp, aPos ).r;
   gl_Position = prMatrix * mvMatrix * vec4(aPos, h, 1.);
then we calculate the normal vector
   vec3 aNorm = vec3(texture2D(uTexSamp, vec2(aPos.x + d, aPos.y)).r -
     texture2D(uTexSamp, vec2(aPos.x - d, aPos.y)).r,
     texture2D(uTexSamp, vec2(aPos.x, aPos.y + d)).r -
     texture2D(uTexSamp, vec2(aPos.x, aPos.y - d)).r, -d-d);
   aNorm = normalize(aNorm);
   vec4 rotNorm = mvMatrix * vec4(aNorm, .0);
and colors
   float i = max( 0., abs(dot(rotNorm, dirDif)) );
   color = vec4(.0, .5*i, i, 1.);
   i = pow( max( 0., abs(dot(rotNorm, dirHalf)) ), 120.);
   color += vec4(i, i, i, 0.);
We can use e.g. 2048×2048 patches with (look the page source for detail)
   gl.drawArrays(gl.TRIANGLES, 0, 6*(N-1)*(N-1));
We are ready to the Big Wave now!
Simulations on GPU
updated 3 Jan 2011