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!