Javascript Ray Marcher v0.2

To do this I added a ground function, which returns the height of the ground (z) based on the (x,y) position. When a ray hits the ground (r.x < ground(r.x, r.y)), I check the ground on the side of the impact point (ground(r.x, r.y) and ground(r.x, r.y+e)) and ground(r.x+e, r.y)) . The vectors from the impact point to the two nearby points are the basis vectors of the slope of the ground at the impact point, and the cross product of the vectors is the normal vector.

I use this normal vector to colour the surface - The parts pointing directly up are green, east and west facing slopes are red, and north-south slopes are blue. In practise, I just use the (normalised) normal vector as the RGB values for the texture, (r,g,b) = (x,y,z).

I've also added a basic projection to the camera, so rays now diverge as they travel. This lets me show the horizon without having to sink the camera into the ground.

My ground function is now

function ground(x,z) { ret = 8*Math.sin(x/10)*Math.sin(z/10); return ret; ;}

Some nice looking harmonic hills!