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.); } </script>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!