Javascript Ray Marcher v0.3

Here I have added lighting, giving a much softer render of the landscape. Diffuse lighting depends entirely on the angle of the light falling on the surface. If the light is off to one side and landing at a low angle, then the surface will be darker. We don't take the camera position into account, like we will do when we add specular lighting. Diffuse surfaces are typically soft materials like fabric, organic materials, dirt etc.

To get the normal, we fire 3 rays into the target. One is the camera ray. One of the rays is shifted sideways a little, the other is shifted up a little. The vectors from the impact point to the two extra rays form the the gradient plane of the surface at the impact point, and their cross product is the normal vector that we want.

This is an extension of the previous version, which assumed that there was only a ground function, so we could just check the height of the ground at any point. However we now have extra shapes, separate from the ground, so we have to do the proper calculations for all of them.

So the render process now works as follows:

In the picture below, the bands of colour on the front hills, are actually a mistake in the colouring algorithm. Initally I thought it was just an issue with the step size that would dissapear when I optimsed the speed and reduced the step size, but in fact it is a fundamental problem in my implementation. I'm leaving it there as a demonstration of a common bug, or something like that.

Example render