This article is a continuation of WebGL 3D Directional Lighting. If you haven't read that I suggest you start there.

In the last article we covered directional lighting where the light is coming universally from the same direction. We set that direction before rendering.

What if instead of setting the direction for the light we picked a point in 3d space for the light and computed the direction from any spot on the surface of our model in our shader? That would give us a point light.

If you rotate the surface above you'll see how each point on the surface
has a different *surface to light* vector. Getting the dot product of the
surface normal and each individual surface to light vector gives us a
different value at each point on the surface.

So, let's do that.

First we need the light position

```
uniform vec3 u_lightWorldPosition;
```

And we need a way to compute the world position of the surface. For that we can multiply our positions by the world matrix so ...

```
uniform mat4 u_world;
...
// compute the world position of the surfoace
vec3 surfaceWorldPosition = (u_world * a_position).xyz;
```

And we can compute a vector from the surface to the light which is simular to the direction we had before expect this time we're computing it for every position on the surface to a point.

```
v_surfaceToLight = u_lightWorldPosition - surfaceWorldPosition;
```

Here's all that in context

```
attribute vec4 a_position;
attribute vec3 a_normal;
+uniform vec3 u_lightWorldPosition;
+uniform mat4 u_world;
uniform mat4 u_worldViewProjection;
uniform mat4 u_worldInverseTranspose;
varying vec3 v_normal;
+varying vec3 v_surfaceToLight;
void main() {
// Multiply the position by the matrix.
gl_Position = u_worldViewProjection * a_position;
// orient the normals and pass to the fragment shader
v_normal = mat3(u_worldInverseTranspose) * a_normal;
+ // compute the world position of the surfoace
+ vec3 surfaceWorldPosition = (u_world * a_position).xyz;
+
+ // compute the vector of the surface to the light
+ // and pass it to the fragment shader
+ v_surfaceToLight = u_lightWorldPosition - surfaceWorldPosition;
}
```

Now in the fragment shader we need to normalize the surface to light
vector since it's a not a unit vector. Note that we could normalize in
the vertex shader but because it's a `varying`

it will be linear
interpolated between our positions and so would not be a complete unit
vector

```
precision mediump float;
// Passed in from the vertex shader.
varying vec3 v_normal;
+varying vec3 v_surfaceToLight;
-uniform vec3 u_reverseLightDirection;
uniform vec4 u_color;
void main() {
// because v_normal is a varying it's interpolated
// we it will not be a uint vector. Normalizing it
// will make it a unit vector again
vec3 normal = normalize(v_normal);
vec3 surfaceToLightDirection = normalize(v_surfaceToLight);
- float light = dot(v_normal, u_reverseLightDirection);
+ float light = dot(v_normal, surfaceToLightDirection);
gl_FragColor = u_color;
// Lets multiply just the color portion (not the alpha)
// by the light
gl_FragColor.rgb *= light;
}
```

Then we need to lookup the locations of `u_world`

and `u_lightWorldPosition`

```
- var reverseLightDirectionLocation =
- gl.getUniformLocation(program, "u_reverseLightDirection");
+ var lightWorldPositionLocation =
+ gl.getUniformLocation(program, "u_lightWorldPosition");
+ var worldLocation =
+ gl.getUniformLocation(program, "u_world");
```

and set them

```
// Set the matrices
+ gl.uniformMatrix4fv(
+ worldLocation, false,
+ worldMatrix);
gl.uniformMatrix4fv(
worldViewProjectionLocation, false,
worldViewProjectionMatrix);
...
- // set the light direction.
- gl.uniform3fv(reverseLightDirectionLocation, m4.normalize([0.5, 0.7, 1]));
+ // set the light position
+ gl.uniform3fv(lightWorldPositionLocation, [20, 30, 50]);
```

And here it is

Now that we have a point we can add something called specular highlighting.

If you look at on object in the real world, if it's remotely shiny then if it happens to reflect the light directly at you it's almost like a mirror

We can simulate that effect by computing if the light reflects into our
eyes. Again the *dot-product* comes to the rescue.

What do we need to check? Well let's think about it. Light reflects at the same angle it hits a surface so if the direction of the surface to the light is the exact reflection of the surface to the eye then it's at the perfect angle to reflect

If we know the direction from the surface of our model to the light (which
we do since we just did that). And if we know the direction from the
surface to view/eye/camera, which we can compute, then we can add those 2
vectors and normalize them to get the `halfVector`

which is the vector
that sits half way between them. If the halfVector and the surface normal
match then it's the perfect angle to reflect the light into the
view/eye/camera. And how can we tell when they match? Take the *dot
product* just like we did before. 1 = they match, same direction, 0 =
they're perpendicular, -1 = they're opposite.

So first thing is we need to pass in the view/camera/eye position, compute the surface to view vector and pass it to the fragment shader.

```
attribute vec4 a_position;
attribute vec3 a_normal;
uniform vec3 u_lightWorldPosition;
+uniform vec3 u_viewWorldPosition;
uniform mat4 u_world;
uniform mat4 u_worldViewProjection;
uniform mat4 u_worldInverseTranspose;
varying vec3 v_normal;
varying vec3 v_surfaceToLight;
+varying vec3 v_surfaceToView;
void main() {
// Multiply the position by the matrix.
gl_Position = u_worldViewProjection * a_position;
// orient the normals and pass to the fragment shader
v_normal = mat3(u_worldInverseTranspose) * a_normal;
// compute the world position of the surfoace
vec3 surfaceWorldPosition = (u_world * a_position).xyz;
// compute the vector of the surface to the light
// and pass it to the fragment shader
v_surfaceToLight = u_lightWorldPosition - surfaceWorldPosition;
+ // compute the vector of the surface to the view/camera
+ // and pass it to the fragment shader
+ v_surfaceToView = u_viewWorldPosition - surfaceWorldPosition;
}
```

Next in the fragment shader we need to compute the `halfVector`

between
the surface to view and surface to light vectors. Then we can take the
dot product the `halfVector`

and the normal to find out if the light is
reflecting into the view.

```
// Passed in from the vertex shader.
varying vec3 v_normal;
varying vec3 v_surfaceToLight;
+varying vec3 v_surfaceToView;
uniform vec4 u_color;
void main() {
// because v_normal is a varying it's interpolated
// we it will not be a uint vector. Normalizing it
// will make it a unit vector again
vec3 normal = normalize(v_normal);
+ vec3 surfaceToLightDirection = normalize(v_surfaceToLight);
+ vec3 surfaceToViewDirection = normalize(v_surfaceToView);
+ vec3 halfVector = normalize(surfaceToLightDirection + surfaceToViewDirection);
float light = dot(normal, surfaceToLightDirection);
+ float specular = dot(normal, halfVector);
gl_FragColor = u_color;
// Lets multiply just the color portion (not the alpha)
// by the light
gl_FragColor.rgb *= light;
+ // Just add in the specular
+ gl_FragColor.rgb += specular;
}
```

Finally we have to look up `u_viewWorldPosition`

and set it

```
var lightWorldPositionLocation =
gl.getUniformLocation(program, "u_lightWorldPosition");
+var viewWorldPositionLocation =
+ gl.getUniformLocation(program, "u_viewWorldPosition");
...
// Compute the camera's matrix
var camera = [100, 150, 200];
var target = [0, 35, 0];
var up = [0, 1, 0];
var cameraMatrix = makeLookAt(camera, target, up);
+// set the camera/view position
+gl.uniform3fv(viewWorldPositionLocation, camera);
```

And here's that

**DANG THAT'S BRIGHT!**

We can fix the brightness by raising the dot-product result to a power. This will scrunch up the specular highlight from a linear falloff to an exponential falloff.

The closer the red line is to the top of the graph the brighter our specular addition will be. By raising the power it scrunches the range where it goes bright to the right.

Let's call that `shininess`

and add it to our shader.

```
uniform vec4 u_color;
+uniform float u_shininess;
...
- float specular = dot(normal, halfVector);
+ float specular = 0.0;
+ if (light > 0.0) {
+ specular = pow(dot(normal, halfVector), u_shininess);
+ }
```

The dot product can go negative. Taking a negative number to a power is undefined in WebGL which would be bad. So, if the dot product would possibly be negative then we just leave specular at 0.0.

Of course we need to look up the location and set it

```
+var shininessLocation = gl.getUniformLocation(program, "u_shininess");
...
// set the shininess
gl.uniform1f(shininessLocation, shininess);
```

And here's that

The final thing I want to go over in this article is light colors.

Up to this point we've been using `light`

to multiply the color we're
passing in for the F. We could provide a light color as well if wanted
colored lights

```
uniform vec4 u_color;
uniform float u_shininess;
+uniform vec3 u_lightColor;
+uniform vec3 u_specularColor;
...
// Lets multiply just the color portion (not the alpha)
// by the light
* gl_FragColor.rgb *= light * u_lightColor;
// Just add in the specular
* gl_FragColor.rgb += specular * u_specularColor;
}
```

and of course

```
+ var lightColorLocation =
+ gl.getUniformLocation(program, "u_lightColor");
+ var specularColorLocation =
+ gl.getUniformLocation(program, "u_specularColor");
```

and

```
// set the light color
+ gl.uniform3fv(lightColorLocation, m4.normalize([1, 0.6, 0.6])); // red light
// set the specular color
+ gl.uniform3fv(specularColorLocation, m4.normalize([1, 0.6, 0.6])); // red light
```

Coming up next, spot lighting.

Questions? Ask on stackoverflow.

Issue/Bug? Create an issue on github.

comments powered by Disqus