# WebGL2Fundamentals.org

Fix, Fork, Contribute

# WebGL2 3D - Point Lighting

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 surface
vec3 surfaceWorldPosition = (u_world * a_position).xyz;
``````

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

``````v_surfaceToLight = u_lightPosition - surfaceWorldPosition;
``````

Here's all that in context

``````#version 300 es

in vec4 a_position;
in vec3 a_normal;

+uniform vec3 u_lightWorldPosition;

+uniform mat4 u_world;
uniform mat4 u_worldViewProjection;
uniform mat4 u_worldInverseTranspose;

out vec3 v_normal;
+out 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 surface
+  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 linearly interpolated between our positions and so would not be a complete unit vector

``````#version 300 es
precision highp float;

// Passed in from the vertex shader.
in vec3 v_normal;
+in vec3 v_surfaceToLight;

-uniform vec3 u_reverseLightDirection;
uniform vec4 u_color;

// we need to declare an output for the fragment shader
out vec4 outColor;

void main() {
// because v_normal is a varying it's interpolated
// so it will not be a unit 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);

outColor = u_color;

// Lets multiply just the color portion (not the alpha)
// by the light
outColor.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, 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.

``````#version 300 es

in vec4 a_position;
in 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;

out vec3 v_surfaceToLight;
+out 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 surface
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.
in vec3 v_normal;
in vec3 v_surfaceToLight;
+in vec3 v_surfaceToView;

uniform vec4 u_color;

out vec4 outColor;

void main() {
// because v_normal is a varying it's interpolated
// so it will not be a unit 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);

outColor = u_color;

// Lets multiply just the color portion (not the alpha)
// by the light
outColor.rgb *= light;

+  // Just add in the specular
+  outColor.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

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
*  outColor.rgb *= light * u_lightColor;

// Just add in the specular
*  outColor.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, normalize([1, 0.6, 0.6]));  // red light
+  // set the specular color
+  gl.uniform3fv(specularColorLocation, normalize([1, 0.2, 0.2]));  // red light
``````

Coming up next spot lighting.

### Why is `pow(negative, power)` undefined?

What does this mean?

`pow(5, 2)`

Well you can look at it as

`5 * 5 = 25`

`pow(5, 3)`

Well you can look at that as

`5 * 5 * 5 = 125`

`pow(-5, 2)`

Well that could be

`-5 * -5 = 25`

And

`pow(-5, 3)`

Well you can look at as

`-5 * -5 * -5 = -125`

As you know multiplying a negative by a negative makes a positive. Multiplying by a negative again makes it negative.

Well then what does this mean?

`pow(-5, 2.5)`

How do you decide which is the result of that positive or negative? That's the land of imaginary numbers.

• Fundamentals
• WebGL2 vs WebGL1
• Image Processing
• 2D translation, rotation, scale, matrix math
• 3D
• Lighting
• Structure and Organization
• Geometry
• Textures
• Rendering To A Texture