In the last tutorial, we had set up the texture and framebuffer to do a shadow pass, in this tutorial, we are going to use the depth texture from the shadow pass and use it in the second pass which will draw the scene with lighting. I'm going to call the second pass the lighting pass as we perform the lighting calculations in this pass. I have used two shader programs, the first program has the shadow vertex/fragment shaders and the second program has the lighting vertex/fragment shaders.

In the shadow pass, we created a Model-View-Projection matrix from the lights' position, in the lighting pass we are going to create a Model-View-Projection matrix from the camera's position.

// MVP from camera position
glm::mat4 model(1.0f);
glm::mat4 view = glm::lookAt(m_camera, glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3(0.0f, 1.0f, 0.0f));
glm::mat4 projection = glm::perspective(45.0f, scrennSize.x / scrennSize.y, 0.1f, 100.0f);
glm::mat3 normalMatrix = glm::transpose(glm::inverse(model));

The normalMatrix will be used as a uniform in the fragment shader for normal calculations, we will come to this in a bit. The rest of the lighting pass is very simple on the C++ side as we just have to set up the uniforms, bind shader programs and textures:

// set the viewport and bind resources
glViewport(0, 0, (size_t)scrennSize.x, (size_t)scrennSize.y);
glUseProgram(programLighting);
glActiveTexture(GL_TEXTURE0 + 1);
glBindTexture(GL_TEXTURE_2D, texture_id); ///< just a texture we will use in the scene
glUniform1i(glGetUniformLocation(programLighting, "texture"), 1);
glActiveTexture(GL_TEXTURE0 + 2);
glBindTexture(GL_TEXTURE_2D, shadow_id); ///< the shadow texture
glUniform1i(glGetUniformLocation(programLighting, "shadowMap"), 2);

// set the uniforms for matrices etc.
glUniformMatrix4fv(glGetUniformLocation(programLighting, "depthBiasMVP"), count, false, &depthBiasMVP[0][0]);
glUniformMatrix4fv(glGetUniformLocation(programLighting, "modelMatrix"), count, false, &model[0][0]);
glUniformMatrix4fv(glGetUniformLocation(programLighting, "viewMatrix"), count, false, &view[0][0]);
glUniformMatrix4fv(glGetUniformLocation(programLighting, "projectionlMatrix"), count, false, &projection[0][0]);
glUniformMatrix3fv(glGetUniformLocation(programLighting, "normalMatrix"), count, false, &normalMatrix[0][0]);
glUniform3f(glGetUniformLocation(programLighting, "gammaCorrectness"), 1.0f / 2.2f, 1.0f / 2.2f,  1.0f / 2.2f);
glUniform3f(glGetUniformLocation(programLighting,"eyePosition"), m_camera.x, m_camera.y, m_camera.z);
glUniform3f(glGetUniformLocation(programLighting, "ambientColour"), 5.0f / 255.0f, 5.0f / 255.0f, 5.0f / 255.0f);
glUniform3f(glGetUniformLocation(programLighting, "light.colour"), 75.0f / 255.0f, 75.0f / 255.0f, 75.0f / 255.0f);
glUniform3f(glGetUniformLocation(programLighting, "light.position"), lightPos.x, lightPos.y, lightPos.z);
glUniform1f(glGetUniformLocation(programLighting, "light.shininess"), 90.0f);

// draw calls
objDrawCall(planeObject);

// need to recompute the MVP for each object in the scene and set the uniforms for it.
glm::mat4 depthM = m_sphereObject[i]->getMatrix();
depthMVP = depthProjection * depthView * depthM;
depthBiasMVP = biasMatrix * depthMVP;
glUniformMatrix4fv(glGetUniformLocation(programLighting, "depthBiasMVP"), count, false, &depthBiasMVP[0][0]);
glUniformMatrix4fv(glGetUniformLocation(programLighting, "modelMatrix"), count, false, &m_sphereObject[i]->getMatrix()[0][0]);
glUniformMatrix4fv(glGetUniformLocation(programLighting, "normalMatrix"), count, false, &glm::transpose(glm::inverse(m_sphereObject[i]->getMatrix()))[0][0]);

objDrawCall(sphereObject);

glBindTexture(GL_TEXTURE_2D, 0);
glUseProgram(0);

Key points about the about is the depthBiasMVP that is used to convert the results from the shadow pass from [-1, 1] to [0, 1] so we can use it like a texture using UV's, this is computed by:
glm::mat4 biasMatrix(
        0.5, 0.0, 0.0, 0.0,
        0.0, 0.5, 0.0, 0.0,
        0.0, 0.0, 0.5, 0.0,
        0.5, 0.5, 0.5, 1.0
);
glm::mat4 depthBiasMVP = biasMatrix * depthMVP;

Gamma correctness is set as a uniform and this will be used at the very end of the fragment shader to apply gamma correctness to the final fragment colour before writing it to the framebuffer. Some of the uniforms are 'light.xxxxx' we will use a light structure within the shader, which works that same way as a struct in C++ for reading/writing to. We have set up the uniforms for our shaders, now for the shader code:

vertex shader:
#version 330
layout(location = 0) in vec4 position; ///< the vertex co-ordinate from VBO
layout(location = 1) in vec3 normal; ///< the normal from VBO
layout(location = 2) in vec2 uv; ///< the UV co-ordinate from VBO

// uniforms
uniform vec3 eyePosition;
uniform mat4 modelMatrix;
uniform mat4 viewMatrix;
uniform mat4 projectionlMatrix;
uniform mat4 depthBiasMVP;

// output to fragment shader
out vec2 vs_uv;
out vec3 vs_fragpos;
out vec3 vs_normal;
out vec3 vs_position;
out vec3 vs_lightDir;
out vec3 vs_halfVector;
out vec4 vs_shadowCoord;

// light
uniform struct Light
{
  vec3 position;
  vec3 colour;
  float shininess;
} light;

void main()
{
  // compute the world, view and clip spaces
  vec4 worldPos = modelMatrix * position;
  vec4 eyePos = viewMatrix * worldPos;
  vec4 clipPos = projectionlMatrix * eyePos;

  gl_Position = clipPos;
  // set the outputs to fragment shader
  vs_uv = uv;
  vs_normal = normal;
  vs_fragpos = worldPos.xyz;
  vs_shadowCoord = depthBiasMVP * position;

  // compute the light direction and length
  vec3 lightDir = vec3(light.position - worldPos.xyz);
  float lightDis = length(lightDir);

  // basically the same as doing normalize
  vs_lightDir = lightDir / lightDis;

  // compute the half vector
  vs_halfVector = normalize(lightDir + eyePosition);
}

Fragment shader:
#version 330

uniform sampler2D texture;
uniform sampler2DShadow shadowMap;
uniform vec3 gammaCorrectness;
uniform vec3 ambientColour;
uniform mat3 normalMatrix;
uniform mat4 modelMatrix;

in vec2 vs_uv;
in vec3 vs_fragpos;
in vec3 vs_normal;
in vec3 vs_position;
in vec3 vs_lightDir;
in vec3 vs_halfVector;
in vec4 vs_shadowCoord;
out vec4 output_colour;

uniform struct Light
{
  vec3 position;
  vec3 colour;
  float shininess;

} light;

void main()
{
  // what pixel colour is the texture for this Uv position
  vec4 diffuse = texture2D(texture, vs_uv);
  vec3 normal = normalize(normalMatrix * vs_normal); // the normal

  // compute the amount of diffuse and specular
  float diff = max(0.0, dot(normal, vs_lightDir));
  float spec = max(0.0, dot(normal, vs_halfVector));

  // normals that face away from the light cannot be lit
  if(diff == 0)
    spec = 0;
  else
    spec = pow(spec, light.shininess);

  vec3 surfaceToLight = light.position - vs_fragpos;

  float brightness = dot(normal, surfaceToLight) / (length(surfaceToLight) * length(normal));
  brightness = clamp(brightness, 0, 1);

  // in shadow or not
  float visibility = 1.0;

  // calulate shadow using smapler2DShadow
  visibility = textureProj(shadowMap, vs_shadowCoord);

  // compute if the light is directly or indirectly hitting the camera and clamp the results
  vec3 scatteredLight = ambientColour + light.colour * diff;
  vec3 reflectedLight = light.colour * spec * brightness;
  scatteredLight = clamp(scatteredLight, 0, 1);
  reflectedLight = clamp(reflectedLight, 0, 1);

  vec3 finalColour = vec3((scatteredLight * diffuse.rgb + reflectedLight) * visibility);

  // apply gamma correctness
  vec3 gamma = vec3(gammaCorrectness);
  finalColour = pow(finalColour, gamma);

  // output colour
  output_colour = vec4(finalColour, diffuse.a);
}

If you compile and run the program you should have an output result something like:

I have not gone over how to load models or textures but if you are interested in how I have done it, or see any of the other source code, you can find it here: https://github.com/LewisWard/Shadow-Mapping

Before I start to explain how I implemented shadow mapping using C++ and OpenGL, if you don't know what shadow mapping is take a read of my earlier blog post where I explain the process of shadow mapping.

I'm not going to go into detail on how you can set up a project from scratch to create a window using a library like Freeglut as that would be a whole tutorial by its self and there are many good tutorials out there which will explain how to do that. However, for a reference what I've used to create this project is:

• Freeglut
• Glew
• GLM
• Tiny_obj_loader
• SOIL

By the end of this tutorial, you should be able to produce shadows in a 3D scene, like in the image below.

We are going to use two passes for each frame, the first pass being the shadow pass and the second our lighting pass. In order to do this we need to create a Framebuffer and Texture to store the results of the first pass to be used in the second.

GLsizei shadowFrameBuffer;
glGenFramebuffers(1, &shadowFrameBuffer);
glBindFramebuffer(GL_FRAMEBUFFER, shadowFrameBuffer);
// generate a texture to store the depth buffer from the shader pass, come to this in a bit
if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE)
    printf("Framebuffer Error\n");

For those how haven't used framebuffers before, don't worry they are not that complicated to understand although I do recommend you read up on them. In our case we will use the framebuffer in the shadow pass, we bind this newly created framebuffer which then allows us to write to it. Once we are done we unbind that framebuffer, which returns us to the original framebuffer you always have when you create a OpenGL context (this one is sent to the monitor). Within the code snippet above I left a comment about creating a texture, so lets do this now:

GLsizei id;
glGenTextures(1, &id);
glBindTexture(GL_TEXTURE_2D, id);
glTexImage2D(GL_TEXTURE_2D, 0, GL_DEPTH_COMPONENT, 512, 512, 0, GL_DEPTH_COMPONENT, GL_FLOAT, NULL);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_COMPARE_MODE, GL_COMPARE_REF_TO_TEXTURE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_COMPARE_FUNC, GL_LEQUAL);
glBindTexture(GL_TEXTURE_2D, 0);

There a quite a lot there, but compared to creating any other normal texture there are only a few differences. GL_DEPTH_COMPONENT is used, which should be self explanatory, and I'm using GL_TEXTURE_COMPARE_MODE and GL_TEXTURE_COMPARE_FUNC. These two are used as I'm going to use sampler2DShadow in the fragment shader, which allows us to use textureProj function which means the texture look up between fragments is done by the texture hardware rather then us in the fragment shader.

Okay a quick check list, we have our framebuffer and texture set up to perform the shadow pass. So lets write the shadow pass:

// MVP from light poisition
lightPos = glm::vec3(-3.0f, 20.0f, 20.0f);
glm::mat4 depthProjection = glm::ortho(-10.0f, 10.0f, -10.0f, 10.0f, 0.1f, 100.0f);
glm::mat4 depthView = glm::lookAt(lightPos, glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3(0.0f, 1.0f, 0.0f));
glm::mat4 depthModel = glm::mat4(1.0);
glm::mat4 depthMVP = depthProjection * depthView * depthModel;

// set the viewport to the same size as the texture, bind the texture and framebuffer.
glViewport(0, 0, 512, 512);
glUseProgram(program); // the handle of the shader program you complied, see it's source below
glBindFramebuffer(GL_FRAMEBUFFER, shadowFrameBuffer);
glClear(GL_DEPTH_BUFFER_BIT);
glActiveTexture(GL_TEXTURE0 + 1);
glBindTexture(GL_TEXTURE_2D, id);

// set the uniform
glUniformMatrix4fv(glGetUniformLocation(shaderProgram, "depthMVP"), 1, false, &depthMVP[0][0]);
// draw a plane which other objects will be above
objDrawCall(planeObject);

glm::mat4 depthM = sphereObject->getMatrix(); // get objects model matrix, default glm::mat4(1)
depthMVP = depthProjection * depthView * depthM; // need to update MVP for each object
shadowProgram->uniformMatrix4("depthMVP", 1, depthMVP);
objDrawCall(sphereObject);

// unbind everything
glBindTexture(GL_TEXTURE_2D, 0);
glBindFramebuffer(GL_FRAMEBUFFER, 0);
glUseProgram(0);

The majority of the above is made up of binding and unbinding objects and creating the model, view and projection matrix and setting shader uniforms. This is pretty straight forward code as it is the same as you would normally do for rendering any objects apart from we are using our new framebuffer. The objDrawCall function does pretty much what is says it does, it draws the object it's passed. This might vary depending on how your loading and storing your model, but I'll include the code anyway to the sake of completeness.

void objDrawCall(ObjObject* objPtr)
{
 const float* offset = 0;
 glBindBuffer(GL_ARRAY_BUFFER, objPtr->getVertexBuffer()->getVBO());
 glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, objPtr->getVertexBuffer()->getIBO());
 glVertexAttribPointer(0, 3, GL_FLOAT, false, sizeof(vertexNormalUV), offset); // vertex position
 glEnableVertexAttribArray(0);
 glVertexAttribPointer(1, 3, GL_FLOAT, true, sizeof(vertexNormalUV), offset + 3); // normal
 glEnableVertexAttribArray(1);
 glVertexAttribPointer(2, 2, GL_FLOAT, true, sizeof(vertexNormalUV), offset + 6); // uv
 glEnableVertexAttribArray(2);
 glDrawElements(GL_TRIANGLES, (GLsizei)objPtr->getIndicesCount(), GL_UNSIGNED_INT, 0);
 glDisableVertexAttribArray(2);
 glDisableVertexAttribArray(1);
 glDisableVertexAttribArray(0);
 glBindBuffer(GL_ARRAY_BUFFER, 0);
 glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
}

We can't run the program yet as we have not written any shaders. For the shadow pass we need to write a vertex and fragment shader, I'm not doing to explain the steps for compiling and linking shaders as there is information already out there and this post is starting to get long.

Shadow vertex shader:
#version 330
layout(location = 0) in vec4 position; ///< the vertex co-odinate from VBO
layout(location = 1) in vec3 normal; ///< the normal from VBO
layout(location = 2) in vec2 uv; ///< the UV co-odinate from VBO
uniform mat4 depthMVP;

void main()
{
  gl_Position =  depthMVP * position;
}

Shadow Fragment shader:
#version 330
layout(location = 0) out float fragmentdepth;

void main()
{
   // OpenGL will output gl_FragCoord.z;
}

That is it, very simple shaders. The vertex shader is very standard and not doing anything interesting, the fragment shader outputs a float which makes our depth texture. As the fragment shader is empty OpenGL will output the gl_FragCoord by default and as we are using a GL_DEPTH_COMPONENT it will output it Z value. I'm not sure if this will work on all OpenGL vendor's card but is happy enough on Nvidia, just bare that in mind if it's not outputting anything for you. If you run the code you should get a result similar to the image below.

© 2016 Lewis Ward. All rights reserved.