Lighting shader usually use normals. As you may remember from the last tutorial, normals are the vectors which are perpendicular to each triangle. I will explain them in better detail.

## Normals

**gl_FragColor = vec4(v_vNormal*0.5+0.5,1.0);**

Because normals are in the range of -1 and 1 we'll multiply it be 0.5 and add 0.5 to put it in the range of 0 to 1 (since we can't see negative colors).

Here is what it looks like (downloads at the bottom):

Now we'll move on to a simple lighting shader.

## Simple lighting

This will be the direction of our light. Next create another vec3 called "col". This will be for the light color. We'll set this to a nice blue color (I used "vec3( 0.5, 0.8, 1.0)").

Now create a float called "lighting". Since this will be for the brightness of the pixel we'll need to calculate how much light it is receiving. We'll use the dot product function. This function finds the difference between two vectors in the range of -1 to 1 (if used properly). The vectors should be normalized. When you normalize a vector it sets the length of the vector to 1 while keeping it in proportion. If you do not do this to the vectors of a dot product, then it will return something in a range larger (or smaller) than -1 to 1 and in this case, ruin the lighting.

So now we'll set lighting to the dot product of "v_vNormal" and "dir" (make sure their both normalized). This will find the difference of the normal and the light (between -1 and 1).

To convert this to a visible value we multiply it by 0.5 and add 0.5. Now mulitply the "lighting" float and "col" vector to the texture color (making sure it is a vec4). Your code should look like this:

**vec3 dir = vec3( 0.6, 0.1, -1.0);//Light direction**

vec3 col = vec3( 0.5, 0.8, 1.0);//Light color

float lighting = (dot( normalize(v_vNormal), normalize(dir)) * 0.5 + 0.5);//Calculate

gl_FragColor = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord) * vec4( lighting * col, 1.0);vec3 col = vec3( 0.5, 0.8, 1.0);//Light color

float lighting = (dot( normalize(v_vNormal), normalize(dir)) * 0.5 + 0.5);//Calculate

gl_FragColor = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord) * vec4( lighting * col, 1.0);

This gets the desired light direction and color, then calculates it with "lighting" and finally applies it to the texture. This is the result (downloads below):

## Point lights

We want the point lights to have a radius. So we can add a float called "rad".

Since these lights cast shine in all directions, we'll need to change the "dir" vector.

This is actually simple to set, but we'll need the position of each pixel, so we'll add another varying vec3 and call it "v_vPosition". In the vertex shader, set it to "in_Position".

With the position we can calculate the direction from the light to each pixel. We simple put in the desired position for the point light (I used "vec3( 0.0, 32.0, -96.0)") and then subtract the pixel position ("v_vPoisiton"). That gets the direction for the light.

Now the last thing we'll add is a radius. This will make the light fade the farther the it is from the surface of each object. This is called Attenuation so we'll make a variable called "attenuation". Set this variable to the length of "dir" (so we get the distance from the light) and divide it by "rad" (so the brightness equals one when it is at the radius distance and 0 when at the light). This is opposite of what we want so we'll have it 1 minus are current code. To keep this from going negative we'll put the max function around our code with the second argument to 0 (which keeps it from going below 0).

The fragment code should look like this:

**vec3 dir = vec3( 0.0, 32.0, -96.0) - v_vPosition;//Light direction**

float rad = 128.0;//Light radius

vec3 col = vec3( 0.5, 0.8, 1.0);//Light color

float attenuation = max( 1.0 - length(dir)/rad, 0.0);//Calculate brightness

float lighting = (dot( normalize(v_vNormal), normalize(dir)) * 0.5 + 0.5) * attenuation;//Calculate lighting

gl_FragColor = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord) * vec4( lighting * col, 1.0);

float rad = 128.0;//Light radius

vec3 col = vec3( 0.5, 0.8, 1.0);//Light color

float attenuation = max( 1.0 - length(dir)/rad, 0.0);//Calculate brightness

float lighting = (dot( normalize(v_vNormal), normalize(dir)) * 0.5 + 0.5) * attenuation;//Calculate lighting

gl_FragColor = v_vColour * texture2D( gm_BaseTexture, v_vTexcoord) * vec4( lighting * col, 1.0);

When running the code, the result should look like this (downloads at the bottom):

DOWNLOAD NORMALS EXAMPLE

DOWNLOAD DIRECTIONAL LIGHT EXAMPLE

DOWNLOAD POINT LIGHT EXAMPLE