OpenGL ??? Build high performance graphics

defined in the GLSLShader.[h/cpp] files. We first declare the constructor and destructor which initialize the member variables. The next three functions, LoadFromString, LoadFromFile, and CreateAndLinkProgram handle the shader compilation, linking, and program creation. The next two functions, Use and UnUse functions bind and unbind the program. Two std::map datastructures are used. They store the attribute's/uniform's name as the key and its location as the value. This is done to remove the redundant call to get the attribute's/uniform's location each frame or when the location is required to access the attribute/uniform. The next two functions, AddAttribute and AddUniform add the locations of the attribute and uniforms into their respective std::map (_attributeList and _uniformLocationList).

The GLSLShader class is

class GLSLShader
{
public:
  GLSLShader(void);
  ~GLSLShader(void);
  void LoadFromString(GLenum whichShader, const string& source);
  void LoadFromFile(GLenum whichShader, const string& filename);
  void CreateAndLinkProgram();
  void Use();
  void UnUse();
  void AddAttribute(const string& attribute);
  void AddUniform(const string& uniform);
  GLuint operator[](const string& attribute);
  GLuint operator()(const string& uniform);
  void DeleteShaderProgram();

private:
  enum ShaderType{VERTEX_SHADER,FRAGMENT_SHADER,GEOMETRY_SHADER};
  GLuint  _program;
  int _totalShaders;
  GLuint _shaders[3];
  map<string,GLuint> _attributeList;
  map<string,GLuint> _uniformLocationList;
};

How to do it…

In a typical shader application, the usage of the GLSLShader object is as follows:

Create the GLSLShader object either on stack (for example, GLSLShader shader;) or on the heap (for example, GLSLShader* shader=new GLSLShader();)
Call LoadFromFile on the GLSLShader object reference
Call CreateAndLinkProgram on the GLSLShader object reference
Call Use on the GLSLShader object reference to bind the shader object
Call AddAttribute/AddUniform to store locations of all of the shader's attributes and uniforms respectively
Call UnUse on the GLSLShader object reference to unbind the shader object

How it works…

In a typical OpenGL shader application, the shader specific functions and their sequence of execution are as follows:

glCreateShader
glShaderSource
glCompileShader
glGetShaderInfoLog

Execution of the above four functions creates a shader object. After the shader object is created, a shader program object is created using the following set of functions in the following sequence:

glCreateProgram
glAttachShader
glLinkProgram
glGetProgramInfoLog

Tip

Note that after the shader program has been linked, we can safely delete the shader object.

There's more…

In a typical shader application, the

usage of the GLSLShader object is as follows:

Create the GLSLShader object either on stack (for example, GLSLShader shader;) or on the heap (for example, GLSLShader* shader=new GLSLShader();)
Call LoadFromFile on the GLSLShader object reference
Call CreateAndLinkProgram on the GLSLShader object reference
Call Use on the GLSLShader object reference to bind the shader object
Call AddAttribute/AddUniform to store locations of all of the shader's attributes and uniforms respectively
Call UnUse on the GLSLShader object reference to unbind the shader object

How it works…

In a typical OpenGL shader application, the shader specific functions and their sequence of execution are as follows:

glCreateShader
glShaderSource
glCompileShader
glGetShaderInfoLog

Execution of the above four functions creates a shader object. After the shader object is created, a shader program object is created using the following set of functions in the following sequence:

glCreateProgram
glAttachShader
glLinkProgram
glGetProgramInfoLog

Tip

Note that after the shader program has been linked, we can safely delete the shader object.

There's more…

In a typical OpenGL shader application, the shader specific functions and their sequence of execution are as follows:

glCreateShader glShaderSource glCompileShader glGetShaderInfoLog

Execution of the above four functions creates a shader object. After the shader object is created, a shader program object is

created using the following set of functions in the following sequence:

glCreateProgram
glAttachShader
glLinkProgram
glGetProgramInfoLog

Tip

Note that after the shader program has been linked, we can safely delete the shader object.

There's more…

. This is carried out by the glUseProgram function which is called through the Use/UnUse functions in the GLSLShader class.

Rendering a simple colored triangle using shaders

We will now put the GLSLShader class to use by implementing an application to render a simple colored triangle on screen.

Getting ready

For this recipe, we assume that the reader has created a new empty Win32 project with OpenGL 3.3 core profile as shown in the first recipe. The code for this recipe is in the Chapter1/SimpleTriangle directory.

Tip

In all of the code samples in this book, you will see a macro GL_CHECK_ERRORS dispersed throughout. This macro checks the current error bit for any error which might be raised by passing invalid arguments to an OpenGL function, or when there is some problem with the OpenGL state machine. For any such error, this macro traps it and generates a debug assertion signifying that the OpenGL state machine has some error. In normal cases, no assertion should be raised, so adding this macro helps to identify errors. Since this macro calls glGetError inside a debug assert, it is stripped in the release build.

Now we will look at the different transformation stages through which a vertex goes, before it is finally rendered on screen. Initially, the vertex position is specified in what is called the object space. This space is the one in which the vertex location is specified for an object. We apply modeling transformation to the object space vertex position by multiplying it with an affine matrix (for example, a matrix for scaling, rotating, translating, and so on). This brings the object space vertex position into world space. Next, the world space positions are multiplied by the camera/viewing matrix which brings the position into view/eye/camera space. OpenGL stores the modeling and viewing transformations in a single (modelview) matrix.

The view space positions are then projected by using a projection transformation which brings the position into clip space. The clip space positions are then normalized to get the normalized device coordinates which have a canonical viewing volume (coordinates are [-1,-1,0] to [1,1,1] in x, y, and z coordinates respectively). Finally, the viewport transformation is applied which brings the vertex into window/screen space.

How to do it…

Let us start this recipe using the following steps:

Define a vertex shader (shaders/shader.vert) to transform the object space vertex position to clip space.

#version 330 core
layout(location = 0) in vec3 vVertex;
layout(location = 1) in vec3 vColor;
smooth out vec4 vSmoothColor;
uniform mat4 MVP;
void main()
{
   vSmoothColor = vec4(vColor,1);
   gl_Position = MVP*vec4(vVertex,1);
}

Define a fragment shader (shaders/shader.frag) to output a smoothly interpolated color from the vertex shader to the frame buffer.

#version 330 core
smooth in vec4 vSmoothColor;
layout(location=0) out vec4 vFragColor;
void main()
{
   vFragColor = vSmoothColor;
}

Load the two shaders using the GLSLShader class in the OnInit() function.

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
   shader.AddAttribute("vVertex");
    shader.AddAttribute("vColor");
    shader.AddUniform("MVP");
shader.UnUse();

Create the geometry and topology. We will store the attributes together in an interleaved vertex format, that is, we will store the vertex attributes in a struct containing two attributes, position and color.

vertices[0].color=glm::vec3(1,0,0);
vertices[1].color=glm::vec3(0,1,0);
vertices[2].color=glm::vec3(0,0,1);

vertices[0].position=glm::vec3(-1,-1,0);
vertices[1].position=glm::vec3(0,1,0);
vertices[2].position=glm::vec3(1,-1,0);

indices[0] = 0;
indices[1] = 1;
indices[2] = 2;

Store the geometry and topology in the buffer object(s). The stride parameter controls the number of bytes to jump to reach the next element of the same attribute. For the interleaved format, it is typically the size of our vertex struct in bytes, that is, sizeof(Vertex).

glGenVertexArrays(1, &vaoID);
glGenBuffers(1, &vboVerticesID);
glGenBuffers(1, &vboIndicesID);
glBindVertexArray(vaoID);
glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(vertices), &vertices[0],               GL_STATIC_DRAW);
glEnableVertexAttribArray(shader["vVertex"]);
glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,stride,0);
glEnableVertexAttribArray(shader["vColor"]);
glVertexAttribPointer(shader["vColor"], 3, GL_FLOAT, GL_FALSE,stride, (const GLvoid*)offsetof(Vertex, color));

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), &indices[0], GL_STATIC_DRAW);

Set up the resize handler to set up the viewport and projection matrix.

void OnResize(int w, int h) {
    glViewport (0, 0, (GLsizei) w, (GLsizei) h);
    P = glm::ortho(-1,1,-1,1);
}

Set up the rendering code to bind the GLSLShader shader, pass the uniforms, and then draw the geometry.

void OnRender() {
    glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
    shader.Use();
    glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(P*MV));
    glDrawElements(GL_TRIANGLES, 3, GL_UNSIGNED_SHORT, 0);
    shader.UnUse();
    glutSwapBuffers();
}

For this simple example, we will only use a vertex shader (shaders/shader.vert) and a fragment shader (shaders/shader.frag). The first line in the shader signifies the GLSL version of the shader. Starting from OpenGL v3.0, the version specifiers correspond to the OpenGL version used. So for OpenGL v3.3, the GLSL version is 330. In addition, since we are interested in the core profile, we add another keyword following the version number to signify that we have a core profile shader.

void OnShutdown() {
    shader.DeleteShaderProgram();
    glDeleteBuffers(1, &vboVerticesID);
    glDeleteBuffers(1, &vboIndicesID);
    glDeleteVertexArrays(1, &vaoID);
}

How it works…

Another important thing to note is the layout qualifier. This is used to bind a specific integral attribute index to a given per-vertex attribute. While we can give the attribute locations in any order, for all of the recipes in this book the attribute locations are specified starting from 0 for position, 1 for normals, 2 for texture coordinates, and so on. The layout location qualifier makes the glBindAttribLocation call redundant as the location index specified in the shader overrides any glBindAttribLocation call.

The vertex shader simply outputs the input per-vertex color to the output (vSmoothColor). Such attributes that are interpolated across shader stages are called varying attributes. It also calculates the clip space position by multiplying the per-vertex position (vVertex) with the combined modelview projection (MVP) matrix.

vSmoothColor = vec4(vColor,1);
gl_Position = MVP*vec4(vVertex,1);

Tip

By prefixing smooth to the output attribute, we tell the GLSL shader to do smooth perspective-correct interpolation for the attribute to the next stage of the pipeline. The other qualifiers usable are flat and noperspective. When no qualifier is specified the default interpolation qualifier is smooth.

The fragment shader writes the input color (vSmoothColor) to the frame buffer output (vFragColor).

vFragColor = vSmoothColor;

There's more…

In the simple triangle demo application code, we store the GLSLShader object reference in the global scope so that we can access it in any function we desire. We modify the OnInit() function by adding the following lines:

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
    shader.AddAttribute("vVertex");
    shader.AddAttribute("vColor");
    shader.AddUniform("MVP");
shader.UnUse();

The first two lines create the GLSL shader of the given type by reading the contents of the file with the given filename. In all of the recipes in this book, the vertex shader files are stored with a .vert extension, the geometry shader files with a .geom extension, and the fragment shader files with a .frag extension. Next, the GLSLShader::CreateAndLinkProgram function is called to create the shader program from the shader object. Next, the program is bound and then the locations of attributes and uniforms are stored.

We pass two attributes per-vertex, that is vertex position and vertex color. In order to facilitate the data transfer to the GPU, we create a simple Vertex struct as follows:

struct Vertex {
    glm::vec3 position;
    glm::vec3 color;
};
Vertex vertices[3];
GLushort indices[3];

Next, we create an array of three vertices in the global scope. In addition, we store the triangle's vertex indices in the indices global array. Later we initialize these two arrays in the OnInit() function. The first vertex is assigned the red color, the second vertex is assigned the green color, and the third vertex is assigned the blue color.

vertices[0].color=glm::vec3(1,0,0);
vertices[1].color=glm::vec3(0,1,0);
vertices[2].color=glm::vec3(0,0,1);

vertices[0].position=glm::vec3(-1,-1,0);
vertices[1].position=glm::vec3(0,1,0);
vertices[2].position=glm::vec3(1,-1,0);

indices[0] = 0;
indices[1] = 1;
indices[2] = 2;

Next, the vertex positions are given. The first vertex is assigned an object space position of (-1,-1, 0), the second vertex is assigned (0,1,0), and the third vertex is assigned (1,-1,0). For this simple demo, we use an orthographic projection for a view volume of (-1,1,-1,1). Finally, the three indices are given in a linear order.

In OpenGL v3.3 and above, we typically store the geometry information in buffer objects, which is a linear array of memory managed by the GPU. In order to facilitate the handling of buffer object(s) during rendering, we use a vertex array object (VAO). This object stores references to buffer objects that are bound after the VAO is bound. The advantage we get from using a VAO is that after the VAO is bound, we do not have to bind the buffer object(s).

In this demo, we declare three variables in global scope; vaoID for VAO handling, and vboVerticesID and vboIndicesID for buffer object handling. The VAO object is created by calling the glGenVertexArrays function. The buffer objects are generated using the glGenBuffers function. The first parameter for both of these functions is the total number of objects required, and the second parameter is the reference to where the object handle is stored. These functions are called in the OnInit() function.

glGenVertexArrays(1, &vaoID);
glGenBuffers(1, &vboVerticesID);
glGenBuffers(1, &vboIndicesID);
glBindVertexArray(vaoID);

After the VAO object is generated, we bind it to the current OpenGL context so that all successive calls affect the attached VAO object. After the VAO binding, we bind the buffer object storing vertices (vboVerticesID) using the glBindBuffer function to the GL_ARRAY_BUFFER binding. Next, we pass the data to the buffer object by using the glBufferData function. This function also needs the binding point, which is again GL_ARRAY_BUFFER. The second parameter is the size of the vertex array we will push to the GPU memory. The third parameter is the pointer to the start of the CPU memory. We pass the address of the vertices global array. The last parameter is the usage hint which tells the GPU that we are not going to modify the data often.

glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(vertices), &vertices[0], GL_STATIC_DRAW);

The usage hints have two parts; the first part tells how frequently the data in the buffer object is modified. These can be STATIC (modified once only), DYNAMIC (modified occasionally), or STREAM (modified at every use). The second part is the way this data will be used. The possible values are DRAW (the data will be written but not read), READ (the data will be read only), and COPY (the data will be neither read nor written). Based on the two hints a qualifier is generated. For example, GL_STATIC_DRAW if the data will never be modified and GL_DYNAMIC_DRAW if the data will be modified occasionally. These hints allow the GPU and the driver to optimize the read/write access to this memory.

In the next few calls, we enable the vertex attributes. This function needs the location of the attribute, which we obtain by the GLSLShader::operator[], passing it the name of the attribute whose location we require. We then call glVertexAttributePointer to tell the GPU how many elements there are and what is their type, whether the attribute is normalized, the stride (which means the total number of bytes to skip to reach the next element; for our case since the attributes are stored in a Vertex struct, the next element's stride is the size of our Vertex struct), and finally, the pointer to the attribute in the given array. The last parameter requires explanation in case we have interleaved attributes (as we have). The offsetof operator returns the offset in bytes, to the attribute in the given struct. Hence, the GPU knows how many bytes it needs to skip in order to access the next attribute of the given type. For the vVertex attribute, the last parameter is 0 since the next element is accessed immediately after the stride. For the second attribute vColor, it needs to hop 12 bytes before the next vColor attribute is obtained from the given vertices array.

glEnableVertexAttribArray(shader["vVertex"]);
glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,stride,0);
glEnableVertexAttribArray(shader["vColor"]);
glVertexAttribPointer(shader["vColor"], 3, GL_FLOAT, GL_FALSE,stride, (const GLvoid*)offsetof(Vertex, color));

The indices are pushed similarly using glBindBuffer and glBufferData but to a different binding point, that is, GL_ELEMENT_ARRAY_BUFFER. Apart from this change, the rest of the parameters are exactly the same as for the vertices data. The only difference being the buffer object, which for this case is vboIndicesID. In addition, the passed array to the glBufferData function is the indices array.

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), &indices[0], GL_STATIC_DRAW);

To complement the object generation in the OnInit() function, we must provide the object deletion code. This is handled in the OnShutdown() function. We first delete the shader program by calling the GLSLShader::DeleteShaderProgram function. Next, we delete the two buffer objects (vboVerticesID and vboIndicesID) and finally we delete the vertex array object (vaoID).

void OnShutdown() {
    shader.DeleteShaderProgram();
    glDeleteBuffers(1, &vboVerticesID);
    glDeleteBuffers(1, &vboIndicesID);
    glDeleteVertexArrays(1, &vaoID);
}

Tip

We do a deletion of the shader program because our GLSLShader object is allocated globally and the destructor of this object will be called after the main function exits. Therefore, if we do not delete the object in this function, the shader program will not be deleted and we will have a graphics memory leak.

The rendering code of the simple triangle demo is as follows:

void OnRender() {
    glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
    shader.Use();
      glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(P*MV));
      glDrawElements(GL_TRIANGLES, 3, GL_UNSIGNED_SHORT, 0);
    shader.UnUse();
    glutSwapBuffers();
}

The rendering code first clears the color and depth buffer and binds the shader program by calling the GLSLShader::Use() function. It then passes the combined modelview and projection matrix to the GPU by invoking the glUniformMatrix4fv function. The first parameter is the location of the uniform which we obtain from the GLSLShader::operator() function, by passing it the name of the uniform whose location we need. The second parameter is the total number of matrices we wish to pass. The third parameter is a Boolean signifying if the matrix needs to be transposed, and the final parameter is the float pointer to the matrix object. Here we use the glm::value_ptr function to get the float pointer from the matrix object. Note that the OpenGL matrices are concatenated right to left since it follows a right handed coordinate system in a column major layout. Hence we keep the projection matrix on the left and the modelview matrix on the right. For this simple example, the modelview matrix (MV) is set as the identity matrix.

After this function, the glDrawElements call is made. Since we have left our VAO object (vaoID) bound, we pass 0 to the final parameter of this function. This tells the GPU to use the references of the GL_ELEMENT_ARRAY_BUFFER and GL_ARRAY_BUFFER binding points of the bound VAO. Thus we do not need to explicitly bind the vboVerticesID and vboIndicesID buffer objects again. After this call, we unbind the shader program by calling the GLSLShader::UnUse() function. Finally, we call the glutSwapBuffer function to show the back buffer on screen. After compiling and running, we get the output as shown in the following figure:

Tip

How to do it…

Let us start this recipe using the following steps:

Define a vertex shader (shaders/shader.vert) to transform the object space vertex position to clip space.

#version 330 core
layout(location = 0) in vec3 vVertex;
layout(location = 1) in vec3 vColor;
smooth out vec4 vSmoothColor;
uniform mat4 MVP;
void main()
{
   vSmoothColor = vec4(vColor,1);
   gl_Position = MVP*vec4(vVertex,1);
}

Define a fragment shader (shaders/shader.frag) to output a smoothly interpolated color from the vertex shader to the frame buffer.

#version 330 core
smooth in vec4 vSmoothColor;
layout(location=0) out vec4 vFragColor;
void main()
{
   vFragColor = vSmoothColor;
}

Load the two shaders using the GLSLShader class in the OnInit() function.

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
   shader.AddAttribute("vVertex");
    shader.AddAttribute("vColor");
    shader.AddUniform("MVP");
shader.UnUse();

vertices[0].color=glm::vec3(1,0,0);
vertices[1].color=glm::vec3(0,1,0);
vertices[2].color=glm::vec3(0,0,1);

vertices[0].position=glm::vec3(-1,-1,0);
vertices[1].position=glm::vec3(0,1,0);
vertices[2].position=glm::vec3(1,-1,0);

indices[0] = 0;
indices[1] = 1;
indices[2] = 2;

glGenVertexArrays(1, &vaoID);
glGenBuffers(1, &vboVerticesID);
glGenBuffers(1, &vboIndicesID);
glBindVertexArray(vaoID);
glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(vertices), &vertices[0],               GL_STATIC_DRAW);
glEnableVertexAttribArray(shader["vVertex"]);
glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,stride,0);
glEnableVertexAttribArray(shader["vColor"]);
glVertexAttribPointer(shader["vColor"], 3, GL_FLOAT, GL_FALSE,stride, (const GLvoid*)offsetof(Vertex, color));

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), &indices[0], GL_STATIC_DRAW);

Set up the resize handler to set up the viewport and projection matrix.

void OnResize(int w, int h) {
    glViewport (0, 0, (GLsizei) w, (GLsizei) h);
    P = glm::ortho(-1,1,-1,1);
}

Set up the rendering code to bind the GLSLShader shader, pass the uniforms, and then draw the geometry.

void OnRender() {
    glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
    shader.Use();
    glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(P*MV));
    glDrawElements(GL_TRIANGLES, 3, GL_UNSIGNED_SHORT, 0);
    shader.UnUse();
    glutSwapBuffers();
}

The fragment shader writes the input color (vSmoothColor) to the frame buffer output (vFragColor).

void OnShutdown() {
    shader.DeleteShaderProgram();
    glDeleteBuffers(1, &vboVerticesID);
    glDeleteBuffers(1, &vboIndicesID);
    glDeleteVertexArrays(1, &vaoID);
}

How it works…

vSmoothColor = vec4(vColor,1);
gl_Position = MVP*vec4(vVertex,1);

Tip

vFragColor = vSmoothColor;

There's more…

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
    shader.AddAttribute("vVertex");
    shader.AddAttribute("vColor");
    shader.AddUniform("MVP");
shader.UnUse();

We pass two attributes per-vertex, that is vertex position and vertex color. In order to facilitate the data transfer to the GPU, we create a simple Vertex struct as follows:

struct Vertex {
    glm::vec3 position;
    glm::vec3 color;
};
Vertex vertices[3];
GLushort indices[3];

vertices[0].color=glm::vec3(1,0,0);
vertices[1].color=glm::vec3(0,1,0);
vertices[2].color=glm::vec3(0,0,1);

vertices[0].position=glm::vec3(-1,-1,0);
vertices[1].position=glm::vec3(0,1,0);
vertices[2].position=glm::vec3(1,-1,0);

indices[0] = 0;
indices[1] = 1;
indices[2] = 2;

glGenVertexArrays(1, &vaoID);
glGenBuffers(1, &vboVerticesID);
glGenBuffers(1, &vboIndicesID);
glBindVertexArray(vaoID);

glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(vertices), &vertices[0], GL_STATIC_DRAW);

glEnableVertexAttribArray(shader["vVertex"]);
glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,stride,0);
glEnableVertexAttribArray(shader["vColor"]);
glVertexAttribPointer(shader["vColor"], 3, GL_FLOAT, GL_FALSE,stride, (const GLvoid*)offsetof(Vertex, color));

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), &indices[0], GL_STATIC_DRAW);

void OnShutdown() {
    shader.DeleteShaderProgram();
    glDeleteBuffers(1, &vboVerticesID);
    glDeleteBuffers(1, &vboIndicesID);
    glDeleteVertexArrays(1, &vaoID);
}

Tip

The rendering code of the simple triangle demo is as follows:

void OnRender() {
    glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
    shader.Use();
      glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(P*MV));
      glDrawElements(GL_TRIANGLES, 3, GL_UNSIGNED_SHORT, 0);
    shader.UnUse();
    glutSwapBuffers();
}

How it works…

vSmoothColor = vec4(vColor,1);
gl_Position = MVP*vec4(vVertex,1);

Tip

The fragment shader writes the input color (vSmoothColor) to the frame buffer output (vFragColor).

vFragColor = vSmoothColor;

There's more…

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
    shader.AddAttribute("vVertex");
    shader.AddAttribute("vColor");
    shader.AddUniform("MVP");
shader.UnUse();

We pass two attributes per-vertex, that is vertex position and vertex color. In order to facilitate the data transfer to the GPU, we create a simple Vertex struct as follows:

struct Vertex {
    glm::vec3 position;
    glm::vec3 color;
};
Vertex vertices[3];
GLushort indices[3];

vertices[0].color=glm::vec3(1,0,0);
vertices[1].color=glm::vec3(0,1,0);
vertices[2].color=glm::vec3(0,0,1);

vertices[0].position=glm::vec3(-1,-1,0);
vertices[1].position=glm::vec3(0,1,0);
vertices[2].position=glm::vec3(1,-1,0);

indices[0] = 0;
indices[1] = 1;
indices[2] = 2;

glGenVertexArrays(1, &vaoID);
glGenBuffers(1, &vboVerticesID);
glGenBuffers(1, &vboIndicesID);
glBindVertexArray(vaoID);

glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(vertices), &vertices[0], GL_STATIC_DRAW);

glEnableVertexAttribArray(shader["vVertex"]);
glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,stride,0);
glEnableVertexAttribArray(shader["vColor"]);
glVertexAttribPointer(shader["vColor"], 3, GL_FLOAT, GL_FALSE,stride, (const GLvoid*)offsetof(Vertex, color));

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), &indices[0], GL_STATIC_DRAW);

void OnShutdown() {
    shader.DeleteShaderProgram();
    glDeleteBuffers(1, &vboVerticesID);
    glDeleteBuffers(1, &vboIndicesID);
    glDeleteVertexArrays(1, &vaoID);
}

Tip

The rendering code of the simple triangle demo is as follows:

void OnRender() {
    glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
    shader.Use();
      glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(P*MV));
      glDrawElements(GL_TRIANGLES, 3, GL_UNSIGNED_SHORT, 0);
    shader.UnUse();
    glutSwapBuffers();
}

There's more…

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
    shader.AddAttribute("vVertex");
    shader.AddAttribute("vColor");
    shader.AddUniform("MVP");
shader.UnUse();

We pass two attributes per-vertex, that is vertex position and vertex color. In order to facilitate the data transfer to the GPU, we create a simple Vertex struct as follows:

struct Vertex {
    glm::vec3 position;
    glm::vec3 color;
};
Vertex vertices[3];
GLushort indices[3];

vertices[0].color=glm::vec3(1,0,0);
vertices[1].color=glm::vec3(0,1,0);
vertices[2].color=glm::vec3(0,0,1);

vertices[0].position=glm::vec3(-1,-1,0);
vertices[1].position=glm::vec3(0,1,0);
vertices[2].position=glm::vec3(1,-1,0);

indices[0] = 0;
indices[1] = 1;
indices[2] = 2;

glGenVertexArrays(1, &vaoID);
glGenBuffers(1, &vboVerticesID);
glGenBuffers(1, &vboIndicesID);
glBindVertexArray(vaoID);

glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(vertices), &vertices[0], GL_STATIC_DRAW);

glEnableVertexAttribArray(shader["vVertex"]);
glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,stride,0);
glEnableVertexAttribArray(shader["vColor"]);
glVertexAttribPointer(shader["vColor"], 3, GL_FLOAT, GL_FALSE,stride, (const GLvoid*)offsetof(Vertex, color));

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), &indices[0], GL_STATIC_DRAW);

void OnShutdown() {
    shader.DeleteShaderProgram();
    glDeleteBuffers(1, &vboVerticesID);
    glDeleteBuffers(1, &vboIndicesID);
    glDeleteVertexArrays(1, &vaoID);
}

Tip

The rendering code of the simple triangle demo is as follows:

void OnRender() {
    glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
    shader.Use();
      glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(P*MV));
      glDrawElements(GL_TRIANGLES, 3, GL_UNSIGNED_SHORT, 0);
    shader.UnUse();
    glutSwapBuffers();
}

Doing a ripple mesh deformer using the vertex shader

In this recipe, we will deform a planar mesh using the vertex shader. We know that the vertex shader is responsible for outputting the clip space position of the given object space vertex. In between this conversion, we can apply the modeling transformation to transform the given object space vertex to world space position.

Getting ready

For this recipe, we assume that the reader knows how to set up a simple triangle on screen using a vertex and fragment shader as detailed in the previous recipe. The code for this recipe is in the Chapter1\RippleDeformer directory.

How to do it…

We can implement a ripple shader using the following steps:

Define the vertex shader that deforms the object space vertex position.

#version 330 core
layout(location=0) in vec3 vVertex;
uniform mat4 MVP;
uniform float time;
const float amplitude = 0.125;
const float frequency = 4;
const float PI = 3.14159;
void main()
{ 
  float distance = length(vVertex);
  float y = amplitude*sin(-PI*distance*frequency+time);
  gl_Position = MVP*vec4(vVertex.x, y, vVertex.z,1);
}

Define a fragment shader that simply outputs a constant color.

#version 330 core
layout(location=0) out vec4 vFragColor;
void main()
{
  vFragColor = vec4(1,1,1,1);
}

Load the two shaders using the GLSLShader class in the OnInit() function.

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_FRAGMENT_SHADER, "shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("MVP");
  shader.AddUniform("time");
shader.UnUse();

Store the geometry and topology in the buffer object(s).

int count = 0;
int i=0, j=0;
for( j=0;j<=NUM_Z;j++) {
  for( i=0;i<=NUM_X;i++) {
    vertices[count++] = glm::vec3( ((float(i)/(NUM_X-1)) *2-1)* HALF_SIZE_X, 0, ((float(j)/(NUM_Z-1))*2-1)*HALF_SIZE_Z);
  }
}
GLushort* id=&indices[0];
for (i = 0; i < NUM_Z; i++) {
  for (j = 0; j < NUM_X; j++) {
    int i0 = i * (NUM_X+1) + j;
    int i1 = i0 + 1;
    int i2 = i0 + (NUM_X+1);
    int i3 = i2 + 1;
    if ((j+i)%2) {
      *id++ = i0; *id++ = i2; *id++ = i1;
      *id++ = i1; *id++ = i2; *id++ = i3;
    } else {
      *id++ = i0; *id++ = i2; *id++ = i3;
      *id++ = i0; *id++ = i3; *id++ = i1;
    }
  }
}

glGenVertexArrays(1, &vaoID);
glGenBuffers(1, &vboVerticesID);
glGenBuffers(1, &vboIndicesID);
glBindVertexArray(vaoID);
glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(vertices), &vertices[0], GL_STATIC_DRAW);
glEnableVertexAttribArray(shader["vVertex"]);
glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,0,0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), &indices[0], GL_STATIC_DRAW);

Set up the perspective projection matrix in the resize handler.
```
P = glm::perspective(45.0f, (GLfloat)w/h, 1.f, 1000.f);
```

Set up the rendering code to bind the GLSLShader shader, pass the uniforms and then draw the geometry.

void OnRender() {
  time = glutGet(GLUT_ELAPSED_TIME)/1000.0f * SPEED;
  glm::mat4 T=glm::translate(glm::mat4(1.0f), glm::vec3(0.0f, 0.0f, dist));
  glm::mat4 Rx= glm::rotate(T,  rX, glm::vec3(1.0f, 0.0f, 0.0f));
  glm::mat4 MV= glm::rotate(Rx, rY, glm::vec3(0.0f, 1.0f, 0.0f));
  glm::mat4 MVP= P*MV;
  shader.Use();
    glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(MVP));
    glUniform1f(shader("time"), time);
    glDrawElements(GL_TRIANGLES,TOTAL_INDICES,GL_UNSIGNED_SHORT,0);
  shader.UnUse();
  glutSwapBuffers();
}

In this recipe, the only attribute passed in is the per-vertex position (vVertex). There are two uniforms: the combined modelview projection matrix (MVP) and the current time (time). We will use the time uniform to allow progression of the deformer so we can observe the ripple movement. After these declarations are three constants, namely amplitude (which controls how much the ripple moves up and down from the zero base line), frequency (which controls the total number of waves), and PI (a constant used in the wave formula). Note that we could have replaced the constants with uniforms and had them modified from the application code.

void OnShutdown() {
  shader.DeleteShaderProgram();
  glDeleteBuffers(1, &vboVerticesID);
  glDeleteBuffers(1, &vboIndicesID);
  glDeleteVertexArrays(1, &vaoID);
}

How it works…

Now the real work is carried out in the main function. We first find the distance of the given vertex from the origin. Here we use the length built-in GLSL function. We then create a simple sinusoid. We know that a general sine wave can be given using the following function:

Here, A is the wave amplitude, f is the frequency, t is the time, and φ is the phase. In order to get our ripple to start from the origin, we modify the function to the following:

In our formula, we first find the distance (d) of the vertex from the origin by using the Euclidean distance formula. This is given to us by the length built-in GLSL function. Next, we input the distance into the sin function multiplying the distance by the frequency (f) and (π). In our vertex shader, we replace the phase (φ) with time.

#version 330 core
layout(location=0) in vec3 vVertex; 
uniform mat4 MVP;
uniform float time;
const float amplitude = 0.125;
const float frequency = 4;
const float PI = 3.14159;
void main()
{ 
  float distance = length(vVertex);
  float y = amplitude*sin(-PI*distance*frequency+time);
  gl_Position = MVP*vec4(vVertex.x, y, vVertex.z,1);
}

After calculating the new y value, we multiply the new vertex position with the combined modelview projection matrix (MVP). The fragment shader simply outputs a constant color (in this case white color, vec4(1,1,1,1)).

#version 330 core
layout(location=0) out vec4 vFragColor;
void main()
{
   vFragColor = vec4(1,1,1,1);
}

There's more

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("MVP");
  shader.AddUniform("time");
shader.UnUse();

The only difference in this recipe is the addition of an additional uniform (time).

We generate a simple 3D planar grid in the XZ plane. The geometry is stored in the vertices global array. The total number of vertices on the X axis is stored in a global constant NUM_X, whereas the total number of vertices on the Z axis is stored in another global constant NUM_Z. The size of the planar grid in world space is stored in two global constants, SIZE_X and SIZE_Z, and half of these values are stored in the HALF_SIZE_X and HALF_SIZE_Z global constants. Using these constants, we can change the mesh resolution and world space size.

The loop simply iterates (NUM_X+1)*(NUM_Z+1) times and remaps the current vertex index first into the 0 to 1 range and then into the -1 to 1 range, and finally multiplies it by the HALF_SIZE_X and HALF_SIZE_Z constants to get the range from –HALF_SIZE_X to HALF_SIZE_X and –HALF_SIZE_Z to HALF_SIZE_Z.

The topology of the mesh is stored in the indices global array. While there are several ways to generate the mesh topology, we will look at two common ways. The first method keeps the same triangulation for all of the mesh quads as shown in the following screenshot:

This sort of topology can be generated using the following code:

GLushort* id=&indices[0];
for (i = 0; i < NUM_Z; i++) {
  for (j = 0; j < NUM_X; j++) {
    int i0 = i * (NUM_X+1) + j;
    int i1 = i0 + 1;
    int i2 = i0 + (NUM_X+1);
    int i3 = i2 + 1;
    *id++ = i0; *id++ = i2; *id++ = i1;
    *id++ = i1; *id++ = i2; *id++ = i3;
  }
}

The second method alternates the triangulation at even and odd iterations resulting in a better looking mesh as shown in the following screenshot:

In order to alternate the triangle directions and maintain their winding order, we take two different combinations, one for an even iteration and second for an odd iteration. This can be achieved using the following code:

GLushort* id=&indices[0];
for (i = 0; i < NUM_Z; i++) {
  for (j = 0; j < NUM_X; j++) {
    int i0 = i * (NUM_X+1) + j;
    int i1 = i0 + 1;
    int i2 = i0 + (NUM_X+1);
    int i3 = i2 + 1;
    if ((j+i)%2) {
      *id++ = i0; *id++ = i2; *id++ = i1;
      *id++ = i1; *id++ = i2; *id++ = i3;
    } else {
      *id++ = i0; *id++ = i2; *id++ = i3;
      *id++ = i0; *id++ = i3; *id++ = i1;
    }
  }
}

After filling the vertices and indices arrays, we push this data to the GPU memory. We first create a vertex array object (vaoID) and two buffer objects, the GL_ARRAY_BUFFER binding for vertices and the GL_ELEMENT_ARRAY_BUFFER binding for the indices array. These calls are exactly the same as in the previous recipe. The only difference is that now we only have a single per-vertex attribute, that is, the vertex position (vVertex). The OnShutdown() function is also unchanged as in the previous recipe.

The rendering code is slightly changed. We first get the current elapsed time from freeglut so that we can move the ripple deformer in time. Next, we clear the color and depth buffers. After this, we set up the modelview matrix. This is carried out by using the matrix transformation functions provided by the glm library.

glm::mat4 T=glm::translate(glm::mat4(1.0f),
glm::vec3(0.0f, 0.0f, dist));
glm::mat4 Rx= glm::rotate(T,  rX, glm::vec3(1.0f, 0.0f, 0.0f));
glm::mat4 MV= glm::rotate(Rx, rY, glm::vec3(0.0f, 1.0f,  0.0f));
glm::mat4 MVP= P*MV;

Note that the matrix multiplication in glm follows from right to left. So the order in which we generate the transformations will be applied in the reverse order. In our case the combined modelview matrix will be calculated as MV = (T*(Rx*Ry)). The translation amount, dist, and the rotation values, rX and rY, are calculated in the mouse input functions based on the user's input.

After calculating the modelview matrix, the combined modelview projection matrix (MVP) is calculated. The projection matrix (P) is calculated in the OnResize() handler. In this case, the perspective projection matrix is used with four parameters, the vertical fov, the aspect ratio, and the near and far clip plane distances. The GLSLShader object is bound and then the two uniforms, MVP and time are passed to the shader program. The attributes are then transferred using the glDrawElements call as we saw in the previous recipe. The GLSLShader object is then unbound and finally, the back buffer is swapped.

In the ripple deformer main function, we attach two new callbacks; glutMouseFunc handled by the OnMouseDown function and glutMotionFunc handled by the OnMouseMove function. These functions are defined as follows:

void OnMouseDown(int button, int s, int x, int y) {
  if (s == GLUT_DOWN)  {
    oldX = x; 
    oldY = y;  
  }
  if(button == GLUT_MIDDLE_BUTTON) 
  state = 0;
  else
  state = 1;
}

This function is called whenever the mouse is clicked in our application window. The first parameter is for the button which was pressed (GLUT_LEFT_BUTTON for the left mouse button, GLUT_MIDDLE_BUTTON for the middle mouse button, and GLUT_RIGHT_BUTTON for the right mouse button). The second parameter is the state which can be either GLUT_DOWN or GLUT_UP. The last two parameters are the x and y screen location of the mouse click. In this simple example, we store the mouse click location and then set a state variable when the middle mouse button is pressed.

The OnMouseMove function has only two parameters, the x and y screen location where the mouse currently is. The mouse move event is raised whenever the mouse enters and moves in the application window. Based on the state set in the OnMouseDown function, we calculate the zoom amount (dist) if the middle mouse button is pressed. Otherwise, we calculate the two rotation amounts (rX and rY). Next, we update the oldX and oldY positions for the next event. Finally we request the freeglut framework to repaint our application window by calling glutPostRedisplay() function. This call sends the repaint event which re-renders our scene.

void OnMouseMove(int x, int y) {
  if (state == 0)
    dist *= (1 + (y - oldY)/60.0f);
  else {
    rY += (x - oldX)/5.0f;
    rX += (y - oldY)/5.0f;
  }
  oldX = x; oldY = y;
  glutPostRedisplay();
}

In order to make it easy for us to see the deformation, we enable wireframe rendering by calling the glPolygonMode(GL_FRONT_AND_BACK, GL_LINE) function in the OnInit() function.

Tip

There are two things to be careful about with the glPolygonMode function. Firstly, the first parameter can only be GL_FRONT_AND_BACK in the core profile. Secondly, make sure that the second parameter is named GL_LINE instead of GL_LINES which is used with the glDraw* functions. To disable the wireframe rendering and return to the default fill rendering, change the second parameter from GL_LINE to GL_FILL.

Running the demo code shows a ripple deformer propagating the deformation in a mesh grid as shown in the following screenshot. Hopefully, this recipe should have cleared how to use vertex shaders, especially for doing per-vertex transformations.

We can implement a ripple shader using the following steps:

How to do it…

Define the vertex shader that deforms the object space vertex position.

#version 330 core
layout(location=0) in vec3 vVertex;
uniform mat4 MVP;
uniform float time;
const float amplitude = 0.125;
const float frequency = 4;
const float PI = 3.14159;
void main()
{ 
  float distance = length(vVertex);
  float y = amplitude*sin(-PI*distance*frequency+time);
  gl_Position = MVP*vec4(vVertex.x, y, vVertex.z,1);
}

Define a fragment shader that simply outputs a constant color.

#version 330 core
layout(location=0) out vec4 vFragColor;
void main()
{
  vFragColor = vec4(1,1,1,1);
}

Load the two shaders using the GLSLShader class in the OnInit() function.

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_FRAGMENT_SHADER, "shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("MVP");
  shader.AddUniform("time");
shader.UnUse();

Store the geometry and topology in the buffer object(s).

int count = 0;
int i=0, j=0;
for( j=0;j<=NUM_Z;j++) {
  for( i=0;i<=NUM_X;i++) {
    vertices[count++] = glm::vec3( ((float(i)/(NUM_X-1)) *2-1)* HALF_SIZE_X, 0, ((float(j)/(NUM_Z-1))*2-1)*HALF_SIZE_Z);
  }
}
GLushort* id=&indices[0];
for (i = 0; i < NUM_Z; i++) {
  for (j = 0; j < NUM_X; j++) {
    int i0 = i * (NUM_X+1) + j;
    int i1 = i0 + 1;
    int i2 = i0 + (NUM_X+1);
    int i3 = i2 + 1;
    if ((j+i)%2) {
      *id++ = i0; *id++ = i2; *id++ = i1;
      *id++ = i1; *id++ = i2; *id++ = i3;
    } else {
      *id++ = i0; *id++ = i2; *id++ = i3;
      *id++ = i0; *id++ = i3; *id++ = i1;
    }
  }
}

glGenVertexArrays(1, &vaoID);
glGenBuffers(1, &vboVerticesID);
glGenBuffers(1, &vboIndicesID);
glBindVertexArray(vaoID);
glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(vertices), &vertices[0], GL_STATIC_DRAW);
glEnableVertexAttribArray(shader["vVertex"]);
glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,0,0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), &indices[0], GL_STATIC_DRAW);

Set up the perspective projection matrix in the resize handler.
```
P = glm::perspective(45.0f, (GLfloat)w/h, 1.f, 1000.f);
```

Set up the rendering code to bind the GLSLShader shader, pass the uniforms and then draw the geometry.

void OnRender() {
  time = glutGet(GLUT_ELAPSED_TIME)/1000.0f * SPEED;
  glm::mat4 T=glm::translate(glm::mat4(1.0f), glm::vec3(0.0f, 0.0f, dist));
  glm::mat4 Rx= glm::rotate(T,  rX, glm::vec3(1.0f, 0.0f, 0.0f));
  glm::mat4 MV= glm::rotate(Rx, rY, glm::vec3(0.0f, 1.0f, 0.0f));
  glm::mat4 MVP= P*MV;
  shader.Use();
    glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(MVP));
    glUniform1f(shader("time"), time);
    glDrawElements(GL_TRIANGLES,TOTAL_INDICES,GL_UNSIGNED_SHORT,0);
  shader.UnUse();
  glutSwapBuffers();
}

Here, A is the wave amplitude, f is the frequency, t is the time, and φ is the phase. In order to get our ripple to start from the origin, we modify the function to the following:

void OnShutdown() {
  shader.DeleteShaderProgram();
  glDeleteBuffers(1, &vboVerticesID);
  glDeleteBuffers(1, &vboIndicesID);
  glDeleteVertexArrays(1, &vaoID);
}

How it works…

#version 330 core
layout(location=0) in vec3 vVertex; 
uniform mat4 MVP;
uniform float time;
const float amplitude = 0.125;
const float frequency = 4;
const float PI = 3.14159;
void main()
{ 
  float distance = length(vVertex);
  float y = amplitude*sin(-PI*distance*frequency+time);
  gl_Position = MVP*vec4(vVertex.x, y, vVertex.z,1);
}

#version 330 core
layout(location=0) out vec4 vFragColor;
void main()
{
   vFragColor = vec4(1,1,1,1);
}

There's more

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("MVP");
  shader.AddUniform("time");
shader.UnUse();

The only difference in this recipe is the addition of an additional uniform (time).

This sort of topology can be generated using the following code:

GLushort* id=&indices[0];
for (i = 0; i < NUM_Z; i++) {
  for (j = 0; j < NUM_X; j++) {
    int i0 = i * (NUM_X+1) + j;
    int i1 = i0 + 1;
    int i2 = i0 + (NUM_X+1);
    int i3 = i2 + 1;
    *id++ = i0; *id++ = i2; *id++ = i1;
    *id++ = i1; *id++ = i2; *id++ = i3;
  }
}

The second method alternates the triangulation at even and odd iterations resulting in a better looking mesh as shown in the following screenshot:

GLushort* id=&indices[0];
for (i = 0; i < NUM_Z; i++) {
  for (j = 0; j < NUM_X; j++) {
    int i0 = i * (NUM_X+1) + j;
    int i1 = i0 + 1;
    int i2 = i0 + (NUM_X+1);
    int i3 = i2 + 1;
    if ((j+i)%2) {
      *id++ = i0; *id++ = i2; *id++ = i1;
      *id++ = i1; *id++ = i2; *id++ = i3;
    } else {
      *id++ = i0; *id++ = i2; *id++ = i3;
      *id++ = i0; *id++ = i3; *id++ = i1;
    }
  }
}

glm::mat4 T=glm::translate(glm::mat4(1.0f),
glm::vec3(0.0f, 0.0f, dist));
glm::mat4 Rx= glm::rotate(T,  rX, glm::vec3(1.0f, 0.0f, 0.0f));
glm::mat4 MV= glm::rotate(Rx, rY, glm::vec3(0.0f, 1.0f,  0.0f));
glm::mat4 MVP= P*MV;

void OnMouseDown(int button, int s, int x, int y) {
  if (s == GLUT_DOWN)  {
    oldX = x; 
    oldY = y;  
  }
  if(button == GLUT_MIDDLE_BUTTON) 
  state = 0;
  else
  state = 1;
}

In order to make it easy for us to see the deformation, we enable wireframe rendering by calling the glPolygonMode(GL_FRONT_AND_BACK, GL_LINE) function in the OnInit() function.

void OnMouseMove(int x, int y) {
  if (state == 0)
    dist *= (1 + (y - oldY)/60.0f);
  else {
    rY += (x - oldX)/5.0f;
    rX += (y - oldY)/5.0f;
  }
  oldX = x; oldY = y;
  glutPostRedisplay();
}

Tip

We can implement a ripple shader using the following steps:

Define the vertex shader that deforms the object space vertex position.

#version 330 core
layout(location=0) in vec3 vVertex;
uniform mat4 MVP;
uniform float time;
const float amplitude = 0.125;
const float frequency = 4;
const float PI = 3.14159;
void main()
{ 
  float distance = length(vVertex);
  float y = amplitude*sin(-PI*distance*frequency+time);
  gl_Position = MVP*vec4(vVertex.x, y, vVertex.z,1);
}

Define a

fragment shader that simply outputs a constant color.

#version 330 core
layout(location=0) out vec4 vFragColor;
void main()
{
  vFragColor = vec4(1,1,1,1);
}

Load the two shaders using the GLSLShader class in the OnInit() function.

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_FRAGMENT_SHADER, "shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("MVP");
  shader.AddUniform("time");
shader.UnUse();

Store the geometry and topology in the buffer object(s).

int count = 0;
int i=0, j=0;
for( j=0;j<=NUM_Z;j++) {
  for( i=0;i<=NUM_X;i++) {
    vertices[count++] = glm::vec3( ((float(i)/(NUM_X-1)) *2-1)* HALF_SIZE_X, 0, ((float(j)/(NUM_Z-1))*2-1)*HALF_SIZE_Z);
  }
}
GLushort* id=&indices[0];
for (i = 0; i < NUM_Z; i++) {
  for (j = 0; j < NUM_X; j++) {
    int i0 = i * (NUM_X+1) + j;
    int i1 = i0 + 1;
    int i2 = i0 + (NUM_X+1);
    int i3 = i2 + 1;
    if ((j+i)%2) {
      *id++ = i0; *id++ = i2; *id++ = i1;
      *id++ = i1; *id++ = i2; *id++ = i3;
    } else {
      *id++ = i0; *id++ = i2; *id++ = i3;
      *id++ = i0; *id++ = i3; *id++ = i1;
    }
  }
}

glGenVertexArrays(1, &vaoID);
glGenBuffers(1, &vboVerticesID);
glGenBuffers(1, &vboIndicesID);
glBindVertexArray(vaoID);
glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(vertices), &vertices[0], GL_STATIC_DRAW);
glEnableVertexAttribArray(shader["vVertex"]);
glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,0,0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), &indices[0], GL_STATIC_DRAW);

Set up the perspective projection matrix in the resize handler.
```
P = glm::perspective(45.0f, (GLfloat)w/h, 1.f, 1000.f);
```

Set up the rendering code to bind the GLSLShader shader, pass the uniforms and then draw the geometry.

void OnRender() {
  time = glutGet(GLUT_ELAPSED_TIME)/1000.0f * SPEED;
  glm::mat4 T=glm::translate(glm::mat4(1.0f), glm::vec3(0.0f, 0.0f, dist));
  glm::mat4 Rx= glm::rotate(T,  rX, glm::vec3(1.0f, 0.0f, 0.0f));
  glm::mat4 MV= glm::rotate(Rx, rY, glm::vec3(0.0f, 1.0f, 0.0f));
  glm::mat4 MVP= P*MV;
  shader.Use();
    glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(MVP));
    glUniform1f(shader("time"), time);
    glDrawElements(GL_TRIANGLES,TOTAL_INDICES,GL_UNSIGNED_SHORT,0);
  shader.UnUse();
  glutSwapBuffers();
}

Here, A is the wave amplitude, f is the frequency, t is the time, and φ is the phase. In order to get our ripple to start from the origin, we modify the function to the following:

void OnShutdown() {
  shader.DeleteShaderProgram();
  glDeleteBuffers(1, &vboVerticesID);
  glDeleteBuffers(1, &vboIndicesID);
  glDeleteVertexArrays(1, &vaoID);
}

How it works…

#version 330 core
layout(location=0) in vec3 vVertex; 
uniform mat4 MVP;
uniform float time;
const float amplitude = 0.125;
const float frequency = 4;
const float PI = 3.14159;
void main()
{ 
  float distance = length(vVertex);
  float y = amplitude*sin(-PI*distance*frequency+time);
  gl_Position = MVP*vec4(vVertex.x, y, vVertex.z,1);
}

#version 330 core
layout(location=0) out vec4 vFragColor;
void main()
{
   vFragColor = vec4(1,1,1,1);
}

There's more

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("MVP");
  shader.AddUniform("time");
shader.UnUse();

The only difference in this recipe is the addition of an additional uniform (time).

This sort of topology can be generated using the following code:

GLushort* id=&indices[0];
for (i = 0; i < NUM_Z; i++) {
  for (j = 0; j < NUM_X; j++) {
    int i0 = i * (NUM_X+1) + j;
    int i1 = i0 + 1;
    int i2 = i0 + (NUM_X+1);
    int i3 = i2 + 1;
    *id++ = i0; *id++ = i2; *id++ = i1;
    *id++ = i1; *id++ = i2; *id++ = i3;
  }
}

The second method alternates the triangulation at even and odd iterations resulting in a better looking mesh as shown in the following screenshot:

GLushort* id=&indices[0];
for (i = 0; i < NUM_Z; i++) {
  for (j = 0; j < NUM_X; j++) {
    int i0 = i * (NUM_X+1) + j;
    int i1 = i0 + 1;
    int i2 = i0 + (NUM_X+1);
    int i3 = i2 + 1;
    if ((j+i)%2) {
      *id++ = i0; *id++ = i2; *id++ = i1;
      *id++ = i1; *id++ = i2; *id++ = i3;
    } else {
      *id++ = i0; *id++ = i2; *id++ = i3;
      *id++ = i0; *id++ = i3; *id++ = i1;
    }
  }
}

glm::mat4 T=glm::translate(glm::mat4(1.0f),
glm::vec3(0.0f, 0.0f, dist));
glm::mat4 Rx= glm::rotate(T,  rX, glm::vec3(1.0f, 0.0f, 0.0f));
glm::mat4 MV= glm::rotate(Rx, rY, glm::vec3(0.0f, 1.0f,  0.0f));
glm::mat4 MVP= P*MV;

void OnMouseDown(int button, int s, int x, int y) {
  if (s == GLUT_DOWN)  {
    oldX = x; 
    oldY = y;  
  }
  if(button == GLUT_MIDDLE_BUTTON) 
  state = 0;
  else
  state = 1;
}

In order to make it easy for us to see the deformation, we enable wireframe rendering by calling the glPolygonMode(GL_FRONT_AND_BACK, GL_LINE) function in the OnInit() function.

void OnMouseMove(int x, int y) {
  if (state == 0)
    dist *= (1 + (y - oldY)/60.0f);
  else {
    rY += (x - oldX)/5.0f;
    rX += (y - oldY)/5.0f;
  }
  oldX = x; oldY = y;
  glutPostRedisplay();
}

Tip

only attribute passed in is the per-vertex position (vVertex). There are two uniforms: the combined modelview projection matrix (MVP) and the current time (time). We will use the time uniform to allow progression of the deformer so we can observe the ripple movement. After these declarations are three constants, namely amplitude (which controls how much the ripple moves up and down from the zero base line), frequency (which controls the total number of waves), and PI (a constant used in the wave formula). Note that we could have replaced the constants with uniforms and had them modified from the application code.

In this recipe, the

Here, A is the wave amplitude, f is the frequency, t is the time, and φ is the phase. In order to get our ripple to start from the origin, we modify the function to the following:

#version 330 core
layout(location=0) in vec3 vVertex; 
uniform mat4 MVP;
uniform float time;
const float amplitude = 0.125;
const float frequency = 4;
const float PI = 3.14159;
void main()
{ 
  float distance = length(vVertex);
  float y = amplitude*sin(-PI*distance*frequency+time);
  gl_Position = MVP*vec4(vVertex.x, y, vVertex.z,1);
}

#version 330 core
layout(location=0) out vec4 vFragColor;
void main()
{
   vFragColor = vec4(1,1,1,1);
}

There's more

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("MVP");
  shader.AddUniform("time");
shader.UnUse();

The only difference in this recipe is the addition of an additional uniform (time).

This sort of topology can be generated using the following code:

GLushort* id=&indices[0];
for (i = 0; i < NUM_Z; i++) {
  for (j = 0; j < NUM_X; j++) {
    int i0 = i * (NUM_X+1) + j;
    int i1 = i0 + 1;
    int i2 = i0 + (NUM_X+1);
    int i3 = i2 + 1;
    *id++ = i0; *id++ = i2; *id++ = i1;
    *id++ = i1; *id++ = i2; *id++ = i3;
  }
}

The second method alternates the triangulation at even and odd iterations resulting in a better looking mesh as shown in the following screenshot:

GLushort* id=&indices[0];
for (i = 0; i < NUM_Z; i++) {
  for (j = 0; j < NUM_X; j++) {
    int i0 = i * (NUM_X+1) + j;
    int i1 = i0 + 1;
    int i2 = i0 + (NUM_X+1);
    int i3 = i2 + 1;
    if ((j+i)%2) {
      *id++ = i0; *id++ = i2; *id++ = i1;
      *id++ = i1; *id++ = i2; *id++ = i3;
    } else {
      *id++ = i0; *id++ = i2; *id++ = i3;
      *id++ = i0; *id++ = i3; *id++ = i1;
    }
  }
}

glm::mat4 T=glm::translate(glm::mat4(1.0f),
glm::vec3(0.0f, 0.0f, dist));
glm::mat4 Rx= glm::rotate(T,  rX, glm::vec3(1.0f, 0.0f, 0.0f));
glm::mat4 MV= glm::rotate(Rx, rY, glm::vec3(0.0f, 1.0f,  0.0f));
glm::mat4 MVP= P*MV;

void OnMouseDown(int button, int s, int x, int y) {
  if (s == GLUT_DOWN)  {
    oldX = x; 
    oldY = y;  
  }
  if(button == GLUT_MIDDLE_BUTTON) 
  state = 0;
  else
  state = 1;
}

In order to make it easy for us to see the deformation, we enable wireframe rendering by calling the glPolygonMode(GL_FRONT_AND_BACK, GL_LINE) function in the OnInit() function.

void OnMouseMove(int x, int y) {
  if (state == 0)
    dist *= (1 + (y - oldY)/60.0f);
  else {
    rY += (x - oldX)/5.0f;
    rX += (y - oldY)/5.0f;
  }
  oldX = x; oldY = y;
  glutPostRedisplay();
}

Tip

There's more

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("MVP");
  shader.AddUniform("time");
shader.UnUse();

The only difference in this recipe is the addition of an additional uniform (time).

This sort of topology can be generated using the following code:

GLushort* id=&indices[0];
for (i = 0; i < NUM_Z; i++) {
  for (j = 0; j < NUM_X; j++) {
    int i0 = i * (NUM_X+1) + j;
    int i1 = i0 + 1;
    int i2 = i0 + (NUM_X+1);
    int i3 = i2 + 1;
    *id++ = i0; *id++ = i2; *id++ = i1;
    *id++ = i1; *id++ = i2; *id++ = i3;
  }
}

The second method alternates the triangulation at even and odd iterations resulting in a better looking mesh as shown in the following screenshot:

GLushort* id=&indices[0];
for (i = 0; i < NUM_Z; i++) {
  for (j = 0; j < NUM_X; j++) {
    int i0 = i * (NUM_X+1) + j;
    int i1 = i0 + 1;
    int i2 = i0 + (NUM_X+1);
    int i3 = i2 + 1;
    if ((j+i)%2) {
      *id++ = i0; *id++ = i2; *id++ = i1;
      *id++ = i1; *id++ = i2; *id++ = i3;
    } else {
      *id++ = i0; *id++ = i2; *id++ = i3;
      *id++ = i0; *id++ = i3; *id++ = i1;
    }
  }
}

glm::mat4 T=glm::translate(glm::mat4(1.0f),
glm::vec3(0.0f, 0.0f, dist));
glm::mat4 Rx= glm::rotate(T,  rX, glm::vec3(1.0f, 0.0f, 0.0f));
glm::mat4 MV= glm::rotate(Rx, rY, glm::vec3(0.0f, 1.0f,  0.0f));
glm::mat4 MVP= P*MV;

void OnMouseDown(int button, int s, int x, int y) {
  if (s == GLUT_DOWN)  {
    oldX = x; 
    oldY = y;  
  }
  if(button == GLUT_MIDDLE_BUTTON) 
  state = 0;
  else
  state = 1;
}

In order to make it easy for us to see the deformation, we enable wireframe rendering by calling the glPolygonMode(GL_FRONT_AND_BACK, GL_LINE) function in the OnInit() function.

void OnMouseMove(int x, int y) {
  if (state == 0)
    dist *= (1 + (y - oldY)/60.0f);
  else {
    rY += (x - oldX)/5.0f;
    rX += (y - oldY)/5.0f;
  }
  oldX = x; oldY = y;
  glutPostRedisplay();
}

Tip

Dynamically subdividing a plane using the geometry shader

After the vertex shader, the next programmable stage in the OpenGL v3.3 graphics pipeline is the geometry shader. This shader contains inputs from the vertex shader stage. We can either feed these unmodified to the next shader stage or we can add/omit/modify vertices and primitives as desired. One thing that the vertex shaders lack is the availability of the other vertices of the primitive. Geometry shaders have information of all on the vertices of a single primitive.

The advantage with geometry shaders is that we can add/remove primitives on the fly. Moreover it is easier to get all vertices of a single primitive, unlike in the vertex shader, which has information on a single vertex only. The main drawback of geometry shaders is the limit on the number of new vertices we can generate, which is dependent on the hardware. Another disadvantage is the limited availability of the surrounding primitives.

In this recipe, we will dynamically subdivide a planar mesh using the geometry shader.

Getting ready

This recipe assumes that the reader knows how to render a simple triangle using vertex and fragment shaders using the OpenGL v3.3 core profile. We render four planar meshes in this recipe which are placed next to each other to create a bigger planar mesh. Each of these meshes is subdivided using the same geometry shader. The code for this recipe is located in the Chapter1\SubdivisionGeometryShader directory.

How to do it…

We can implement the geometry shader using the following steps:

Define a vertex shader (shaders/shader.vert) which outputs object space vertex positions directly.

#version 330 core
  layout(location=0) in vec3 vVertex;
  void main() {
    gl_Position =  vec4(vVertex, 1);
}

Define a geometry shader (shaders/shader.geom) which performs the subdivision of the quad. The shader is explained in the next section.

#version 330 core
layout (triangles) in;
layout (triangle_strip, max_vertices=256) out; 
uniform int sub_divisions;
uniform mat4 MVP;
void main() {
  vec4 v0 = gl_in[0].gl_Position;
  vec4 v1 = gl_in[1].gl_Position;
  vec4 v2 = gl_in[2].gl_Position;
  float dx = abs(v0.x-v2.x)/sub_divisions;
  float dz = abs(v0.z-v1.z)/sub_divisions;
  float x=v0.x;
  float z=v0.z;
  for(int j=0;j<sub_divisions*sub_divisions;j++) {
    gl_Position =  MVP * vec4(x,0,z,1);
    EmitVertex();
    gl_Position =  MVP * vec4(x,0,z+dz,1);
    EmitVertex();
    gl_Position =  MVP * vec4(x+dx,0,z,1);
    EmitVertex();
    gl_Position =  MVP * vec4(x+dx,0,z+dz,1);
    EmitVertex();
    EndPrimitive();
    x+=dx;
    if((j+1) %sub_divisions == 0) {
      x=v0.x;
     z+=dz;
    }
  }
}

Define a fragment shader (shaders/shader.frag) that simply outputs a constant color.

#version 330 core
layout(location=0) out vec4 vFragColor;
void main() {
  vFragColor = vec4(1,1,1,1);
}

Load the shaders using the GLSLShader class in the OnInit() function.

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_GEOMETRY_SHADER,"shaders/shader.geom");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("MVP");
  shader.AddUniform("sub_divisions");
  glUniform1i(shader("sub_divisions"), sub_divisions);
shader.UnUse();

Store the geometry and topology in the buffer object(s). Also enable the line display mode.

vertices[0] = glm::vec3(-5,0,-5);
vertices[1] = glm::vec3(-5,0,5);
vertices[2] = glm::vec3(5,0,5);
vertices[3] = glm::vec3(5,0,-5);
GLushort* id=&indices[0];

*id++ = 0;
*id++ = 1;
*id++ = 2;
*id++ = 0;
*id++ = 2;
*id++ = 3;

glGenVertexArrays(1, &vaoID);
glGenBuffers(1, &vboVerticesID);
glGenBuffers(1, &vboIndicesID);
glBindVertexArray(vaoID);
glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(vertices), &vertices[0], GL_STATIC_DRAW);
glEnableVertexAttribArray(shader["vVertex"]);
glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,0,0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), &indices[0], GL_STATIC_DRAW);
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);

Set up the rendering code to bind the GLSLShader shader, pass the uniforms and then draw the geometry.

void OnRender() {
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  glm::mat4 T = glm::translate( glm::mat4(1.0f), glm::vec3(0.0f,0.0f, dist));
  glm::mat4 Rx=glm::rotate(T,rX,glm::vec3(1.0f, 0.0f, 0.0f));
  glm::mat4 MV=glm::rotate(Rx,rY, glm::vec3(0.0f,1.0f,0.0f));
  MV=glm::translate(MV, glm::vec3(-5,0,-5));
  shader.Use();
    glUniform1i(shader("sub_divisions"), sub_divisions);
    glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(P*MV));
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);

    MV=glm::translate(MV, glm::vec3(10,0,0));
    glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(P*MV));
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);

    MV=glm::translate(MV, glm::vec3(0,0,10));
    glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(P*MV));
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);

    MV=glm::translate(MV, glm::vec3(-10,0,0));
    glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(P*MV));
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);
  shader.UnUse();
  glutSwapBuffers();
}

Let's dissect the geometry shader.

void OnShutdown() {
  shader.DeleteShaderProgram();
  glDeleteBuffers(1, &vboVerticesID);
  glDeleteBuffers(1, &vboIndicesID);
  glDeleteVertexArrays(1, &vaoID);
  cout<<"Shutdown successfull"<<endl;
}

How it works…

#version 330 core
layout (triangles) in;
layout (triangle_strip, max_vertices=256) out;

The first line signifies the GLSL version of the shader. The next two lines are important as they tell the shader processor about the input and output primitives of our geometry shader. In this case, the input will be triangles and the output will be a triangle_strip.

In addition, we also need to give the maximum number of output vertices from this geometry shader. This is a hardware specific number. For the hardware used in this development, the max_vertices value is found to be 256. This information can be obtained by querying the GL_MAX_GEOMETRY_OUTPUT_VERTICES field and it is dependent on the primitive type used and the number of attributes stored per-vertex.

uniform int sub_divisions;
uniform mat4 MVP;

Next, we declare two uniforms, the total number of subdivisions desired (sub_divisions) and the combined modelview projection matrix (MVP).

void main() { 
  vec4 v0 = gl_in[0].gl_Position;
  vec4 v1 = gl_in[1].gl_Position;
  vec4 v2 = gl_in[2].gl_Position;

The bulk of the work takes place in the main entry point function. For each triangle pushed from the application, the geometry shader is run once. Thus, for each triangle, the positions of its vertices are obtained from the gl_Position attribute which is stored in the built-in gl_in array. All other attributes are input as an array in the geometry shader. We store the input positions in local variable v0, v1, and v2.

Next, we calculate the size of the smallest quad for the given subdivision based on the size of the given base triangle and the total number of subdivisions required.

float dx = abs(v0.x-v2.x)/sub_divisions;
float dz = abs(v0.z-v1.z)/sub_divisions;
float x=v0.x;
float z=v0.z;
for(int j=0;j<sub_divisions*sub_divisions;j++) {
  gl_Position =  MVP * vec4(x,   0,   z,1);  EmitVertex();
  gl_Position =  MVP * vec4(x,   0,z+dz,1);  EmitVertex();
  gl_Position =  MVP * vec4(x+dx,0,   z,1);  EmitVertex();
  gl_Position =  MVP * vec4(x+dx,0,z+dz,1);  EmitVertex();
  EndPrimitive();
  x+=dx;
  if((j+1) % sub_divisions == 0) {
    x=v0.x;
    z+=dz;
  }
  }
}

We start from the first vertex. We store the x and z values of this vertex in local variables. Next, we iterate N*N times, where N is the total number of subdivisions required. For example, if we need to subdivide the mesh three times on both axes, the loop will run nine times, which is the total number of quads. After calculating the positions of the four vertices, they are emitted by calling EmitVertex(). This function emits the current values of output variables to the current output primitive on the primitive stream. Next, the EndPrimitive() call is issued to signify that we have emitted the four vertices of triangle_strip.

After these calculations, the local variable x is incremented by dx amount. If we are at an iteration that is a multiple of sub_divisions, we reset variable x to the x value of the first vertex while incrementing the local variable z.

The fragment shader outputs a constant color (white: vec4(1,1,1,1)).

There's more…

The application code is similar to the last recipes. We have an additional shader (shaders/shader.geom), which is our geometry shader that is loaded from file.

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_GEOMETRY_SHADER,"shaders/shader.geom");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("MVP");
  shader.AddUniform("sub_divisions");
  glUniform1i(shader("sub_divisions"), sub_divisions);
shader.UnUse();

The notable additions are highlighted, which include the new geometry shader and an additional uniform for the total subdivisions desired (sub_divisions). We initialize this uniform at initialization. The buffer object handling is similar to the simple triangle recipe. The other difference is in the rendering function where there are some additional modeling transformations (translations) after the viewing transformation.

The OnRender() function starts by clearing the color and depth buffers. It then calculates the viewing transformation as in the previous recipe.

void OnRender() {
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  glm::mat4 T = glm::translate( glm::mat4(1.0f), glm::vec3(0.0f,0.0f, dist));
  glm::mat4 Rx=glm::rotate(T,rX,glm::vec3(1.0f, 0.0f, 0.0f));
  glm::mat4 MV=glm::rotate(Rx,rY, glm::vec3(0.0f,1.0f,0.0f));
  MV=glm::translate(MV, glm::vec3(-5,0,-5));

Since our planer mesh geometry is positioned at origin going from -5 to 5 on the X and Z axes, we have to place them in the appropriate place by translating them, otherwise they would overlay each other.

Next, we first bind the shader program. Then we pass the shader uniforms which include the sub_divisions uniform and the combined modelview projection matrix (MVP) uniform. Then we pass the attributes by issuing a call to the glDrawElements function. We then add the relative translation for each instance to get a new modelview matrix for the next draw call. This is repeated three times to get all four planar meshes placed properly in the world space.

In this recipe, we handle keyboard input to allow the user to change the subdivision level dynamically. We first attach our keyboard event handler (OnKey) to glutKeyboardFunc. The keyboard event handler is defined as follows:

void OnKey(unsigned char key, int x, int y) {
  switch(key) {
    case ',':  sub_divisions--; break;
    case '.':  sub_divisions++; break;
  }
  sub_divisions = max(1,min(8, sub_divisions));	
  glutPostRedisplay();
}

We can change the subdivision levels by pressing the , and . keys. We then check to make sure that the subdivisions are within the allowed limit. Finally, we request the freeglut function, glutPostRedisplay(), to repaint the window to show the new mesh. Compiling and running the demo code displays four planar meshes. Pressing the , key decreases the subdivision level and the . key increases the subdivision level. The output from the subdivision geometry shader showing multiple subdivision levels is displayed in the following screenshot:

How to do it…

We can implement the geometry shader using the following steps:

Define a vertex shader (shaders/shader.vert) which outputs object space vertex positions directly.

#version 330 core
  layout(location=0) in vec3 vVertex;
  void main() {
    gl_Position =  vec4(vVertex, 1);
}

Define a geometry shader (shaders/shader.geom) which performs the subdivision of the quad. The shader is explained in the next section.

#version 330 core
layout (triangles) in;
layout (triangle_strip, max_vertices=256) out; 
uniform int sub_divisions;
uniform mat4 MVP;
void main() {
  vec4 v0 = gl_in[0].gl_Position;
  vec4 v1 = gl_in[1].gl_Position;
  vec4 v2 = gl_in[2].gl_Position;
  float dx = abs(v0.x-v2.x)/sub_divisions;
  float dz = abs(v0.z-v1.z)/sub_divisions;
  float x=v0.x;
  float z=v0.z;
  for(int j=0;j<sub_divisions*sub_divisions;j++) {
    gl_Position =  MVP * vec4(x,0,z,1);
    EmitVertex();
    gl_Position =  MVP * vec4(x,0,z+dz,1);
    EmitVertex();
    gl_Position =  MVP * vec4(x+dx,0,z,1);
    EmitVertex();
    gl_Position =  MVP * vec4(x+dx,0,z+dz,1);
    EmitVertex();
    EndPrimitive();
    x+=dx;
    if((j+1) %sub_divisions == 0) {
      x=v0.x;
     z+=dz;
    }
  }
}

Define a fragment shader (shaders/shader.frag) that simply outputs a constant color.

#version 330 core
layout(location=0) out vec4 vFragColor;
void main() {
  vFragColor = vec4(1,1,1,1);
}

Load the shaders using the GLSLShader class in the OnInit() function.

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_GEOMETRY_SHADER,"shaders/shader.geom");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("MVP");
  shader.AddUniform("sub_divisions");
  glUniform1i(shader("sub_divisions"), sub_divisions);
shader.UnUse();

Store the geometry and topology in the buffer object(s). Also enable the line display mode.

vertices[0] = glm::vec3(-5,0,-5);
vertices[1] = glm::vec3(-5,0,5);
vertices[2] = glm::vec3(5,0,5);
vertices[3] = glm::vec3(5,0,-5);
GLushort* id=&indices[0];

*id++ = 0;
*id++ = 1;
*id++ = 2;
*id++ = 0;
*id++ = 2;
*id++ = 3;

glGenVertexArrays(1, &vaoID);
glGenBuffers(1, &vboVerticesID);
glGenBuffers(1, &vboIndicesID);
glBindVertexArray(vaoID);
glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(vertices), &vertices[0], GL_STATIC_DRAW);
glEnableVertexAttribArray(shader["vVertex"]);
glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,0,0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), &indices[0], GL_STATIC_DRAW);
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);

Set up the rendering code to bind the GLSLShader shader, pass the uniforms and then draw the geometry.

void OnRender() {
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  glm::mat4 T = glm::translate( glm::mat4(1.0f), glm::vec3(0.0f,0.0f, dist));
  glm::mat4 Rx=glm::rotate(T,rX,glm::vec3(1.0f, 0.0f, 0.0f));
  glm::mat4 MV=glm::rotate(Rx,rY, glm::vec3(0.0f,1.0f,0.0f));
  MV=glm::translate(MV, glm::vec3(-5,0,-5));
  shader.Use();
    glUniform1i(shader("sub_divisions"), sub_divisions);
    glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(P*MV));
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);

    MV=glm::translate(MV, glm::vec3(10,0,0));
    glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(P*MV));
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);

    MV=glm::translate(MV, glm::vec3(0,0,10));
    glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(P*MV));
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);

    MV=glm::translate(MV, glm::vec3(-10,0,0));
    glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(P*MV));
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);
  shader.UnUse();
  glutSwapBuffers();
}

Let's dissect the geometry shader.

void OnShutdown() {
  shader.DeleteShaderProgram();
  glDeleteBuffers(1, &vboVerticesID);
  glDeleteBuffers(1, &vboIndicesID);
  glDeleteVertexArrays(1, &vaoID);
  cout<<"Shutdown successfull"<<endl;
}

How it works…

#version 330 core
layout (triangles) in;
layout (triangle_strip, max_vertices=256) out;

uniform int sub_divisions;
uniform mat4 MVP;

Next, we declare two uniforms, the total number of subdivisions desired (sub_divisions) and the combined modelview projection matrix (MVP).

void main() { 
  vec4 v0 = gl_in[0].gl_Position;
  vec4 v1 = gl_in[1].gl_Position;
  vec4 v2 = gl_in[2].gl_Position;

Next, we calculate the size of the smallest quad for the given subdivision based on the size of the given base triangle and the total number of subdivisions required.

float dx = abs(v0.x-v2.x)/sub_divisions;
float dz = abs(v0.z-v1.z)/sub_divisions;
float x=v0.x;
float z=v0.z;
for(int j=0;j<sub_divisions*sub_divisions;j++) {
  gl_Position =  MVP * vec4(x,   0,   z,1);  EmitVertex();
  gl_Position =  MVP * vec4(x,   0,z+dz,1);  EmitVertex();
  gl_Position =  MVP * vec4(x+dx,0,   z,1);  EmitVertex();
  gl_Position =  MVP * vec4(x+dx,0,z+dz,1);  EmitVertex();
  EndPrimitive();
  x+=dx;
  if((j+1) % sub_divisions == 0) {
    x=v0.x;
    z+=dz;
  }
  }
}

The fragment shader outputs a constant color (white: vec4(1,1,1,1)).

There's more…

The application code is similar to the last recipes. We have an additional shader (shaders/shader.geom), which is our geometry shader that is loaded from file.

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_GEOMETRY_SHADER,"shaders/shader.geom");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("MVP");
  shader.AddUniform("sub_divisions");
  glUniform1i(shader("sub_divisions"), sub_divisions);
shader.UnUse();

The OnRender() function starts by clearing the color and depth buffers. It then calculates the viewing transformation as in the previous recipe.

void OnRender() {
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  glm::mat4 T = glm::translate( glm::mat4(1.0f), glm::vec3(0.0f,0.0f, dist));
  glm::mat4 Rx=glm::rotate(T,rX,glm::vec3(1.0f, 0.0f, 0.0f));
  glm::mat4 MV=glm::rotate(Rx,rY, glm::vec3(0.0f,1.0f,0.0f));
  MV=glm::translate(MV, glm::vec3(-5,0,-5));

void OnKey(unsigned char key, int x, int y) {
  switch(key) {
    case ',':  sub_divisions--; break;
    case '.':  sub_divisions++; break;
  }
  sub_divisions = max(1,min(8, sub_divisions));	
  glutPostRedisplay();
}

How it works…

Let's dissect the geometry shader.

#version 330 core
layout (triangles) in;
layout (triangle_strip, max_vertices=256) out;

uniform int sub_divisions;
uniform mat4 MVP;

Next, we declare two uniforms, the total number of subdivisions desired (sub_divisions) and the combined modelview projection matrix (MVP).

void main() { 
  vec4 v0 = gl_in[0].gl_Position;
  vec4 v1 = gl_in[1].gl_Position;
  vec4 v2 = gl_in[2].gl_Position;

Next, we calculate the size of the smallest quad for the given subdivision based on the size of the given base triangle and the total number of subdivisions required.

float dx = abs(v0.x-v2.x)/sub_divisions;
float dz = abs(v0.z-v1.z)/sub_divisions;
float x=v0.x;
float z=v0.z;
for(int j=0;j<sub_divisions*sub_divisions;j++) {
  gl_Position =  MVP * vec4(x,   0,   z,1);  EmitVertex();
  gl_Position =  MVP * vec4(x,   0,z+dz,1);  EmitVertex();
  gl_Position =  MVP * vec4(x+dx,0,   z,1);  EmitVertex();
  gl_Position =  MVP * vec4(x+dx,0,z+dz,1);  EmitVertex();
  EndPrimitive();
  x+=dx;
  if((j+1) % sub_divisions == 0) {
    x=v0.x;
    z+=dz;
  }
  }
}

The fragment shader outputs a constant color (white: vec4(1,1,1,1)).

There's more…

The application code is similar to the last recipes. We have an additional shader (shaders/shader.geom), which is our geometry shader that is loaded from file.

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_GEOMETRY_SHADER,"shaders/shader.geom");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("MVP");
  shader.AddUniform("sub_divisions");
  glUniform1i(shader("sub_divisions"), sub_divisions);
shader.UnUse();

The OnRender() function starts by clearing the color and depth buffers. It then calculates the viewing transformation as in the previous recipe.

void OnRender() {
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  glm::mat4 T = glm::translate( glm::mat4(1.0f), glm::vec3(0.0f,0.0f, dist));
  glm::mat4 Rx=glm::rotate(T,rX,glm::vec3(1.0f, 0.0f, 0.0f));
  glm::mat4 MV=glm::rotate(Rx,rY, glm::vec3(0.0f,1.0f,0.0f));
  MV=glm::translate(MV, glm::vec3(-5,0,-5));

void OnKey(unsigned char key, int x, int y) {
  switch(key) {
    case ',':  sub_divisions--; break;
    case '.':  sub_divisions++; break;
  }
  sub_divisions = max(1,min(8, sub_divisions));	
  glutPostRedisplay();
}

There's more…

The application code is similar to the last recipes. We have an additional shader (shaders/shader.geom), which is our geometry shader that is loaded from file.

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_GEOMETRY_SHADER,"shaders/shader.geom");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("MVP");
  shader.AddUniform("sub_divisions");
  glUniform1i(shader("sub_divisions"), sub_divisions);
shader.UnUse();

The OnRender() function starts by clearing the color and depth buffers. It then calculates the viewing transformation as in the previous recipe.

void OnRender() {
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  glm::mat4 T = glm::translate( glm::mat4(1.0f), glm::vec3(0.0f,0.0f, dist));
  glm::mat4 Rx=glm::rotate(T,rX,glm::vec3(1.0f, 0.0f, 0.0f));
  glm::mat4 MV=glm::rotate(Rx,rY, glm::vec3(0.0f,1.0f,0.0f));
  MV=glm::translate(MV, glm::vec3(-5,0,-5));

void OnKey(unsigned char key, int x, int y) {
  switch(key) {
    case ',':  sub_divisions--; break;
    case '.':  sub_divisions++; break;
  }
  sub_divisions = max(1,min(8, sub_divisions));	
  glutPostRedisplay();
}

Dynamically subdividing a plane using the geometry shader with instanced rendering

In order to avoid pushing the same data multiple times, we can exploit the instanced rendering functions. We will now see how we can omit the multiple glDrawElements calls in the previous recipe with a single glDrawElementsInstanced call.

Getting ready

Before doing this, we assume that the reader knows how to use the geometry shader in the OpenGL 3.3 core profile. The code for this recipe is in the Chapter1\SubdivisionGeometryShader_Instanced directory.

How to do it…

Converting the previous recipe to use instanced rendering requires the following steps:

Change the vertex shader to handle the instance modeling matrix and output world space positions (shaders/shader.vert).

#version 330 core
layout(location=0) in vec3 vVertex;  
uniform mat4 M[4];
void main()
{
  gl_Position =  M[gl_InstanceID]*vec4(vVertex, 1);
}

Change the geometry shader to replace the MVP matrix with the PV matrix (shaders/shader.geom).

#version 330 core
layout (triangles) in;
layout (triangle_strip, max_vertices=256) out;
uniform int sub_divisions;
uniform mat4 PV;

void main()
{
  vec4 v0 = gl_in[0].gl_Position;
  vec4 v1 = gl_in[1].gl_Position;
  vec4 v2 = gl_in[2].gl_Position;
  float dx = abs(v0.x-v2.x)/sub_divisions;
  float dz = abs(v0.z-v1.z)/sub_divisions;
  float x=v0.x;
  float z=v0.z;
  for(int j=0;j<sub_divisions*sub_divisions;j++) {
    gl_Position =  PV * vec4(x,0,z,1);        EmitVertex();
    gl_Position =  PV * vec4(x,0,z+dz,1);     EmitVertex();
    gl_Position =  PV * vec4(x+dx,0,z,1);     EmitVertex();
    gl_Position =  PV * vec4(x+dx,0,z+dz,1);  EmitVertex();
    EndPrimitive();
    x+=dx;
    if((j+1) %sub_divisions == 0) {
      x=v0.x;
      z+=dz;
    }
  }
}

Initialize the per-instance model matrices (M).

void OnInit() {
  //set the instance modeling matrix
  M[0] = glm::translate(glm::mat4(1), glm::vec3(-5,0,-5));
  M[1] = glm::translate(M[0], glm::vec3(10,0,0));
  M[2] = glm::translate(M[1], glm::vec3(0,0,10));
  M[3] = glm::translate(M[2], glm::vec3(-10,0,0));
  ..
  shader.Use();
    shader.AddAttribute("vVertex");
    shader.AddUniform("PV");
     shader.AddUniform("M");
     shader.AddUniform("sub_divisions");
     glUniform1i(shader("sub_divisions"), sub_divisions);
     glUniformMatrix4fv(shader("M"), 4, GL_FALSE, glm::value_ptr(M[0])); 
  shader.UnUse();

Render instances using the glDrawElementInstanced call.

void OnRender() {
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  glm::mat4 T =glm::translate(glm::mat4(1.0f), glm::vec3(0.0f, 0.0f, dist));
  glm::mat4 Rx=glm::rotate(T,rX,glm::vec3(1.0f, 0.0f, 0.0f));
  glm::mat4 V =glm::rotate(Rx,rY,glm::vec3(0.0f, 1.0f,0.0f));
  glm::mat4 PV = P*V;
  
  shader.Use();
    glUniformMatrix4fv(shader("PV"),1,GL_FALSE,glm::value_ptr(PV));
    glUniform1i(shader("sub_divisions"), sub_divisions);
    glDrawElementsInstanced(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0, 4);
  shader.UnUse();
  glutSwapBuffers();
}

How it works…

First, we need to store the model matrix for each instance separately. Since we have four instances, we store a uniform array of four elements (M[4]). Second, we multiply the per-vertex position (vVertex) with the model matrix for the current instance (M[gl_InstanceID]).

Tip

Note that the gl_InstanceID built-in attribute will be filled with the index of each instance automatically at the time of the glDrawElementsInstanced call. Also note that this built-in attribute is only accessible in the vertex shader.

The MVP matrix is omitted from the geometry shader since now the input vertex positions are in world space. So we only need to multiply them with the combined view projection (PV) matrix. On the application side, the MV matrix is removed. Instead, we store the model matrix array for all four instances (glm::mat4 M[4]). The values of these matrices are initialized in the OnInit() function as follows:

M[0] = glm::translate(glm::mat4(1), glm::vec3(-5,0,-5));
M[1] = glm::translate(M[0], glm::vec3(10,0,0));
M[2] = glm::translate(M[1], glm::vec3(0,0,10));
M[3] = glm::translate(M[2], glm::vec3(-10,0,0));

The rendering function, OnRender(), creates the combined view projection matrix (PV) and then calls glDrawElementsInsntanced. The first four parameters are similar to the glDrawElements function. The final parameter is the total number of instances desired. Instanced rendering is an efficient mechanism for rendering identical geometry whereby the GL_ARRAY_BUFFER and GL_ELEMENT_ARRAY_BUFFER bindings are shared between instances allowing the GPU to do efficient resource access and sharing.

void OnRender() {
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  glm::mat4 T = glm::translate(glm::mat4(1.0f),glm::vec3(0.0f, 0.0f, dist));
  glm::mat4 Rx = glm::rotate(T,  rX, glm::vec3(1.0f, 0.0f, 0.0f));
  glm::mat4 V = glm::rotate(Rx, rY, glm::vec3(0.0f, 1.0f, 0.0f));
  glm::mat4 PV = P*V;
  shader.Use();
    glUniformMatrix4fv(shader("PV"),1,GL_FALSE,glm::value_ptr(PV));
    glUniform1i(shader("sub_divisions"), sub_divisions);
    glDrawElementsInstanced(GL_TRIANGLES,6,GL_UNSIGNED_SHORT,0, 4);
  shader.UnUse();
  glutSwapBuffers();
}

There is always a limit on the maximum number of matrices one can output from the vertex shader and this has some performance implications as well. Some performance improvements can be obtained by replacing the matrix storage with translation and scaling vectors, and an orientation quaternion which can then be converted on the fly into a matrix in the shader.

How to do it…

Converting the previous recipe to use instanced rendering requires the following steps:

Change the vertex shader to handle the instance modeling matrix and output world space positions (shaders/shader.vert).

#version 330 core
layout(location=0) in vec3 vVertex;  
uniform mat4 M[4];
void main()
{
  gl_Position =  M[gl_InstanceID]*vec4(vVertex, 1);
}

Change the geometry shader to replace the MVP matrix with the PV matrix (shaders/shader.geom).

#version 330 core
layout (triangles) in;
layout (triangle_strip, max_vertices=256) out;
uniform int sub_divisions;
uniform mat4 PV;

void main()
{
  vec4 v0 = gl_in[0].gl_Position;
  vec4 v1 = gl_in[1].gl_Position;
  vec4 v2 = gl_in[2].gl_Position;
  float dx = abs(v0.x-v2.x)/sub_divisions;
  float dz = abs(v0.z-v1.z)/sub_divisions;
  float x=v0.x;
  float z=v0.z;
  for(int j=0;j<sub_divisions*sub_divisions;j++) {
    gl_Position =  PV * vec4(x,0,z,1);        EmitVertex();
    gl_Position =  PV * vec4(x,0,z+dz,1);     EmitVertex();
    gl_Position =  PV * vec4(x+dx,0,z,1);     EmitVertex();
    gl_Position =  PV * vec4(x+dx,0,z+dz,1);  EmitVertex();
    EndPrimitive();
    x+=dx;
    if((j+1) %sub_divisions == 0) {
      x=v0.x;
      z+=dz;
    }
  }
}

Initialize the per-instance model matrices (M).

void OnInit() {
  //set the instance modeling matrix
  M[0] = glm::translate(glm::mat4(1), glm::vec3(-5,0,-5));
  M[1] = glm::translate(M[0], glm::vec3(10,0,0));
  M[2] = glm::translate(M[1], glm::vec3(0,0,10));
  M[3] = glm::translate(M[2], glm::vec3(-10,0,0));
  ..
  shader.Use();
    shader.AddAttribute("vVertex");
    shader.AddUniform("PV");
     shader.AddUniform("M");
     shader.AddUniform("sub_divisions");
     glUniform1i(shader("sub_divisions"), sub_divisions);
     glUniformMatrix4fv(shader("M"), 4, GL_FALSE, glm::value_ptr(M[0])); 
  shader.UnUse();

Render instances using the glDrawElementInstanced call.

void OnRender() {
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  glm::mat4 T =glm::translate(glm::mat4(1.0f), glm::vec3(0.0f, 0.0f, dist));
  glm::mat4 Rx=glm::rotate(T,rX,glm::vec3(1.0f, 0.0f, 0.0f));
  glm::mat4 V =glm::rotate(Rx,rY,glm::vec3(0.0f, 1.0f,0.0f));
  glm::mat4 PV = P*V;
  
  shader.Use();
    glUniformMatrix4fv(shader("PV"),1,GL_FALSE,glm::value_ptr(PV));
    glUniform1i(shader("sub_divisions"), sub_divisions);
    glDrawElementsInstanced(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0, 4);
  shader.UnUse();
  glutSwapBuffers();
}

How it works…

Tip

M[0] = glm::translate(glm::mat4(1), glm::vec3(-5,0,-5));
M[1] = glm::translate(M[0], glm::vec3(10,0,0));
M[2] = glm::translate(M[1], glm::vec3(0,0,10));
M[3] = glm::translate(M[2], glm::vec3(-10,0,0));

void OnRender() {
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  glm::mat4 T = glm::translate(glm::mat4(1.0f),glm::vec3(0.0f, 0.0f, dist));
  glm::mat4 Rx = glm::rotate(T,  rX, glm::vec3(1.0f, 0.0f, 0.0f));
  glm::mat4 V = glm::rotate(Rx, rY, glm::vec3(0.0f, 1.0f, 0.0f));
  glm::mat4 PV = P*V;
  shader.Use();
    glUniformMatrix4fv(shader("PV"),1,GL_FALSE,glm::value_ptr(PV));
    glUniform1i(shader("sub_divisions"), sub_divisions);
    glDrawElementsInstanced(GL_TRIANGLES,6,GL_UNSIGNED_SHORT,0, 4);
  shader.UnUse();
  glutSwapBuffers();
}

How it works…

Tip

M[0] = glm::translate(glm::mat4(1), glm::vec3(-5,0,-5));
M[1] = glm::translate(M[0], glm::vec3(10,0,0));
M[2] = glm::translate(M[1], glm::vec3(0,0,10));
M[3] = glm::translate(M[2], glm::vec3(-10,0,0));

void OnRender() {
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  glm::mat4 T = glm::translate(glm::mat4(1.0f),glm::vec3(0.0f, 0.0f, dist));
  glm::mat4 Rx = glm::rotate(T,  rX, glm::vec3(1.0f, 0.0f, 0.0f));
  glm::mat4 V = glm::rotate(Rx, rY, glm::vec3(0.0f, 1.0f, 0.0f));
  glm::mat4 PV = P*V;
  shader.Use();
    glUniformMatrix4fv(shader("PV"),1,GL_FALSE,glm::value_ptr(PV));
    glUniform1i(shader("sub_divisions"), sub_divisions);
    glDrawElementsInstanced(GL_TRIANGLES,6,GL_UNSIGNED_SHORT,0, 4);
  shader.UnUse();
  glutSwapBuffers();
}

Drawing a 2D image in a window using the fragment shader and the SOIL image loading library

We will wrap up this chapter with a recipe for creating a simple image viewer in the OpenGL v3.3 core profile using the SOIL image loading library.

Getting ready

After setting up the Visual Studio environment, we can now work with the SOIL library. The code for this recipe is in the Chapter1/ImageLoader directory.

How to do it…

Let us now implement the image loader by following these steps:

Load the image using the SOIL library. Since the loaded image from SOIL is inverted vertically, we flip the image on the Y axis.

int texture_width = 0, texture_height = 0, channels=0;
GLubyte* pData = SOIL_load_image(filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO);
if(pData == NULL) {
  cerr<<"Cannot load image: "<<filename.c_str()<<endl;
  exit(EXIT_FAILURE);
}
int i,j;
for( j = 0; j*2 < texture_height; ++j )
{
  int index1 = j * texture_width * channels;
  int index2 = (texture_height - 1 - j) * texture_width * channels;
  for( i = texture_width * channels; i > 0; --i )
  {
    GLubyte temp = pData[index1];
    pData[index1] = pData[index2];
    pData[index2] = temp;
    ++index1;
    ++index2;
  }
}

Set up the OpenGL texture object and free the data allocated by the SOIL library.

glGenTextures(1, &textureID);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, textureID);
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);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, texture_width, texture_height, 0, GL_RGB, GL_UNSIGNED_BYTE, pData);
SOIL_free_image_data(pData);

Set up the vertex shader to output the clip space position (shaders/shader.vert).

#version 330 core
layout(location=0) in vec2 vVertex;
smooth out vec2 vUV;
void main()
{
  gl_Position = vec4(vVertex*2.0-1,0,1);
  vUV = vVertex;
}

Set up the fragment shader that samples our image texture (shaders/shader.frag).

#version 330 core
layout (location=0) out vec4 vFragColor;
smooth in vec2 vUV;
uniform sampler2D textureMap;
void main()
{
  vFragColor = texture(textureMap, vUV);
}

Set up the application code using the GLSLShader shader class.

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("textureMap");
  glUniform1i(shader("textureMap"), 0);
shader.UnUse();

Set up the geometry and topology and pass data to the GPU using buffer objects.

vertices[0] = glm::vec2(0.0,0.0);
vertices[1] = glm::vec2(1.0,0.0);
vertices[2] = glm::vec2(1.0,1.0);
vertices[3] = glm::vec2(0.0,1.0);
GLushort* id=&indices[0];
*id++ =0;
*id++ =1;
*id++ =2;
*id++ =0;
*id++ =2;
*id++ =3;

glGenVertexArrays(1, &vaoID);
glGenBuffers(1, &vboVerticesID);
glGenBuffers(1, &vboIndicesID);
glBindVertexArray(vaoID);
glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(vertices), &vertices[0], GL_STATIC_DRAW);
glEnableVertexAttribArray(shader["vVertex"]);
glVertexAttribPointer(shader["vVertex"], 2, GL_FLOAT, GL_FALSE,0,0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), &indices[0], GL_STATIC_DRAW);

Set the shader and render the geometry.

void OnRender() {
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  shader.Use();
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);
  shader.UnUse();
  glutSwapBuffers();
}

Release the allocated resources.

void OnShutdown() {
  shader.DeleteShaderProgram();
  glDeleteBuffers(1, &vboVerticesID);
  glDeleteBuffers(1, &vboIndicesID);
  glDeleteVertexArrays(1, &vaoID); 
  glDeleteTextures(1, &textureID); 
}

How it works…

The SOIL library provides a lot of functions but for now we are only interested in the SOIL_load_image function.

int texture_width = 0, texture_height = 0, channels=0;
GLubyte* pData = SOIL_load_image(filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO);
if(pData == NULL) {
  cerr<<"Cannot load image: "<<filename.c_str()<<endl;
  exit(EXIT_FAILURE);
}

The first parameter is the image file name. The next three parameters return the texture width, texture height, and total color channels in the image. These are used when generating the OpenGL texture object. The final parameter is the flag which is used to control further processing on the image. For this simple example, we will use the SOIL_LOAD_AUTO flag which keeps all of the loading settings set to default. If the function succeeds, it returns unsigned char* to the image data. If it fails, the return value is NULL (0). Since the image data loaded by SOIL is vertically flipped, we then use two nested loops to flip the image data on the Y axis.

int i,j;
for( j = 0; j*2 < texture_height; ++j )
{
  int index1 = j * texture_width * channels;
  int index2 = (texture_height - 1 - j) * texture_width * channels;
  for( i = texture_width * channels; i > 0; --i )
  {
    GLubyte temp = pData[index1];
    pData[index1] = pData[index2];
    pData[index2] = temp;
    ++index1;
    ++index2;
  }
}

After the image data is loaded, we generate an OpenGL texture object and pass this data to the texture memory.

glGenTextures(1, &textureID);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, textureID);
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);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, texture_width, texture_height, 0, GL_RGB, GL_UNSIGNED_BYTE, pData);
SOIL_free_image_data(pData);

As with every other OpenGL object, we have to first call glGenTextures. The first parameter is the total number of texture objects we need and the second parameter holds the ID of the texture object generated. After generation of the texture object, we set the active texture unit by calling glActiveTexture(GL_TEXTURE0) and then bind the texture to the active texture unit by calling glBindTextures(GL_TEXTURE_2D, &textureID). Next, we adjust the texture parameters like the texture filtering for minification and magnification, as well as the texture wrapping modes for S and T texture coordinates. After these calls, we pass the loaded image data to the glTexImage2D function.

The glTexImage2D function is where the actual allocation of the texture object takes place. The first parameter is the texture target (in our case this is GL_TEXTURE_2D). The second parameter is the mipmap level which we keep to 0. The third parameter is the internal format. We can determine this by looking at the image properties. The fourth and fifth parameters store the texture width and height respectively. The sixth parameter is 0 for no border and 1 for border. The seventh parameter is the image format. The eighth parameter is the type of the image data pointer, and the final parameter is the pointer to the raw image data. After this function, we can safely release the image data allocated by SOIL by calling SOIL_free_image_data(pData).

There's more…

In this recipe, we use two shaders, the vertex shader and the fragment shader. The vertex shader outputs the clip space position from the input vertex position (vVertex) by simple arithmetic. Using the vertex positions, it also generates the texture coordinates (vUV) for sampling of the texture in the fragment shader.

gl_Position = vec4(vVertex*2.0-1,0,1);
vUV = vVertex;

The fragment shader has the texture coordinates smoothly interpolated from the vertex shader stage through the rasterizer. The image that we loaded using SOIL is passed to a texture sampler (uniform sampler2D textureMap) which is then sampled using the input texture coordinates (vFragColor = texture(textureMap, vUV)). So in the end, we get the image displayed on the screen.

The application side code is similar to the previous recipe. The changes include an addition of the textureMap sampler uniform.

shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("textureMap");
  glUniform1i(shader("textureMap"), 0);
shader.UnUse();

Since this uniform will not change throughout the lifetime of the application, we initialize it once only. The first parameter of glUniform1i is the location of the uniform. We set the value of the sampler uniform to the active texture unit where the texture is bound. In our case, the texture is bound to texture unit 0, that is, GL_TEXTURE0. Therefore we pass 0 to the uniform. If it was bound to GL_TEXTURE1, we would pass 1 to the uniform.

The OnShutdown() function is similar to the earlier recipes. In addition, this code adds deletion of the OpenGL texture object. The rendering code first clears the color and depth buffers. Next, it binds the shader program and then invokes the glDrawElement call to render the triangles. Finally the shader is unbound and then the glutSwapBuffers function is called to display the current back buffer as the next front buffer. Compiling and running this code displays the image in a window as shown in the following screenshot:

Using image loading libraries like SOIL and a fragment shader, we can make a simple image viewer with basic GLSL functionality. More elaborate effects may be achieved by using techniques detailed in the later recipes of this book.

After setting up the Visual Studio environment, we can now work with the SOIL library. The code for this recipe is in the Chapter1/ImageLoader directory.

How to do it…

Let us now implement the image loader by following these steps:

Load the image using the SOIL library. Since the loaded image from SOIL is inverted vertically, we flip the image on the Y axis.

int texture_width = 0, texture_height = 0, channels=0;
GLubyte* pData = SOIL_load_image(filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO);
if(pData == NULL) {
  cerr<<"Cannot load image: "<<filename.c_str()<<endl;
  exit(EXIT_FAILURE);
}
int i,j;
for( j = 0; j*2 < texture_height; ++j )
{
  int index1 = j * texture_width * channels;
  int index2 = (texture_height - 1 - j) * texture_width * channels;
  for( i = texture_width * channels; i > 0; --i )
  {
    GLubyte temp = pData[index1];
    pData[index1] = pData[index2];
    pData[index2] = temp;
    ++index1;
    ++index2;
  }
}

Set up the OpenGL texture object and free the data allocated by the SOIL library.

glGenTextures(1, &textureID);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, textureID);
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);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, texture_width, texture_height, 0, GL_RGB, GL_UNSIGNED_BYTE, pData);
SOIL_free_image_data(pData);

Set up the vertex shader to output the clip space position (shaders/shader.vert).

#version 330 core
layout(location=0) in vec2 vVertex;
smooth out vec2 vUV;
void main()
{
  gl_Position = vec4(vVertex*2.0-1,0,1);
  vUV = vVertex;
}

Set up the fragment shader that samples our image texture (shaders/shader.frag).

#version 330 core
layout (location=0) out vec4 vFragColor;
smooth in vec2 vUV;
uniform sampler2D textureMap;
void main()
{
  vFragColor = texture(textureMap, vUV);
}

Set up the application code using the GLSLShader shader class.

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("textureMap");
  glUniform1i(shader("textureMap"), 0);
shader.UnUse();

Set up the geometry and topology and pass data to the GPU using buffer objects.

vertices[0] = glm::vec2(0.0,0.0);
vertices[1] = glm::vec2(1.0,0.0);
vertices[2] = glm::vec2(1.0,1.0);
vertices[3] = glm::vec2(0.0,1.0);
GLushort* id=&indices[0];
*id++ =0;
*id++ =1;
*id++ =2;
*id++ =0;
*id++ =2;
*id++ =3;

glGenVertexArrays(1, &vaoID);
glGenBuffers(1, &vboVerticesID);
glGenBuffers(1, &vboIndicesID);
glBindVertexArray(vaoID);
glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(vertices), &vertices[0], GL_STATIC_DRAW);
glEnableVertexAttribArray(shader["vVertex"]);
glVertexAttribPointer(shader["vVertex"], 2, GL_FLOAT, GL_FALSE,0,0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), &indices[0], GL_STATIC_DRAW);

Set the shader and render the geometry.

void OnRender() {
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  shader.Use();
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);
  shader.UnUse();
  glutSwapBuffers();
}

Release the allocated resources.

void OnShutdown() {
  shader.DeleteShaderProgram();
  glDeleteBuffers(1, &vboVerticesID);
  glDeleteBuffers(1, &vboIndicesID);
  glDeleteVertexArrays(1, &vaoID); 
  glDeleteTextures(1, &textureID); 
}

How it works…

The SOIL library provides a lot of functions but for now we are only interested in the SOIL_load_image function.

int texture_width = 0, texture_height = 0, channels=0;
GLubyte* pData = SOIL_load_image(filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO);
if(pData == NULL) {
  cerr<<"Cannot load image: "<<filename.c_str()<<endl;
  exit(EXIT_FAILURE);
}

int i,j;
for( j = 0; j*2 < texture_height; ++j )
{
  int index1 = j * texture_width * channels;
  int index2 = (texture_height - 1 - j) * texture_width * channels;
  for( i = texture_width * channels; i > 0; --i )
  {
    GLubyte temp = pData[index1];
    pData[index1] = pData[index2];
    pData[index2] = temp;
    ++index1;
    ++index2;
  }
}

After the image data is loaded, we generate an OpenGL texture object and pass this data to the texture memory.

glGenTextures(1, &textureID);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, textureID);
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);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, texture_width, texture_height, 0, GL_RGB, GL_UNSIGNED_BYTE, pData);
SOIL_free_image_data(pData);

There's more…

gl_Position = vec4(vVertex*2.0-1,0,1);
vUV = vVertex;

The application side code is similar to the previous recipe. The changes include an addition of the textureMap sampler uniform.

shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("textureMap");
  glUniform1i(shader("textureMap"), 0);
shader.UnUse();

Let us now implement the image loader by following these steps:

Load the

image using the SOIL library. Since the loaded image from SOIL is inverted vertically, we flip the image on the Y axis.

int texture_width = 0, texture_height = 0, channels=0;
GLubyte* pData = SOIL_load_image(filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO);
if(pData == NULL) {
  cerr<<"Cannot load image: "<<filename.c_str()<<endl;
  exit(EXIT_FAILURE);
}
int i,j;
for( j = 0; j*2 < texture_height; ++j )
{
  int index1 = j * texture_width * channels;
  int index2 = (texture_height - 1 - j) * texture_width * channels;
  for( i = texture_width * channels; i > 0; --i )
  {
    GLubyte temp = pData[index1];
    pData[index1] = pData[index2];
    pData[index2] = temp;
    ++index1;
    ++index2;
  }
}

Set up the OpenGL texture object and free the data allocated by the SOIL library.

glGenTextures(1, &textureID);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, textureID);
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);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, texture_width, texture_height, 0, GL_RGB, GL_UNSIGNED_BYTE, pData);
SOIL_free_image_data(pData);

Set up the vertex shader to output the clip space position (shaders/shader.vert).

#version 330 core
layout(location=0) in vec2 vVertex;
smooth out vec2 vUV;
void main()
{
  gl_Position = vec4(vVertex*2.0-1,0,1);
  vUV = vVertex;
}

Set up the fragment shader that samples our image texture (shaders/shader.frag).

#version 330 core
layout (location=0) out vec4 vFragColor;
smooth in vec2 vUV;
uniform sampler2D textureMap;
void main()
{
  vFragColor = texture(textureMap, vUV);
}

Set up the application code using the GLSLShader shader class.

shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
shader.LoadFromFile(GL_FRAGMENT_SHADER,"shaders/shader.frag");
shader.CreateAndLinkProgram();
shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("textureMap");
  glUniform1i(shader("textureMap"), 0);
shader.UnUse();

Set up the geometry and topology and pass data to the GPU using buffer objects.

vertices[0] = glm::vec2(0.0,0.0);
vertices[1] = glm::vec2(1.0,0.0);
vertices[2] = glm::vec2(1.0,1.0);
vertices[3] = glm::vec2(0.0,1.0);
GLushort* id=&indices[0];
*id++ =0;
*id++ =1;
*id++ =2;
*id++ =0;
*id++ =2;
*id++ =3;

glGenVertexArrays(1, &vaoID);
glGenBuffers(1, &vboVerticesID);
glGenBuffers(1, &vboIndicesID);
glBindVertexArray(vaoID);
glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(vertices), &vertices[0], GL_STATIC_DRAW);
glEnableVertexAttribArray(shader["vVertex"]);
glVertexAttribPointer(shader["vVertex"], 2, GL_FLOAT, GL_FALSE,0,0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), &indices[0], GL_STATIC_DRAW);

Set the shader and render the geometry.

void OnRender() {
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  shader.Use();
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);
  shader.UnUse();
  glutSwapBuffers();
}

Release the allocated resources.

void OnShutdown() {
  shader.DeleteShaderProgram();
  glDeleteBuffers(1, &vboVerticesID);
  glDeleteBuffers(1, &vboIndicesID);
  glDeleteVertexArrays(1, &vaoID); 
  glDeleteTextures(1, &textureID); 
}

How it works…

The SOIL library provides a lot of functions but for now we are only interested in the SOIL_load_image function.

int texture_width = 0, texture_height = 0, channels=0;
GLubyte* pData = SOIL_load_image(filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO);
if(pData == NULL) {
  cerr<<"Cannot load image: "<<filename.c_str()<<endl;
  exit(EXIT_FAILURE);
}

int i,j;
for( j = 0; j*2 < texture_height; ++j )
{
  int index1 = j * texture_width * channels;
  int index2 = (texture_height - 1 - j) * texture_width * channels;
  for( i = texture_width * channels; i > 0; --i )
  {
    GLubyte temp = pData[index1];
    pData[index1] = pData[index2];
    pData[index2] = temp;
    ++index1;
    ++index2;
  }
}

After the image data is loaded, we generate an OpenGL texture object and pass this data to the texture memory.

glGenTextures(1, &textureID);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, textureID);
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);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, texture_width, texture_height, 0, GL_RGB, GL_UNSIGNED_BYTE, pData);
SOIL_free_image_data(pData);

There's more…

gl_Position = vec4(vVertex*2.0-1,0,1);
vUV = vVertex;

The application side code is similar to the previous recipe. The changes include an addition of the textureMap sampler uniform.

shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("textureMap");
  glUniform1i(shader("textureMap"), 0);
shader.UnUse();

The SOIL library provides a lot of functions but for now we are only interested in the SOIL_load_image function.

int texture_width = 0, texture_height = 0, channels=0; GLubyte* pData = SOIL_load_image(filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO); if(pData == NULL) { cerr<<"Cannot load image: "<<filename.c_str()<<endl; exit(EXIT_FAILURE); }

processing on the image. For this simple example, we will use the SOIL_LOAD_AUTO flag which keeps all of the loading settings set to default. If the function succeeds, it returns unsigned char* to the image data. If it fails, the return value is NULL (0). Since the image data loaded by SOIL is vertically flipped, we then use two nested loops to flip the image data on the Y axis.

int i,j;
for( j = 0; j*2 < texture_height; ++j )
{
  int index1 = j * texture_width * channels;
  int index2 = (texture_height - 1 - j) * texture_width * channels;
  for( i = texture_width * channels; i > 0; --i )
  {
    GLubyte temp = pData[index1];
    pData[index1] = pData[index2];
    pData[index2] = temp;
    ++index1;
    ++index2;
  }
}

After the image data is loaded, we generate an OpenGL texture object and pass this data to the texture memory.

glGenTextures(1, &textureID);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, textureID);
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);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, texture_width, texture_height, 0, GL_RGB, GL_UNSIGNED_BYTE, pData);
SOIL_free_image_data(pData);

There's more…

gl_Position = vec4(vVertex*2.0-1,0,1);
vUV = vVertex;

The application side code is similar to the previous recipe. The changes include an addition of the textureMap sampler uniform.

shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("textureMap");
  glUniform1i(shader("textureMap"), 0);
shader.UnUse();

There's more…

gl_Position = vec4(vVertex*2.0-1,0,1); vUV = vVertex;

The fragment

shader has the texture coordinates smoothly interpolated from the vertex shader stage through the rasterizer. The image that we loaded using SOIL is passed to a texture sampler (uniform sampler2D textureMap) which is then sampled using the input texture coordinates (vFragColor = texture(textureMap, vUV)). So in the end, we get the image displayed on the screen.

The application side code is similar to the previous recipe. The changes include an addition of the textureMap sampler uniform.

shader.Use();
  shader.AddAttribute("vVertex");
  shader.AddUniform("textureMap");
  glUniform1i(shader("textureMap"), 0);
shader.UnUse();

Chapter 2. 3D Viewing and Object Picking

The recipes covered in this chapter include:

Implementing a vector-based camera model with FPS style input support
Implementing the free camera
Implementing target camera
Implementing the view frustum culling
Implementing object picking using the depth buffer
Implementing object picking using color based picking
Implementing object picking using scene intersection queries

Introduction

In this chapter, we will look at the recipes for handling 3D viewing tasks and object picking in OpenGL v3.3 and above. All of the real-time simulations, games, and other graphics applications require a virtual camera or a virtual viewer from the point of view of which the 3D scene is rendered. The virtual camera is itself placed in the 3D world and has a specific direction called the camera look direction. Internally, the virtual camera is itself a collection of translations and rotations, which is stored inside the viewing matrix.

Moreover, projection settings for the virtual camera control how big or small the objects appear on screen. This is the kind of functionality which is controlled through the real world camera lens. These are controlled through the projection matrix. In addition to specifying the viewing and projection matrices, the virtual camera may also help with reducing the amount of geometry pushed to the GPU. This is through a process called view frustum culling. Rather than rendering all of the objects in the scene, only those that are visible to the virtual camera are rendered, thus improving the runtime performance of the application.

Implementing a vector-based camera with FPS style input support

We will begin this chapter by designing a simple class to handle the camera. In a typical OpenGL application, the viewing operations are carried out to place a virtual object on screen. We leave the details of the transformations required in between to a typical graduate text on computer graphics like the one given in the See also section of this recipe. This recipe will focus on designing a simple and efficient camera class. We create a simple inheritance from a base class called CAbstractCamera. We will inherit two classes from this parent class, CFreeCamera and CTargetCamera, as shown in the following figure:

Getting ready

The code for this recipe is in the Chapter2/src directory. The CAbstractCamera class is defined in the AbstractCamera.[h/cpp] files.

class CAbstractCamera
{
public:
  CAbstractCamera(void);
  ~CAbstractCamera(void);
  void SetupProjection(const float fovy, const float aspectRatio, const float near=0.1f, const float far=1000.0f);
  virtual void Update() = 0;
  virtual void Rotate(const float yaw, const float pitch, const float roll);
  const glm::mat4 GetViewMatrix() const;
  const glm::mat4 GetProjectionMatrix() const;
  void SetPosition(const glm::vec3& v);
  const glm::vec3 GetPosition() const;
  void SetFOV(const float fov);
  const float GetFOV() const;
  const float GetAspectRatio() const; 
  void CalcFrustumPlanes();
  bool IsPointInFrustum(const glm::vec3& point);
  bool IsSphereInFrustum(const glm::vec3& center, const float radius);
  bool IsBoxInFrustum(const glm::vec3& min, const glm::vec3& max);
  void GetFrustumPlanes(glm::vec4 planes[6]);
  glm::vec3 farPts[4];
  glm::vec3 nearPts[4];
protected:
  float yaw, pitch, roll, fov, aspect_ratio, Znear, Zfar;
  static glm::vec3 UP;
  glm::vec3 look;
  glm::vec3 up;
  glm::vec3 right; 
  glm::vec3 position;
  glm::mat4 V;       //view matrix
  glm::mat4 P;       //projection matrix
  CPlane planes[6];  //Frustum planes
};

We first declare the constructor/destructor pair. Next, the function for setting the projection for the camera is specified. Then some functions for updating the camera matrices based on rotation values are declared. Following these, the accessors and mutators are defined.

The class declaration is concluded with the view frustum culling-specific functions. Finally, the member fields are declared. The inheriting class needs to provide the implementation of one pure virtual function—Update (to recalculate the matrices and orientation vectors). The movement of the camera is based on three orientation vectors, namely, look, up, and right.

How to do it…

In a typical application, we will not use the CAbstractCamera class. Instead, we will use either the CFreeCamera class or the CTargetCamera class, as detailed in the following recipes. In this recipe, we will see how to handle input using the mouse and keyboard.

In order to handle the keyboard events, we perform the following processing in the idle callback function:

Check for the keyboard key press event.

If the W or S key is pressed, move the camera in the look vector direction:

if( GetAsyncKeyState(VK_W) & 0x8000)
  cam.Walk(dt);
if( GetAsyncKeyState(VK_S) & 0x8000)
  cam.Walk(-dt);

If the A or D key is pressed, move the camera in the right vector direction:

if( GetAsyncKeyState(VK_A) & 0x8000)
  cam.Strafe(-dt); 
if( GetAsyncKeyState(VK_D) & 0x8000)
  cam.Strafe(dt);

If the Q or Z key is pressed, move the camera in the up vector direction:

if( GetAsyncKeyState(VK_Q) & 0x8000)
  cam.Lift(dt); 
if( GetAsyncKeyState(VK_Z) & 0x8000)
  cam.Lift(-dt);

For handling mouse events, we attach two callbacks. One for mouse movement and the other for the mouse click event handling:

Define the mouse down and mouse move event handlers.
Determine the mouse input choice (the zoom or rotate state) in the mouse down event handler based on the mouse button clicked:
```
if(button == GLUT_MIDDLE_BUTTON)
  state = 0;
else
  state = 1;
```
If zoom state is chosen, calculate the fov value based on the drag amount and then set up the camera projection matrix:
```
if (state == 0) {
  fov += (y - oldY)/5.0f;
  cam.SetupProjection(fov, cam.GetAspectRatio());
}
```

If the rotate state is chosen, calculate the rotation amount (pitch and yaw). If mouse filtering is enabled, use the filtered mouse input, otherwise use the raw rotation amount:

else {
  rY += (y - oldY)/5.0f; 
  rX += (oldX-x)/5.0f; 
  if(useFiltering) 
    filterMouseMoves(rX, rY);
  else {
    mouseX = rX;
    mouseY = rY;
  } 
  cam.Rotate(mouseX,mouseY, 0);
}

There's more…

It is always better to use filtered mouse input, which gives smoother movement. In the recipes, we use a simple average filter of the last 10 inputs weighted based on their temporal distance. So the previous input is given more weight and the 5th latest input is given less weight. The filtered result is used as shown in the following code snippet:

void filterMouseMoves(float dx, float dy) {
  for (int i = MOUSE_HISTORY_BUFFER_SIZE - 1; i > 0; --i) {
    mouseHistory[i] = mouseHistory[i - 1];
  }
  mouseHistory[0] = glm::vec2(dx, dy);
  float averageX = 0.0f,  averageY = 0.0f, averageTotal = 0.0f, currentWeight = 1.0f;
 
  for (int i = 0; i < MOUSE_HISTORY_BUFFER_SIZE; ++i) {
    glm::vec2 tmp=mouseHistory[i];
    averageX += tmp.x * currentWeight;
    averageY += tmp.y * currentWeight;
    averageTotal += 1.0f * currentWeight;
    currentWeight *= MOUSE_FILTER_WEIGHT;
  }
  mouseX = averageX / averageTotal;
  mouseY = averageY / averageTotal;
}

Note

When using filtered mouse input, make sure that the history buffer is filled with the appropriate initial value; otherwise you will see a sudden jerk in the first few frames.

How to do it…

In order to handle the keyboard events, we perform the following processing in the idle callback function:

Check for the keyboard key press event.

If the W or S key is pressed, move the camera in the look vector direction:

if( GetAsyncKeyState(VK_W) & 0x8000)
  cam.Walk(dt);
if( GetAsyncKeyState(VK_S) & 0x8000)
  cam.Walk(-dt);

If the A or D key is pressed, move the camera in the right vector direction:

if( GetAsyncKeyState(VK_A) & 0x8000)
  cam.Strafe(-dt); 
if( GetAsyncKeyState(VK_D) & 0x8000)
  cam.Strafe(dt);

If the Q or Z key is pressed, move the camera in the up vector direction:

if( GetAsyncKeyState(VK_Q) & 0x8000)
  cam.Lift(dt); 
if( GetAsyncKeyState(VK_Z) & 0x8000)
  cam.Lift(-dt);

For handling mouse events, we attach two callbacks. One for mouse movement and the other for the mouse click event handling:

Define the mouse down and mouse move event handlers.
Determine the mouse input choice (the zoom or rotate state) in the mouse down event handler based on the mouse button clicked:
```
if(button == GLUT_MIDDLE_BUTTON)
  state = 0;
else
  state = 1;
```
If zoom state is chosen, calculate the fov value based on the drag amount and then set up the camera projection matrix:
```
if (state == 0) {
  fov += (y - oldY)/5.0f;
  cam.SetupProjection(fov, cam.GetAspectRatio());
}
```

If the rotate state is chosen, calculate the rotation amount (pitch and yaw). If mouse filtering is enabled, use the filtered mouse input, otherwise use the raw rotation amount:

else {
  rY += (y - oldY)/5.0f; 
  rX += (oldX-x)/5.0f; 
  if(useFiltering) 
    filterMouseMoves(rX, rY);
  else {
    mouseX = rX;
    mouseY = rY;
  } 
  cam.Rotate(mouseX,mouseY, 0);
}

There's more…

void filterMouseMoves(float dx, float dy) {
  for (int i = MOUSE_HISTORY_BUFFER_SIZE - 1; i > 0; --i) {
    mouseHistory[i] = mouseHistory[i - 1];
  }
  mouseHistory[0] = glm::vec2(dx, dy);
  float averageX = 0.0f,  averageY = 0.0f, averageTotal = 0.0f, currentWeight = 1.0f;
 
  for (int i = 0; i < MOUSE_HISTORY_BUFFER_SIZE; ++i) {
    glm::vec2 tmp=mouseHistory[i];
    averageX += tmp.x * currentWeight;
    averageY += tmp.y * currentWeight;
    averageTotal += 1.0f * currentWeight;
    currentWeight *= MOUSE_FILTER_WEIGHT;
  }
  mouseX = averageX / averageTotal;
  mouseY = averageY / averageTotal;
}

Note

When using filtered mouse input, make sure that the history buffer is filled with the appropriate initial value; otherwise you will see a sudden jerk in the first few frames.

There's more…

void filterMouseMoves(float dx, float dy) {
  for (int i = MOUSE_HISTORY_BUFFER_SIZE - 1; i > 0; --i) {
    mouseHistory[i] = mouseHistory[i - 1];
  }
  mouseHistory[0] = glm::vec2(dx, dy);
  float averageX = 0.0f,  averageY = 0.0f, averageTotal = 0.0f, currentWeight = 1.0f;
 
  for (int i = 0; i < MOUSE_HISTORY_BUFFER_SIZE; ++i) {
    glm::vec2 tmp=mouseHistory[i];
    averageX += tmp.x * currentWeight;
    averageY += tmp.y * currentWeight;
    averageTotal += 1.0f * currentWeight;
    currentWeight *= MOUSE_FILTER_WEIGHT;
  }
  mouseX = averageX / averageTotal;
  mouseY = averageY / averageTotal;
}

Note

When using filtered mouse input, make sure that the history buffer is filled with the appropriate initial value; otherwise you will see a sudden jerk in the first few frames.

Implementing the free camera

Free camera is the first camera type which we will implement in this recipe. A free camera does not have a fixed target. However it does have a fixed position from which it can look in any direction.

Getting ready

The following figure shows a free viewing camera. When we rotate the camera, it rotates at its position. When we move the camera, it keeps looking in the same direction.

The source code for this recipe is in the Chapter2/FreeCamera directory. The CFreeCamera class is defined in the Chapter2/src/FreeCamera.[h/cpp] files. The class interface is as follows:

class CFreeCamera : public CAbstractCamera
{
public:
  CFreeCamera(void);
  ~CFreeCamera(void);
  void Update();
  void Walk(const float dt);
  void Strafe(const float dt);
  void Lift(const float dt);
  void SetTranslation(const glm::vec3& t);
  glm::vec3 GetTranslation() const;
  void SetSpeed(const float speed);
  const float GetSpeed() const;
protected:
  float speed; //move speed of camera in m/s
  glm::vec3 translation;
};

How to do it…

The steps needed to implement the free camera are as follows:

Define the CFreeCamera class and add a vector to store the current translation.
In the Update method, calculate the new orientation (rotation) matrix, using the current camera orientations (that is, yaw, pitch, and roll amount):
```
glm::mat4 R = glm::yawPitchRoll(yaw,pitch,roll);
```
Note
Make sure that the yaw, pitch, and roll angles are in radians.
Translate
the camera position by the translation amount:
```
position+=translation;
```
If we need to implement a free camera which gradually comes to a halt, we should gradually decay the translation vector by adding the following code after the key events are handled:
```
glm::vec3 t = cam.GetTranslation();
if(glm::dot(t,t)>EPSILON2) {
   cam.SetTranslation(t*0.95f); 
}
```
If no decay is needed, then we should clear the translation vector to 0 in the CFreeCamera::Update function after translating the position:
```
translation = glm::vec3(0);
```
Transform the look vector by the current rotation matrix, and determine the right and up vectors to calculate the orthonormal basis:
```
look = glm::vec3(R*glm::vec4(0,0,1,0));
up = glm::vec3(R*glm::vec4(0,1,0,0));
right = glm::cross(look, up);
```
Determine the camera target point:
```
glm::vec3 tgt = position+look;
```
Use the glm::lookat function to calculate the new view matrix using the camera position, target, and the up vector:
```
V = glm::lookAt(position, tgt, up); 
```

There's more…

The Walk function simply translates the camera in the look direction:

void CFreeCamera::Walk(const float dt) {
  translation += (look*dt);
}

The Strafe function translates the camera in the right direction:

void CFreeCamera::Strafe(const float dt) {
  translation += (right*dt);
}

The Lift function translates the camera in the up direction:

void CFreeCamera::Lift(const float dt) {
  translation += (up*dt);
}

Running the demo application renders an infinite checkered plane as shown in the following figure. The free camera can be moved around by pressing the keys W, S, A, D, Q, and Z. Left-clicking the mouse rotates the camera at the current position to change the look direction. Middle-click zooms the camera in the look direction.

How to do it…

The steps needed to implement the free camera are as follows:

Define the CFreeCamera class and add a vector to store the current translation.
In the Update method, calculate the new orientation (rotation) matrix, using the current camera orientations (that is, yaw, pitch, and roll amount):
```
glm::mat4 R = glm::yawPitchRoll(yaw,pitch,roll);
```
Note
Make sure that the yaw, pitch, and roll angles are in radians.
Translate
the camera position by the translation amount:
```
position+=translation;
```
If we need to implement a free camera which gradually comes to a halt, we should gradually decay the translation vector by adding the following code after the key events are handled:
```
glm::vec3 t = cam.GetTranslation();
if(glm::dot(t,t)>EPSILON2) {
   cam.SetTranslation(t*0.95f); 
}
```
If no decay is needed, then we should clear the translation vector to 0 in the CFreeCamera::Update function after translating the position:
```
translation = glm::vec3(0);
```
Transform the look vector by the current rotation matrix, and determine the right and up vectors to calculate the orthonormal basis:
```
look = glm::vec3(R*glm::vec4(0,0,1,0));
up = glm::vec3(R*glm::vec4(0,1,0,0));
right = glm::cross(look, up);
```
Determine the camera target point:
```
glm::vec3 tgt = position+look;
```
Use the glm::lookat function to calculate the new view matrix using the camera position, target, and the up vector:
```
V = glm::lookAt(position, tgt, up); 
```

There's more…

The Walk function simply translates the camera in the look direction:

void CFreeCamera::Walk(const float dt) {
  translation += (look*dt);
}

The Strafe function translates the camera in the right direction:

void CFreeCamera::Strafe(const float dt) {
  translation += (right*dt);
}

The Lift function translates the camera in the up direction:

void CFreeCamera::Lift(const float dt) {
  translation += (up*dt);
}

There's more…

The Walk function simply translates the camera in the look direction:

void CFreeCamera::Walk(const float dt) {
  translation += (look*dt);
}

The Strafe function translates the camera in the right direction:

void CFreeCamera::Strafe(const float dt) {
  translation += (right*dt);
}

The Lift function translates the camera in the up direction:

void CFreeCamera::Lift(const float dt) {
  translation += (up*dt);
}

Implementing the target camera

The target camera works the opposite way. Rather than the position, the target remains fixed, while the camera moves or rotates around the target. Some operations like panning, move both the target and the camera position together.

Getting ready

The following figure shows an illustration of a target camera. Note that the small box is the target position for the camera.

The code for this recipe resides in the Chapter2/TargetCamera directory. The CTargetCamera class is defined in the Chapter2/src/TargetCamera.[h/cpp] files. The class declaration is as follows:

class CTargetCamera : public CAbstractCamera
{
public:
  CTargetCamera(void);
  ~CTargetCamera(void);
  void Update();
  void Rotate(const float yaw, const float pitch, const float roll);
  void SetTarget(const glm::vec3 tgt);
  const glm::vec3 GetTarget() const;
  void Pan(const float dx, const float dy);
  void Zoom(const float amount );
  void Move(const float dx, const float dz);
protected:
  glm::vec3 target;
  float minRy, maxRy;
  float distance;
  float minDistance, maxDistance;
};

How to do it…

We implement the target camera as follows:

Define the CTargetCamera class with a target position (target), the rotation limits (minRy and maxRy), the distance between the target and the camera position (distance), and the distance limits (minDistance and maxDistance).
In the Update method, calculate the new orientation (rotation) matrix using the current camera orientations (that is, yaw, pitch, and roll amount):
```
glm::mat4 R = glm::yawPitchRoll(yaw,pitch,roll);
```
Use the distance to get a vector and then translate this vector by the current rotation matrix:
```
glm::vec3 T = glm::vec3(0,0,distance);
T = glm::vec3(R*glm::vec4(T,0.0f));
```
Get the new camera position by adding the translation vector to the target position:
```
position = target + T;
```

Recalculate the orthonormal basis and then the view matrix:

look = glm::normalize(target-position);
up = glm::vec3(R*glm::vec4(UP,0.0f));
right = glm::cross(look, up);
V = glm::lookAt(position, target, up);

There's more…

The Move function moves both the position and target by the same amount in both look and right vector directions.

void CTargetCamera::Move(const float dx, const float dy) {
  glm::vec3 X = right*dx;
  glm::vec3 Y = look*dy;
  position += X + Y;
  target += X + Y;
  Update();
}

The Pan function moves in the xy plane only, hence the up vector is used instead of the look vector:

void CTargetCamera::Pan(const float dx, const float dy) {
  glm::vec3 X = right*dx;
  glm::vec3 Y = up*dy;
  position += X + Y;
  target += X + Y;
  Update();
}

The Zoom function moves the position in the look direction:

void CTargetCamera::Zoom(const float amount) { 
  position += look * amount;
  distance = glm::distance(position, target); 
  Distance = std::max(minDistance, std::min(distance, maxDistance));
  Update();
}

The demonstration for this recipe renders an infinite checkered plane, as in the previous recipe, and is shown in the following figure:

How to do it…

We implement the target camera as follows:

Define the CTargetCamera class with a target position (target), the rotation limits (minRy and maxRy), the distance between the target and the camera position (distance), and the distance limits (minDistance and maxDistance).
In the Update method, calculate the new orientation (rotation) matrix using the current camera orientations (that is, yaw, pitch, and roll amount):
```
glm::mat4 R = glm::yawPitchRoll(yaw,pitch,roll);
```
Use the distance to get a vector and then translate this vector by the current rotation matrix:
```
glm::vec3 T = glm::vec3(0,0,distance);
T = glm::vec3(R*glm::vec4(T,0.0f));
```
Get the new camera position by adding the translation vector to the target position:
```
position = target + T;
```

Recalculate the orthonormal basis and then the view matrix:

look = glm::normalize(target-position);
up = glm::vec3(R*glm::vec4(UP,0.0f));
right = glm::cross(look, up);
V = glm::lookAt(position, target, up);

There's more…

The Move function moves both the position and target by the same amount in both look and right vector directions.

void CTargetCamera::Move(const float dx, const float dy) {
  glm::vec3 X = right*dx;
  glm::vec3 Y = look*dy;
  position += X + Y;
  target += X + Y;
  Update();
}

The Pan function moves in the xy plane only, hence the up vector is used instead of the look vector:

void CTargetCamera::Pan(const float dx, const float dy) {
  glm::vec3 X = right*dx;
  glm::vec3 Y = up*dy;
  position += X + Y;
  target += X + Y;
  Update();
}

The Zoom function moves the position in the look direction:

void CTargetCamera::Zoom(const float amount) { 
  position += look * amount;
  distance = glm::distance(position, target); 
  Distance = std::max(minDistance, std::min(distance, maxDistance));
  Update();
}

The demonstration for this recipe renders an infinite checkered plane, as in the previous recipe, and is shown in the following figure:

There's more…

The Move function moves both the position and target by the same amount in both look and right vector directions.

void CTargetCamera::Move(const float dx, const float dy) {
  glm::vec3 X = right*dx;
  glm::vec3 Y = look*dy;
  position += X + Y;
  target += X + Y;
  Update();
}

The Pan function moves in the xy plane only, hence the up vector is used instead of the look vector:

void CTargetCamera::Pan(const float dx, const float dy) {
  glm::vec3 X = right*dx;
  glm::vec3 Y = up*dy;
  position += X + Y;
  target += X + Y;
  Update();
}

The Zoom function moves the position in the look direction:

void CTargetCamera::Zoom(const float amount) { 
  position += look * amount;
  distance = glm::distance(position, target); 
  Distance = std::max(minDistance, std::min(distance, maxDistance));
  Update();
}

The demonstration for this recipe renders an infinite checkered plane, as in the previous recipe, and is shown in the following figure:

Implementing view frustum culling

When working with a lot of polygonal data, there is a need to reduce the amount of geometry pushed to the GPU for processing. There are several techniques for scene management, such as quadtrees, octrees, and bsp trees. These techniques help in sorting the geometry in visibility order, so that the objects are sorted (and some of these even culled from the display). This helps in reducing the work load on the GPU.

Even before such techniques can be used, there is an additional step which most graphics applications do and that is view frustum culling. This process removes the geometry if it is not in the current camera's view frustum. The idea is that if the object is not viewable, it should not be processed. A frustum is a chopped pyramid with its tip at the camera position and the base is at the far clip plane. The near clip plane is where the pyramid is chopped, as shown in the following figure. Any geometry inside the viewing frustum is displayed.

Getting ready

For this recipe, we will create a grid of points that are moved in a sine wave using a simple vertex shader. The geometry shader does the view frustum culling by only emitting vertices that are inside the viewing frustum. The calculation of the viewing frustum is carried out on the CPU, based on the camera projection parameters. We will follow the geometric approach in this tutorial. The code implementing this recipe is in the Chapter2/ViewFrustumCulling directory.

How to do it…

We will implement view frustum culling by taking the following steps:

Define a vertex shader that displaces the object-space vertex position using a sine wave in the y axis:

#version 330 core
layout(location = 0) in vec3 vVertex;  
uniform float t;
const float PI = 3.141562;
void main()
{
  gl_Position=vec4(vVertex,1)+vec4(0,sin(vVertex.x*2*PI+t),0,0);
}

Define a geometry shader that performs the view frustum culling calculation on each vertex passed in from the vertex shader:

#version 330 core
layout (points) in;
layout (points, max_vertices=3) out;
uniform mat4 MVP;
uniform vec4 FrustumPlanes[6];
bool PointInFrustum(in vec3 p) {
  for(int i=0; i < 6; i++) 
  {
    vec4 plane=FrustumPlanes[i];
    if ((dot(plane.xyz, p)+plane.w) < 0)
      return false;
  }
  return true;
}
void main()
{
  //get the basic vertices
  for(int i=0;i<gl_in.length(); i++) { 
    vec4 vInPos = gl_in[i].gl_Position;
    vec2 tmp = (vInPos.xz*2-1.0)*5;
    vec3 V = vec3(tmp.x, vInPos.y, tmp.y);
    gl_Position = MVP*vec4(V,1);
    if(PointInFrustum(V)) { 
      EmitVertex();
    } 
  }
  EndPrimitive();
}

To render particles as rounded points, we do a simple trigonometric calculation by discarding all fragments that fall outside the radius of the circle:

#version 330 core
layout(location = 0) out vec4 vFragColor;
void main() {
  vec2 pos = (gl_PointCoord.xy-0.5);
  if(0.25<dot(pos,pos))	discard;
  vFragColor = vec4(0,0,1,1);
}

On the CPU side, call the CAbstractCamera::CalcFrustumPlanes() function to calculate the viewing frustum planes. Get the calculated frustum planes as a glm::vec4 array by calling CAbstractCamera::GetFrustumPlanes(), and then pass these to the shader. The xyz components store the plane's normal, and the w coordinate stores the distance of the plane. After these calls we draw the points:

pCurrentCam->CalcFrustumPlanes();
glm::vec4 p[6];
pCurrentCam->GetFrustumPlanes(p);
pointShader.Use();
  glUniform1f(pointShader("t"), current_time);
  glUniformMatrix4fv(pointShader("MVP"), 1, GL_FALSE, glm::value_ptr(MVP)); 
  glUniform4fv(pointShader("FrustumPlanes"), 6, glm::value_ptr(p[0]));
  glBindVertexArray(pointVAOID);
  glDrawArrays(GL_POINTS,0,MAX_POINTS);
pointShader.UnUse();

How it works…

There are two main parts of this recipe: calculation of the viewing frustum planes and checking if a given point is in the viewing frustum. The first calculation is carried out in the CAbstractCamera::CalcFrustumPlanes() function. Refer to the Chapter2/src/AbstractCamera.cpp files for details.

In this function, we follow the geometric approach, whereby we first calculate the eight points of the frustum at the near and far clip planes. Theoretical details about this method are well explained in the reference given in the See also section. Once we have the eight frustum points, we use three of these points successively to get the bounding planes of the frustum. Here, we call the CPlane::FromPoints function, which generates a CPlane object from the given three points. This is repeated to get all six planes.

Testing whether a point is in the viewing frustum is carried out in the geometry shader's PointInFrustum function, which is defined as follows:

bool PointInFrustum(in vec3 p) {
  for(int i=0; i < 6; i++) {
    vec4 plane=FrustumPlanes[i];
    if ((dot(plane.xyz, p)+plane.w) < 0)
        return false;
  }
  return true;
}

This function iterates through all of the six frustum planes. In each iteration, it checks the signed distance of the given point p with respect to the ith frustum plane. This is a simple dot product of the plane normal with the given point and adding the plane distance. If the signed distance is negative for any of the planes, the point is outside the viewing frustum so we can safely reject the point. If the point has a positive signed distance for all of the six frustum planes, it is inside the viewing frustum. Note that the frustum planes are oriented in such a way that their normals point inside the viewing frustum.

There's more…

The demonstration implementing this recipe shows two cameras, the local camera (camera 1) which shows the sine wave and a world camera (camera 2) which shows the whole world, including the first camera frustum. We can toggle the current camera by pressing 1 for camera 1 and 2 for camera 2. When in camera 1 view, dragging the left mouse button rotates the scene, and the information about the total number of points in the viewing frustum are displayed in the title bar. In the camera 2 view, left-clicking rotates camera 1, and the displayed viewing frustum is updated so we can see what the camera view should contain.

In order to see the total number of visible vertices emitted from the geometry shader, we use a hardware query. The whole shader and the rendering code are bracketed in the begin/end query call as shown in the following code:

glBeginQuery(GL_PRIMITIVES_GENERATED, query);
pointShader.Use(); 
  glUniform1f(pointShader("t"), current_time);
  glUniformMatrix4fv(pointShader("MVP"), 1, GL_FALSE, glm::value_ptr(MVP)); 
  glUniform4fv(pointShader("FrustumPlanes"), 6, glm::value_ptr(p[0]));
  glBindVertexArray(pointVAOID);
  glDrawArrays(GL_POINTS,0,MAX_POINTS);
pointShader.UnUse();
glEndQuery(GL_PRIMITIVES_GENERATED);

After these calls, the query result is retrieved by calling:

GLuint res;
glGetQueryObjectuiv(query, GL_QUERY_RESULT, &res);

If successful, this call returns the total number of vertices emitted from the geometry shader, and that is the total number of vertices in the viewing frustum.

Note

Note that for the camera 2 view, all points are emitted. Hence, the total number of points is displayed in the title bar.

When in the camera 1 view (see the following figure), we see the close-up of the wave as it displaces the points in the Y direction. In this view, the points are rendered in blue color. Moreover, the total number of visible points is written in the title bar. The frame rate is also written to show the performance benefit from view frustum culling.

When in the camera 2 view (see the following figure), we can click-and-drag the left mouse button to rotate camera 1. This allows us to see the updated viewing frustum and the visible points. In the camera 2 view, visible points in the camera 1 view frustum are rendered in magenta color, the viewing frustum planes are in red color, and the invisible points (in camera 1 viewing frustum) are in blue color.

How to do it…

We will implement view frustum culling by taking the following steps:

Define a vertex shader that displaces the object-space vertex position using a sine wave in the y axis:

#version 330 core
layout(location = 0) in vec3 vVertex;  
uniform float t;
const float PI = 3.141562;
void main()
{
  gl_Position=vec4(vVertex,1)+vec4(0,sin(vVertex.x*2*PI+t),0,0);
}

Define a geometry shader that performs the view frustum culling calculation on each vertex passed in from the vertex shader:

#version 330 core
layout (points) in;
layout (points, max_vertices=3) out;
uniform mat4 MVP;
uniform vec4 FrustumPlanes[6];
bool PointInFrustum(in vec3 p) {
  for(int i=0; i < 6; i++) 
  {
    vec4 plane=FrustumPlanes[i];
    if ((dot(plane.xyz, p)+plane.w) < 0)
      return false;
  }
  return true;
}
void main()
{
  //get the basic vertices
  for(int i=0;i<gl_in.length(); i++) { 
    vec4 vInPos = gl_in[i].gl_Position;
    vec2 tmp = (vInPos.xz*2-1.0)*5;
    vec3 V = vec3(tmp.x, vInPos.y, tmp.y);
    gl_Position = MVP*vec4(V,1);
    if(PointInFrustum(V)) { 
      EmitVertex();
    } 
  }
  EndPrimitive();
}

To render particles as rounded points, we do a simple trigonometric calculation by discarding all fragments that fall outside the radius of the circle:

#version 330 core
layout(location = 0) out vec4 vFragColor;
void main() {
  vec2 pos = (gl_PointCoord.xy-0.5);
  if(0.25<dot(pos,pos))	discard;
  vFragColor = vec4(0,0,1,1);
}

pCurrentCam->CalcFrustumPlanes();
glm::vec4 p[6];
pCurrentCam->GetFrustumPlanes(p);
pointShader.Use();
  glUniform1f(pointShader("t"), current_time);
  glUniformMatrix4fv(pointShader("MVP"), 1, GL_FALSE, glm::value_ptr(MVP)); 
  glUniform4fv(pointShader("FrustumPlanes"), 6, glm::value_ptr(p[0]));
  glBindVertexArray(pointVAOID);
  glDrawArrays(GL_POINTS,0,MAX_POINTS);
pointShader.UnUse();

How it works…

Testing whether a point is in the viewing frustum is carried out in the geometry shader's PointInFrustum function, which is defined as follows:

bool PointInFrustum(in vec3 p) {
  for(int i=0; i < 6; i++) {
    vec4 plane=FrustumPlanes[i];
    if ((dot(plane.xyz, p)+plane.w) < 0)
        return false;
  }
  return true;
}

There's more…

glBeginQuery(GL_PRIMITIVES_GENERATED, query);
pointShader.Use(); 
  glUniform1f(pointShader("t"), current_time);
  glUniformMatrix4fv(pointShader("MVP"), 1, GL_FALSE, glm::value_ptr(MVP)); 
  glUniform4fv(pointShader("FrustumPlanes"), 6, glm::value_ptr(p[0]));
  glBindVertexArray(pointVAOID);
  glDrawArrays(GL_POINTS,0,MAX_POINTS);
pointShader.UnUse();
glEndQuery(GL_PRIMITIVES_GENERATED);

After these calls, the query result is retrieved by calling:

GLuint res;
glGetQueryObjectuiv(query, GL_QUERY_RESULT, &res);

If successful, this call returns the total number of vertices emitted from the geometry shader, and that is the total number of vertices in the viewing frustum.

Note

Note that for the camera 2 view, all points are emitted. Hence, the total number of points is displayed in the title bar.

How it works…

Testing whether a point is in the viewing frustum is carried out in the geometry shader's PointInFrustum function, which is defined as follows:

bool PointInFrustum(in vec3 p) {
  for(int i=0; i < 6; i++) {
    vec4 plane=FrustumPlanes[i];
    if ((dot(plane.xyz, p)+plane.w) < 0)
        return false;
  }
  return true;
}

There's more…

glBeginQuery(GL_PRIMITIVES_GENERATED, query);
pointShader.Use(); 
  glUniform1f(pointShader("t"), current_time);
  glUniformMatrix4fv(pointShader("MVP"), 1, GL_FALSE, glm::value_ptr(MVP)); 
  glUniform4fv(pointShader("FrustumPlanes"), 6, glm::value_ptr(p[0]));
  glBindVertexArray(pointVAOID);
  glDrawArrays(GL_POINTS,0,MAX_POINTS);
pointShader.UnUse();
glEndQuery(GL_PRIMITIVES_GENERATED);

After these calls, the query result is retrieved by calling:

GLuint res;
glGetQueryObjectuiv(query, GL_QUERY_RESULT, &res);

If successful, this call returns the total number of vertices emitted from the geometry shader, and that is the total number of vertices in the viewing frustum.

Note

Note that for the camera 2 view, all points are emitted. Hence, the total number of points is displayed in the title bar.

There's more…

glBeginQuery(GL_PRIMITIVES_GENERATED, query);
pointShader.Use(); 
  glUniform1f(pointShader("t"), current_time);
  glUniformMatrix4fv(pointShader("MVP"), 1, GL_FALSE, glm::value_ptr(MVP)); 
  glUniform4fv(pointShader("FrustumPlanes"), 6, glm::value_ptr(p[0]));
  glBindVertexArray(pointVAOID);
  glDrawArrays(GL_POINTS,0,MAX_POINTS);
pointShader.UnUse();
glEndQuery(GL_PRIMITIVES_GENERATED);

After these calls, the query result is retrieved by calling:

GLuint res;
glGetQueryObjectuiv(query, GL_QUERY_RESULT, &res);

If successful, this call returns the total number of vertices emitted from the geometry shader, and that is the total number of vertices in the viewing frustum.

Note

Note that for the camera 2 view, all points are emitted. Hence, the total number of points is displayed in the title bar.

Implementing object picking using the depth buffer

Often when working on projects, we need the ability to pick graphical objects on screen. While in OpenGL versions before OpenGL 3.0, the selection buffer was used for this purpose, this buffer is removed in the modern OpenGL 3.3 core profile. However, this leaves us with some alternate methods. We will implement a simple picking technique using the depth buffer in this recipe.

Getting ready

The code for this recipe is in the Chapter2/Picking_DepthBuffer folder. Relevant source files are in the Chapter2/src folder.

How to do it…

Picking using depth buffer can be implemented as follows:

Enable depth testing:
```
glEnable(GL_DEPTH_TEST);
```
In the mouse down event handler, read the depth value from the depth buffer using the glReadPixels function at the clicked point:
```
glReadPixels( x, HEIGHT-y, 1, 1, GL_DEPTH_COMPONENT, GL_FLOAT, &winZ);
```
Unproject the 3D point, vec3(x,HEIGHT-y,winZ), to obtain the object-space point from the clicked screen-space point x,y and the depth value winZ. Make sure to invert the y value by subtracting HEIGHT from the screen-space y value:
```
glm::vec3 objPt = glm::unProject(glm::vec3(x,HEIGHT-y,winZ), MV, P, glm::vec4(0,0,WIDTH, HEIGHT));
```
Check the distances of all of the scene objects from the object-space point objPt. If the distance is within the bounds of the object and the distance of the object is the nearest to the camera, store the index of the object:
```
size_t i=0;
float minDist = 1000;
selected_box=-1;
for(i=0;i<3;i++) { 
  float dist = glm::distance(box_positions[i], objPt);
  if( dist<1 && dist<minDist) {
    selected_box = i;
    minDist = dist;
  }
}
```

Based on the selected index, color the object as selected:

glm::mat4 T = glm::translate(glm::mat4(1), box_positions[0]);
cube->color = (selected_box==0)?glm::vec3(0,1,1):glm::vec3(1,0,0);
cube->Render(glm::value_ptr(MVP*T));

T = glm::translate(glm::mat4(1), box_positions[1]);
cube->color = (selected_box==1)?glm::vec3(0,1,1):glm::vec3(0,1,0);
cube->Render(glm::value_ptr(MVP*T));

T = glm::translate(glm::mat4(1), box_positions[2]);
cube->color = (selected_box==2)?glm::vec3(0,1,1):glm::vec3(0,0,1);
cube->Render(glm::value_ptr(MVP*T));

How it works…

This recipe renders three cubes in red, green, and blue on the screen. When the user clicks on any of these cubes, the depth buffer is read to find the depth value at the clicked point. The object-space point is then obtained by unprojecting (glm::unProject) the clicked point (x,HEIGHT-y, winZ). A loop is then iterated over all objects in the scene to find the nearest object to the object-space point. The index of the nearest intersected object is then stored.

There's more…

In the demonstration application for this recipe, when the user clicks on any cube, the currently selected box changes color to cyan to signify selection, as shown in the following figure:

How to do it…

Picking using depth buffer can be implemented as follows:

Enable depth testing:
```
glEnable(GL_DEPTH_TEST);
```
In the mouse down event handler, read the depth value from the depth buffer using the glReadPixels function at the clicked point:
```
glReadPixels( x, HEIGHT-y, 1, 1, GL_DEPTH_COMPONENT, GL_FLOAT, &winZ);
```
Unproject the 3D point, vec3(x,HEIGHT-y,winZ), to obtain the object-space point from the clicked screen-space point x,y and the depth value winZ. Make sure to invert the y value by subtracting HEIGHT from the screen-space y value:
```
glm::vec3 objPt = glm::unProject(glm::vec3(x,HEIGHT-y,winZ), MV, P, glm::vec4(0,0,WIDTH, HEIGHT));
```
Check the distances of all of the scene objects from the object-space point objPt. If the distance is within the bounds of the object and the distance of the object is the nearest to the camera, store the index of the object:
```
size_t i=0;
float minDist = 1000;
selected_box=-1;
for(i=0;i<3;i++) { 
  float dist = glm::distance(box_positions[i], objPt);
  if( dist<1 && dist<minDist) {
    selected_box = i;
    minDist = dist;
  }
}
```

Based on the selected index, color the object as selected:

glm::mat4 T = glm::translate(glm::mat4(1), box_positions[0]);
cube->color = (selected_box==0)?glm::vec3(0,1,1):glm::vec3(1,0,0);
cube->Render(glm::value_ptr(MVP*T));

T = glm::translate(glm::mat4(1), box_positions[1]);
cube->color = (selected_box==1)?glm::vec3(0,1,1):glm::vec3(0,1,0);
cube->Render(glm::value_ptr(MVP*T));

T = glm::translate(glm::mat4(1), box_positions[2]);
cube->color = (selected_box==2)?glm::vec3(0,1,1):glm::vec3(0,0,1);
cube->Render(glm::value_ptr(MVP*T));

How it works…

There's more…

In the demonstration application for this recipe, when the user clicks on any cube, the currently selected box changes color to cyan to signify selection, as shown in the following figure:

How it works…

There's more…

In the demonstration application for this recipe, when the user clicks on any cube, the currently selected box changes color to cyan to signify selection, as shown in the following figure:

There's more…

In the demonstration application for this recipe, when the user clicks on any cube, the currently selected box changes color to cyan to signify selection, as shown in the following figure:

Implementing object picking using color

Another method which is used for picking objects in a 3D world is color-based picking. In this recipe, we will use the same scene as in the last recipe.

Getting ready

The code for this recipe is in the Chapter2/Picking_ColorBuffer folder. Relevant source files are in the Chapter2/src folder.

How to do it…

To enable picking with the color buffer, the following steps are needed:

Disable dithering. This is done to prevent any color mismatch during the query:
```
glDisable(GL_DITHER);
```
In the mouse down event handler, read the color value at the clicked position from the color buffer using the glReadPixels function:
```
GLubyte pixel[4];
glReadPixels(x, HEIGHT-y, 1, 1, GL_RGBA, GL_UNSIGNED_BYTE, pixel);
```

Compare the color value at the clicked point to the color values of all objects to find the intersection:

selected_box=-1;
if(pixel[0]==255 && pixel[1]==0 && pixel[2]==0) {
  cout<<"picked box 1"<<endl;
  selected_box = 0;
}
if(pixel[0]==0 && pixel[1]==255 && pixel[2]==0) {
  cout<<"picked box 2"<<endl;
  selected_box = 1;
}
if(pixel[0]==0 && pixel[1]==0 && pixel[2]==255) {
  cout<<"picked box 3"<<endl;
  selected_box = 2;
}

How it works…

This method is simple to implement. We simply check the color of the pixel where the mouse is clicked. Since dithering might generate a different color value, we disable dithering. The pixel's r, g, and b values are then checked against all of the scene objects and the appropriate object is selected. We could also have used the float data type, GL_FLOAT, when reading and comparing the pixel value. However, due to floating point imprecision, we might not have an accurate test. Therefore, we use the integral data type GL_UNSIGNED_BYTE.

The demonstration application for this recipe uses the scene from the previous recipe. In this demonstration also, the user left-clicks on a box and the selection is highlighted in cyan, as shown in the following figure:

How to do it…

To enable picking with the color buffer, the following steps are needed:

Disable dithering. This is done to prevent any color mismatch during the query:
```
glDisable(GL_DITHER);
```
In the mouse down event handler, read the color value at the clicked position from the color buffer using the glReadPixels function:
```
GLubyte pixel[4];
glReadPixels(x, HEIGHT-y, 1, 1, GL_RGBA, GL_UNSIGNED_BYTE, pixel);
```

Compare the color value at the clicked point to the color values of all objects to find the intersection:

selected_box=-1;
if(pixel[0]==255 && pixel[1]==0 && pixel[2]==0) {
  cout<<"picked box 1"<<endl;
  selected_box = 0;
}
if(pixel[0]==0 && pixel[1]==255 && pixel[2]==0) {
  cout<<"picked box 2"<<endl;
  selected_box = 1;
}
if(pixel[0]==0 && pixel[1]==0 && pixel[2]==255) {
  cout<<"picked box 3"<<endl;
  selected_box = 2;
}

How it works…

Implementing object picking using scene intersection queries

The final method we will cover for picking involves casting rays in the scene to determine the nearest object to the viewer. We will use the same scene as in the last two recipes, three cubes (red, green, and blue colored) placed near the origin.

Getting ready

The code for this recipe is in the Chapter2/Picking_SceneIntersection folder. Relevant source files are in the Chapter2/src folder.

How to do it…

For picking with scene intersection queries, take the following steps:

Get two object-space points by unprojecting the screen-space point (x, HEIGHT-y), with different depth value, one at z=0 and the other at z=1:

glm::vec3 start = glm::unProject(glm::vec3(x,HEIGHT-y,0), MV, P, glm::vec4(0,0,WIDTH,HEIGHT));
glm::vec3   end = glm::unProject(glm::vec3(x,HEIGHT-y,1), MV, P, glm::vec4(0,0,WIDTH,HEIGHT));

Get the current camera position as eyeRay.origin and get eyeRay.direction by subtracting and normalizing the difference of the two object-space points, end and start, as follows:
```
eyeRay.origin     =  cam.GetPosition();
eyeRay.direction  =  glm::normalize(end-start);
```

For all of the objects in the scene, find the intersection of the eye ray with the Axially Aligned Bounding Box (AABB) of the object. Store the nearest intersected object index:

float tMin = numeric_limits<float>::max();
selected_box = -1;
for(int i=0;i<3;i++) {
  glm::vec2 tMinMax = intersectBox(eyeRay, boxes[i]);
  if(tMinMax.x<tMinMax.y && tMinMax.x<tMin) {
    selected_box=i;
    tMin = tMinMax.x;
  }
}
if(selected_box==-1)
  cout<<"No box picked"<<endl;
else
  cout<<"Selected box: "<<selected_box<<endl;

How it works…

The method discussed in this recipe first casts a ray from the camera origin in the clicked direction, and then checks all of the scene objects' bounding boxes for intersection. There are two sub parts: estimation of the ray direction from the clicked point and the ray AABB intersection. We first focus on the estimation of the ray direction from the clicked point.

We know that after projection, the x and y values are in the -1 to 1 range. The z or depth values are in the 0 to 1 range, with 0 at the near clip plane and 1 at the far clip plane. We first take the screen-space point and unproject it taking the near clip plane z value of 0. This gives us the object-space point at the near clip plane. Next, we pass the screen-space point and unproject it with the z value of 1. This gives us the object-space point at the far clip plane. Subtracting the two unprojected object-space points gives us the ray direction. We store the camera position as eyeRay.origin and normalize the ray direction as eyeRay.direction.

After calculating the eye ray, we check it for intersection with all of the scene geometries. If the object-bounding box intersects the eye ray and it is the nearest intersection, we store the index of the object. The intersectBox function is defined as follows:

glm::vec2 intersectBox(const Ray& ray, const Box& cube) {
  glm::vec3 inv_dir = 1.0f/ray.direction;
  glm::vec3   tMin = (cube.min - ray.origin) * inv_dir;
  glm::vec3   tMax = (cube.max - ray.origin) * inv_dir;
  glm::vec3     t1 = glm::min(tMin, tMax);
  glm::vec3     t2 = glm::max(tMin, tMax);
  float tNear = max(max(t1.x, t1.y), t1.z);
  float  tFar = min(min(t2.x, t2.y), t2.z);
  return glm::vec2(tNear, tFar);
}

There's more…

The intersectBox function works by finding the intersection of the ray with a pair of slabs for each of the three axes individually. Next it finds the tNear and tFar values. The box can only intersect with the ray if tNear is less than tFar for all of the three axes. So the code finds the smallest tFar value and the largest tMin value. If the smallest tFar value is less than the largest tNear value, the ray misses the box. For further details, refer to the See also section. The output result from the demonstration application for this recipe uses the same scene as in the last two recipes. In this case also, left-clicking the mouse selects the box, which is highlighted in cyan, as shown in the following figure:

How to do it…

For picking with scene intersection queries, take the following steps:

Get two object-space points by unprojecting the screen-space point (x, HEIGHT-y), with different depth value, one at z=0 and the other at z=1:

glm::vec3 start = glm::unProject(glm::vec3(x,HEIGHT-y,0), MV, P, glm::vec4(0,0,WIDTH,HEIGHT));
glm::vec3   end = glm::unProject(glm::vec3(x,HEIGHT-y,1), MV, P, glm::vec4(0,0,WIDTH,HEIGHT));

Get the current camera position as eyeRay.origin and get eyeRay.direction by subtracting and normalizing the difference of the two object-space points, end and start, as follows:
```
eyeRay.origin     =  cam.GetPosition();
eyeRay.direction  =  glm::normalize(end-start);
```

For all of the objects in the scene, find the intersection of the eye ray with the Axially Aligned Bounding Box (AABB) of the object. Store the nearest intersected object index:

float tMin = numeric_limits<float>::max();
selected_box = -1;
for(int i=0;i<3;i++) {
  glm::vec2 tMinMax = intersectBox(eyeRay, boxes[i]);
  if(tMinMax.x<tMinMax.y && tMinMax.x<tMin) {
    selected_box=i;
    tMin = tMinMax.x;
  }
}
if(selected_box==-1)
  cout<<"No box picked"<<endl;
else
  cout<<"Selected box: "<<selected_box<<endl;

How it works…

glm::vec2 intersectBox(const Ray& ray, const Box& cube) {
  glm::vec3 inv_dir = 1.0f/ray.direction;
  glm::vec3   tMin = (cube.min - ray.origin) * inv_dir;
  glm::vec3   tMax = (cube.max - ray.origin) * inv_dir;
  glm::vec3     t1 = glm::min(tMin, tMax);
  glm::vec3     t2 = glm::max(tMin, tMax);
  float tNear = max(max(t1.x, t1.y), t1.z);
  float  tFar = min(min(t2.x, t2.y), t2.z);
  return glm::vec2(tNear, tFar);
}

There's more…

How it works…

glm::vec2 intersectBox(const Ray& ray, const Box& cube) {
  glm::vec3 inv_dir = 1.0f/ray.direction;
  glm::vec3   tMin = (cube.min - ray.origin) * inv_dir;
  glm::vec3   tMax = (cube.max - ray.origin) * inv_dir;
  glm::vec3     t1 = glm::min(tMin, tMax);
  glm::vec3     t2 = glm::max(tMin, tMax);
  float tNear = max(max(t1.x, t1.y), t1.z);
  float  tFar = min(min(t2.x, t2.y), t2.z);
  return glm::vec2(tNear, tFar);
}

There's more…

Chapter 3. Offscreen Rendering and Environment Mapping

In this chapter, we will cover:

Implementing the twirl filter using fragment shader
Rendering a skybox using static cube mapping
Implementing a mirror with render-to-texture using FBO
Rendering a reflective object using dynamic cube mapping
Implementing area filtering (sharpening/blurring/embossing) on an image using convolution
Implementing the glow effect

Introduction

Offscreen rendering functionality is a powerful feature of modern graphics API. In modern OpenGL, this is implemented by using the Framebuffer objects (FBOs). Some of the applications of the offscreen rendering include post processing effects such as glows, dynamic cubemaps, mirror effect, deferred rendering techniques, image processing techniques, and so on. Nowadays almost all games use this feature to carry out stunning visual effects with high rendering quality and detail. With the FBOs, the offscreen rendering is greatly simplified, as the programmer uses FBO the way he would use any other OpenGL object. This chapter will focus on using FBO to carry out image processing effects for implementing digital convolution and glow. In addition, we will also elaborate on how to use the FBO for mirror effect and dynamic cube mapping.

Implementing the twirl filter using the fragment shader

We will use a simple image manipulation operator in the fragment shader by implementing the twirl filter on the GPU.

Getting ready

This recipe builds up on the image loading recipe from Chapter 1, Introduction to Modern OpenGL. The code for this recipe is contained in the Chapter3/TwirlFilter directory.

How to do it…

Set up the fragment shader that first shifts the texture coordinates, performs the twirl transformation, and then converts the shifted texture coordinates back for texture lookup.

Load the image as in the ImageLoader recipe from Chapter 1, Introduction to Modern OpenGL. Set the texture wrap mode to GL_CLAMP_TO_BORDER.

int texture_width = 0, texture_height = 0, channels=0;
GLubyte* pData = SOIL_load_image(filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO);
int i,j;
for( j = 0; j*2 < texture_height; ++j )
{
  int index1 = j * texture_width * channels;
  int index2 = (texture_height - 1 - j) * texture_width * channels;
  for( i = texture_width * channels; i > 0; --i )
  {
    GLubyte temp = pData[index1];
    pData[index1] = pData[index2];
    pData[index2] = temp;
    ++index1;
    ++index2;
  }
}
glGenTextures(1, &textureID);
  glActiveTexture(GL_TEXTURE0);
  glBindTexture(GL_TEXTURE_2D, textureID);
  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_BORDER);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_BORDER);
  glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, texture_width, texture_height, 0, GL_RGB, GL_UNSIGNED_BYTE, pData);
SOIL_free_image_data(pData);

Set up a simple pass through vertex shader that outputs the texture coordinates for texture lookup in the fragment shader, as given in the ImageLoader recipe of Chapter 1.
```
void main()
{    
  gl_Position = vec4(vVertex*2.0-1,0,1);   
  vUV = vVertex;
}
```

void main()
{
  vec2 uv = vUV-0.5;
  float angle = atan(uv.y, uv.x);
  float radius = length(uv);
  angle+= radius*twirl_amount;
  vec2 shifted = radius* vec2(cos(angle), sin(angle));
  vFragColor = texture(textureMap, (shifted+0.5)); 
}

Render a 2D screen space quad and apply the two shaders as was done in the ImageLoader recipe in Chapter 1.

void OnRender() {
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  shader.Use();
    glUniform1f(shader("twirl_amount"), twirl_amount);
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);
  shader.UnUse();
  glutSwapBuffers();
}

How it works…

Twirl is a simple 2D transformation which deforms the image. In polar coordinates, this transformation is given simply as follows:

In this equation, t is the amount of twirl applied on the input image f. In practice, our images are a 2D function f(x,y) of Cartesian coordinates. We first convert the Cartesian coordinates to polar coordinates (r,θ) by using the following transformation:

Here, x and y are the two Cartesian coordinates. In the fragment shader, we first offset the texture coordinates so that the origin is at the center of the image. Next, we get the angle θ and radius r.

void main() {
  vec2 uv = vUV-0.5;
  float angle = atan(uv.y, uv.x);
  float radius = length(uv);

We then increment the angle by the given amount, multiplied by the radius. Next, we convert the polar coordinates back to Cartesian coordinates.

  angle+= radius*twirl_amount;
  vec2 shifted = radius* vec2(cos(angle), sin(angle));

Finally, we offset the texture coordinates back to the original position. The transformed texture coordinates are then used for texture lookup.

   vFragColor = texture(textureMap, (shifted+0.5));
}

There's more...

The demo application implementing this recipe shows a rendered image. Using the - and + keys, we can adjust the twirl amount as shown in the following figure:

Since the texture clamping mode was set to GL_CLAMP_TO_BORDER, the out of image pixels get the black color. In this recipe, we applied the twirl effect to the whole image. As an exercise, we invite the reader to limit the twirl to a specific zone within the image; for example, within a radius of, say, 150 pixels from the center of image. Hint: You can constrain the radius using the given pixel distance.

This recipe builds up on the image loading recipe from

Chapter 1, Introduction to Modern OpenGL. The code for this recipe is contained in the Chapter3/TwirlFilter directory.

How to do it…

Set up the fragment shader that first shifts the texture coordinates, performs the twirl transformation, and then converts the shifted texture coordinates back for texture lookup.

Load the image as in the ImageLoader recipe from Chapter 1, Introduction to Modern OpenGL. Set the texture wrap mode to GL_CLAMP_TO_BORDER.

int texture_width = 0, texture_height = 0, channels=0;
GLubyte* pData = SOIL_load_image(filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO);
int i,j;
for( j = 0; j*2 < texture_height; ++j )
{
  int index1 = j * texture_width * channels;
  int index2 = (texture_height - 1 - j) * texture_width * channels;
  for( i = texture_width * channels; i > 0; --i )
  {
    GLubyte temp = pData[index1];
    pData[index1] = pData[index2];
    pData[index2] = temp;
    ++index1;
    ++index2;
  }
}
glGenTextures(1, &textureID);
  glActiveTexture(GL_TEXTURE0);
  glBindTexture(GL_TEXTURE_2D, textureID);
  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_BORDER);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_BORDER);
  glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, texture_width, texture_height, 0, GL_RGB, GL_UNSIGNED_BYTE, pData);
SOIL_free_image_data(pData);

Set up a simple pass through vertex shader that outputs the texture coordinates for texture lookup in the fragment shader, as given in the ImageLoader recipe of Chapter 1.
```
void main()
{    
  gl_Position = vec4(vVertex*2.0-1,0,1);   
  vUV = vVertex;
}
```

void main()
{
  vec2 uv = vUV-0.5;
  float angle = atan(uv.y, uv.x);
  float radius = length(uv);
  angle+= radius*twirl_amount;
  vec2 shifted = radius* vec2(cos(angle), sin(angle));
  vFragColor = texture(textureMap, (shifted+0.5)); 
}

Render a 2D screen space quad and apply the two shaders as was done in the ImageLoader recipe in Chapter 1.

void OnRender() {
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  shader.Use();
    glUniform1f(shader("twirl_amount"), twirl_amount);
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);
  shader.UnUse();
  glutSwapBuffers();
}

How it works…

Twirl is a simple 2D transformation which deforms the image. In polar coordinates, this transformation is given simply as follows:

void main() {
  vec2 uv = vUV-0.5;
  float angle = atan(uv.y, uv.x);
  float radius = length(uv);

We then increment the angle by the given amount, multiplied by the radius. Next, we convert the polar coordinates back to Cartesian coordinates.

  angle+= radius*twirl_amount;
  vec2 shifted = radius* vec2(cos(angle), sin(angle));

Finally, we offset the texture coordinates back to the original position. The transformed texture coordinates are then used for texture lookup.

   vFragColor = texture(textureMap, (shifted+0.5));
}

There's more...

The demo application implementing this recipe shows a rendered image. Using the - and + keys, we can adjust the twirl amount as shown in the following figure:

Load the image as in the ImageLoader recipe from

Chapter 1, Introduction to Modern OpenGL. Set the texture wrap mode to GL_CLAMP_TO_BORDER.

int texture_width = 0, texture_height = 0, channels=0;
GLubyte* pData = SOIL_load_image(filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO);
int i,j;
for( j = 0; j*2 < texture_height; ++j )
{
  int index1 = j * texture_width * channels;
  int index2 = (texture_height - 1 - j) * texture_width * channels;
  for( i = texture_width * channels; i > 0; --i )
  {
    GLubyte temp = pData[index1];
    pData[index1] = pData[index2];
    pData[index2] = temp;
    ++index1;
    ++index2;
  }
}
glGenTextures(1, &textureID);
  glActiveTexture(GL_TEXTURE0);
  glBindTexture(GL_TEXTURE_2D, textureID);
  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_BORDER);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_BORDER);
  glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, texture_width, texture_height, 0, GL_RGB, GL_UNSIGNED_BYTE, pData);
SOIL_free_image_data(pData);

Set up a simple pass through vertex shader that outputs the texture coordinates for texture lookup in the fragment shader, as given in the ImageLoader recipe of Chapter 1.
```
void main()
{    
  gl_Position = vec4(vVertex*2.0-1,0,1);   
  vUV = vVertex;
}
```

Set up the fragment shader that first shifts the texture coordinates, performs the twirl transformation, and then converts the shifted texture coordinates back for texture lookup.

void main()
{
  vec2 uv = vUV-0.5;
  float angle = atan(uv.y, uv.x);
  float radius = length(uv);
  angle+= radius*twirl_amount;
  vec2 shifted = radius* vec2(cos(angle), sin(angle));
  vFragColor = texture(textureMap, (shifted+0.5)); 
}

Render a 2D screen space quad and apply the two shaders as was done in the ImageLoader recipe in Chapter 1.

void OnRender() {
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  shader.Use();
    glUniform1f(shader("twirl_amount"), twirl_amount);
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);
  shader.UnUse();
  glutSwapBuffers();
}

How it works…

Twirl is a simple 2D transformation which deforms the image. In polar coordinates, this transformation is given simply as follows:

void main() {
  vec2 uv = vUV-0.5;
  float angle = atan(uv.y, uv.x);
  float radius = length(uv);

We then increment the angle by the given amount, multiplied by the radius. Next, we convert the polar coordinates back to Cartesian coordinates.

  angle+= radius*twirl_amount;
  vec2 shifted = radius* vec2(cos(angle), sin(angle));

Finally, we offset the texture coordinates back to the original position. The transformed texture coordinates are then used for texture lookup.

   vFragColor = texture(textureMap, (shifted+0.5));
}

There's more...

The demo application implementing this recipe shows a rendered image. Using the - and + keys, we can adjust the twirl amount as shown in the following figure:

Twirl is a simple 2D transformation which deforms the image. In polar coordinates, this transformation is given simply as follows:

Here, x and y

are the two Cartesian coordinates. In the fragment shader, we first offset the texture coordinates so that the origin is at the center of the image. Next, we get the angle θ and radius r.

void main() {
  vec2 uv = vUV-0.5;
  float angle = atan(uv.y, uv.x);
  float radius = length(uv);

We then increment the angle by the given amount, multiplied by the radius. Next, we convert the polar coordinates back to Cartesian coordinates.

  angle+= radius*twirl_amount;
  vec2 shifted = radius* vec2(cos(angle), sin(angle));

Finally, we offset the texture coordinates back to the original position. The transformed texture coordinates are then used for texture lookup.

   vFragColor = texture(textureMap, (shifted+0.5));
}

There's more...

The demo application implementing this recipe shows a rendered image. Using the - and + keys, we can adjust the twirl amount as shown in the following figure:

There's more...

The demo application implementing this recipe shows a rendered image. Using the - and + keys, we can adjust the twirl amount as shown in the following figure:

Since the

texture clamping mode was set to GL_CLAMP_TO_BORDER, the out of image pixels get the black color. In this recipe, we applied the twirl effect to the whole image. As an exercise, we invite the reader to limit the twirl to a specific zone within the image; for example, within a radius of, say, 150 pixels from the center of image. Hint: You can constrain the radius using the given pixel distance.

Rendering a skybox using static cube mapping

This recipe will show how to render a skybox object using static cube mapping. Cube mapping is a simple technique for generating a surrounding environment. There are several methods, such as sky dome, which uses a spherical geometry; skybox, which uses a cubical geometry; and skyplane, which uses a planar geometry. For this recipe, we will focus on skyboxes using the static cube mapping approach. The cube mapping process needs six images that are placed on each face of a cube. The skybox is a very large cube that moves with the camera but does not rotate with it.

Getting ready

The code for this recipe is contained in the Chapter3/Skybox directory.

How to do it…

Load the skybox images using an image loading library, such as SOIL.

Set up the vertex array and vertex buffer objects to store a unit cube geometry.

int texture_widths[6];
int texture_heights[6];
int channels[6];
GLubyte* pData[6];
cout<<"Loading skybox images: ..."<<endl;
for(int i=0;i<6;i++) {
  cout<<"\tLoading: "<<texture_names[i]<<" ... ";
  pData[i] = SOIL_load_image(texture_names[i], &texture_widths[i], &texture_heights[i], &channels[i], SOIL_LOAD_AUTO); 
  cout<<"done."<<endl;
}

Generate a cubemap OpenGL texture object and bind the six loaded images to the GL_TEXTURE_CUBE_MAP texture targets. Also make sure that the image data loaded by the SOIL library is deleted after the texture data has been stored into the OpenGL texture.

glGenTextures(1, &skyboxTextureID);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_CUBE_MAP, skyboxTextureID);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);
GLint format = (channels[0]==4)?GL_RGBA:GL_RGB;

for(int i=0;i<6;i++) {
  glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, format,texture_widths[i], texture_heights[i], 0, format,GL_UNSIGNED_BYTE, pData[i]);
  SOIL_free_image_data(pData[i]);
}

Set up a vertex shader (see Chapter3/Skybox/shaders/skybox.vert) that outputs the vertex's object space position as the texture coordinate.
```
smooth out vec3 uv;
void main()
{
  gl_Position = MVP*vec4(vVertex,1);
  uv = vVertex;
}
```
Add a cubemap sampler to the fragment shader. Use the texture coordinates output from the vertex shader to sample the cubemap sampler object in the fragment shader (see Chapter3/Skybox/shaders/skybox.frag).
```
layout(location=0) out vec4 vFragColor;
uniform samplerCube cubeMap;
smooth in vec3 uv;
void main()
{
    vFragColor = texture(cubeMap, uv);
}
```

How it works…

There are two parts of this recipe. The first part, which loads an OpenGL cubemap texture, is self explanatory. We load the six images and bind these to an OpenGL cubemap texture target. There are six cubemap texture targets corresponding to the six sides of a cube. These targets are GL_TEXTURE_CUBE_MAP_POSITIVE_X, GL_TEXTURE_CUBE_MAP_POSITIVE_Y, GL_TEXTURE_CUBE_MAP_POSITIVE_Z, GL_TEXTURE_CUBE_MAP_NEGATIVE_X, GL_TEXTURE_CUBE_MAP_NEGATIVE_Y, and GL_TEXTURE_CUBE_MAP_NEGATIVE_Z. Since their identifiers are linearly generated, we offset the target by the loop variable to move to the next cubemap texture target in the following code:

for(int i=0;i<6;i++) {
  glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, format,texture_widths[i], texture_heights[i], 0, format,GL_UNSIGNED_BYTE, pData[i]);
  SOIL_free_image_data(pData[i]);
}

The second part is the shader responsible for sampling the cubemap texture. This work is carried out in the fragment shader (Chapter3/Skybox/shaders/skybox.frag). In the rendering code, we set the skybox shader and then render the skybox, passing it the MVP matrix, which is obtained as follows:

glm::mat4 T = glm::translate(glm::mat4(1.0f),glm::vec3(0.0f,0.0f, dist));
glm::mat4 Rx  = glm::rotate(glm::mat4(1),  rX, glm::vec3(1.0f, 0.0f, 0.0f));
glm::mat4 MV  = glm::rotate(Rx, rY, glm::vec3(0.0f, 1.0f, 0.0f));
glm::mat4 S     = glm::scale(glm::mat4(1),glm::vec3(1000.0));
glm::mat4 MVP  = P*MV*S;
skybox->Render( glm::value_ptr(MVP));

To sample the correct location in the cubemap texture we need a vector. This vector can be obtained from the object space vertex positions that are passed to the vertex shader. These are passed through the uv output attribute to the fragment shader.

Tip

In this recipe, we scaled a unit cube. While it is not necessary to have a unit cube, one thing that we have to be careful with is that the size of the cube after scaling should not be greater than the far clip plane distance. Otherwise, our skybox will be clipped.

There's more…

The demo application implementing this recipe shows a statically cube mapped skybox which can be looked around by dragging the left mouse button. This gives a surrounded environment feeling to the user as shown in the following figure:

The code for this recipe is contained in the Chapter3/Skybox directory.

How to do it…

Load the skybox images using an image loading library, such as SOIL.

Set up the vertex array and vertex buffer objects to store a unit cube geometry.

int texture_widths[6];
int texture_heights[6];
int channels[6];
GLubyte* pData[6];
cout<<"Loading skybox images: ..."<<endl;
for(int i=0;i<6;i++) {
  cout<<"\tLoading: "<<texture_names[i]<<" ... ";
  pData[i] = SOIL_load_image(texture_names[i], &texture_widths[i], &texture_heights[i], &channels[i], SOIL_LOAD_AUTO); 
  cout<<"done."<<endl;
}

glGenTextures(1, &skyboxTextureID);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_CUBE_MAP, skyboxTextureID);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);
GLint format = (channels[0]==4)?GL_RGBA:GL_RGB;

for(int i=0;i<6;i++) {
  glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, format,texture_widths[i], texture_heights[i], 0, format,GL_UNSIGNED_BYTE, pData[i]);
  SOIL_free_image_data(pData[i]);
}

Set up a vertex shader (see Chapter3/Skybox/shaders/skybox.vert) that outputs the vertex's object space position as the texture coordinate.
```
smooth out vec3 uv;
void main()
{
  gl_Position = MVP*vec4(vVertex,1);
  uv = vVertex;
}
```
Add a cubemap sampler to the fragment shader. Use the texture coordinates output from the vertex shader to sample the cubemap sampler object in the fragment shader (see Chapter3/Skybox/shaders/skybox.frag).
```
layout(location=0) out vec4 vFragColor;
uniform samplerCube cubeMap;
smooth in vec3 uv;
void main()
{
    vFragColor = texture(cubeMap, uv);
}
```

How it works…

for(int i=0;i<6;i++) {
  glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, format,texture_widths[i], texture_heights[i], 0, format,GL_UNSIGNED_BYTE, pData[i]);
  SOIL_free_image_data(pData[i]);
}

glm::mat4 T = glm::translate(glm::mat4(1.0f),glm::vec3(0.0f,0.0f, dist));
glm::mat4 Rx  = glm::rotate(glm::mat4(1),  rX, glm::vec3(1.0f, 0.0f, 0.0f));
glm::mat4 MV  = glm::rotate(Rx, rY, glm::vec3(0.0f, 1.0f, 0.0f));
glm::mat4 S     = glm::scale(glm::mat4(1),glm::vec3(1000.0));
glm::mat4 MVP  = P*MV*S;
skybox->Render( glm::value_ptr(MVP));

Tip

There's more…

Set up the vertex array and vertex buffer objects to store a unit cube geometry.

Load the

skybox images using an image loading library, such as SOIL.

int texture_widths[6];
int texture_heights[6];
int channels[6];
GLubyte* pData[6];
cout<<"Loading skybox images: ..."<<endl;
for(int i=0;i<6;i++) {
  cout<<"\tLoading: "<<texture_names[i]<<" ... ";
  pData[i] = SOIL_load_image(texture_names[i], &texture_widths[i], &texture_heights[i], &channels[i], SOIL_LOAD_AUTO); 
  cout<<"done."<<endl;
}

glGenTextures(1, &skyboxTextureID);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_CUBE_MAP, skyboxTextureID);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);
GLint format = (channels[0]==4)?GL_RGBA:GL_RGB;

for(int i=0;i<6;i++) {
  glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, format,texture_widths[i], texture_heights[i], 0, format,GL_UNSIGNED_BYTE, pData[i]);
  SOIL_free_image_data(pData[i]);
}

Set up a vertex shader (see Chapter3/Skybox/shaders/skybox.vert) that outputs the vertex's object space position as the texture coordinate.
```
smooth out vec3 uv;
void main()
{
  gl_Position = MVP*vec4(vVertex,1);
  uv = vVertex;
}
```
Add a cubemap sampler to the fragment shader. Use the texture coordinates output from the vertex shader to sample the cubemap sampler object in the fragment shader (see Chapter3/Skybox/shaders/skybox.frag).
```
layout(location=0) out vec4 vFragColor;
uniform samplerCube cubeMap;
smooth in vec3 uv;
void main()
{
    vFragColor = texture(cubeMap, uv);
}
```

How it works…

for(int i=0;i<6;i++) {
  glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, format,texture_widths[i], texture_heights[i], 0, format,GL_UNSIGNED_BYTE, pData[i]);
  SOIL_free_image_data(pData[i]);
}

glm::mat4 T = glm::translate(glm::mat4(1.0f),glm::vec3(0.0f,0.0f, dist));
glm::mat4 Rx  = glm::rotate(glm::mat4(1),  rX, glm::vec3(1.0f, 0.0f, 0.0f));
glm::mat4 MV  = glm::rotate(Rx, rY, glm::vec3(0.0f, 1.0f, 0.0f));
glm::mat4 S     = glm::scale(glm::mat4(1),glm::vec3(1000.0));
glm::mat4 MVP  = P*MV*S;
skybox->Render( glm::value_ptr(MVP));

Tip

There's more…

two parts of this recipe. The first part, which loads an OpenGL cubemap texture, is self explanatory. We load the six images and bind these to an OpenGL cubemap texture target. There are six cubemap texture targets corresponding to the six sides of a cube. These targets are GL_TEXTURE_CUBE_MAP_POSITIVE_X, GL_TEXTURE_CUBE_MAP_POSITIVE_Y, GL_TEXTURE_CUBE_MAP_POSITIVE_Z, GL_TEXTURE_CUBE_MAP_NEGATIVE_X, GL_TEXTURE_CUBE_MAP_NEGATIVE_Y, and GL_TEXTURE_CUBE_MAP_NEGATIVE_Z. Since their identifiers are linearly generated, we offset the target by the loop variable to move to the next cubemap texture target in the following code:

There are

for(int i=0;i<6;i++) {
  glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, format,texture_widths[i], texture_heights[i], 0, format,GL_UNSIGNED_BYTE, pData[i]);
  SOIL_free_image_data(pData[i]);
}

glm::mat4 T = glm::translate(glm::mat4(1.0f),glm::vec3(0.0f,0.0f, dist));
glm::mat4 Rx  = glm::rotate(glm::mat4(1),  rX, glm::vec3(1.0f, 0.0f, 0.0f));
glm::mat4 MV  = glm::rotate(Rx, rY, glm::vec3(0.0f, 1.0f, 0.0f));
glm::mat4 S     = glm::scale(glm::mat4(1),glm::vec3(1000.0));
glm::mat4 MVP  = P*MV*S;
skybox->Render( glm::value_ptr(MVP));

Tip

There's more…

Implementing a mirror with render-to-texture using FBO

We will now use the FBO to render a mirror object on the screen. In a typical offscreen rendering OpenGL application, we set up the FBO first, by calling the glGenFramebuffers function and passing it the number of FBOs desired. The second parameter stores the returned identifier. After the FBO object is generated, it has to be bound to the GL_FRAMEBUFFER, GL_DRAW_FRAMEBUFFER, or GL_READ_FRAMEBUFFER target. Following this call, the texture to be bound to the FBOs color attachment is attached by calling the glFramebufferTexture2D function.

There can be more than one color attachment on an FBO. The maximum number of color attachments supported on any GPU can be queried using the GL_MAX_COLOR_ATTACHMENTS field. The type and dimension of the texture has to be specified and it is not necessary to have the same size as the screen. However, all color attachments on the FBO must have the same dimensions. At any time, only a single FBO can be bound for a drawing operation and similarly, only one can be bound for a reading operation. In addition to the color attachment, there are also depth and stencil attachments on an FBO. The following image shows the different attachment points on an FBO:

Implementing a mirror with render-to-texture using FBO

If depth testing is required, a render buffer is also generated and bound by calling glGenRenderbuffers followed by the glBindRenderbuffer function. For render buffers, the depth buffer's data type and its dimensions have to be specified. After all these steps, the render buffer is attached to the frame buffer by calling the glFramebufferRenderbuffer function.

After the setup of the frame buffer and render buffer objects, the frame buffer completeness status has to be checked by calling glCheckFramebufferStatus by passing it the framebuffer target. This ensures that the FBO setup is correct. The function returns the status as an identifier. If this returned value is anything other than GL_FRAMEBUFFER_COMPLETE, the FBO setup is unsuccessful.

Tip

Make sure to check the Framebuffer status after the Framebuffer is bound.

Getting ready

The code for this recipe is contained in the Chapter3/MirrorUsingFBO directory.

How to do it…

Generate the offscreen texture on which FBO will render to. The last parameter of glTexImage2D is NULL, which tells OpenGL that we do not have any content yet, please provide a new block of GPU memory which gets filled when the FBO is used as a render target.

Initialize the framebuffer and renderbuffer objects' color and depth attachments respectively. The render buffer is required if we need depth testing for the offscreen rendering, and the depth precision is specified using the glRenderbufferStorage function.
```
glGenFramebuffers(1, &fboID);
glBindFramebuffer(GL_DRAW_FRAMEBUFFER, fboID);
glGenRenderbuffers(1, &rbID);
glBindRenderbuffer(GL_RENDERBUFFER, rbID);
glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT32,WIDTH, HEIGHT);
```

glGenTextures(1, &renderTextureID);
glBindTexture(GL_TEXTURE_2D, renderTextureID);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, L_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA8, WIDTH, HEIGHT, 0, GL_BGRA, GL_UNSIGNED_BYTE, NULL);

Attach Renderbuffer to the bound Framebuffer object and check for Framebuffer completeness.

glFramebufferTexture2D(GL_DRAW_FRAMEBUFFER, 
GL_COLOR_ATTACHMENT0,GL_TEXTURE_2D, renderTextureID, 0); 
glFramebufferRenderbuffer(GL_DRAW_FRAMEBUFFER, 
GL_DEPTH_ATTACHMENT,GL_RENDERBUFFER, rbID);
GLuint status = glCheckFramebufferStatus(GL_DRAW_FRAMEBUFFER);
if(status==GL_FRAMEBUFFER_COMPLETE) {
printf("FBO setup succeeded.");
} else {
printf("Error in FBO setup.");
}

Unbind the Framebuffer object as follows:

glBindTexture(GL_TEXTURE_2D, 0);
glBindFramebuffer(GL_DRAW_FRAMEBUFFER, 0);

Create a quad geometry to act as a mirror:
```
mirror = new CQuad(-2);
```
Render the scene normally from the point of view of camera. Since the unit color cube is rendered at origin, we translate it on the Y axis to shift it up in Y axis which effectively moves the unit color cube in Y direction so that the unit color cube's image can be viewed completely in the mirror.
```
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
grid->Render(glm::value_ptr(MVP));
localR[3][1] = 0.5;
cube->Render(glm::value_ptr(P*MV*localR));
```

Store the current modelview matrix and then change the modelview matrix such that the camera is placed at the mirror object position. Also make sure to laterally invert this modelview matrix by scaling by -1 on the X axis.

glm::mat4 oldMV = MV;
glm::vec3 target;
glm::vec3 V = glm::vec3(-MV[2][0], -MV[2][1], -MV[2][2]);
glm::vec3 R = glm::reflect(V, mirror->normal);
MV = glm::lookAt(mirror->position, mirror->position + R, glm::vec3(0,1,0));
MV = glm::scale(MV, glm::vec3(-1,1,1));

Bind the FBO, set up the FBO color attachment
for Drawbuffer (GL_COLOR_ATTACHMENT0) or any other attachment to which texture is attached, and clear the FBO. The glDrawBuffer function enables the code to draw to a specific color attachment on the FBO. In our case, there is a single color attachment so we set it as the draw buffer.
```
glBindFramebuffer(GL_DRAW_FRAMEBUFFER, fboID); 
glDrawBuffer(GL_COLOR_ATTACHMENT0);
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
```
Set the modified modelview matrix and render the scene again. Also make sure to only render from the shiny side of the mirror.
```
if(glm::dot(V,mirror->normal)<0) {
  grid->Render(glm::value_ptr(P*MV));
  cube->Render(glm::value_ptr(P*MV*localR));
}
```
Unbind the FBO and restore the default Drawbuffer (GL_BACK_LEFT).
```
glBindFramebuffer(GL_DRAW_FRAMEBUFFER, 0);
glDrawBuffer(GL_BACK_LEFT);
```
Tip
Note that there are several aliases for the back buffer. The real back buffer is GL_BACK_LEFT, which is also referred by the GL_BACK alias. The default Framebuffer has up to four color buffers, namely GL_FRONT_LEFT, GL_FRONT_RIGHT, GL_BACK_LEFT, and GL_BACK_RIGHT. If stereo rendering is not active, then only the left buffers are active, that is, GL_FRONT_LEFT (the active front color buffer) and GL_BACK_LEFT (the active back color buffer).

Finally render the mirror quad at the saved modelview matrix.

MV = oldMV;
glBindTexture(GL_TEXTURE_2D, renderTextureID);
mirror->Render(glm::value_ptr(P*MV));

How it works…

The mirror algorithm used in the recipe is very simple. We first get the view direction vector (V) from the viewing matrix. We reflect this vector on the normal of the mirror (N). Next, the camera position is moved to the place behind the mirror. Finally, the mirror is scaled by -1 on the X axis. This ensures that the image is laterally inverted as in a mirror. Details of the method are covered in the reference in the See also section.

There's more…

Details of the Framebuffer object can be obtained from the Framebuffer object specifications (see the See also section). The output from the demo application implementing this recipe is as follows:

How to do it…

Attach Renderbuffer to the bound Framebuffer object and check for Framebuffer completeness.

Initialize the framebuffer and renderbuffer objects' color and depth attachments respectively. The render buffer is required if we need depth testing for the offscreen rendering, and the depth precision is specified using the glRenderbufferStorage function.
```
glGenFramebuffers(1, &fboID);
glBindFramebuffer(GL_DRAW_FRAMEBUFFER, fboID);
glGenRenderbuffers(1, &rbID);
glBindRenderbuffer(GL_RENDERBUFFER, rbID);
glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT32,WIDTH, HEIGHT);
```

glGenTextures(1, &renderTextureID);
glBindTexture(GL_TEXTURE_2D, renderTextureID);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, L_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA8, WIDTH, HEIGHT, 0, GL_BGRA, GL_UNSIGNED_BYTE, NULL);

glFramebufferTexture2D(GL_DRAW_FRAMEBUFFER, 
GL_COLOR_ATTACHMENT0,GL_TEXTURE_2D, renderTextureID, 0); 
glFramebufferRenderbuffer(GL_DRAW_FRAMEBUFFER, 
GL_DEPTH_ATTACHMENT,GL_RENDERBUFFER, rbID);
GLuint status = glCheckFramebufferStatus(GL_DRAW_FRAMEBUFFER);
if(status==GL_FRAMEBUFFER_COMPLETE) {
printf("FBO setup succeeded.");
} else {
printf("Error in FBO setup.");
}

Unbind the Framebuffer object as follows:

glBindTexture(GL_TEXTURE_2D, 0);
glBindFramebuffer(GL_DRAW_FRAMEBUFFER, 0);

Create a quad geometry to act as a mirror:
```
mirror = new CQuad(-2);
```
Render the scene normally from the point of view of camera. Since the unit color cube is rendered at origin, we translate it on the Y axis to shift it up in Y axis which effectively moves the unit color cube in Y direction so that the unit color cube's image can be viewed completely in the mirror.
```
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
grid->Render(glm::value_ptr(MVP));
localR[3][1] = 0.5;
cube->Render(glm::value_ptr(P*MV*localR));
```

glm::mat4 oldMV = MV;
glm::vec3 target;
glm::vec3 V = glm::vec3(-MV[2][0], -MV[2][1], -MV[2][2]);
glm::vec3 R = glm::reflect(V, mirror->normal);
MV = glm::lookAt(mirror->position, mirror->position + R, glm::vec3(0,1,0));
MV = glm::scale(MV, glm::vec3(-1,1,1));

Bind the FBO, set up the FBO color attachment
for Drawbuffer (GL_COLOR_ATTACHMENT0) or any other attachment to which texture is attached, and clear the FBO. The glDrawBuffer function enables the code to draw to a specific color attachment on the FBO. In our case, there is a single color attachment so we set it as the draw buffer.
```
glBindFramebuffer(GL_DRAW_FRAMEBUFFER, fboID); 
glDrawBuffer(GL_COLOR_ATTACHMENT0);
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
```
Set the modified modelview matrix and render the scene again. Also make sure to only render from the shiny side of the mirror.
```
if(glm::dot(V,mirror->normal)<0) {
  grid->Render(glm::value_ptr(P*MV));
  cube->Render(glm::value_ptr(P*MV*localR));
}
```
Unbind the FBO and restore the default Drawbuffer (GL_BACK_LEFT).
```
glBindFramebuffer(GL_DRAW_FRAMEBUFFER, 0);
glDrawBuffer(GL_BACK_LEFT);
```
Tip
Note that there are several aliases for the back buffer. The real back buffer is GL_BACK_LEFT, which is also referred by the GL_BACK alias. The default Framebuffer has up to four color buffers, namely GL_FRONT_LEFT, GL_FRONT_RIGHT, GL_BACK_LEFT, and GL_BACK_RIGHT. If stereo rendering is not active, then only the left buffers are active, that is, GL_FRONT_LEFT (the active front color buffer) and GL_BACK_LEFT (the active back color buffer).

Finally render the mirror quad at the saved modelview matrix.

MV = oldMV;
glBindTexture(GL_TEXTURE_2D, renderTextureID);
mirror->Render(glm::value_ptr(P*MV));

How it works…

There's more…

How it works…

There's more…

Rendering a reflective object using dynamic cube mapping

Now we will see how to use dynamic cube mapping to render a real-time scene to a cubemap render target. This allows us to create reflective surfaces. In modern OpenGL, offscreen rendering (also called render-to-texture) functionality is exposed through FBOs.

Getting ready

In this recipe, we will render a box with encircling particles. The code is contained in the Chapter3/DynamicCubemap directory.

How to do it…

Create a cubemap texture object.

glGenTextures(1, &dynamicCubeMapID);
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_CUBE_MAP, dynamicCubeMapID);
glTexParameterf(GL_TEXTURE_CUBE_MAP,GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameterf(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameterf(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);
for (int face = 0; face < 6; face++) {
  glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + face, 0, GL_RGBA,CUBEMAP_SIZE, CUBEMAP_SIZE, 0, GL_RGBA, GL_FLOAT, NULL);
}

Set up an FBO with the cubemap texture as an attachment.

glGenFramebuffers(1, &fboID);
glBindFramebuffer(GL_DRAW_FRAMEBUFFER, fboID); 
glGenRenderbuffers(1, &rboID);
glBindRenderbuffer(GL_RENDERBUFFER, rboID);
glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT, CUBEMAP_SIZE, CUBEMAP_SIZE);
glFramebufferRenderbuffer(GL_DRAW_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, fboID);
glFramebufferTexture2D(GL_DRAW_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_CUBE_MAP_POSITIVE_X, dynamicCubeMapID, 0);
GLenum status = glCheckFramebufferStatus(GL_DRAW_FRAMEBUFFER);
if(status != GL_FRAMEBUFFER_COMPLETE) {
  cerr<<"Frame buffer object setup error."<<endl;
  exit(EXIT_FAILURE);
} else {
  cerr<<"FBO setup successfully."<<endl;
}

Set the viewport to the size of the offscreen texture and render the scene six times without the reflective object to the six sides of the cubemap using FBO.

glViewport(0,0,CUBEMAP_SIZE,CUBEMAP_SIZE);
glBindFramebuffer(GL_DRAW_FRAMEBUFFER, fboID);
glFramebufferTexture2D(GL_DRAW_FRAMEBUFFER, GL_COLOR_ATTACHMENT0,GL_TEXTURE_CUBE_MAP_POSITIVE_X, dynamicCubeMapID, 0);
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
glm::mat4   MV1 = glm::lookAt(glm::vec3(0),glm::vec3(1,0,0),glm::vec3(0,-1,0));  
DrawScene( MV1*T, Pcubemap);

glFramebufferTexture2D(GL_DRAW_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_CUBE_MAP_NEGATIVE_X, dynamicCubeMapID, 0);
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
glm::mat4 MV2 = glm::lookAt(glm::vec3(0),glm::vec3(-1,0,0), glm::vec3(0,-1,0)); 
DrawScene( MV2*T, Pcubemap);

...//similar for rest of the faces
   glBindFramebuffer(GL_DRAW_FRAMEBUFFER, 0);

Restore the viewport and the modelview matrix, and render the scene normally.
```
   glViewport(0,0,WIDTH,HEIGHT);
   DrawScene(MV, P);
```

Set the cubemap shader and then render the reflective object.

glBindVertexArray(sphereVAOID);
cubemapShader.Use();
T = glm::translate(glm::mat4(1), p);
glUniformMatrix4fv(cubemapShader("MVP"), 1, GL_FALSE, glm::value_ptr(P*(MV*T)));
glUniform3fv(cubemapShader("eyePosition"), 1, glm::value_ptr(eyePos));
glDrawElements(GL_TRIANGLES,indices.size(),GL_UNSIGNED_SHORT,0);
cubemapShader.UnUse();

How it works…

Dynamic cube mapping renders the scene six times from the reflective object using six cameras at the reflective object's position. For rendering to the cubemap texture, an FBO is used with a cubemap texture attachment. The cubemap texture's GL_TEXTURE_CUBE_MAP_POSITIVE_X target is bound to the GL_COLOR_ATTACHMENT0 color attachment of the FBO. The last parameter of glTexImage2D is NULL since this call just allocates the memory for offscreen rendering and the real data will be populated when the FBO is set as the render target.

The scene is then rendered to the cubemap texture without the reflective object by placing six cameras at the reflective object's position in the six directions. The cubemap projection matrix (Pcubemap) is given a 90 degree fov.

Pcubemap = glm::perspective(90.0f,1.0f,0.1f,1000.0f);

This renders the scene into the cubemap texture. For each side, a new MVP matrix is obtained by multiplying the new MV matrix (obtained by using glm::lookAt function). This is repeated for all six sides of the cube. Next, the scene is rendered normally and the reflective object is finally rendered using the generated cubemap to render the reflective environment. Rendering each frame six times into an offscreen target hinders performance, especially if there are complex objects in the world. Therefore this technique should be used with caution.

The cubemap vertex shader outputs the object space vertex positions and normals.

#version 330 core
layout(location=0) in vec3 vVertex;
layout(location=1) in vec3 vNormal;
uniform mat4 MVP;
smooth out vec3 position;
smooth out vec3 normal;
void main() { 
position = vVertex;
normal = vNormal;
   gl_Position = MVP*vec4(vVertex,1);
}

The cubemap fragment shader uses the object space vertex positions to determine the view vector. The reflection vector is then obtained by reflecting the view vector at the object space normal.

#version 330 core
layout(location=0) out vec4 vFragColor;
uniform samplerCube cubeMap;
smooth in vec3 position;
smooth in vec3 normal;
uniform vec3 eyePosition;
void main() { 
  vec3 N = normalize(normal);
  vec3 V = normalize(position-eyePosition);
  vFragColor = texture(cubeMap, reflect(V,N));
}

There's more…

The demo application implementing this recipe renders a reflective sphere with eight cubes pulsating around it, as shown in the following figure:

In this recipe, we could also use layered rendering by using the geometry shader to output to a different Framebuffer object layer. This can be achieved by outputting to the appropriate gl_Layer attribute from the geometry shader and setting the appropriate viewing transformation. This is left as an exercise for the reader.

How to do it…

Create a cubemap texture object.

glGenTextures(1, &dynamicCubeMapID);
glActiveTexture(GL_TEXTURE1);
glBindTexture(GL_TEXTURE_CUBE_MAP, dynamicCubeMapID);
glTexParameterf(GL_TEXTURE_CUBE_MAP,GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameterf(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameterf(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);
for (int face = 0; face < 6; face++) {
  glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + face, 0, GL_RGBA,CUBEMAP_SIZE, CUBEMAP_SIZE, 0, GL_RGBA, GL_FLOAT, NULL);
}

Set up an FBO with the cubemap texture as an attachment.

glGenFramebuffers(1, &fboID);
glBindFramebuffer(GL_DRAW_FRAMEBUFFER, fboID); 
glGenRenderbuffers(1, &rboID);
glBindRenderbuffer(GL_RENDERBUFFER, rboID);
glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT, CUBEMAP_SIZE, CUBEMAP_SIZE);
glFramebufferRenderbuffer(GL_DRAW_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, fboID);
glFramebufferTexture2D(GL_DRAW_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_CUBE_MAP_POSITIVE_X, dynamicCubeMapID, 0);
GLenum status = glCheckFramebufferStatus(GL_DRAW_FRAMEBUFFER);
if(status != GL_FRAMEBUFFER_COMPLETE) {
  cerr<<"Frame buffer object setup error."<<endl;
  exit(EXIT_FAILURE);
} else {
  cerr<<"FBO setup successfully."<<endl;
}

Set the viewport to the size of the offscreen texture and render the scene six times without the reflective object to the six sides of the cubemap using FBO.

glViewport(0,0,CUBEMAP_SIZE,CUBEMAP_SIZE);
glBindFramebuffer(GL_DRAW_FRAMEBUFFER, fboID);
glFramebufferTexture2D(GL_DRAW_FRAMEBUFFER, GL_COLOR_ATTACHMENT0,GL_TEXTURE_CUBE_MAP_POSITIVE_X, dynamicCubeMapID, 0);
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
glm::mat4   MV1 = glm::lookAt(glm::vec3(0),glm::vec3(1,0,0),glm::vec3(0,-1,0));  
DrawScene( MV1*T, Pcubemap);

glFramebufferTexture2D(GL_DRAW_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_CUBE_MAP_NEGATIVE_X, dynamicCubeMapID, 0);
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
glm::mat4 MV2 = glm::lookAt(glm::vec3(0),glm::vec3(-1,0,0), glm::vec3(0,-1,0)); 
DrawScene( MV2*T, Pcubemap);

...//similar for rest of the faces
   glBindFramebuffer(GL_DRAW_FRAMEBUFFER, 0);

Restore the viewport and the modelview matrix, and render the scene normally.
```
   glViewport(0,0,WIDTH,HEIGHT);
   DrawScene(MV, P);
```

Set the cubemap shader and then render the reflective object.

glBindVertexArray(sphereVAOID);
cubemapShader.Use();
T = glm::translate(glm::mat4(1), p);
glUniformMatrix4fv(cubemapShader("MVP"), 1, GL_FALSE, glm::value_ptr(P*(MV*T)));
glUniform3fv(cubemapShader("eyePosition"), 1, glm::value_ptr(eyePos));
glDrawElements(GL_TRIANGLES,indices.size(),GL_UNSIGNED_SHORT,0);
cubemapShader.UnUse();

How it works…

Pcubemap = glm::perspective(90.0f,1.0f,0.1f,1000.0f);

The cubemap vertex shader outputs the object space vertex positions and normals.

#version 330 core
layout(location=0) in vec3 vVertex;
layout(location=1) in vec3 vNormal;
uniform mat4 MVP;
smooth out vec3 position;
smooth out vec3 normal;
void main() { 
position = vVertex;
normal = vNormal;
   gl_Position = MVP*vec4(vVertex,1);
}

The cubemap fragment shader uses the object space vertex positions to determine the view vector. The reflection vector is then obtained by reflecting the view vector at the object space normal.

#version 330 core
layout(location=0) out vec4 vFragColor;
uniform samplerCube cubeMap;
smooth in vec3 position;
smooth in vec3 normal;
uniform vec3 eyePosition;
void main() { 
  vec3 N = normalize(normal);
  vec3 V = normalize(position-eyePosition);
  vFragColor = texture(cubeMap, reflect(V,N));
}

There's more…

The demo application implementing this recipe renders a reflective sphere with eight cubes pulsating around it, as shown in the following figure:

How it works…

Pcubemap = glm::perspective(90.0f,1.0f,0.1f,1000.0f);

The cubemap vertex shader outputs the object space vertex positions and normals.

#version 330 core
layout(location=0) in vec3 vVertex;
layout(location=1) in vec3 vNormal;
uniform mat4 MVP;
smooth out vec3 position;
smooth out vec3 normal;
void main() { 
position = vVertex;
normal = vNormal;
   gl_Position = MVP*vec4(vVertex,1);
}

The cubemap fragment shader uses the object space vertex positions to determine the view vector. The reflection vector is then obtained by reflecting the view vector at the object space normal.

#version 330 core
layout(location=0) out vec4 vFragColor;
uniform samplerCube cubeMap;
smooth in vec3 position;
smooth in vec3 normal;
uniform vec3 eyePosition;
void main() { 
  vec3 N = normalize(normal);
  vec3 V = normalize(position-eyePosition);
  vFragColor = texture(cubeMap, reflect(V,N));
}

There's more…

The demo application implementing this recipe renders a reflective sphere with eight cubes pulsating around it, as shown in the following figure:

There's more…

The demo application implementing this recipe renders a reflective sphere with eight cubes pulsating around it, as shown in the following figure:

Implementing area filtering (sharpening/blurring/embossing) on an image using convolution

We will now see how to do area filtering, that is, 2D image convolution to implement effects like sharpening, blurring, and embossing. There are several ways to achieve image convolution in the spatial domain. The simplest approach is to use a loop that iterates through a given image window and computes the sum of products of the image intensities with the convolution kernel. The more efficient method, as far as the implementation is concerned, is separable convolution which breaks up the 2D convolution into two 1D convolutions. However, this approach requires an additional pass.

Getting ready

This recipe is built on top of the image loading recipe discussed in the first chapter. If you feel a bit lost, we suggest skimming through it to be on page with us. The code for this recipe is contained in the Chapter3/Convolution directory. For this recipe, most of the work takes place in the fragment shader.

How to do it…

For a 2D digital image f(x,y), the processed image g(x,y), after the convolution operation with a kernel h(x,y), is defined mathematically as follows:

Create a simple pass-through vertex shader that outputs the clip space position and the texture coordinates which are to be passed into the fragment shader for texture lookup.
```
#version 330 core
in vec2 vVertex; 
out vec2 vUV; 
void main()
{
  gl_Position = vec4(vVertex*2.0-1,0,1);   
  vUV = vVertex;
}
```
In the fragment shader, we declare a constant array called kernel which stores our convolution kernel. Changing the convolution kernel values dictates the output of convolution. The default kernel sets up a sharpening convolution filter. Refer to Chapter3/Convolution/shaders/shader_convolution.frag for details.
```
const float kernel[]=float[9] (-1,-1,-1,-1, 8,-1,-1,-1,-1);
```
In the fragment shader, we run a nested loop that loops through the current pixel's neighborhood and multiplies the kernel value with the current pixel's value. This is continued in an n x n neighborhood, where n is the width/height of the kernel.
```
for(int j=-1;j<=1;j++) {
  for(int i=-1;i<=1;i++) {
    color += kernel[index--] * texture(textureMap, vUV+(vec2(i,j)*delta));
  }
}
```
After the nested loops, we divide the color value with the
total number of values in the kernel. For a 3 x 3 kernel, we have nine values. Finally, we add the convolved color value to the current pixel's value.
```
    color/=9.0;
    vFragColor = color + texture(textureMap, vUV);
```

How it works...

For each pixel, we simply sum the product of the current image pixel value with the corresponding coefficient in the kernel in the given neighborhood. For details about the kernel coefficients, we refer the reader to any standard text on digital image processing, like the one given in the See also section.

The overall algorithm works like this. We set up our FBO for offscreen rendering. We render our image on the offscreen render target of the FBO, instead of the back buffer. Now the FBO attachment stores our image. Next, we set the output from the first step (that is, the rendered image on the FBO attachment) as input to the convolution shader in the second pass. We render a full-screen quad on the back buffer and apply our convolution shader to it. This performs convolution on the input image. Finally, we swap the back buffer to show the result on the screen.

After the image is loaded and an OpenGL texture has been generated, we render a screen-aligned quad. This allows the fragment shader to run for the whole screen. In the fragment shader, for the current fragment, we iterate through its neighborhood and sum the product of the corresponding entry in the kernel with the look-up value. After the loop is terminated, the sum is divided by the total number of kernel coefficients. Finally, the convolution sum is added to the current pixel's value. There are several different kinds of kernels. We list the ones we will use in this recipe in the following table.

Tip

Based on the wrapping mode set for the texture, for example, GL_CLAMP or GL_REPEAT, the convolution result will be different. In case of the GL_CLAMP wrapping mode, the pixels out of the image are not considered, whereas, in case of the GL_REPEAT wrapping mode, the out of the image pixel information is obtained from the pixel at the wrapping position.

Effect	Kernel matrix
Sharpening
Blurring / Unweighted Smoothing
3 x 3 Gaussian blur
Emboss north-west direction
Emboss north-east direction
Emboss south-east direction
Emboss south-west direction

There's more…

We just touched the topic of digital image convolution. For details, we refer the reader to the See also section. In the demo application, the user can set the required kernel and then press the Space bar key to see the filtered image output. Pressing the Space bar key once again shows the normal unfiltered image.

How to do it…

For a 2D digital image f(x,y), the processed image g(x,y), after the convolution operation with a kernel h(x,y), is defined mathematically as follows:

Create a simple pass-through vertex shader that outputs the clip space position and the texture coordinates which are to be passed into the fragment shader for texture lookup.
```
#version 330 core
in vec2 vVertex; 
out vec2 vUV; 
void main()
{
  gl_Position = vec4(vVertex*2.0-1,0,1);   
  vUV = vVertex;
}
```
In the fragment shader, we declare a constant array called kernel which stores our convolution kernel. Changing the convolution kernel values dictates the output of convolution. The default kernel sets up a sharpening convolution filter. Refer to Chapter3/Convolution/shaders/shader_convolution.frag for details.
```
const float kernel[]=float[9] (-1,-1,-1,-1, 8,-1,-1,-1,-1);
```
In the fragment shader, we run a nested loop that loops through the current pixel's neighborhood and multiplies the kernel value with the current pixel's value. This is continued in an n x n neighborhood, where n is the width/height of the kernel.
```
for(int j=-1;j<=1;j++) {
  for(int i=-1;i<=1;i++) {
    color += kernel[index--] * texture(textureMap, vUV+(vec2(i,j)*delta));
  }
}
```
After the nested loops, we divide the color value with the
total number of values in the kernel. For a 3 x 3 kernel, we have nine values. Finally, we add the convolved color value to the current pixel's value.
```
    color/=9.0;
    vFragColor = color + texture(textureMap, vUV);
```

How it works...

Tip

Effect	Kernel matrix
Sharpening
Blurring / Unweighted Smoothing
3 x 3 Gaussian blur
Emboss north-west direction
Emboss north-east direction
Emboss south-east direction
Emboss south-west direction

There's more…

How it works...

For a 2D digital image f(x,y), the processed image g(x,y), after the convolution operation with a kernel h(x,y), is defined mathematically as follows:

Tip

Effect	Kernel matrix
Sharpening
Blurring / Unweighted Smoothing
3 x 3 Gaussian blur
Emboss north-west direction
Emboss north-east direction
Emboss south-east direction
Emboss south-west direction

There's more…

Implementing the glow effect

Now that we know how to perform offscreen rendering and blurring, we will put this knowledge to use by implementing the glow effect. The code for this recipe is in the Chapter3/Glow directory. In this recipe, we will render a set of points encircling a cube. Every 50 frames, four alternate points glow.

How to do it…

Render the scene normally by rendering the points and the cube. The particle shader renders the GL_POINTS value (which by default, renders as quads) as circles.

grid->Render(glm::value_ptr(MVP));
cube->Render(glm::value_ptr(MVP));
glBindVertexArray(particlesVAO);
particleShader.Use();
glUniformMatrix4fv(particleShader("MVP"), 1, GL_FALSE, glm::value_ptr(MVP*Rot));
glDrawArrays(GL_POINTS, 0, 8);

The particle vertex shader is as follows:

#version 330 core
layout(location=0) in vec3 vVertex;
uniform mat4 MVP;
smooth out vec4 color;
const vec4 colors[8]=vec4[8](vec4(1,0,0,1), vec4(0,1,0,1), vec4(0,0,1,1),vec4(1,1,0,1), vec4(0,1,1,1), vec4(1,0,1,1), vec4(0.5,0.5,0.5,1),  vec4(1,1,1,1)) ;

void main() {
  gl_Position = MVP*vec4(vVertex,1);
  color = colors[gl_VertexID/4];
}

The particle fragment shader is as follows:

#version 330 core
layout(location=0) out vec4 vFragColor;
  
smooth in vec4 color;

void main() { 
  vec2 pos = gl_PointCoord-0.5;
  if(dot(pos,pos)>0.25)
    discard;
  else
    vFragColor = color;
}

Set up a single FBO with two color attachments. The first attachment is for rendering of scene elements requiring glow and the second attachment is for blurring.

glGenFramebuffers(1, &fboID);
glBindFramebuffer(GL_DRAW_FRAMEBUFFER, fboID);
glGenTextures(2, texID);
glActiveTexture(GL_TEXTURE0);
for(int i=0;i<2;i++) {
  glBindTexture(GL_TEXTURE_2D, texID[i]);
  glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER,GL_LINEAR);
  glTexParameterf(GL_TXTURE_2D, GL_TEXTURE_MAG_FILTER,GL_LINEAR)
  glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
  glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
  glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, RENDER_TARGET_WIDTH, RENDER_TARGET_HEIGHT, 0, GL_RGBA,GL_UNSIGNED_BYTE, NULL);
  glFramebufferTexture2D(GL_DRAW_FRAMEBUFFER, GL_COLOR_ATTACHMENT0+i,GL_TEXTURE_2D,texID[i],0);
}
GLenum status = glCheckFramebufferStatus(GL_DRAW_FRAMEBUFFER);
if(status != GL_FRAMEBUFFER_COMPLETE) {
  cerr<<"Frame buffer object setup error."<<endl;
  exit(EXIT_FAILURE);
} else {
  cerr<<"FBO set up successfully."<<endl;
}
glBindFramebuffer(GL_DRAW_FRAMEBUFFER, 0);

Bind FBO, set the viewport to the size of the attachment texture, set Drawbuffer to render to the first color attachment (GL_COLOR_ATTACHMENT0), and render the part of the scene which needs glow.

glBindFramebuffer(GL_DRAW_FRAMEBUFFER, fboID);
glViewport(0,0,RENDER_TARGET_WIDTH,RENDER_TARGET_HEIGHT);
glDrawBuffer(GL_COLOR_ATTACHMENT0);
glClear(GL_COLOR_BUFFER_BIT);
  glDrawArrays(GL_POINTS, offset, 4);
particleShader.UnUse();

Set Drawbuffer to render to the second color attachment (GL_COLOR_ATTACHMENT1) and bind the FBO texture attached to the first color attachment. Set the blur shader by convolving with a simple unweighted smoothing filter.
```
glDrawBuffer(GL_COLOR_ATTACHMENT1);
glBindTexture(GL_TEXTURE_2D, texID[0]);
```
Render a screen-aligned quad and apply the blur shader to the rendering result from the first color attachment of the FBO. This output is written to the second color attachment.
```
blurShader.Use();
glBindVertexArray(quadVAOID);
glDrawElements(GL_TRIANGLES,6,GL_UNSIGNED_SHORT,0);
```

Disable FBO rendering, reset the default drawbuffer (GL_BACK_LEFT) and viewport, bind the texture attached to the FBO's second color attachment, draw a screen-aligned quad, and blend the blur output to the existing scene using additive blending.

glBindFramebuffer(GL_DRAW_FRAMEBUFFER, 0);
glDrawBuffer(GL_BACK_LEFT);
glBindTexture(GL_TEXTURE_2D, texID[1]);
glViewport(0,0,WIDTH, HEIGHT);
glEnable(GL_BLEND);
glBlendFunc(GL_ONE, GL_ONE);
glDrawElements(GL_TRIANGLES,6,GL_UNSIGNED_SHORT,0);
glBindVertexArray(0);
blurShader.UnUse();
glDisable(GL_BLEND);

How it works…

The glow effect works by first rendering the candidate elements of the scene for glow into a separate render target. After rendering, a smoothing filter is applied on the rendered image containing the elements requiring glow. The smoothed output is then additively blended with the current rendering on the frame buffer, as shown in the following figure:

Note that we could also enable blending in the fragment shader. Assuming that the two images to be blended are bound to their texture units and their shader samplers are texture1 and texture2, the additive blending shader code will be like this:

#version 330 core
uniform sampler2D texture1;
uniform sampler2D texture2;
layout(location=0) out vec4 vFragColor;
smooth in vec2 vUV;
void main() {
  vec4 color1 = texture(texture1, vUV);
  vec4 color2 = texture(texture2, vUV);
  vFragColor = color1+color2;
}

Additionally, we can also apply separable convolution, but that requires two passes. The process requires three color attachments. We first render the scene normally on the first color attachment while the glow effect objects are rendered on the second color attachment. The third color attachment is then set as the render target while the second color attachment acts as input. A full-screen quad is then rendered with the vertical smoothing shader which simply iterates through a row of pixels. This vertically smoothed result is written to the third color attachment.

The second color attachment is then set as output while the output results from the vertical smoothing pass (which was written to the third color attachment) is set as input. The horizontal smoothing shader is then applied on a column of pixels which smoothes the entire image. The image is then rendered to the second color attachment. Finally, the blend shader combines the result from the first color attachment with the result from the second color attachment. Note that the same effect could be carried out by using two separate FBOs: a rendering FBO and a filtering FBO, which gives us more flexibility as we can down sample the filtering result to take advantage of hardware linear filtering. This technique has been used in the Implementing variance shadow mapping recipe in Chapter 4, Lights and Shadows.

There's more…

The demo application for this recipe shows a simple unit cube encircled by eight points. The first four points are rendered in red and the latter four are rendered in green. The application applies glow to the first four points. After every 50 frames, the glow shifts to the latter four points and so on for the lifetime of the application. The output result from the application is shown in the following figure:

How it works…

#version 330 core
uniform sampler2D texture1;
uniform sampler2D texture2;
layout(location=0) out vec4 vFragColor;
smooth in vec2 vUV;
void main() {
  vec4 color1 = texture(texture1, vUV);
  vec4 color2 = texture(texture2, vUV);
  vFragColor = color1+color2;
}

There's more…

Chapter 4. Lights and Shadows

In this chapter, we will cover:

Implementing per-vertex and per-fragment point lighting
Implementing per-fragment directional light
Implementing per-fragment point light with attenuation
Implementing per-fragment spot light
Implementing shadow mapping with FBO
Implementing shadow mapping with percentage closer filtering (PCF)
Implementing variance shadow mapping

Introduction

Although we can leave the lights to just light the environment, our visual system will start to find problems with such a setting. This is because our eyes are not used to seeing objects lit but casting no shadows. In addition, without shadows, it is very difficult to judge how near or far an object is to the other. Therefore, we detail several shadow generation techniques varying from classic depth shadow mapping to more advanced variance shadow mapping. All of these will be implemented in OpenGL v3.3 and all implementation details will be given to enable the reader to implement the technique on their own.

Implementing per-vertex and per-fragment point lighting

To give more realism to 3D graphic scenes, we add lighting. In OpenGL's fixed function pipeline, per-vertex lighting is provided (which is deprecated in OpenGL v3.3 and above). Using shaders, we can not only replicate the per-vertex lighting of fixed function pipeline but also go a step further by implementing per-fragment lighting. The per-vertex lighting is also known as Gouraud shading and the per-fragment shading is known as Phong shading. So, without further ado, let's get started.

Getting started

In this recipe, we will render many cubes and a sphere. All of these objects are generated and stored in the buffer objects. For details, refer to the CreateSphere and CreateCube functions in Chapter4/PerVertexLighting/main.cpp. These functions generate both vertex positions as well as per-vertex normals, which are needed for the lighting calculations. All of the lighting calculations take place in the vertex shader of the per-vertex lighting recipe (Chapter4/PerVertexLighting/), whereas, for the per-fragment lighting recipe (Chapter4/PerFragmentLighting/) they take place in the fragment shader.

How to do it…

Let us start our recipe by following these simple steps:

Set up the vertex shader that performs the lighting calculation in the view/eye space. This generates the color after the lighting calculation.

#version 330 core
layout(location=0) in vec3 vVertex;
layout(location=1) in vec3 vNormal;
uniform mat4 MVP;
uniform mat4 MV;
uniform mat3 N;
uniform vec3 light_position;  //light position in object space
uniform vec3 diffuse_color;
uniform vec3 specular_color;
uniform float shininess;
smooth out vec4 color;
const vec3 vEyeSpaceCameraPosition = vec3(0,0,0);
void main()
{
  vec4 vEyeSpaceLightPosition = MV*vec4(light_position,1);
  vec4 vEyeSpacePosition = MV*vec4(vVertex,1);
  vec3 vEyeSpaceNormal   = normalize(N*vNormal);
  vec3 L = normalize(vEyeSpaceLightPosition.xyz –vEyeSpacePosition.xyz);
  vec3 V = normalize(vEyeSpaceCameraPosition.xyz- vEyeSpacePosition.xyz);
  vec3 H = normalize(L+V);
  float diffuse = max(0, dot(vEyeSpaceNormal, L));
  float specular = max(0, pow(dot(vEyeSpaceNormal, H), shininess));
  color = diffuse*vec4(diffuse_color,1) + specular*vec4(specular_color, 1);
  gl_Position = MVP*vec4(vVertex,1);
}

Set up a fragment shader which, inputs
the shaded color from the vertex shader interpolated by the rasterizer, and set it as the current output color.
```
#version 330 core
layout(location=0) out vec4 vFragColor;
smooth in vec4 color;
void main() {
  vFragColor = color;
}
```

In the rendering code, set the shader and render the objects by passing their modelview/projection matrices to the shader as shader uniforms.

shader.Use();
glBindVertexArray(cubeVAOID);
for(int i=0;i<8;i++) 
{
  float theta = (float)(i/8.0f*2*M_PI);
  glm::mat4 T = glm::translate(glm::mat4(1), glm::vec3(radius*cos(theta), 0.5,radius*sin(theta)));
  glm::mat4 M = T;
  glm::mat4 MV = View*M;
  glm::mat4 MVP = Proj*MV; 
  glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(MVP)); 
  glUniformMatrix4fv(shader("MV"), 1, GL_FALSE, glm::value_ptr(MV)); 
  glUniformMatrix3fv(shader("N"), 1, GL_FALSE, glm::value_ptr(glm::inverseTranspose(glm::mat3(MV))));
  glUniform3fv(shader("diffuse_color"),1, &(colors[i].x));
  glUniform3fv(shader("light_position"),1,&(lightPosOS.x));
  glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_SHORT, 0);
}
glBindVertexArray(sphereVAOID);
glm::mat4 T = glm::translate(glm::mat4(1), glm::vec3(0,1,0));
glm::mat4 M = T;
glm::mat4 MV = View*M;
glm::mat4 MVP = Proj*MV;
glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(MVP));
glUniformMatrix4fv(shader("MV"), 1, GL_FALSE, glm::value_ptr(MV));
glUniformMatrix3fv(shader("N"), 1, GL_FALSE, glm::value_ptr(glm::inverseTranspose(glm::mat3(MV))));
glUniform3f(shader("diffuse_color"), 0.9f, 0.9f, 1.0f);
glUniform3fv(shader("light_position"),1, &(lightPosOS.x));
glDrawElements(GL_TRIANGLES, totalSphereTriangles, GL_UNSIGNED_SHORT, 0);
shader.UnUse();
glBindVertexArray(0);
grid->Render(glm::value_ptr(Proj*View));

How it works…

We can perform the lighting calculations in any coordinate space we wish, that is, object space, world space, or eye/view space. Similar to the lighting in the fixed function OpenGL pipeline, in this recipe we also do our calculations in the eye space. The first step in the vertex shader is to obtain the vertex position and light position in the eye space. This is done by multiplying the current vertex and light position with the modelview (MV) matrix.

vec4 vEyeSpaceLightPosition = MV*vec4(light_position,1);
vec4 vEyeSpacePosition = MV*vec4(vVertex,1);

vec3 vEyeSpaceNormal = normalize(N*vNormal);

Tip

In the OpenGL versions prior to v3.0, the normal matrix was stored in the gl_NormalMatrix shader uniform, which is the inverse transpose of the modelview matrix. Compared to positions, normals are transformed differently since the scaling transformation may modify the normals in such a way that the normals are not normalized anymore. Multiplying the normals with the inverse transpose of the modelview matrix ensures that the normals are only rotated based on the given matrix, maintaining their unit length.

Next, we obtain the vector from the position of the light in eye space to the position of the vertex in eye space, and do a dot product of this vector with the eye space normal. This gives us the diffuse component.

vec3 L = normalize(vEyeSpaceLightPosition.xyz-vEyeSpacePosition.xyz);
float diffuse = max(0, dot(vEyeSpaceNormal, L));

We also calculate two additional vectors, the view vector (V) and the half-way vector (H) between the light and the view vector.

  vec3 V = normalize(vEyeSpaceCameraPosition.xyz-vEyeSpacePosition.xyz);
  vec3 H = normalize(L+V);

These are used for specular component calculation in the Blinn Phong lighting model. The specular component is then obtained using pow(dot(N,H), σ), where σ is the shininess value; the larger the shininess, the more focused the specular.

float specular = max(0, pow(dot(vEyeSpaceNormal, H), shininess));

The final color is then obtained by multiplying the diffuse value with the diffuse color and the specular value with the specular color.

color =  diffuse*vec4( diffuse_color, 1) + specular*vec4(specular_color, 1);

The fragment shader in the per-vertex lighting simply outputs the per-vertex color interpolated by the rasterizer as the current fragment color.

smooth in vec4 color;
void main() {
  vFragColor = color;
}

Alternatively, if we move the lighting calculations to the fragment shader, we get a more pleasing rendering result at the expense of increased processing overhead. Specifically, we transform the per-vertex position, light position, and normals to eye space in the vertex shader, shown as follows:

#version 330 core
layout(location=0) in vec3 vVertex;
layout(location=1) in vec3 vNormal;
uniform mat4 MVP;
uniform mat4 MV;
uniform mat3 N;
smooth out vec3 vEyeSpaceNormal;
smooth out vec3 vEyeSpacePosition;
void main()
{
  vEyeSpacePosition = (MV*vec4(vVertex,1)).xyz;
  vEyeSpaceNormal   = N*vNormal;
  gl_Position = MVP*vec4(vVertex,1);
}

In the fragment shader, the rest of the calculation, including the diffuse and specular component contributions, is carried out.

#version 330 core
layout(location=0) out vec4 vFragColor; 
uniform vec3 light_position;  //light position in object space
uniform vec3 diffuse_color;
uniform vec3 specular_color;
uniform float shininess;
uniform mat4 MV;
smooth in vec3 vEyeSpaceNormal;
smooth in vec3 vEyeSpacePosition;
const vec3 vEyeSpaceCameraPosition = vec3(0,0,0);

void main() {
  vec3 vEyeSpaceLightPosition=(MV*vec4(light_position,1)).xyz;
  vec3 N = normalize(vEyeSpaceNormal);
  vec3 L = normalize(vEyeSpaceLightPosition-vEyeSpacePosition);
  vec3 V = normalize(vEyeSpaceCameraPosition.xyz-vEyeSpacePosition.xyz);
  vec3 H = normalize(L+V);
  float diffuse = max(0, dot(N, L));
  float specular = max(0, pow(dot(N, H), shininess));
  vFragColor = diffuse*vec4(diffuse_color,1) + specular*vec4(specular_color, 1);
}

We will now dissect the per-fragment lighting fragment shader line-by-line. We first calculate the light position in eye space. Then we calculate the vector from the light to the vertex in eye space. We also calculate the view vector (V) and the half way vector (H).

vec3 vEyeSpaceLightPosition = (MV * vec4(light_position,1)).xyz;
vec3 N = normalize(vEyeSpaceNormal);
vec3 L = normalize(vEyeSpaceLightPosition-vEyeSpacePosition);
vec3 V = normalize(vEyeSpaceCameraPosition.xyz-vEyeSpacePosition.xyz);
vec3 H = normalize(L+V);

Next, the diffuse component is calculated using the dot product with the eye space normal.

float diffuse = max(0, dot(vEyeSpaceNormal, L));

The specular component is calculated as in the per-vertex case.

float specular = max(0, pow(dot(N, H), shininess));

Finally, the combined color is obtained by summing the diffuse and specular contributions. The diffuse contribution is obtained by multiplying the diffuse color with the diffuse component and the specular contribution is obtained by multiplying the specular component with the specular color.

vFragColor = diffuse*vec4(diffuse_color,1) + specular*vec4(specular_color, 1);

There's more…

The output from the demo application for this recipe renders a sphere with eight cubes moving in and out, as shown in the following screenshot. The following figure shows the result of the per-vertex lighting. Note the ridge lines clearly visible on the middle sphere, which represents the vertices where the lighting calculations are carried out. Also note the appearance of the specular, which is predominantly visible at vertex positions only.

Now, let us see the result of the same demo application implementing per-fragment lighting:

Note how the per-fragment lighting gives a smoother result compared to the per-vertex lighting. In addition, the specular component is clearly visible.

How to do it…

Let us start our recipe by following these simple steps:

Set up the vertex shader that performs the lighting calculation in the view/eye space. This generates the color after the lighting calculation.

#version 330 core
layout(location=0) in vec3 vVertex;
layout(location=1) in vec3 vNormal;
uniform mat4 MVP;
uniform mat4 MV;
uniform mat3 N;
uniform vec3 light_position;  //light position in object space
uniform vec3 diffuse_color;
uniform vec3 specular_color;
uniform float shininess;
smooth out vec4 color;
const vec3 vEyeSpaceCameraPosition = vec3(0,0,0);
void main()
{
  vec4 vEyeSpaceLightPosition = MV*vec4(light_position,1);
  vec4 vEyeSpacePosition = MV*vec4(vVertex,1);
  vec3 vEyeSpaceNormal   = normalize(N*vNormal);
  vec3 L = normalize(vEyeSpaceLightPosition.xyz –vEyeSpacePosition.xyz);
  vec3 V = normalize(vEyeSpaceCameraPosition.xyz- vEyeSpacePosition.xyz);
  vec3 H = normalize(L+V);
  float diffuse = max(0, dot(vEyeSpaceNormal, L));
  float specular = max(0, pow(dot(vEyeSpaceNormal, H), shininess));
  color = diffuse*vec4(diffuse_color,1) + specular*vec4(specular_color, 1);
  gl_Position = MVP*vec4(vVertex,1);
}

Set up a fragment shader which, inputs
the shaded color from the vertex shader interpolated by the rasterizer, and set it as the current output color.
```
#version 330 core
layout(location=0) out vec4 vFragColor;
smooth in vec4 color;
void main() {
  vFragColor = color;
}
```

In the rendering code, set the shader and render the objects by passing their modelview/projection matrices to the shader as shader uniforms.

shader.Use();
glBindVertexArray(cubeVAOID);
for(int i=0;i<8;i++) 
{
  float theta = (float)(i/8.0f*2*M_PI);
  glm::mat4 T = glm::translate(glm::mat4(1), glm::vec3(radius*cos(theta), 0.5,radius*sin(theta)));
  glm::mat4 M = T;
  glm::mat4 MV = View*M;
  glm::mat4 MVP = Proj*MV; 
  glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(MVP)); 
  glUniformMatrix4fv(shader("MV"), 1, GL_FALSE, glm::value_ptr(MV)); 
  glUniformMatrix3fv(shader("N"), 1, GL_FALSE, glm::value_ptr(glm::inverseTranspose(glm::mat3(MV))));
  glUniform3fv(shader("diffuse_color"),1, &(colors[i].x));
  glUniform3fv(shader("light_position"),1,&(lightPosOS.x));
  glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_SHORT, 0);
}
glBindVertexArray(sphereVAOID);
glm::mat4 T = glm::translate(glm::mat4(1), glm::vec3(0,1,0));
glm::mat4 M = T;
glm::mat4 MV = View*M;
glm::mat4 MVP = Proj*MV;
glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(MVP));
glUniformMatrix4fv(shader("MV"), 1, GL_FALSE, glm::value_ptr(MV));
glUniformMatrix3fv(shader("N"), 1, GL_FALSE, glm::value_ptr(glm::inverseTranspose(glm::mat3(MV))));
glUniform3f(shader("diffuse_color"), 0.9f, 0.9f, 1.0f);
glUniform3fv(shader("light_position"),1, &(lightPosOS.x));
glDrawElements(GL_TRIANGLES, totalSphereTriangles, GL_UNSIGNED_SHORT, 0);
shader.UnUse();
glBindVertexArray(0);
grid->Render(glm::value_ptr(Proj*View));

How it works…

vec4 vEyeSpaceLightPosition = MV*vec4(light_position,1);
vec4 vEyeSpacePosition = MV*vec4(vVertex,1);

vec3 vEyeSpaceNormal = normalize(N*vNormal);

Tip

vec3 L = normalize(vEyeSpaceLightPosition.xyz-vEyeSpacePosition.xyz);
float diffuse = max(0, dot(vEyeSpaceNormal, L));

We also calculate two additional vectors, the view vector (V) and the half-way vector (H) between the light and the view vector.

  vec3 V = normalize(vEyeSpaceCameraPosition.xyz-vEyeSpacePosition.xyz);
  vec3 H = normalize(L+V);

float specular = max(0, pow(dot(vEyeSpaceNormal, H), shininess));

The final color is then obtained by multiplying the diffuse value with the diffuse color and the specular value with the specular color.

color =  diffuse*vec4( diffuse_color, 1) + specular*vec4(specular_color, 1);

The fragment shader in the per-vertex lighting simply outputs the per-vertex color interpolated by the rasterizer as the current fragment color.

smooth in vec4 color;
void main() {
  vFragColor = color;
}

#version 330 core
layout(location=0) in vec3 vVertex;
layout(location=1) in vec3 vNormal;
uniform mat4 MVP;
uniform mat4 MV;
uniform mat3 N;
smooth out vec3 vEyeSpaceNormal;
smooth out vec3 vEyeSpacePosition;
void main()
{
  vEyeSpacePosition = (MV*vec4(vVertex,1)).xyz;
  vEyeSpaceNormal   = N*vNormal;
  gl_Position = MVP*vec4(vVertex,1);
}

In the fragment shader, the rest of the calculation, including the diffuse and specular component contributions, is carried out.

#version 330 core
layout(location=0) out vec4 vFragColor; 
uniform vec3 light_position;  //light position in object space
uniform vec3 diffuse_color;
uniform vec3 specular_color;
uniform float shininess;
uniform mat4 MV;
smooth in vec3 vEyeSpaceNormal;
smooth in vec3 vEyeSpacePosition;
const vec3 vEyeSpaceCameraPosition = vec3(0,0,0);

void main() {
  vec3 vEyeSpaceLightPosition=(MV*vec4(light_position,1)).xyz;
  vec3 N = normalize(vEyeSpaceNormal);
  vec3 L = normalize(vEyeSpaceLightPosition-vEyeSpacePosition);
  vec3 V = normalize(vEyeSpaceCameraPosition.xyz-vEyeSpacePosition.xyz);
  vec3 H = normalize(L+V);
  float diffuse = max(0, dot(N, L));
  float specular = max(0, pow(dot(N, H), shininess));
  vFragColor = diffuse*vec4(diffuse_color,1) + specular*vec4(specular_color, 1);
}

vec3 vEyeSpaceLightPosition = (MV * vec4(light_position,1)).xyz;
vec3 N = normalize(vEyeSpaceNormal);
vec3 L = normalize(vEyeSpaceLightPosition-vEyeSpacePosition);
vec3 V = normalize(vEyeSpaceCameraPosition.xyz-vEyeSpacePosition.xyz);
vec3 H = normalize(L+V);

Next, the diffuse component is calculated using the dot product with the eye space normal.

float diffuse = max(0, dot(vEyeSpaceNormal, L));

The specular component is calculated as in the per-vertex case.

float specular = max(0, pow(dot(N, H), shininess));

vFragColor = diffuse*vec4(diffuse_color,1) + specular*vec4(specular_color, 1);

There's more…

Now, let us see the result of the same demo application implementing per-fragment lighting:

Note how the per-fragment lighting gives a smoother result compared to the per-vertex lighting. In addition, the specular component is clearly visible.

How it works…

vec4 vEyeSpaceLightPosition = MV*vec4(light_position,1);
vec4 vEyeSpacePosition = MV*vec4(vVertex,1);

vec3 vEyeSpaceNormal = normalize(N*vNormal);

Tip

vec3 L = normalize(vEyeSpaceLightPosition.xyz-vEyeSpacePosition.xyz);
float diffuse = max(0, dot(vEyeSpaceNormal, L));

We also calculate two additional vectors, the view vector (V) and the half-way vector (H) between the light and the view vector.

  vec3 V = normalize(vEyeSpaceCameraPosition.xyz-vEyeSpacePosition.xyz);
  vec3 H = normalize(L+V);

float specular = max(0, pow(dot(vEyeSpaceNormal, H), shininess));

The final color is then obtained by multiplying the diffuse value with the diffuse color and the specular value with the specular color.

color =  diffuse*vec4( diffuse_color, 1) + specular*vec4(specular_color, 1);

The fragment shader in the per-vertex lighting simply outputs the per-vertex color interpolated by the rasterizer as the current fragment color.

smooth in vec4 color;
void main() {
  vFragColor = color;
}

#version 330 core
layout(location=0) in vec3 vVertex;
layout(location=1) in vec3 vNormal;
uniform mat4 MVP;
uniform mat4 MV;
uniform mat3 N;
smooth out vec3 vEyeSpaceNormal;
smooth out vec3 vEyeSpacePosition;
void main()
{
  vEyeSpacePosition = (MV*vec4(vVertex,1)).xyz;
  vEyeSpaceNormal   = N*vNormal;
  gl_Position = MVP*vec4(vVertex,1);
}

In the fragment shader, the rest of the calculation, including the diffuse and specular component contributions, is carried out.

#version 330 core
layout(location=0) out vec4 vFragColor; 
uniform vec3 light_position;  //light position in object space
uniform vec3 diffuse_color;
uniform vec3 specular_color;
uniform float shininess;
uniform mat4 MV;
smooth in vec3 vEyeSpaceNormal;
smooth in vec3 vEyeSpacePosition;
const vec3 vEyeSpaceCameraPosition = vec3(0,0,0);

void main() {
  vec3 vEyeSpaceLightPosition=(MV*vec4(light_position,1)).xyz;
  vec3 N = normalize(vEyeSpaceNormal);
  vec3 L = normalize(vEyeSpaceLightPosition-vEyeSpacePosition);
  vec3 V = normalize(vEyeSpaceCameraPosition.xyz-vEyeSpacePosition.xyz);
  vec3 H = normalize(L+V);
  float diffuse = max(0, dot(N, L));
  float specular = max(0, pow(dot(N, H), shininess));
  vFragColor = diffuse*vec4(diffuse_color,1) + specular*vec4(specular_color, 1);
}

vec3 vEyeSpaceLightPosition = (MV * vec4(light_position,1)).xyz;
vec3 N = normalize(vEyeSpaceNormal);
vec3 L = normalize(vEyeSpaceLightPosition-vEyeSpacePosition);
vec3 V = normalize(vEyeSpaceCameraPosition.xyz-vEyeSpacePosition.xyz);
vec3 H = normalize(L+V);

Next, the diffuse component is calculated using the dot product with the eye space normal.

float diffuse = max(0, dot(vEyeSpaceNormal, L));

The specular component is calculated as in the per-vertex case.

float specular = max(0, pow(dot(N, H), shininess));

vFragColor = diffuse*vec4(diffuse_color,1) + specular*vec4(specular_color, 1);

There's more…

Now, let us see the result of the same demo application implementing per-fragment lighting:

Note how the per-fragment lighting gives a smoother result compared to the per-vertex lighting. In addition, the specular component is clearly visible.

There's more…

Now, let us see the result of the same demo application implementing per-fragment lighting:

Note how the per-fragment lighting gives a smoother result compared to the per-vertex lighting. In addition, the specular component is clearly visible.

Implementing per-fragment directional light

In this recipe, we will now implement directional light. The only difference between a point light and a directional light is that in the case of the directional light source, there is no position, however, there is direction, as shown in the following figure.

The figure compares directional and point light sources. For a point light source (left-hand side image), the light vector at each vertex is variable, depending on the relative positioning of the vertex with respect to the point light source. For directional light source (right-hand side image), all of the light vectors at vertices are the same and they all point in the direction of the directional light source.

Getting started

We will build on the geometry handling code from the per-fragment lighting recipe, but, instead of the pulsating cubes, we will now render a single cube with a sphere. The code for this recipe is contained in the Chapter4/DirectionalLight folder. The same code also works for per-vertex directional light.

How to do it…

Let us start the recipe by following these simple steps:

Calculate the light direction in eye space and pass it as shader uniform. Note that the last component is 0 since now we have a light direction vector.
```
lightDirectionES = glm::vec3(MV*glm::vec4(lightDirectionOS,0));
```

In the vertex shader, output the eye space normal.

#version 330 core
layout(location=0) in vec3 vVertex;
layout(location=1) in vec3 vNormal;
uniform mat4 MVP;
uniform mat3 N;
smooth out vec3 vEyeSpaceNormal;
void main()
{
  vEyeSpaceNormal = N*vNormal;
  gl_Position = MVP*vec4(vVertex,1);
}

In the fragment shader, compute the diffuse component by calculating the dot product between the light direction vector in eye space with the eye space normal, and multiply with the diffuse color to get the fragment color. Note that here, the light vector is independent of the eye space vertex position.
```
#version 330 core
layout(location=0) out vec4 vFragColor;
uniform vec3 light_direction;
uniform vec3 diffuse_color;
smooth in vec3 vEyeSpaceNormal;
void main() {
  vec3 L = (light_direction);
  float diffuse = max(0, dot(vEyeSpaceNormal, L));
  vFragColor =  diffuse*vec4(diffuse_color,1);
}
```

How it works…

The only difference between this recipe and the previous one is that we now pass the light direction instead of the position to the fragment shader. The rest of the calculation remains unchanged. If we want to apply attenuation, we can add the relevant shader snippets from the previous recipe.

There's more…

The demo application implementing this recipe shows a sphere and a cube object. In this demo, the direction of the light is shown by using a line segment at origin. The direction of the light can be changed using the right mouse button. The output from this demo application is shown in the following screenshot:

How to do it…

Let us start the recipe by following these simple steps:

Calculate the light direction in eye space and pass it as shader uniform. Note that the last component is 0 since now we have a light direction vector.
```
lightDirectionES = glm::vec3(MV*glm::vec4(lightDirectionOS,0));
```

In the vertex shader, output the eye space normal.

#version 330 core
layout(location=0) in vec3 vVertex;
layout(location=1) in vec3 vNormal;
uniform mat4 MVP;
uniform mat3 N;
smooth out vec3 vEyeSpaceNormal;
void main()
{
  vEyeSpaceNormal = N*vNormal;
  gl_Position = MVP*vec4(vVertex,1);
}

In the fragment shader, compute the diffuse component by calculating the dot product between the light direction vector in eye space with the eye space normal, and multiply with the diffuse color to get the fragment color. Note that here, the light vector is independent of the eye space vertex position.
```
#version 330 core
layout(location=0) out vec4 vFragColor;
uniform vec3 light_direction;
uniform vec3 diffuse_color;
smooth in vec3 vEyeSpaceNormal;
void main() {
  vec3 L = (light_direction);
  float diffuse = max(0, dot(vEyeSpaceNormal, L));
  vFragColor =  diffuse*vec4(diffuse_color,1);
}
```

How it works…

There's more…

How it works…

There's more…

Implementing per-fragment point light with attenuation

The previous recipe handled a directional light source but without attenuation. The relevant changes to enable per-fragment point light with attenuation will be given in this recipe. We start by implementing per-fragment point light, as in the Implementing per-vertex and per-fragment point lighting recipe.

Getting started

The code for this recipe is contained in the Chapter4/PointLight folder.

How to do it…

Implementing per-fragment point light is demonstrated by following these steps:

From the vertex shader, output the eye space vertex position and normal.

#version 330 core
layout(location=0) in vec3 vVertex;
layout(location=1) in vec3 vNormal;
uniform mat4 MVP;
uniform mat4 MV;
uniform mat3 N;
smooth out vec3 vEyeSpaceNormal;
smooth out vec3 vEyeSpacePosition;

void main() {
    vEyeSpacePosition = (MV*vec4(vVertex,1)).xyz;
    vEyeSpaceNormal   = N*vNormal;
    gl_Position = MVP*vec4(vVertex,1);
}

In the fragment shader, calculate the light position in eye space, and then calculate the vector from the eye space vertex position to the eye space light position. Store the light distance before normalizing the light vector.

#version 330 core
layout(location=0) out vec4 vFragColor;
uniform vec3 light_position;  //light position in object space
uniform vec3 diffuse_color;
uniform mat4 MV;
smooth in vec3 vEyeSpaceNormal;
smooth in vec3 vEyeSpacePosition;
const float k0 = 1.0;  //constant attenuation
const float k1 = 0.0;  //linear attenuation
const float k2 = 0.0;  //quadratic attenuation

void main() {
  vec3 vEyeSpaceLightPosition = (MV*vec4(light_position,1)).xyz;
  vec3 L = (vEyeSpaceLightPosition-vEyeSpacePosition);
  float d = length(L);
  L = normalize(L);
  float diffuse = max(0, dot(vEyeSpaceNormal, L));
  float attenuationAmount = 1.0/(k0 + (k1*d) + (k2*d*d));
  diffuse *= attenuationAmount;
  vFragColor = diffuse*vec4(diffuse_color,1);
}

Apply attenuation based on the distance from the light source to the diffuse component.
```
float attenuationAmount = 1.0/(k0 + (k1*d) + (k2*d*d));
diffuse *= attenuationAmount;
```
Multiply the diffuse component to the diffuse color and set it as the fragment color.
```
vFragColor = diffuse*vec4(diffuse_color,1);
```

How it works…

The recipe follows the Implementing per-fragment directional light recipe. In addition, it performs the attenuation calculation. The attenuation of light is calculated by using the following formula:

Here, d is the distance from the current position to the light source and k1, k2, and k3 are the constant, linear, and quadratic attenuation coefficients respectively. For details about the values and their effect on lighting, we recommend the references in the See also section.

There's more…

The output from the demo application implementing this recipe is given in the following screenshot. In this recipe, we render a cube and a sphere. The position of light is shown using a crosshair on the screen. The camera position can be changed using the left mouse button and the light position can be changed by using the right mouse button. The light distance can be changed by using the mouse wheel.

How to do it…

Implementing per-fragment point light is demonstrated by following these steps:

From the vertex shader, output the eye space vertex position and normal.

#version 330 core
layout(location=0) in vec3 vVertex;
layout(location=1) in vec3 vNormal;
uniform mat4 MVP;
uniform mat4 MV;
uniform mat3 N;
smooth out vec3 vEyeSpaceNormal;
smooth out vec3 vEyeSpacePosition;

void main() {
    vEyeSpacePosition = (MV*vec4(vVertex,1)).xyz;
    vEyeSpaceNormal   = N*vNormal;
    gl_Position = MVP*vec4(vVertex,1);
}

#version 330 core
layout(location=0) out vec4 vFragColor;
uniform vec3 light_position;  //light position in object space
uniform vec3 diffuse_color;
uniform mat4 MV;
smooth in vec3 vEyeSpaceNormal;
smooth in vec3 vEyeSpacePosition;
const float k0 = 1.0;  //constant attenuation
const float k1 = 0.0;  //linear attenuation
const float k2 = 0.0;  //quadratic attenuation

void main() {
  vec3 vEyeSpaceLightPosition = (MV*vec4(light_position,1)).xyz;
  vec3 L = (vEyeSpaceLightPosition-vEyeSpacePosition);
  float d = length(L);
  L = normalize(L);
  float diffuse = max(0, dot(vEyeSpaceNormal, L));
  float attenuationAmount = 1.0/(k0 + (k1*d) + (k2*d*d));
  diffuse *= attenuationAmount;
  vFragColor = diffuse*vec4(diffuse_color,1);
}

Apply attenuation based on the distance from the light source to the diffuse component.
```
float attenuationAmount = 1.0/(k0 + (k1*d) + (k2*d*d));
diffuse *= attenuationAmount;
```
Multiply the diffuse component to the diffuse color and set it as the fragment color.
```
vFragColor = diffuse*vec4(diffuse_color,1);
```

How it works…

There's more…

How it works…

There's more…

Implementing per-fragment spot light

We will now implement per-fragment spot light. Spot light is a special point light that emits light in a directional cone. The size of this cone is determined by the spot cutoff amount, which is given in angles, as shown in the following figure. In addition, the sharpness of the spot is controlled by the parameter spot exponent. A higher value of the exponent gives a sharper falloff and vice versa.

Getting started

The code for this recipe is contained in the Chapter4/SpotLight directory. The vertex shader is the same as in the point light recipe. The fragment shader calculates the diffuse component, as in the Implementing per-vertex and per-fragment point lighting recipe.

How to do it…

Let us start this recipe by following these simple steps:

From the light's object space position and spot light target's position, calculate the spot light direction vector in eye space.
```
spotDirectionES  = glm::normalize(glm::vec3(MV*glm::vec4(spotPositionOS-lightPosOS,0)))
```
In the fragment shader, calculate the diffuse component as in point light. In addition, calculate the spot effect by finding the angle between the light direction and the spot direction vector.
```
vec3 L = (light_position.xyz-vEyeSpacePosition);
float d = length(L);
L = normalize(L);
vec3 D = normalize(spot_direction);
vec3 V = -L;
float diffuse = 1;
float spotEffect = dot(V,D);
```

If the angle is greater than the spot cutoff, apply the spot exponent and then use the diffuse shader on the fragment.

if(spotEffect > spot_cutoff) {
  spotEffect = pow(spotEffect, spot_exponent);
  diffuse = max(0, dot(vEyeSpaceNormal, L));
  float attenuationAmount = spotEffect/(k0 + (k1*d) + (k2*d*d));
  diffuse *= attenuationAmount;
  vFragColor = diffuse*vec4(diffuse_color,1);
}

How it works…

The spot light is a special point light source that illuminates in a certain cone of direction. The amount of cone and the sharpness is controlled using the spot cutoff and spot exponent parameters respectively. Similar to the point light source, we first calculate the diffuse component. Instead of using the vector to light source (L) we use the opposite vector, which points in the direction of light (V=-L). Then we find out if the angle between the spot direction and the light direction vector is within the cutoff angle range. If it is, we apply the diffuse shading calculation. In addition, the sharpness of the spot light is controlled using the spot exponent parameter. This reduces the light in a falloff, giving a more pleasing spot light effect.

There's more…

The demo application implementing this recipe renders the same scene as in the point light demo. We can change the spot light direction using the right mouse button. The output result is shown in the following figure:

How to do it…

Let us start this recipe by following these simple steps:

From the light's object space position and spot light target's position, calculate the spot light direction vector in eye space.
```
spotDirectionES  = glm::normalize(glm::vec3(MV*glm::vec4(spotPositionOS-lightPosOS,0)))
```
In the fragment shader, calculate the diffuse component as in point light. In addition, calculate the spot effect by finding the angle between the light direction and the spot direction vector.
```
vec3 L = (light_position.xyz-vEyeSpacePosition);
float d = length(L);
L = normalize(L);
vec3 D = normalize(spot_direction);
vec3 V = -L;
float diffuse = 1;
float spotEffect = dot(V,D);
```

If the angle is greater than the spot cutoff, apply the spot exponent and then use the diffuse shader on the fragment.

if(spotEffect > spot_cutoff) {
  spotEffect = pow(spotEffect, spot_exponent);
  diffuse = max(0, dot(vEyeSpaceNormal, L));
  float attenuationAmount = spotEffect/(k0 + (k1*d) + (k2*d*d));
  diffuse *= attenuationAmount;
  vFragColor = diffuse*vec4(diffuse_color,1);
}

How it works…

There's more…

How it works…

There's more…

Implementing shadow mapping with FBO

Shadows give important cues about the relative positioning of graphical objects. There are myriads of shadow generation techniques, including shadow volumes, shadow maps, cascaded shadow maps, and so on. An excellent reference on several shadow generation techniques is given in the See also section. We will now see how to carry out basic shadow mapping using FBO.

Getting started

For this recipe, we will use the previous scene but instead of a grid object, we will use a plane object so that the generated shadows can be seen. The code for this recipe is contained in the Chapter4/ShadowMapping directory.

How to do it…

Let us start with this recipe by following these simple steps:

Create an OpenGL texture object which will be our shadow map texture. Make sure to set the clamp mode to GL_CLAMP_TO_BORDER, set the border color to {1,0,0,0}, give the texture comparison mode to GL_COMPARE_REF_TO_TEXTURE, and set the compare function to GL_LEQUAL. Set the texture internal format to GL_DEPTH_COMPONENT24.

glGenTextures(1, &shadowMapTexID);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, shadowMapTexID);
GLfloat border[4]={1,0,0,0};
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S,GL_CLAMP_TO_BORDER);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T,GL_CLAMP_TO_BORDER);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_COMPARE_MODE,GL_COMPARE_REF_TO_TEXTURE);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_COMPARE_FUNC,GL_LEQUAL);
glTexParameterfv(GL_TEXTURE_2D,GL_TEXTURE_BORDER_COLOR,border);
glTexImage2D(GL_TEXTURE_2D,0,GL_DEPTH_COMPONENT24,SHADOWMAP_WIDTH,SHADOWMAP_HEIGHT,0,GL_DEPTH_COMPONENT,GL_UNSIGNED_BYTE,NULL);

Set up an FBO and use the shadow map texture as a single depth attachment. This will store the scene's depth from the point of view of light.

glGenFramebuffers(1,&fboID);
glBindFramebuffer(GL_FRAMEBUFFER,fboID);
glFramebufferTexture2D(GL_FRAMEBUFFER,GL_DEPTH_ATTACHMENT,GL_TEXTURE_2D,shadowMapTexID,0);
GLenum status = glCheckFramebufferStatus(GL_FRAMEBUFFER);
if(status == GL_FRAMEBUFFER_COMPLETE) {
  cout<<"FBO setup successful."<<endl;
} else {
  cout<<"Problem in FBO setup."<<endl;
}
glBindFramebuffer(GL_FRAMEBUFFER,0);

Using the position and the direction
of the light, set up the shadow matrix (S) by combining the light modelview matrix (MV_L), projection matrix (P_L), and bias matrix (B). For reducing runtime calculation, we store the combined projection and bias matrix (BP) at initialization.
```
MV_L = glm::lookAt(lightPosOS,glm::vec3(0,0,0), glm::vec3(0,1,0));
P_L  = glm::perspective(50.0f,1.0f,1.0f, 25.0f);
B    = glm::scale(glm::translate(glm::mat4(1), glm::vec3(0.5,0.5,0.5)),glm::vec3(0.5,0.5,0.5));
BP   = B*P_L;
S    = BP*MV_L;
```
Bind the FBO and render the scene from the point of view of the light. Make sure to enable front-face culling (glEnable(GL_CULL_FACE) and glCullFace(GL_FRONT)) so that the back-face depth values are rendered. Otherwise our objects will suffer from shadow acne.
Tip
Normally, a simple shader could be used for rendering of a scene in the depth texture. This may also be achieved by disabling writing to the color buffer (glDrawBuffer(GL_NONE)) and then enabling it for normal rendering. In addition, an offset bias can also be added in the shader code to reduce shadow acne.
```
glBindFramebuffer(GL_FRAMEBUFFER,fboID);
glClear(GL_DEPTH_BUFFER_BIT);
glViewport(0,0,SHADOWMAP_WIDTH, SHADOWMAP_HEIGHT);
glCullFace(GL_FRONT);
DrawScene(MV_L, P_L);
glCullFace(GL_BACK);
```
Disable FBO, restore default
viewport, and render the scene normally from the point of view of the camera.
```
glBindFramebuffer(GL_FRAMEBUFFER,0);
glViewport(0,0,WIDTH, HEIGHT);
DrawScene(MV, P, 0 );
```

In the vertex shader, multiply the world space vertex positions (M*vec4(vVertex,1)) with the shadow matrix (S) to obtain the shadow coordinates. These will be used for lookup of the depth values from the shadowmap texture in the fragment shader.

#version 330 core
layout(location=0) in vec3 vVertex;
layout(location=1) in vec3 vNormal;

uniform mat4 MVP;   //modelview projection matrix
uniform mat4 MV;    //modelview matrix
uniform mat4 M;     //model matrix
uniform mat3 N;     //normal matrix
uniform mat4 S;     //shadow matrix
smooth out vec3 vEyeSpaceNormal;
smooth out vec3 vEyeSpacePosition;
smooth out vec4 vShadowCoords;
void main()
{
  vEyeSpacePosition = (MV*vec4(vVertex,1)).xyz;
  vEyeSpaceNormal   = N*vNormal;
  vShadowCoords     = S*(M*vec4(vVertex,1));
  gl_Position       = MVP*vec4(vVertex,1);
}

In the fragment shader, use the shadow coordinates to lookup the depth value in the shadow map sampler which is of the sampler2Dshadow type. This sampler can be used with the textureProj function to return a comparison outcome. We then use the comparison result to darken the diffuse component, simulating shadows.

#version 330 core
layout(location=0) out vec4 vFragColor;
uniform sampler2DShadow shadowMap;
uniform vec3 light_position;  //light position in eye space
uniform vec3 diffuse_color;
smooth in vec3 vEyeSpaceNormal;
smooth in vec3 vEyeSpacePosition;
smooth in vec4 vShadowCoords;
const float k0 = 1.0;  //constant attenuation
const float k1 = 0.0;  //linear attenuation
const float k2 = 0.0;  //quadratic attenuation
uniform bool bIsLightPass; //no shadows in light pass
void main() {
  if(bIsLightPass)
  return;
  vec3 L = (light_position.xyz-vEyeSpacePosition);
  float d = length(L);
  L = normalize(L);
  float attenuationAmount = 1.0/(k0 + (k1*d) + (k2*d*d));
  float diffuse = max(0, dot(vEyeSpaceNormal, L)) * attenuationAmount;
  if(vShadowCoords.w>1) {
    float shadow = textureProj(shadowMap, vShadowCoords);
    diffuse = mix(diffuse, diffuse*shadow, 0.5);
  }
  vFragColor = diffuse*vec4(diffuse_color, 1);
}

How it works…

The shadow mapping algorithm works in two passes. In the first pass, the scene is rendered from the point of view of light, and the depth buffer is stored into a texture called shadowmap. We use a single FBO with a depth attachment for this purpose. Apart from the conventional minification/magnification texture filtering, we set the texture wrapping mode to GL_CLAMP_TO_BORDER, which ensures that the values are clamped to the specified border color. Had we set this as GL_CLAMP or GL_CLAMP_TO_EDGE, the border pixels forming the shadow map would produce visible artefacts.

The shadowmap texture has some additional parameters. The first is the GL_TEXTURE_COMPARE_MODE parameter, which is set as the GL_COMPARE_REF_TO_TEXTURE value. This enables the texture to be used for depth comparison in the shader. Next, we specify the GL_TEXTURE_COMPARE_FUNC parameter, which is set as GL_LEQUAL. This compares the currently interpolated texture coordinate value (r) with the depth texture's sample value (D). It returns 1 if r<=D, otherwise it returns 0. This means that if the depth of the current sample is less than or equal to the depth from the shadowmap texture, the sample is not in shadow; otherwise, it is in shadow. The textureProj GLSL shader function performs this comparison for us and returns 0 or 1 based on whether the point is in shadow or not. These are the texture parameters required for the shadowmap texture.

To ensure that we do not have any shadow acne, we enable front-face culling (glEnable(GL_CULL_FACE) and glCullFace(GL_FRONT)) so that the back-face depth values get written to the shadowmap texture. In the second pass, the scene is rendered normally from the point of view of the camera and the shadow map is projected on the scene geometry using shaders.

To render the scene from the point of view of light, the modelview matrix of the light (MV_L), the projection matrix (P_L), and the bias matrix (B) are calculated. After multiplying with the projection matrix, the coordinates are in clip space (that is, they range from [-1,-1,-1]). to [1,1,1]. The bias matrix rescales this range to bring the coordinates from [0,0,0] to [1,1,1] range so that the shadow lookup can be carried out.

If we have the object's vertex position in the object space given as Vobj, the shadow coordinates (UVproj) for the lookup in the shadow map can be given by multiplying the shadow matrix (S) with the world space position of the object (M*Vobj). The whole series of transformations is given as follows:

Here, B is the bias matrix, P L is the projection matrix of light, and MV L is the modelview matrix of light. For efficiency, we precompute the bias matrix of the light and the projection matrix, since they are unchanged for the lifetime of the application. Based on the user input, the light's modelview is modified and then the shadow matrix is recalculated. This is then passed to the shader.

In the vertex shader, the shadowmap texture coordinates are obtained by multiplying the world space vertex position (M*Vobj) with the shadow matrix (S). In the fragment shader, the shadow map is looked up using the projected texture coordinate to find if the current fragment is in shadow. Before the texture lookup, we check the value of the w coordinate of the projected texture coordinate. We only do our calculations if the w coordinate is greater than 1. This ensures that we only accept the forward projection and reject the back projection. Try removing this condition to see what we mean.

The shadow map lookup computation is facilitated by the textureProj GLSL function. The result from the shadow map lookup returns 1 or 0. This result is multiplied with the shading computation. As it happens in the real world, we never have coal black shadows. Therefore, we combine the shadow outcome with the shading computation by using the mix GLSL function.

There's more…

The demo application for this recipe shows a plane, a cube, and a sphere. A point light source, which can be rotated using the right mouse button, is placed. The distance of the light source can be altered using the mouse wheel. The output result from the demo is displayed in the following figure:

This recipe detailed the shadow mapping technique for a single light source. With each additional light source, the processing, as well as storage requirements, increase.

How to do it…

Let us start with this recipe by following these simple steps:

glGenTextures(1, &shadowMapTexID);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, shadowMapTexID);
GLfloat border[4]={1,0,0,0};
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S,GL_CLAMP_TO_BORDER);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T,GL_CLAMP_TO_BORDER);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_COMPARE_MODE,GL_COMPARE_REF_TO_TEXTURE);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_COMPARE_FUNC,GL_LEQUAL);
glTexParameterfv(GL_TEXTURE_2D,GL_TEXTURE_BORDER_COLOR,border);
glTexImage2D(GL_TEXTURE_2D,0,GL_DEPTH_COMPONENT24,SHADOWMAP_WIDTH,SHADOWMAP_HEIGHT,0,GL_DEPTH_COMPONENT,GL_UNSIGNED_BYTE,NULL);

Set up an FBO and use the shadow map texture as a single depth attachment. This will store the scene's depth from the point of view of light.

glGenFramebuffers(1,&fboID);
glBindFramebuffer(GL_FRAMEBUFFER,fboID);
glFramebufferTexture2D(GL_FRAMEBUFFER,GL_DEPTH_ATTACHMENT,GL_TEXTURE_2D,shadowMapTexID,0);
GLenum status = glCheckFramebufferStatus(GL_FRAMEBUFFER);
if(status == GL_FRAMEBUFFER_COMPLETE) {
  cout<<"FBO setup successful."<<endl;
} else {
  cout<<"Problem in FBO setup."<<endl;
}
glBindFramebuffer(GL_FRAMEBUFFER,0);

Using the position and the direction
of the light, set up the shadow matrix (S) by combining the light modelview matrix (MV_L), projection matrix (P_L), and bias matrix (B). For reducing runtime calculation, we store the combined projection and bias matrix (BP) at initialization.
```
MV_L = glm::lookAt(lightPosOS,glm::vec3(0,0,0), glm::vec3(0,1,0));
P_L  = glm::perspective(50.0f,1.0f,1.0f, 25.0f);
B    = glm::scale(glm::translate(glm::mat4(1), glm::vec3(0.5,0.5,0.5)),glm::vec3(0.5,0.5,0.5));
BP   = B*P_L;
S    = BP*MV_L;
```
Bind the FBO and render the scene from the point of view of the light. Make sure to enable front-face culling (glEnable(GL_CULL_FACE) and glCullFace(GL_FRONT)) so that the back-face depth values are rendered. Otherwise our objects will suffer from shadow acne.
Tip
Normally, a simple shader could be used for rendering of a scene in the depth texture. This may also be achieved by disabling writing to the color buffer (glDrawBuffer(GL_NONE)) and then enabling it for normal rendering. In addition, an offset bias can also be added in the shader code to reduce shadow acne.
```
glBindFramebuffer(GL_FRAMEBUFFER,fboID);
glClear(GL_DEPTH_BUFFER_BIT);
glViewport(0,0,SHADOWMAP_WIDTH, SHADOWMAP_HEIGHT);
glCullFace(GL_FRONT);
DrawScene(MV_L, P_L);
glCullFace(GL_BACK);
```
Disable FBO, restore default
viewport, and render the scene normally from the point of view of the camera.
```
glBindFramebuffer(GL_FRAMEBUFFER,0);
glViewport(0,0,WIDTH, HEIGHT);
DrawScene(MV, P, 0 );
```

#version 330 core
layout(location=0) in vec3 vVertex;
layout(location=1) in vec3 vNormal;

uniform mat4 MVP;   //modelview projection matrix
uniform mat4 MV;    //modelview matrix
uniform mat4 M;     //model matrix
uniform mat3 N;     //normal matrix
uniform mat4 S;     //shadow matrix
smooth out vec3 vEyeSpaceNormal;
smooth out vec3 vEyeSpacePosition;
smooth out vec4 vShadowCoords;
void main()
{
  vEyeSpacePosition = (MV*vec4(vVertex,1)).xyz;
  vEyeSpaceNormal   = N*vNormal;
  vShadowCoords     = S*(M*vec4(vVertex,1));
  gl_Position       = MVP*vec4(vVertex,1);
}

#version 330 core
layout(location=0) out vec4 vFragColor;
uniform sampler2DShadow shadowMap;
uniform vec3 light_position;  //light position in eye space
uniform vec3 diffuse_color;
smooth in vec3 vEyeSpaceNormal;
smooth in vec3 vEyeSpacePosition;
smooth in vec4 vShadowCoords;
const float k0 = 1.0;  //constant attenuation
const float k1 = 0.0;  //linear attenuation
const float k2 = 0.0;  //quadratic attenuation
uniform bool bIsLightPass; //no shadows in light pass
void main() {
  if(bIsLightPass)
  return;
  vec3 L = (light_position.xyz-vEyeSpacePosition);
  float d = length(L);
  L = normalize(L);
  float attenuationAmount = 1.0/(k0 + (k1*d) + (k2*d*d));
  float diffuse = max(0, dot(vEyeSpaceNormal, L)) * attenuationAmount;
  if(vShadowCoords.w>1) {
    float shadow = textureProj(shadowMap, vShadowCoords);
    diffuse = mix(diffuse, diffuse*shadow, 0.5);
  }
  vFragColor = diffuse*vec4(diffuse_color, 1);
}

How it works…

There's more…

This recipe detailed the shadow mapping technique for a single light source. With each additional light source, the processing, as well as storage requirements, increase.

How it works…

There's more…

This recipe detailed the shadow mapping technique for a single light source. With each additional light source, the processing, as well as storage requirements, increase.

There's more…

This recipe detailed the shadow mapping technique for a single light source. With each additional light source, the processing, as well as storage requirements, increase.

Implemeting shadow mapping with percentage closer filtering (PCF)

The shadow mapping algorithm, though simple to implement, suffers from aliasing artefacts, which are due to the shadowmap resolution. In addition, the shadows produced using this approach are hard. These can be minimized either by increasing the shadowmap resolution or taking more samples. The latter approach is called percentage closer filtering (PCF), where more samples are taken for the shadowmap lookup and the percentage of the samples is used to estimate if a fragment is in shadow. Thus, in PCF, instead of a single lookup, we sample an n×n neighborhood of shadowmap and then average the values.

Getting started

The code for this recipe is contained in the Chapter4/ShadowMappingPCF directory. It builds on top of the previous recipe, Implementing shadow mapping with FBO. We use the same scene but augment it with PCF.

How to do it…

Let us see how to extend the basic shadow mapping with PCF.

Change the shadowmap texture minification/magnification filtering modes to GL_LINEAR. Here, we exploit the texture filtering capabilities of the GPU to reduce aliasing artefacts during sampling of the shadow map. Even with the linear filtering support, we have to take additional samples to reduce the artefacts.
```
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
```

In the fragment shader, instead of a single texture lookup as in the shadow map recipe, we use a number of samples. GLSL provides a convenient function, textureProjOffset, to allow calculation of samples using an offset. For this recipe, we look at a 3×3 neighborhood around the current shadow map point. Hence, we use a large offset of 2. This helps to reduce sampling artefacts.

if(vShadowCoords.w>1) {
  float sum = 0;
  sum += textureProjOffset(shadowMap,vShadowCoords,ivec2(-2,-2));
  sum += textureProjOffset(shadowMap,vShadowCoords,ivec2(-2, 0));
  sum += textureProjOffset(shadowMap,vShadowCoords,ivec2(-2, 2));
  sum += textureProjOffset(shadowMap,vShadowCoords,ivec2( 0,-2));
  sum += textureProjOffset(shadowMap,vShadowCoords,ivec2( 0, 0));
  sum += textureProjOffset(shadowMap,vShadowCoords,ivec2( 0, 2));
  sum += textureProjOffset(shadowMap,vShadowCoords,ivec2( 2,-2));
  sum += textureProjOffset(shadowMap,vShadowCoords,ivec2( 2, 0));
  sum += textureProjOffset(shadowMap,vShadowCoords,ivec2( 2, 2));
  float shadow = sum/9.0;
  diffuse = mix(diffuse, diffuse*shadow, 0.5);
}

How it works…

In order to implement PCF, the first change we need is to set the texture filtering mode to linear filtering. This change enabled the GPU to bilinearly interpolate the shadow value. This gives smoother edges since the hardware does PCF filtering underneath. However it is not enough for our purpose. Therefore, we have to take additional samples to improve the result.

Fortunately, we can use a convenient function, textureProjOffset, which accepts an offset that is added to the given shadow map texture coordinate. Note that the offset given to this function must be a constant literal. Thus, we cannot use a loop variable for dynamic sampling of the shadow map sampler. We, therefore, have to unroll the loop to sample the neighborhood.

We use an offset of 2 units because we wanted to sample at a value of 1.5. However, since the textureProjOffset function does not accept a floating point value, we round it to the nearest integer. The offset is then modified to move to the next sample point until the entire 3×3 neighborhood is sampled. We then average the sampling result for the entire neighborhood. The obtained sampling result is then multiplied to the lighting contribution, thus, producing shadows if the current sample happens to be in an occluded region.

Even with adding additional samples, we get sampling artefacts. These can be reduced by shifting the sampling points randomly. To achieve this, we first implement a pseudo-random function in GLSL as follows:

float random(vec4 seed) {
  float dot_product = dot(seed, vec4(12.9898,78.233, 45.164, 94.673));
  return fract(sin(dot_product) * 43758.5453);
}

Then, the sampling for PCF uses the noise function to shift the shadow offset, as shown in the following shader code:

for(int i=0;i<16;i++) {
  float indexA = (random(vec4(gl_FragCoord.xyx, i))*0.25);
  float indexB = (random(vec4(gl_FragCoord.yxy, i))*0.25);
  sum += textureProj(shadowMap, vShadowCoords + 
         vec4(indexA, indexB, 0, 0));
}
shadow = sum/16.0;

In the given code, three macros are defined, STRATIFIED_3x3 (for 3x3 stratified sampling), STRATIFIED_5x5 (for 5x5 stratified sampling), and RANDOM_SAMPLING (for 4x4 random sampling).

There's more…

Making these changes, we get a much better result, as shown in the following figure. If we take a bigger neighborhood, we get a better result. However, the computational requirements also increase.

The following figure compares this result of the PCF-filtered shadow map (right) with a normal shadow map (left). We can see that the PCF-filtered result gives softer shadows with reduced aliasing artefacts.

The following figure compares the result of the stratified PCF-filtered image (left) against the random PCF-filtered image (right). As can be seen, the noise-filtered image gives a much better result.

How to do it…

Let us see how to extend the basic shadow mapping with PCF.

Change the shadowmap texture minification/magnification filtering modes to GL_LINEAR. Here, we exploit the texture filtering capabilities of the GPU to reduce aliasing artefacts during sampling of the shadow map. Even with the linear filtering support, we have to take additional samples to reduce the artefacts.
```
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
```

if(vShadowCoords.w>1) {
  float sum = 0;
  sum += textureProjOffset(shadowMap,vShadowCoords,ivec2(-2,-2));
  sum += textureProjOffset(shadowMap,vShadowCoords,ivec2(-2, 0));
  sum += textureProjOffset(shadowMap,vShadowCoords,ivec2(-2, 2));
  sum += textureProjOffset(shadowMap,vShadowCoords,ivec2( 0,-2));
  sum += textureProjOffset(shadowMap,vShadowCoords,ivec2( 0, 0));
  sum += textureProjOffset(shadowMap,vShadowCoords,ivec2( 0, 2));
  sum += textureProjOffset(shadowMap,vShadowCoords,ivec2( 2,-2));
  sum += textureProjOffset(shadowMap,vShadowCoords,ivec2( 2, 0));
  sum += textureProjOffset(shadowMap,vShadowCoords,ivec2( 2, 2));
  float shadow = sum/9.0;
  diffuse = mix(diffuse, diffuse*shadow, 0.5);
}

How it works…

float random(vec4 seed) {
  float dot_product = dot(seed, vec4(12.9898,78.233, 45.164, 94.673));
  return fract(sin(dot_product) * 43758.5453);
}

Then, the sampling for PCF uses the noise function to shift the shadow offset, as shown in the following shader code:

for(int i=0;i<16;i++) {
  float indexA = (random(vec4(gl_FragCoord.xyx, i))*0.25);
  float indexB = (random(vec4(gl_FragCoord.yxy, i))*0.25);
  sum += textureProj(shadowMap, vShadowCoords + 
         vec4(indexA, indexB, 0, 0));
}
shadow = sum/16.0;

In the given code, three macros are defined, STRATIFIED_3x3 (for 3x3 stratified sampling), STRATIFIED_5x5 (for 5x5 stratified sampling), and RANDOM_SAMPLING (for 4x4 random sampling).

There's more…

Making these changes, we get a much better result, as shown in the following figure. If we take a bigger neighborhood, we get a better result. However, the computational requirements also increase.

How it works…

float random(vec4 seed) {
  float dot_product = dot(seed, vec4(12.9898,78.233, 45.164, 94.673));
  return fract(sin(dot_product) * 43758.5453);
}

Then, the sampling for PCF uses the noise function to shift the shadow offset, as shown in the following shader code:

for(int i=0;i<16;i++) {
  float indexA = (random(vec4(gl_FragCoord.xyx, i))*0.25);
  float indexB = (random(vec4(gl_FragCoord.yxy, i))*0.25);
  sum += textureProj(shadowMap, vShadowCoords + 
         vec4(indexA, indexB, 0, 0));
}
shadow = sum/16.0;

In the given code, three macros are defined, STRATIFIED_3x3 (for 3x3 stratified sampling), STRATIFIED_5x5 (for 5x5 stratified sampling), and RANDOM_SAMPLING (for 4x4 random sampling).

There's more…

Making these changes, we get a much better result, as shown in the following figure. If we take a bigger neighborhood, we get a better result. However, the computational requirements also increase.

There's more…

Making these changes, we get a much better result, as shown in the following figure. If we take a bigger neighborhood, we get a better result. However, the computational requirements also increase.

Implementing variance shadow mapping

In this recipe, we will cover a technique which gives a much better result, has better performance, and at the same time is easier to calculate. The technique is called variance shadow mapping. In conventional PCF-filtered shadow mapping, we compare the depth value of the current fragment to the mean depth value in the shadow map, and based on the outcome, we shadow the fragment.

In case of variance shadow mapping, the mean depth value (also called first moment) and the mean squared depth value (also called second moment) are calculated and stored. Then, rather than directly using the mean depth, the variance is used. The variance calculation requires both the mean depth as well as the mean of the squared depth. Using the variance, the probability of whether the given sample is shadowed is estimated. This probability is then compared to the maximum probability to determine if the current sample is shadowed.

Getting started

For this recipe, we will build on top of the shadow mapping recipe, Implementing shadow mapping with FBO. The code for this recipe is contained in the Chapter4/VarianceShadowMapping folder.

How to do it…

Let us start our recipe by following these simple steps:

Set up the shadowmap texture as in the shadow map recipe, but this time remove the depth compare mode (glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_COMPARE_MODE,GL_COMPARE_REF_TO_TEXTURE) and glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_COMPARE_FUNC,GL_LEQUAL)). Also set the format of the texture to the GL_RGBA32F format. Also enable the mipmap generation for this texture. The mipmaps provide filtered textures across different scales and produces better alias-free shadows. We request five mipmap levels (by specifying the max level as 4).

glGenTextures(1, &shadowMapTexID);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, shadowMapTexID);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR;
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR_MIPMAP_LINEAR);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S,GL_CLAMP_TO_BORDER);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T,GL_CLAMP_TO_BORDER);
glTexParameterfv(GL_TEXTURE_2D,GL_TEXTURE_BORDER_COLOR,border;
glTexImage2D(GL_TEXTURE_2D,0,GL_RGBA32F,SHADOWMAP_WIDTH,SHADOWMAP_HEIGHT,0,GL_RGBA,GL_FLOAT,NULL);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_BASE_LEVEL, 0);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAX_LEVEL, 4);
glGenerateMipmap(GL_TEXTURE_2D);

Set up two FBOs: one for shadowmap generation and another for shadowmap filtering. The shadowmap FBO has a renderbuffer attached to it for depth testing. The filtering FBO does not have a renderbuffer attached to it but it has two texture attachments.

glGenFramebuffers(1,&fboID);
  glGenRenderbuffers(1, &rboID);
  glBindFramebuffer(GL_FRAMEBUFFER,fboID);
  glBindRenderbuffer(GL_RENDERBUFFER, rboID);
  glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT32, SHADOWMAP_WIDTH, SHADOWMAP_HEIGHT);
glFramebufferTexture2D(GL_FRAMEBUFFER,GL_COLOR_ATTACHMENT0,GL_TEXTURE_2D,shadowMapTexID,0);
  glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, rboID);
GLenum status = glCheckFramebufferStatus(GL_FRAMEBUFFER);
if(status == GL_FRAMEBUFFER_COMPLETE) {
  cout<<"FBO setup successful."<<endl;
} else {
  cout<<"Problem in FBO setup."<<endl;
}
glBindFramebuffer(GL_FRAMEBUFFER,0);

glGenFramebuffers(1,&filterFBOID);
glBindFramebuffer(GL_FRAMEBUFFER,filterFBOID);
glGenTextures(2, blurTexID);
for(int i=0;i<2;i++) {
  glActiveTexture(GL_TEXTURE1+i);
  glBindTexture(GL_TEXTURE_2D, blurTexID[i]);
  glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
  glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
  glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S,GL_CLAMP_TO_BORDER);
  glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T,GL_CLAMP_TO_BORDER);
  glTexParameterfv(GL_TEXTURE_2D,GL_TEXTURE_BORDER_COLOR,border);
  glTexImage2D(GL_TEXTURE_2D,0,GL_RGBA32F,SHADOWMAP_WIDTH,SHADOWMAP_HEIGHT,0,GL_RGBA,GL_FLOAT,NULL);
  glFramebufferTexture2D(GL_FRAMEBUFFER,GL_COLOR_ATTACHMENT0+i, GL_TEXTURE_2D,blurTexID[i],0);
}
status = glCheckFramebufferStatus(GL_FRAMEBUFFER);
if(status == GL_FRAMEBUFFER_COMPLETE) {
  cout<<"Filtering FBO setup successful."<<endl;
} else {
  cout<<"Problem in Filtering FBO setup."<<endl;
}
glBindFramebuffer(GL_FRAMEBUFFER,0);

Bind the shadowmap FBO, set the viewport to the size of the shadowmap texture, and render the scene from the point of view of the light, as in the Implementing shadow mapping with FBO recipe. In this pass, instead of storing the depth as in the shadow mapping recipe, we use a custom fragment shader (Chapter4/VarianceShadowmapping/shaders/firststep.frag) to output the depth and depth*depth values in the red and green channels of the fragment output color.

glBindFramebuffer(GL_FRAMEBUFFER,fboID);   
glViewport(0,0,SHADOWMAP_WIDTH, SHADOWMAP_HEIGHT);
glDrawBuffer(GL_COLOR_ATTACHMENT0);
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
DrawSceneFirstPass(MV_L, P_L);

The shader code is as follows:

#version 330 core
layout(location=0) out vec4 vFragColor;
smooth in vec4 clipSpacePos;
void main()
{
  vec3 pos = clipSpacePos.xyz/clipSpacePos.w; //-1 to 1
  pos.z += 0.001; //add some offset to remove the shadow acne
  float depth = (pos.z +1)*0.5; // 0 to 1
  float moment1 = depth;
  float moment2 = depth * depth; 
  vFragColor = vec4(moment1,moment2,0,0);
}

Bind the filtering FBO to filter the shadowmap texture generated in the first pass using separable Gaussian smoothing filters, which are more efficient and offer better performance. We first attach the vertical smoothing fragment shader (Chapter4/VarianceShadowmapping/shaders/GaussV.frag) to filter the shadowmap texture and then the horizontal smoothing fragment shader (Chapter4/VarianceShadowmapping/shaders/GaussH.frag) to smooth the output from the vertical Gaussian smoothing filter.

glBindFramebuffer(GL_FRAMEBUFFER,filterFBOID);
glDrawBuffer(GL_COLOR_ATTACHMENT0);
glBindVertexArray(quadVAOID);
gaussianV_shader.Use();
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);
glDrawBuffer(GL_COLOR_ATTACHMENT1);
gaussianH_shader.Use();
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);
glBindFramebuffer(GL_FRAMEBUFFER,0);

The horizontal Gaussian blur shader is as follows:

#version 330 core
layout(location=0) out vec4 vFragColor;
smooth in vec2 vUV;
uniform sampler2D textureMap;

const float kernel[]=float[21] (0.000272337,  0.00089296, 0.002583865, 0.00659813,  0.014869116, 0.029570767, 0.051898313, 0.080381679, 0.109868729, 0.132526984, 0.14107424,  0.132526984, 0.109868729, 0.080381679, 0.051898313, 0.029570767, 0.014869116, 0.00659813, 0.002583865, 0.00089296, 0.000272337);

void main()
{
  vec2 delta = 1.0/textureSize(textureMap,0);
  vec4 color = vec4(0);
  int  index = 20;

  for(int i=-10;i<=10;i++) {
    color += kernel[index--]*texture(textureMap, vUV + (vec2(i*delta.x,0)));
  }

  vFragColor =  vec4(color.xy,0,0);
}

In the vertical Gaussian shader, the loop statement is modified, whereas the rest of the shader is the same.

color += kernel[index--]*texture(textureMap, vUV + (vec2(0,i*delta.y)));

Unbind the FBO, reset the default viewport, and then render the scene normally, as in the shadow mapping recipe.
```
glDrawBuffer(GL_BACK_LEFT);
glViewport(0,0,WIDTH, HEIGHT);
DrawScene(MV, P);
```

How it works…

The variance shadowmap technique tries to represent the depth data such that it can be filtered linearly. Instead of storing the depth, it stores the depth and depth*depth value in a floating point texture, which is then filtered to reconstruct the first and second moments of the depth distribution. Using the moments, it estimates the variance in the filtering neighborhood. This helps in finding the probability of a fragment at a specific depth to be occluded using Chebyshev's inequality. For more mathematical details, we refer the reader to the See also section of this recipe.

From the implementation point of view, similar to the shadow mapping recipe, the method works in two passes. In the first pass, we render the scene from the point of view of light. Instead of storing the depth, we store the depth and the depth*depth values in a floating point texture using the custom fragment shader (see Chapter4/VarianceShadowmapping/shaders/firststep.frag).

The vertex shader outputs the clip space position to the fragment shader using which the fragment depth value is calculated. To reduce self-shadowing, a small bias is added to the z value.

vec3 pos = clipSpacePos.xyz/clipSpacePos.w;
pos.z += 0.001;
float depth = (pos.z +1)*0.5;
float moment1 = depth;
float moment2 = depth * depth;
vFragColor = vec4(moment1,moment2,0,0);

After the first pass, the shadowmap texture is blurred using a separable Gaussian smoothing filter. First the vertical and then the horizontal filter is applied to the shadowmap texture by applying the shadowmap texture to a full-screen quad and alternating the filter FBO's color attachment. Note that the shadowmap texture is bound to texture unit 0 whereas the textures used for filtering are bound to texture unit 1 (attached to GL_COLOR_ATTTACHMENT0 on the filtering FBO) and texture unit 2 (attached to GL_COLOR_ATTACHMENT1 on the filtering FBO).

glBindFramebuffer(GL_FRAMEBUFFER,fboID);
  glViewport(0,0,SHADOWMAP_WIDTH, SHADOWMAP_HEIGHT);
  glDrawBuffer(GL_COLOR_ATTACHMENT0);
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  DrawSceneFirstPass(MV_L, P_L);
  
glBindFramebuffer(GL_FRAMEBUFFER,filterFBOID);
glDrawBuffer(GL_COLOR_ATTACHMENT0);
glBindVertexArray(quadVAOID);
  gaussianV_shader.Use();
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);
    
    glDrawBuffer(GL_COLOR_ATTACHMENT1);
  gaussianH_shader.Use();
  glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);
glBindFramebuffer(GL_FRAMEBUFFER,0);
glDrawBuffer(GL_BACK_LEFT);
glViewport(0,0,WIDTH, HEIGHT);

In the second pass, the scene is rendered from the point of view of the camera. The blurred shadowmap is used in the second pass as a texture to lookup the sample value (see Chapter4/VarianceShadowmapping/shaders/VarianceShadowMap.{vert, frag}). The variance shadow mapping vertex shader outputs the shadow texture coordinates, as in the shadow mapping recipe.

#version 330 core
layout(location=0) in vec3 vVertex;
layout(location=1) in vec3 vNormal;
uniform mat4 MVP;   //modelview projection matrix
uniform mat4 MV;    //modelview matrix
uniform mat4 M;      //model matrix
uniform mat3 N;     //normal matrix
uniform mat4 S;     //shadow matrix
smooth out vec3 vEyeSpaceNormal;
smooth out vec3 vEyeSpacePosition;
smooth out vec4 vShadowCoords;
void main()
{
  vEyeSpacePosition = (MV*vec4(vVertex,1)).xyz;
  vEyeSpaceNormal   = N*vNormal;
  vShadowCoords     = S*(M*vec4(vVertex,1));
  gl_Position       = MVP*vec4(vVertex,1);
}

The variance shadow mapping fragment shader operates differently. We first make sure that the shadow coordinates are in front of the light (to prevent back projection), that is, shadowCoord.w>1. Next, the shadowCoords.xyz values are divided by the homogeneous coordinate, shadowCoord.w, to get the depth value.

if(vShadowCoords.w>1) {
  vec3 uv = vShadowCoords.xyz/vShadowCoords.w;
  float depth = uv.z;

The texture coordinates after homogeneous division are used to lookup the shadow map storing the two moments. The two moments are used to estimate the variance. The variance is clamped and then the occlusion probability is estimated. The diffuse component is then modulated based on the obtained occlusion probability.

  vec4 moments = texture(shadowMap, uv.xy);
  float E_x2 = moments.y;
  float Ex_2 = moments.x*moments.x;
  float var = E_x2-Ex_2;
  var = max(var, 0.00002);
  float mD = depth-moments.x;
  float mD_2 = mD*mD;
  float p_max = var/(var+ mD_2);
  diffuse *= max(p_max, (depth<=moments.x)?1.0:0.2);
}

To recap, here is the complete variance shadow mapping fragment shader:

#version 330 core
layout(location=0) out vec4 vFragColor;
uniform sampler2D  shadowMap;
uniform vec3 light_position;  //light position in object space
uniform vec3 diffuse_color;
uniform mat4 MV;
smooth in vec3 vEyeSpaceNormal;
smooth in vec3 vEyeSpacePosition;
smooth in vec4 vShadowCoords;
const float k0 = 1.0;  //constant attenuation
const float k1 = 0.0;  //linear attenuation
const float k2 = 0.0;  //quadratic attenuation
void main() {   
  vec4 vEyeSpaceLightPosition = (MV*vec4(light_position,1));
  vec3 L = (vEyeSpaceLightPosition.xyz-vEyeSpacePosition);
  float d = length(L);
   L = normalize(L);
  float attenuationAmount = 1.0/(k0 + (k1*d) + (k2*d*d));
  float diffuse = max(0, dot(vEyeSpaceNormal, L)) * attenuationAmount;
  if(vShadowCoords.w>1) {
    vec3 uv = vShadowCoords.xyz/vShadowCoords.w;
    float depth = uv.z;
    vec4 moments = texture(shadowMap, uv.xy);
    float E_x2 = moments.y;
    float Ex_2 = moments.x*moments.x;
    float var = E_x2-Ex_2;
    var = max(var, 0.00002);
    float mD = depth-moments.x;
    float mD_2 = mD*mD;
    float p_max = var/(var+ mD_2);
    diffuse *= max(p_max, (depth<=moments.x)?1.0:0.2);
  }
  vFragColor = diffuse*vec4(diffuse_color, 1);
}

There's more…

Variance shadow mapping is an interesting idea. However, it does suffer from light bleeding artefacts. There have been several improvements to the basic technique, such as summed area variance shadow maps, layered variance shadow maps, and more recently, sample distribution shadow maps, that are referred to in the See also section of this recipe. After getting a practical insight into the basic variance shadow mapping idea, we invite the reader to try and implement the different variants of this algorithm, as detailed in the references in the See also section.

The demo application for this recipe shows the same scene (a cube and a sphere on a plane) lit by a point light source. Right-clicking the mouse button rotates the point light around the objects. The output result is shown in the following figure:

Comparing this output to the previous shadow mapping recipes, we can see that the output quality is much better if compared to the conventional shadow mapping and the PCF-based technique. When comparing the outputs, variance shadow mapping gives a better output with a significantly less number of samples. Obtaining the same output using PCF or any other technique would require a very large neighborhood lookup with more samples. This makes this technique well-suited for real-time applications such as games.

How to do it…

Let us start our recipe by following these simple steps:

glGenTextures(1, &shadowMapTexID);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, shadowMapTexID);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR;
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR_MIPMAP_LINEAR);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S,GL_CLAMP_TO_BORDER);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T,GL_CLAMP_TO_BORDER);
glTexParameterfv(GL_TEXTURE_2D,GL_TEXTURE_BORDER_COLOR,border;
glTexImage2D(GL_TEXTURE_2D,0,GL_RGBA32F,SHADOWMAP_WIDTH,SHADOWMAP_HEIGHT,0,GL_RGBA,GL_FLOAT,NULL);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_BASE_LEVEL, 0);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAX_LEVEL, 4);
glGenerateMipmap(GL_TEXTURE_2D);

glGenFramebuffers(1,&fboID);
  glGenRenderbuffers(1, &rboID);
  glBindFramebuffer(GL_FRAMEBUFFER,fboID);
  glBindRenderbuffer(GL_RENDERBUFFER, rboID);
  glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT32, SHADOWMAP_WIDTH, SHADOWMAP_HEIGHT);
glFramebufferTexture2D(GL_FRAMEBUFFER,GL_COLOR_ATTACHMENT0,GL_TEXTURE_2D,shadowMapTexID,0);
  glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, rboID);
GLenum status = glCheckFramebufferStatus(GL_FRAMEBUFFER);
if(status == GL_FRAMEBUFFER_COMPLETE) {
  cout<<"FBO setup successful."<<endl;
} else {
  cout<<"Problem in FBO setup."<<endl;
}
glBindFramebuffer(GL_FRAMEBUFFER,0);

glGenFramebuffers(1,&filterFBOID);
glBindFramebuffer(GL_FRAMEBUFFER,filterFBOID);
glGenTextures(2, blurTexID);
for(int i=0;i<2;i++) {
  glActiveTexture(GL_TEXTURE1+i);
  glBindTexture(GL_TEXTURE_2D, blurTexID[i]);
  glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
  glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
  glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S,GL_CLAMP_TO_BORDER);
  glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T,GL_CLAMP_TO_BORDER);
  glTexParameterfv(GL_TEXTURE_2D,GL_TEXTURE_BORDER_COLOR,border);
  glTexImage2D(GL_TEXTURE_2D,0,GL_RGBA32F,SHADOWMAP_WIDTH,SHADOWMAP_HEIGHT,0,GL_RGBA,GL_FLOAT,NULL);
  glFramebufferTexture2D(GL_FRAMEBUFFER,GL_COLOR_ATTACHMENT0+i, GL_TEXTURE_2D,blurTexID[i],0);
}
status = glCheckFramebufferStatus(GL_FRAMEBUFFER);
if(status == GL_FRAMEBUFFER_COMPLETE) {
  cout<<"Filtering FBO setup successful."<<endl;
} else {
  cout<<"Problem in Filtering FBO setup."<<endl;
}
glBindFramebuffer(GL_FRAMEBUFFER,0);

glBindFramebuffer(GL_FRAMEBUFFER,fboID);   
glViewport(0,0,SHADOWMAP_WIDTH, SHADOWMAP_HEIGHT);
glDrawBuffer(GL_COLOR_ATTACHMENT0);
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
DrawSceneFirstPass(MV_L, P_L);

The shader code is as follows:

#version 330 core
layout(location=0) out vec4 vFragColor;
smooth in vec4 clipSpacePos;
void main()
{
  vec3 pos = clipSpacePos.xyz/clipSpacePos.w; //-1 to 1
  pos.z += 0.001; //add some offset to remove the shadow acne
  float depth = (pos.z +1)*0.5; // 0 to 1
  float moment1 = depth;
  float moment2 = depth * depth; 
  vFragColor = vec4(moment1,moment2,0,0);
}

glBindFramebuffer(GL_FRAMEBUFFER,filterFBOID);
glDrawBuffer(GL_COLOR_ATTACHMENT0);
glBindVertexArray(quadVAOID);
gaussianV_shader.Use();
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);
glDrawBuffer(GL_COLOR_ATTACHMENT1);
gaussianH_shader.Use();
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);
glBindFramebuffer(GL_FRAMEBUFFER,0);

The horizontal Gaussian blur shader is as follows:

#version 330 core
layout(location=0) out vec4 vFragColor;
smooth in vec2 vUV;
uniform sampler2D textureMap;

const float kernel[]=float[21] (0.000272337,  0.00089296, 0.002583865, 0.00659813,  0.014869116, 0.029570767, 0.051898313, 0.080381679, 0.109868729, 0.132526984, 0.14107424,  0.132526984, 0.109868729, 0.080381679, 0.051898313, 0.029570767, 0.014869116, 0.00659813, 0.002583865, 0.00089296, 0.000272337);

void main()
{
  vec2 delta = 1.0/textureSize(textureMap,0);
  vec4 color = vec4(0);
  int  index = 20;

  for(int i=-10;i<=10;i++) {
    color += kernel[index--]*texture(textureMap, vUV + (vec2(i*delta.x,0)));
  }

  vFragColor =  vec4(color.xy,0,0);
}

In the vertical Gaussian shader, the loop statement is modified, whereas the rest of the shader is the same.

color += kernel[index--]*texture(textureMap, vUV + (vec2(0,i*delta.y)));

Unbind the FBO, reset the default viewport, and then render the scene normally, as in the shadow mapping recipe.
```
glDrawBuffer(GL_BACK_LEFT);
glViewport(0,0,WIDTH, HEIGHT);
DrawScene(MV, P);
```

How it works…

The vertex shader outputs the clip space position to the fragment shader using which the fragment depth value is calculated. To reduce self-shadowing, a small bias is added to the z value.

vec3 pos = clipSpacePos.xyz/clipSpacePos.w;
pos.z += 0.001;
float depth = (pos.z +1)*0.5;
float moment1 = depth;
float moment2 = depth * depth;
vFragColor = vec4(moment1,moment2,0,0);

glBindFramebuffer(GL_FRAMEBUFFER,fboID);
  glViewport(0,0,SHADOWMAP_WIDTH, SHADOWMAP_HEIGHT);
  glDrawBuffer(GL_COLOR_ATTACHMENT0);
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  DrawSceneFirstPass(MV_L, P_L);
  
glBindFramebuffer(GL_FRAMEBUFFER,filterFBOID);
glDrawBuffer(GL_COLOR_ATTACHMENT0);
glBindVertexArray(quadVAOID);
  gaussianV_shader.Use();
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);
    
    glDrawBuffer(GL_COLOR_ATTACHMENT1);
  gaussianH_shader.Use();
  glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);
glBindFramebuffer(GL_FRAMEBUFFER,0);
glDrawBuffer(GL_BACK_LEFT);
glViewport(0,0,WIDTH, HEIGHT);

#version 330 core
layout(location=0) in vec3 vVertex;
layout(location=1) in vec3 vNormal;
uniform mat4 MVP;   //modelview projection matrix
uniform mat4 MV;    //modelview matrix
uniform mat4 M;      //model matrix
uniform mat3 N;     //normal matrix
uniform mat4 S;     //shadow matrix
smooth out vec3 vEyeSpaceNormal;
smooth out vec3 vEyeSpacePosition;
smooth out vec4 vShadowCoords;
void main()
{
  vEyeSpacePosition = (MV*vec4(vVertex,1)).xyz;
  vEyeSpaceNormal   = N*vNormal;
  vShadowCoords     = S*(M*vec4(vVertex,1));
  gl_Position       = MVP*vec4(vVertex,1);
}

if(vShadowCoords.w>1) {
  vec3 uv = vShadowCoords.xyz/vShadowCoords.w;
  float depth = uv.z;

  vec4 moments = texture(shadowMap, uv.xy);
  float E_x2 = moments.y;
  float Ex_2 = moments.x*moments.x;
  float var = E_x2-Ex_2;
  var = max(var, 0.00002);
  float mD = depth-moments.x;
  float mD_2 = mD*mD;
  float p_max = var/(var+ mD_2);
  diffuse *= max(p_max, (depth<=moments.x)?1.0:0.2);
}

To recap, here is the complete variance shadow mapping fragment shader:

#version 330 core
layout(location=0) out vec4 vFragColor;
uniform sampler2D  shadowMap;
uniform vec3 light_position;  //light position in object space
uniform vec3 diffuse_color;
uniform mat4 MV;
smooth in vec3 vEyeSpaceNormal;
smooth in vec3 vEyeSpacePosition;
smooth in vec4 vShadowCoords;
const float k0 = 1.0;  //constant attenuation
const float k1 = 0.0;  //linear attenuation
const float k2 = 0.0;  //quadratic attenuation
void main() {   
  vec4 vEyeSpaceLightPosition = (MV*vec4(light_position,1));
  vec3 L = (vEyeSpaceLightPosition.xyz-vEyeSpacePosition);
  float d = length(L);
   L = normalize(L);
  float attenuationAmount = 1.0/(k0 + (k1*d) + (k2*d*d));
  float diffuse = max(0, dot(vEyeSpaceNormal, L)) * attenuationAmount;
  if(vShadowCoords.w>1) {
    vec3 uv = vShadowCoords.xyz/vShadowCoords.w;
    float depth = uv.z;
    vec4 moments = texture(shadowMap, uv.xy);
    float E_x2 = moments.y;
    float Ex_2 = moments.x*moments.x;
    float var = E_x2-Ex_2;
    var = max(var, 0.00002);
    float mD = depth-moments.x;
    float mD_2 = mD*mD;
    float p_max = var/(var+ mD_2);
    diffuse *= max(p_max, (depth<=moments.x)?1.0:0.2);
  }
  vFragColor = diffuse*vec4(diffuse_color, 1);
}

There's more…

How it works…

The vertex shader outputs the clip space position to the fragment shader using which the fragment depth value is calculated. To reduce self-shadowing, a small bias is added to the z value.

vec3 pos = clipSpacePos.xyz/clipSpacePos.w;
pos.z += 0.001;
float depth = (pos.z +1)*0.5;
float moment1 = depth;
float moment2 = depth * depth;
vFragColor = vec4(moment1,moment2,0,0);

glBindFramebuffer(GL_FRAMEBUFFER,fboID);
  glViewport(0,0,SHADOWMAP_WIDTH, SHADOWMAP_HEIGHT);
  glDrawBuffer(GL_COLOR_ATTACHMENT0);
  glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  DrawSceneFirstPass(MV_L, P_L);
  
glBindFramebuffer(GL_FRAMEBUFFER,filterFBOID);
glDrawBuffer(GL_COLOR_ATTACHMENT0);
glBindVertexArray(quadVAOID);
  gaussianV_shader.Use();
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);
    
    glDrawBuffer(GL_COLOR_ATTACHMENT1);
  gaussianH_shader.Use();
  glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, 0);
glBindFramebuffer(GL_FRAMEBUFFER,0);
glDrawBuffer(GL_BACK_LEFT);
glViewport(0,0,WIDTH, HEIGHT);

#version 330 core
layout(location=0) in vec3 vVertex;
layout(location=1) in vec3 vNormal;
uniform mat4 MVP;   //modelview projection matrix
uniform mat4 MV;    //modelview matrix
uniform mat4 M;      //model matrix
uniform mat3 N;     //normal matrix
uniform mat4 S;     //shadow matrix
smooth out vec3 vEyeSpaceNormal;
smooth out vec3 vEyeSpacePosition;
smooth out vec4 vShadowCoords;
void main()
{
  vEyeSpacePosition = (MV*vec4(vVertex,1)).xyz;
  vEyeSpaceNormal   = N*vNormal;
  vShadowCoords     = S*(M*vec4(vVertex,1));
  gl_Position       = MVP*vec4(vVertex,1);
}

if(vShadowCoords.w>1) {
  vec3 uv = vShadowCoords.xyz/vShadowCoords.w;
  float depth = uv.z;

  vec4 moments = texture(shadowMap, uv.xy);
  float E_x2 = moments.y;
  float Ex_2 = moments.x*moments.x;
  float var = E_x2-Ex_2;
  var = max(var, 0.00002);
  float mD = depth-moments.x;
  float mD_2 = mD*mD;
  float p_max = var/(var+ mD_2);
  diffuse *= max(p_max, (depth<=moments.x)?1.0:0.2);
}

To recap, here is the complete variance shadow mapping fragment shader:

#version 330 core
layout(location=0) out vec4 vFragColor;
uniform sampler2D  shadowMap;
uniform vec3 light_position;  //light position in object space
uniform vec3 diffuse_color;
uniform mat4 MV;
smooth in vec3 vEyeSpaceNormal;
smooth in vec3 vEyeSpacePosition;
smooth in vec4 vShadowCoords;
const float k0 = 1.0;  //constant attenuation
const float k1 = 0.0;  //linear attenuation
const float k2 = 0.0;  //quadratic attenuation
void main() {   
  vec4 vEyeSpaceLightPosition = (MV*vec4(light_position,1));
  vec3 L = (vEyeSpaceLightPosition.xyz-vEyeSpacePosition);
  float d = length(L);
   L = normalize(L);
  float attenuationAmount = 1.0/(k0 + (k1*d) + (k2*d*d));
  float diffuse = max(0, dot(vEyeSpaceNormal, L)) * attenuationAmount;
  if(vShadowCoords.w>1) {
    vec3 uv = vShadowCoords.xyz/vShadowCoords.w;
    float depth = uv.z;
    vec4 moments = texture(shadowMap, uv.xy);
    float E_x2 = moments.y;
    float Ex_2 = moments.x*moments.x;
    float var = E_x2-Ex_2;
    var = max(var, 0.00002);
    float mD = depth-moments.x;
    float mD_2 = mD*mD;
    float p_max = var/(var+ mD_2);
    diffuse *= max(p_max, (depth<=moments.x)?1.0:0.2);
  }
  vFragColor = diffuse*vec4(diffuse_color, 1);
}

There's more…

Chapter 5. Mesh Model Formats and Particle Systems

In this chapter, we will focus on:

Implementing terrains using height map
Implementing 3ds model loading using separate buffers
Implementing OBJ model loading using interleaved buffers
Implementing EZMesh model loading
Implementing a simple particle system

Introduction

While simple demos and applications can get along with basic primitives like cubes and spheres, most real-world applications and games use 3D mesh models which are modelled in 3D modeling software such as 3ds Max and Maya . For games, the models are then exported into the proprietary game format and then the models are loaded into the game.

While there are many formats available, some formats such as Autodesk® 3ds and Wavefront® OBJ are common formats. In this chapter, we will look at recipes for loading these model formats. We will look at how to load the geometry information, stored in the external files, into the vertex buffer object memory of the GPU. In addition, we will also load material and texture information which is required to improve the fidelity of the model so that it appears more realistic. We will also work on loading terrains which are often used to model outdoor environments. Finally, we will implement a basic particle system for simulating fuzzy phenomena such as fire and smoke. All of the discussed techniques will be implemented in the OpenGL v3.3 and above core profile.

Implementing terrains using the height map

Several demos and applications require rendering of terrains. This recipe will show how to implement terrain generation in modern OpenGL. The height map is loaded using the SOIL image loading library which contains displacement information. A 2D grid is then generated depending on the required terrain resolution. Then, the displacement information contained in the height map is used to displace the 2D grid in the vertex shader. Usually, the obtained displacement value is scaled to increase or decrease the displacement scale as desired.

Getting started

For the terrain, first the 2D grid geometry is generated depending on the terrain resolution. The steps to generate such geometry were previously covered in the Doing a ripple mesh deformer using vertex shader recipe in Chapter 1, Introduction to Modern OpenGL. The code for this recipe is contained in the Chapter5/TerrainLoading directory.

How to do it…

Let us start our recipe by following these simple steps:

Load the height map texture using the SOIL image loading library and generate an OpenGL texture from it. The texture filtering is set to GL_NEAREST as we want to obtain the exact values from the height map. If we had changed this to GL_LINEAR, we would get interpolated values. Since the terrain height map is not tiled, we set the texture wrap mode to GL_CLAMP.

  int texture_width = 0, texture_height = 0, channels=0;
  GLubyte* pData = SOIL_load_image(filename.c_str(),&texture_width, &texture_height, &channels, SOIL_LOAD_L);
  //vertically flip the image data
  for( j = 0; j*2 < texture_height; ++j )
  {
    int index1 = j * texture_width ;
    int index2 = (texture_height - 1 - j) * texture_width ;
    for( i = texture_width ; i > 0; --i )
    {
      GLubyte temp = pData[index1];
      pData[index1] = pData[index2];
      pData[index2] = temp;
      ++index1;
      ++index2;
    }
  }
  glGenTextures(1, &heightMapTextureID);
  glActiveTexture(GL_TEXTURE0);
  glBindTexture(GL_TEXTURE_2D, heightMapTextureID);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP);
  glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, texture_width, texture_height, 0, GL_RED, GL_UNSIGNED_BYTE, pData);
  SOIL_free_image_data(pData);

Set up the terrain geometry by generating a set of points in the XZ plane. The TERRAIN_WIDTH parameter controls the total number of vertices in the X axis whereas the TERRAIN_DEPTH parameter
controls the total number of vertices in the Z axis.
```
  for( j=0;j<TERRAIN_DEPTH;j++) {
    for( i=0;i<TERRAIN_WIDTH;i++) {
      vertices[count]=glm::vec3((float(i)/(TERRAIN_WIDTH-1)), 0, (float(j)/(TERRAIN_DEPTH-1)));
      count++;
    }
  }
```
Set up the vertex shader that displaces the 2D terrain mesh. Refer to Chapter5/TerrainLoading/shaders/shader.vert for details. The height value is obtained from the height map. This value is then added to the current vertex position and finally multiplied with the combined modelview projection (MVP)
matrix to get the clip space position. The HALF_TERRAIN_SIZE uniform contains half of the total number of vertices in both the X and Z axes, that is, HALF_TERRAIN_SIZE = ivec2(TERRAIN_WIDTH/2, TERRAIN_DEPTH/2). Similarly the scale uniform is used to scale the height read from the height map. The half_scale and HALF_TERRAIN_SIZE uniforms are used to position the mesh at origin.
```
#version 330 core 
layout (location=0) in vec3 vVertex;
uniform mat4 MVP;
uniform ivec2 HALF_TERRAIN_SIZE;
uniform sampler2D heightMapTexture;
uniform float scale;
uniform float half_scale;
void main()
{
  float height = texture(heightMapTexture, vVertex.xz).r*scale - half_scale;
  vec2 pos  = (vVertex.xz*2.0-1)*HALF_TERRAIN_SIZE;
  gl_Position = MVP*vec4(pos.x, height, pos.y, 1);
}
```

Load the shaders and the corresponding uniform and attribute locations. Also, set the values of the uniforms that never change during the lifetime of the application, at initialization.

      shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
      shader.LoadFromFile(GL_FRAGMENT_SHADER, "shaders/shader.frag");
      shader.CreateAndLinkProgram();
      shader.Use();
           shader.AddAttribute("vVertex");
           shader.AddUniform("heightMapTexture");
           shader.AddUniform("scale");
           shader.AddUniform("half_scale");
           shader.AddUniform("HALF_TERRAIN_SIZE");
           shader.AddUniform("MVP");
           glUniform1i(shader("heightMapTexture"), 0);
           glUniform2i(shader("HALF_TERRAIN_SIZE"), TERRAIN_WIDTH>>1, TERRAIN_DEPTH>>1);
           glUniform1f(shader("scale"), scale);
           glUniform1f(shader("half_scale"), half_scale);
      shader.UnUse();

In the rendering code, set the shader and render the terrain by passing the modelview/projection matrices to the shader as shader uniforms.

shader.Use();
    glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(MVP));
    glDrawElements(GL_TRIANGLES,TOTAL_INDICES, GL_UNSIGNED_INT, 0);
shader.UnUse();

How it works…

Terrain rendering is relatively straight forward to implement. The geometry is first generated on the CPU and is then stored in the GPU buffer objects. Next, the height map is loaded from an image which is then transferred to the vertex shader as a texture sampler uniform.

In the vertex shader, the height of the vertex is obtained from the height map by texture lookup using the position of the vertex. The final vertex position is obtained by combining the height with the input vertex position. The resulting vector is multiplied with the modelview projection matrix to obtain the clip space position. The vertex displacement technique can also be used to give realistic surface detail to a low resolution 3D model.

The output from the demo application for this recipe renders a wireframe terrain as shown in the following screenshot:

The height map used to generate this terrain is shown in the following screenshot:

There's more…

The method we have presented in this recipe uses the vertex displacement to generate a terrain from a height map. There are several tools available that can help with the terrain height map generation. One of them is Terragen (planetside.co.uk). Another useful tool is World Machine (http://world-machine.com/). A general source of information for terrains is available at the virtual terrain project (http://vterrain.org/).

We can also use procedural methods to generate terrains such as fractal terrain generation. Noise methods can also be helpful in the generation of the terrains.

How to do it…

Let us start our recipe by following these simple steps:

  int texture_width = 0, texture_height = 0, channels=0;
  GLubyte* pData = SOIL_load_image(filename.c_str(),&texture_width, &texture_height, &channels, SOIL_LOAD_L);
  //vertically flip the image data
  for( j = 0; j*2 < texture_height; ++j )
  {
    int index1 = j * texture_width ;
    int index2 = (texture_height - 1 - j) * texture_width ;
    for( i = texture_width ; i > 0; --i )
    {
      GLubyte temp = pData[index1];
      pData[index1] = pData[index2];
      pData[index2] = temp;
      ++index1;
      ++index2;
    }
  }
  glGenTextures(1, &heightMapTextureID);
  glActiveTexture(GL_TEXTURE0);
  glBindTexture(GL_TEXTURE_2D, heightMapTextureID);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP);
  glTexImage2D(GL_TEXTURE_2D, 0, GL_RED, texture_width, texture_height, 0, GL_RED, GL_UNSIGNED_BYTE, pData);
  SOIL_free_image_data(pData);

Set up the terrain geometry by generating a set of points in the XZ plane. The TERRAIN_WIDTH parameter controls the total number of vertices in the X axis whereas the TERRAIN_DEPTH parameter
controls the total number of vertices in the Z axis.
```
  for( j=0;j<TERRAIN_DEPTH;j++) {
    for( i=0;i<TERRAIN_WIDTH;i++) {
      vertices[count]=glm::vec3((float(i)/(TERRAIN_WIDTH-1)), 0, (float(j)/(TERRAIN_DEPTH-1)));
      count++;
    }
  }
```
Set up the vertex shader that displaces the 2D terrain mesh. Refer to Chapter5/TerrainLoading/shaders/shader.vert for details. The height value is obtained from the height map. This value is then added to the current vertex position and finally multiplied with the combined modelview projection (MVP)
matrix to get the clip space position. The HALF_TERRAIN_SIZE uniform contains half of the total number of vertices in both the X and Z axes, that is, HALF_TERRAIN_SIZE = ivec2(TERRAIN_WIDTH/2, TERRAIN_DEPTH/2). Similarly the scale uniform is used to scale the height read from the height map. The half_scale and HALF_TERRAIN_SIZE uniforms are used to position the mesh at origin.
```
#version 330 core 
layout (location=0) in vec3 vVertex;
uniform mat4 MVP;
uniform ivec2 HALF_TERRAIN_SIZE;
uniform sampler2D heightMapTexture;
uniform float scale;
uniform float half_scale;
void main()
{
  float height = texture(heightMapTexture, vVertex.xz).r*scale - half_scale;
  vec2 pos  = (vVertex.xz*2.0-1)*HALF_TERRAIN_SIZE;
  gl_Position = MVP*vec4(pos.x, height, pos.y, 1);
}
```

Load the shaders and the corresponding uniform and attribute locations. Also, set the values of the uniforms that never change during the lifetime of the application, at initialization.

      shader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
      shader.LoadFromFile(GL_FRAGMENT_SHADER, "shaders/shader.frag");
      shader.CreateAndLinkProgram();
      shader.Use();
           shader.AddAttribute("vVertex");
           shader.AddUniform("heightMapTexture");
           shader.AddUniform("scale");
           shader.AddUniform("half_scale");
           shader.AddUniform("HALF_TERRAIN_SIZE");
           shader.AddUniform("MVP");
           glUniform1i(shader("heightMapTexture"), 0);
           glUniform2i(shader("HALF_TERRAIN_SIZE"), TERRAIN_WIDTH>>1, TERRAIN_DEPTH>>1);
           glUniform1f(shader("scale"), scale);
           glUniform1f(shader("half_scale"), half_scale);
      shader.UnUse();

In the rendering code, set the shader and render the terrain by passing the modelview/projection matrices to the shader as shader uniforms.

shader.Use();
    glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(MVP));
    glDrawElements(GL_TRIANGLES,TOTAL_INDICES, GL_UNSIGNED_INT, 0);
shader.UnUse();

How it works…

The output from the demo application for this recipe renders a wireframe terrain as shown in the following screenshot:

The height map used to generate this terrain is shown in the following screenshot:

There's more…

We can also use procedural methods to generate terrains such as fractal terrain generation. Noise methods can also be helpful in the generation of the terrains.

How it works…

The output from the demo application for this recipe renders a wireframe terrain as shown in the following screenshot:

The height map used to generate this terrain is shown in the following screenshot:

There's more…

We can also use procedural methods to generate terrains such as fractal terrain generation. Noise methods can also be helpful in the generation of the terrains.

There's more…

We can also use procedural methods to generate terrains such as fractal terrain generation. Noise methods can also be helpful in the generation of the terrains.

Implementing 3ds model loading using separate buffers

We will now create model loader and renderer for Autodesk® 3ds model format which is a simple yet efficient binary model format for storing digital assets.

Getting started

The code for this recipe is contained in the Chapter5/3DsViewer folder. This recipe will be using the Drawing a 2D image in a window using a fragment shader and the SOIL image loading library recipe from Chapter 1, Introduction to Modern OpenGL, for loading the 3ds mesh file's textures using the SOIL image loading library.

How to do it…

The steps required to implement a 3ds file viewer are as follows:

Create an instance of the C3dsLoader class. Then call the C3dsLoader::Load3DS function
passing it the name of the mesh file and a set of vectors to store the submeshes, vertices, normals, uvs, indices, and materials.
```
if(!loader.Load3DS(mesh_filename.c_str( ), meshes, vertices, normals, uvs, faces, indices, materials)) {
  cout<<"Cannot load the 3ds mesh"<<endl;
  exit(EXIT_FAILURE);
}
```

After the mesh is loaded, use the mesh's material list to load the material textures into the OpenGL texture object.

  for(size_t k=0;k<materials.size();k++) {
    for(size_t m=0;m< materials[k]->textureMaps.size();m++)
    {
      GLuint id = 0;
      glGenTextures(1, &id);
      glBindTexture(GL_TEXTURE_2D, id);
      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_REPEAT);
      glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
      int texture_width = 0, texture_height = 0, channels=0;
      const string& filename = materials[k]->textureMaps[m]->filename;
      std::string full_filename = mesh_path;
      full_filename.append(filename);
      GLubyte* pData = SOIL_load_image(full_filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO);
      if(pData == NULL) {
        cerr<<"Cannot load image: "<<full_filename.c_str()<<endl;
          exit(EXIT_FAILURE);
      }
      //Flip the image on Y axis
      int i,j;
      for( j = 0; j*2 < texture_height; ++j ) {
        int index1 = j * texture_width * channels;
        int index2 = (texture_height - 1 - j) * texture_width * channels;
        for( i = texture_width * channels; i > 0; --i ){
          GLubyte temp = pData[index1];
          pData[index1] = pData[index2];
          pData[index2] = temp;
          ++index1;
          ++index2;
        }
      }
      GLenum format = GL_RGBA;
      switch(channels) {
        case 2: format = GL_RG32UI; break;
        case 3: format = GL_RGB; break;
        case 4: format = GL_RGBA; break;
      }
      glTexImage2D(GL_TEXTURE_2D, 0, format, texture_width, texture_height, 0, format, GL_UNSIGNED_BYTE, pData);
      SOIL_free_image_data(pData);
      textureMaps[filename]=id;
    }
  }

Pass the loaded per-vertex attributes; that is, positions (vertices), texture coordinates (uvs), per-vertex normals (normals), and triangle indices (indices) to GPU memory by allocating separate buffer objects for each attribute. Note that for easier handling of buffer objects, we bind a single vertex array object (vaoID) first.

    glBindVertexArray(vaoID);
    glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
    glBufferData (GL_ARRAY_BUFFER, sizeof(glm::vec3)* vertices.size(), &(vertices[0].x), GL_STATIC_DRAW);
    glEnableVertexAttribArray(shader["vVertex"]);
    glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,0,0);
    glBindBuffer (GL_ARRAY_BUFFER, vboUVsID);
    glBufferData (GL_ARRAY_BUFFER, sizeof(glm::vec2)*uvs.size(), &(uvs[0].x), GL_STATIC_DRAW);
    glEnableVertexAttribArray(shader["vUV"]);
    glVertexAttribPointer(shader["vUV"],2,GL_FLOAT,GL_FALSE,0, 0);
    glBindBuffer (GL_ARRAY_BUFFER, vboNormalsID);
    glBufferData (GL_ARRAY_BUFFER, sizeof(glm::vec3)* normals.size(), &(normals[0].x),  GL_STATIC_DRAW);
    glEnableVertexAttribArray(shader["vNormal"]);
    glVertexAttribPointer(shader["vNormal"], 3, GL_FLOAT, GL_FALSE, 0, 0);

If we have only a single material in the 3ds file, we store the face indices into GL_ELEMENT_ARRAY_BUFFER so that we can render the whole mesh in a single call. However, if we have more than one material, we bind the appropriate submeshes separately. The glBufferData call allocates the GPU memory, however, it is not initialized. In order to initialize the buffer object memory, we can use the glMapBuffer function
to obtain a direct pointer to the GPU memory. Using this pointer, we can then write to the GPU memory. An alternative to using glMapBuffer is glBufferSubData which can modify the GPU memory by copying contents from a CPU buffer.
```
    if(materials.size()==1) {
      glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
      glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(GLushort)* 
      3*faces.size(), 0, GL_STATIC_DRAW);
      GLushort* pIndices = static_cast<GLushort*>(glMapBuffer(GL_ELEMENT_ARRAY_BUFFER, GL_WRITE_ONLY));
      for(size_t i=0;i<faces.size();i++) {
        *(pIndices++)=faces[i].a;
        *(pIndices++)=faces[i].b;
        *(pIndices++)=faces[i].c;
      }
      glUnmapBuffer(GL_ELEMENT_ARRAY_BUFFER);
    }
```

Set up the vertex shader to output the clip space position as well as the per-vertex texture coordinates. The texture coordinates are then interpolated by the rasterizer to the fragment shader using an output attribute vUVout.

#version 330 core

layout(location = 0) in vec3 vVertex;
layout(location = 1) in vec3 vNormal;
layout(location = 2) in vec2 vUV;

smooth out vec2 vUVout;

uniform mat4 P; 
uniform mat4 MV;
uniform mat3 N;

smooth out vec3 vEyeSpaceNormal;
smooth out vec3 vEyeSpacePosition;

void main()
{
  vUVout=vUV;
  vEyeSpacePosition = (MV*vec4(vVertex,1)).xyz;
  vEyeSpaceNormal = N*vNormal;
  gl_Position = P*vec4(vEyeSpacePosition,1);
}

Set up the fragment shader, which looks up the texture map sampler with the interpolated texture coordinates from the rasterizer. Depending on whether the submesh has a texture, we linearly interpolate between the texture map color and the diffused color of the material, using the GLSL mix function.

#version 330 core  
uniform sampler2D textureMap;
uniform float hasTexture;
uniform vec3 light_position;//light position in object space
uniform mat4 MV;
smooth in vec3 vEyeSpaceNormal;
smooth in vec3 vEyeSpacePosition;
smooth in vec2 vUVout;

layout(location=0) out vec4 vFragColor;

const float k0 = 1.0;//constant attenuation
const float k1 = 0.0;//linear attenuation
const float k2 = 0.0;//quadratic attenuation

void main()
{
  vec4 vEyeSpaceLightPosition = (MV*vec4(light_position,1));
  vec3 L = (vEyeSpaceLightPosition.xyz-vEyeSpacePosition);
  float d = length(L);
  L = normalize(L);
  float diffuse = max(0, dot(vEyeSpaceNormal, L));
  float attenuationAmount = 1.0/(k0 + (k1*d) + (k2*d*d));
  diffuse *= attenuationAmount;

  vFragColor = diffuse*mix(vec4(1),texture(textureMap, vUVout), hasTexture);
}

The rendering code binds the shader program, sets the shader uniforms, and then renders the mesh, depending on how many materials the 3ds mesh has. If the mesh has only a single material, it is drawn in a single call to glDrawElement by using the indices attached to the GL_ELEMENT_ARRAY_BUFFER binding point.

  glBindVertexArray(vaoID); {
    shader.Use();
    glUniformMatrix4fv(shader("MV"), 1, GL_FALSE, glm::value_ptr(MV));
    glUniformMatrix3fv(shader("N"), 1, GL_FALSE, glm::value_ptr(glm::inverseTranspose(glm::mat3(MV))));
    glUniformMatrix4fv(shader("P"), 1, GL_FALSE, glm::value_ptr(P));
    glUniform3fv(shader("light_position"),1, &(lightPosOS.x));
    if(materials.size()==1) {
      GLint whichID[1];
      glGetIntegerv(GL_TEXTURE_BINDING_2D, whichID);
      if(textureMaps.size()>0) {
        if(whichID[0] != textureMaps[materials[0]->textureMaps[0]->filename]) {
        glBindTexture(GL_TEXTURE_2D, textureMaps[materials[0]->textureMaps[0]->filename]);
        glUniform1f(shader("hasTexture"),1.0);
      }
    } else {
      glUniform1f(shader("hasTexture"),0.0);
      glUniform3fv(shader("diffuse_color"),1, materials[0]->diffuse);
    }
    glDrawElements(GL_TRIANGLES, meshes[0]->faces.size()*3, GL_UNSIGNED_SHORT, 0);
  }

If the mesh contains more than one material, we iterate through the material list, and bind the texture map (if the material has one), otherwise we use the diffuse color stored in the material for the submesh. Finally, we pass the sub_indices array stored in the material to the glDrawElements function to load those indices only.

else {
  for(size_t i=0;i<materials.size();i++) {
    GLint whichID[1];
    glGetIntegerv(GL_TEXTURE_BINDING_2D, whichID);
    if(materials[i]->textureMaps.size()>0) {
      if(whichID[0] != textureMaps[materials[i]->textureMaps[0]->filename]) {
        glBindTexture(GL_TEXTURE_2D, textureMaps[materials[i]->textureMaps[0]->filename]);
      }
      glUniform1f(shader("hasTexture"),1.0);
    } else {
      glUniform1f(shader("hasTexture"),0.0);
    }
    glUniform3fv(shader("diffuse_color"),1, materials[i]->diffuse);
    glDrawElements(GL_TRIANGLES, materials[i]->sub_indices.size(), GL_UNSIGNED_SHORT, &(materials[i]->sub_indices[0]));
  }
}
shader.UnUse();

How it works…

The main component of this recipe is the C3dsLoader::Load3DS function. The 3ds file is a binary file which is organized into a collection of chunks. Typically, a reader reads the first two bytes from the file which are stored in the chunk ID. The next four bytes store the chunk length in bytes. We continue reading chunks, and their lengths, and then store data appropriately into our vectors/variables until there are no more chunks and we pass reading the end of file. The 3ds specifications detail all of the chunks and their lengths as well as subchunks, as shown in the following figure:

Note that if there is a subchunk that we are interested in, we need to read the parent chunk as well, to move the file pointer to the appropriate offset in the file, for our required chunk. The loader first finds the total size of the 3ds mesh file in bytes. Then, it runs a while loop that checks to see if the current file pointer is within the file's size. If it is, it continues to read the first two bytes (the chunk's ID) and the next four bytes (the chunk's length).

while(infile.tellg() < fileSize) {
  infile.read(reinterpret_cast<char*>(&chunk_id), 2);
  infile.read(reinterpret_cast<char*>(&chunk_length), 4);

Then we start a big switch case with all of the required chunk IDs and then read the bytes from the respective chunks as desired.

  switch(chunk_id) {
    case 0x4d4d: break;
    case 0x3d3d: break;
    case 0x4000: {
      std::string name = "";
      char c = ' ';
      while(c!='\0') {
        infile.read(&c,1);
        name.push_back(c);
      }
      pMesh = new C3dsMesh(name);
      meshes.push_back(pMesh);
    } break;
    …//rest of the chunks
  }

All names (object name, material name, or texture map name) have to be read byte-by-byte until the null terminator character (\0) is found. For reading vertices, we first read two bytes that store the total number of vertices (N). Two bytes means that the maximum number of vertices one mesh can store is 65536. Then, we read the whole chunk of bytes, that is, sizeof(glm::vec3)*N, directly into our mesh's vertices, shown as follows:

case 0x4110: {
  unsigned short total_vertices=0;
  infile.read(reinterpret_cast<char*>(&total_vertices), 2);
  pMesh->vertices.resize(total_vertices);
  infile.read(reinterpret_cast<char*>(&pMesh->vertices[0].x), sizeof(glm::vec3)   *total_vertices);
}break;

case 0x4120: {
  unsigned short total_tris=0;
  infile.read(reinterpret_cast<char*>(&total_tris), 2);
  pMesh->faces.resize(total_tris);
  infile.read(reinterpret_cast<char*>(&pMesh->faces[0].a), sizeof(Face)*total_tris);
}break;

The code for reading the material face IDs and texture coordinates follows in the same way as the total entries are first read and then the appropriate number of bytes are read from the file. Note that, if a chunk has a color chunk (as for chunk IDs: 0xa010 to 0xa030), the color information is contained in a subchunk (IDs: 0x0010 to 0x0013) depending on the data type used to store the color information in the parent chunk.

After the mesh and material information is loaded, we generate global vertices, uvs, and indices vectors. This makes it easy for us to render the submeshes in the render function.

size_t total = materials.size();
for(size_t i=0;i<total;i++) {
  if(materials[i]->face_ids.size()==0)
  materials.erase(materials.begin()+i);
}

for(size_t i=0;i<meshes.size();i++) {
  for(size_t j=0;j<meshes[i]->vertices.size();j++)
  vertices.push_back(meshes[i]->vertices[j]);

  for(size_t j=0;j<meshes[i]->uvs.size();j++)
  uvs.push_back(meshes[i]->uvs[j]);

  for(size_t j=0;j<meshes[i]->faces.size();j++) {
    faces.push_back(meshes[i]->faces[j]);
  }
}

Note that the 3ds format does not store the per-vertex normal explicitly. It only stores smoothing groups which tell us which faces have shared normals. After we have the vertex positions and face information, we can generate the per-vertex normals by averaging the per-face normals. This is carried out by using the following code snippet in the 3ds.cpp file. We first allocate space for the per-vertex normals. Then we estimate the face's normal by using the cross product of the two edges. Finally, we add the face normal to the appropriate vertex index and then normalize the normal.

normals.resize(vertices.size());
for(size_t j=0;j<faces.size();j++) {
  Face f = faces[j];
  glm::vec3 v0 = vertices[f.a];
  glm::vec3 v1 = vertices[f.b];
  glm::vec3 v2 = vertices[f.c];
  glm::vec3 e1 = v1 - v0;
  glm::vec3 e2 = v2 - v0;
  glm::vec3 N = glm::cross(e1,e2);
  normals[f.a] += N;
  normals[f.b] += N;
  normals[f.c] += N;
}
for(size_t i=0;i<normals.size();i++) {
  normals[i]=glm::normalize(normals[i]);
}

Once we have all the per-vertex attributes and faces information, we use this to group the triangles by material. We loop through all of the materials and expand their face IDs to include the three vertex IDs and make the face.

for(size_t i=0;i<materials.size();i++) {
   Material* pMat = materials[i];
   for(int j=0;j<pMat->face_ids.size();j++) {
      pMat->sub_indices.push_back(faces[pMat->face_ids[j]].a);
      pMat->sub_indices.push_back(faces[pMat->face_ids[j]].b);
      pMat->sub_indices.push_back(faces[pMat->face_ids[j]].c);
   }
}

There's more…

The output from the demo application implementing this recipe is given in the following figure. In this recipe, we render three blocks on a quad plane. The camera position can be changed using the left mouse button. The point light source position can be changed using the right mouse button. Each block has six textures attached to it, whereas the plane has no texture, hence it uses the diffuse color value.

Note that the 3ds loader shown in this recipe does not take smoothing groups into consideration. For a more robust loader, we recommend the lib3ds library which provides a more elaborate 3ds file loader with support for smoothing groups, animation tracks, cameras, lights, keyframes, and so on.

How to do it…

The steps required to implement a 3ds file viewer are as follows:

Create an instance of the C3dsLoader class. Then call the C3dsLoader::Load3DS function
passing it the name of the mesh file and a set of vectors to store the submeshes, vertices, normals, uvs, indices, and materials.
```
if(!loader.Load3DS(mesh_filename.c_str( ), meshes, vertices, normals, uvs, faces, indices, materials)) {
  cout<<"Cannot load the 3ds mesh"<<endl;
  exit(EXIT_FAILURE);
}
```

After the mesh is loaded, use the mesh's material list to load the material textures into the OpenGL texture object.

  for(size_t k=0;k<materials.size();k++) {
    for(size_t m=0;m< materials[k]->textureMaps.size();m++)
    {
      GLuint id = 0;
      glGenTextures(1, &id);
      glBindTexture(GL_TEXTURE_2D, id);
      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_REPEAT);
      glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
      int texture_width = 0, texture_height = 0, channels=0;
      const string& filename = materials[k]->textureMaps[m]->filename;
      std::string full_filename = mesh_path;
      full_filename.append(filename);
      GLubyte* pData = SOIL_load_image(full_filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO);
      if(pData == NULL) {
        cerr<<"Cannot load image: "<<full_filename.c_str()<<endl;
          exit(EXIT_FAILURE);
      }
      //Flip the image on Y axis
      int i,j;
      for( j = 0; j*2 < texture_height; ++j ) {
        int index1 = j * texture_width * channels;
        int index2 = (texture_height - 1 - j) * texture_width * channels;
        for( i = texture_width * channels; i > 0; --i ){
          GLubyte temp = pData[index1];
          pData[index1] = pData[index2];
          pData[index2] = temp;
          ++index1;
          ++index2;
        }
      }
      GLenum format = GL_RGBA;
      switch(channels) {
        case 2: format = GL_RG32UI; break;
        case 3: format = GL_RGB; break;
        case 4: format = GL_RGBA; break;
      }
      glTexImage2D(GL_TEXTURE_2D, 0, format, texture_width, texture_height, 0, format, GL_UNSIGNED_BYTE, pData);
      SOIL_free_image_data(pData);
      textureMaps[filename]=id;
    }
  }

    glBindVertexArray(vaoID);
    glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
    glBufferData (GL_ARRAY_BUFFER, sizeof(glm::vec3)* vertices.size(), &(vertices[0].x), GL_STATIC_DRAW);
    glEnableVertexAttribArray(shader["vVertex"]);
    glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,0,0);
    glBindBuffer (GL_ARRAY_BUFFER, vboUVsID);
    glBufferData (GL_ARRAY_BUFFER, sizeof(glm::vec2)*uvs.size(), &(uvs[0].x), GL_STATIC_DRAW);
    glEnableVertexAttribArray(shader["vUV"]);
    glVertexAttribPointer(shader["vUV"],2,GL_FLOAT,GL_FALSE,0, 0);
    glBindBuffer (GL_ARRAY_BUFFER, vboNormalsID);
    glBufferData (GL_ARRAY_BUFFER, sizeof(glm::vec3)* normals.size(), &(normals[0].x),  GL_STATIC_DRAW);
    glEnableVertexAttribArray(shader["vNormal"]);
    glVertexAttribPointer(shader["vNormal"], 3, GL_FLOAT, GL_FALSE, 0, 0);

If we have only a single material in the 3ds file, we store the face indices into GL_ELEMENT_ARRAY_BUFFER so that we can render the whole mesh in a single call. However, if we have more than one material, we bind the appropriate submeshes separately. The glBufferData call allocates the GPU memory, however, it is not initialized. In order to initialize the buffer object memory, we can use the glMapBuffer function
to obtain a direct pointer to the GPU memory. Using this pointer, we can then write to the GPU memory. An alternative to using glMapBuffer is glBufferSubData which can modify the GPU memory by copying contents from a CPU buffer.
```
    if(materials.size()==1) {
      glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
      glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(GLushort)* 
      3*faces.size(), 0, GL_STATIC_DRAW);
      GLushort* pIndices = static_cast<GLushort*>(glMapBuffer(GL_ELEMENT_ARRAY_BUFFER, GL_WRITE_ONLY));
      for(size_t i=0;i<faces.size();i++) {
        *(pIndices++)=faces[i].a;
        *(pIndices++)=faces[i].b;
        *(pIndices++)=faces[i].c;
      }
      glUnmapBuffer(GL_ELEMENT_ARRAY_BUFFER);
    }
```

#version 330 core

layout(location = 0) in vec3 vVertex;
layout(location = 1) in vec3 vNormal;
layout(location = 2) in vec2 vUV;

smooth out vec2 vUVout;

uniform mat4 P; 
uniform mat4 MV;
uniform mat3 N;

smooth out vec3 vEyeSpaceNormal;
smooth out vec3 vEyeSpacePosition;

void main()
{
  vUVout=vUV;
  vEyeSpacePosition = (MV*vec4(vVertex,1)).xyz;
  vEyeSpaceNormal = N*vNormal;
  gl_Position = P*vec4(vEyeSpacePosition,1);
}

#version 330 core  
uniform sampler2D textureMap;
uniform float hasTexture;
uniform vec3 light_position;//light position in object space
uniform mat4 MV;
smooth in vec3 vEyeSpaceNormal;
smooth in vec3 vEyeSpacePosition;
smooth in vec2 vUVout;

layout(location=0) out vec4 vFragColor;

const float k0 = 1.0;//constant attenuation
const float k1 = 0.0;//linear attenuation
const float k2 = 0.0;//quadratic attenuation

void main()
{
  vec4 vEyeSpaceLightPosition = (MV*vec4(light_position,1));
  vec3 L = (vEyeSpaceLightPosition.xyz-vEyeSpacePosition);
  float d = length(L);
  L = normalize(L);
  float diffuse = max(0, dot(vEyeSpaceNormal, L));
  float attenuationAmount = 1.0/(k0 + (k1*d) + (k2*d*d));
  diffuse *= attenuationAmount;

  vFragColor = diffuse*mix(vec4(1),texture(textureMap, vUVout), hasTexture);
}

  glBindVertexArray(vaoID); {
    shader.Use();
    glUniformMatrix4fv(shader("MV"), 1, GL_FALSE, glm::value_ptr(MV));
    glUniformMatrix3fv(shader("N"), 1, GL_FALSE, glm::value_ptr(glm::inverseTranspose(glm::mat3(MV))));
    glUniformMatrix4fv(shader("P"), 1, GL_FALSE, glm::value_ptr(P));
    glUniform3fv(shader("light_position"),1, &(lightPosOS.x));
    if(materials.size()==1) {
      GLint whichID[1];
      glGetIntegerv(GL_TEXTURE_BINDING_2D, whichID);
      if(textureMaps.size()>0) {
        if(whichID[0] != textureMaps[materials[0]->textureMaps[0]->filename]) {
        glBindTexture(GL_TEXTURE_2D, textureMaps[materials[0]->textureMaps[0]->filename]);
        glUniform1f(shader("hasTexture"),1.0);
      }
    } else {
      glUniform1f(shader("hasTexture"),0.0);
      glUniform3fv(shader("diffuse_color"),1, materials[0]->diffuse);
    }
    glDrawElements(GL_TRIANGLES, meshes[0]->faces.size()*3, GL_UNSIGNED_SHORT, 0);
  }

else {
  for(size_t i=0;i<materials.size();i++) {
    GLint whichID[1];
    glGetIntegerv(GL_TEXTURE_BINDING_2D, whichID);
    if(materials[i]->textureMaps.size()>0) {
      if(whichID[0] != textureMaps[materials[i]->textureMaps[0]->filename]) {
        glBindTexture(GL_TEXTURE_2D, textureMaps[materials[i]->textureMaps[0]->filename]);
      }
      glUniform1f(shader("hasTexture"),1.0);
    } else {
      glUniform1f(shader("hasTexture"),0.0);
    }
    glUniform3fv(shader("diffuse_color"),1, materials[i]->diffuse);
    glDrawElements(GL_TRIANGLES, materials[i]->sub_indices.size(), GL_UNSIGNED_SHORT, &(materials[i]->sub_indices[0]));
  }
}
shader.UnUse();

How it works…

while(infile.tellg() < fileSize) {
  infile.read(reinterpret_cast<char*>(&chunk_id), 2);
  infile.read(reinterpret_cast<char*>(&chunk_length), 4);

Then we start a big switch case with all of the required chunk IDs and then read the bytes from the respective chunks as desired.

  switch(chunk_id) {
    case 0x4d4d: break;
    case 0x3d3d: break;
    case 0x4000: {
      std::string name = "";
      char c = ' ';
      while(c!='\0') {
        infile.read(&c,1);
        name.push_back(c);
      }
      pMesh = new C3dsMesh(name);
      meshes.push_back(pMesh);
    } break;
    …//rest of the chunks
  }

case 0x4110: {
  unsigned short total_vertices=0;
  infile.read(reinterpret_cast<char*>(&total_vertices), 2);
  pMesh->vertices.resize(total_vertices);
  infile.read(reinterpret_cast<char*>(&pMesh->vertices[0].x), sizeof(glm::vec3)   *total_vertices);
}break;

case 0x4120: {
  unsigned short total_tris=0;
  infile.read(reinterpret_cast<char*>(&total_tris), 2);
  pMesh->faces.resize(total_tris);
  infile.read(reinterpret_cast<char*>(&pMesh->faces[0].a), sizeof(Face)*total_tris);
}break;

After the mesh and material information is loaded, we generate global vertices, uvs, and indices vectors. This makes it easy for us to render the submeshes in the render function.

size_t total = materials.size();
for(size_t i=0;i<total;i++) {
  if(materials[i]->face_ids.size()==0)
  materials.erase(materials.begin()+i);
}

for(size_t i=0;i<meshes.size();i++) {
  for(size_t j=0;j<meshes[i]->vertices.size();j++)
  vertices.push_back(meshes[i]->vertices[j]);

  for(size_t j=0;j<meshes[i]->uvs.size();j++)
  uvs.push_back(meshes[i]->uvs[j]);

  for(size_t j=0;j<meshes[i]->faces.size();j++) {
    faces.push_back(meshes[i]->faces[j]);
  }
}

normals.resize(vertices.size());
for(size_t j=0;j<faces.size();j++) {
  Face f = faces[j];
  glm::vec3 v0 = vertices[f.a];
  glm::vec3 v1 = vertices[f.b];
  glm::vec3 v2 = vertices[f.c];
  glm::vec3 e1 = v1 - v0;
  glm::vec3 e2 = v2 - v0;
  glm::vec3 N = glm::cross(e1,e2);
  normals[f.a] += N;
  normals[f.b] += N;
  normals[f.c] += N;
}
for(size_t i=0;i<normals.size();i++) {
  normals[i]=glm::normalize(normals[i]);
}

for(size_t i=0;i<materials.size();i++) {
   Material* pMat = materials[i];
   for(int j=0;j<pMat->face_ids.size();j++) {
      pMat->sub_indices.push_back(faces[pMat->face_ids[j]].a);
      pMat->sub_indices.push_back(faces[pMat->face_ids[j]].b);
      pMat->sub_indices.push_back(faces[pMat->face_ids[j]].c);
   }
}

There's more…

How it works…

while(infile.tellg() < fileSize) {
  infile.read(reinterpret_cast<char*>(&chunk_id), 2);
  infile.read(reinterpret_cast<char*>(&chunk_length), 4);

Then we start a big switch case with all of the required chunk IDs and then read the bytes from the respective chunks as desired.

  switch(chunk_id) {
    case 0x4d4d: break;
    case 0x3d3d: break;
    case 0x4000: {
      std::string name = "";
      char c = ' ';
      while(c!='\0') {
        infile.read(&c,1);
        name.push_back(c);
      }
      pMesh = new C3dsMesh(name);
      meshes.push_back(pMesh);
    } break;
    …//rest of the chunks
  }

case 0x4110: {
  unsigned short total_vertices=0;
  infile.read(reinterpret_cast<char*>(&total_vertices), 2);
  pMesh->vertices.resize(total_vertices);
  infile.read(reinterpret_cast<char*>(&pMesh->vertices[0].x), sizeof(glm::vec3)   *total_vertices);
}break;

case 0x4120: {
  unsigned short total_tris=0;
  infile.read(reinterpret_cast<char*>(&total_tris), 2);
  pMesh->faces.resize(total_tris);
  infile.read(reinterpret_cast<char*>(&pMesh->faces[0].a), sizeof(Face)*total_tris);
}break;

After the mesh and material information is loaded, we generate global vertices, uvs, and indices vectors. This makes it easy for us to render the submeshes in the render function.

size_t total = materials.size();
for(size_t i=0;i<total;i++) {
  if(materials[i]->face_ids.size()==0)
  materials.erase(materials.begin()+i);
}

for(size_t i=0;i<meshes.size();i++) {
  for(size_t j=0;j<meshes[i]->vertices.size();j++)
  vertices.push_back(meshes[i]->vertices[j]);

  for(size_t j=0;j<meshes[i]->uvs.size();j++)
  uvs.push_back(meshes[i]->uvs[j]);

  for(size_t j=0;j<meshes[i]->faces.size();j++) {
    faces.push_back(meshes[i]->faces[j]);
  }
}

normals.resize(vertices.size());
for(size_t j=0;j<faces.size();j++) {
  Face f = faces[j];
  glm::vec3 v0 = vertices[f.a];
  glm::vec3 v1 = vertices[f.b];
  glm::vec3 v2 = vertices[f.c];
  glm::vec3 e1 = v1 - v0;
  glm::vec3 e2 = v2 - v0;
  glm::vec3 N = glm::cross(e1,e2);
  normals[f.a] += N;
  normals[f.b] += N;
  normals[f.c] += N;
}
for(size_t i=0;i<normals.size();i++) {
  normals[i]=glm::normalize(normals[i]);
}

for(size_t i=0;i<materials.size();i++) {
   Material* pMat = materials[i];
   for(int j=0;j<pMat->face_ids.size();j++) {
      pMat->sub_indices.push_back(faces[pMat->face_ids[j]].a);
      pMat->sub_indices.push_back(faces[pMat->face_ids[j]].b);
      pMat->sub_indices.push_back(faces[pMat->face_ids[j]].c);
   }
}

There's more…

Implementing OBJ model loading using interleaved buffers

In this recipe we will implement the Wavefront ® OBJ model. Instead of using separate buffer objects for storing positions, normals, and texture coordinates as in the previous recipe, we will use a single buffer object with interleaved data. This ensures that we have more chances of a cache hit since related attributes are stored next to each other in the buffer object memory.

Getting started

The code for this recipe is contained in the Chapter5/ObjViewer folder.

How to do it…

Let us start the recipe by following these simple steps:

Create a global reference of the ObjLoader object. Call the ObjLoader::Load function,
passing it the name of the OBJ file. Pass vectors to store the meshes, vertices, indices, and materials contained in the OBJ file.
```
  ObjLoader obj;
  if(!obj.Load(mesh_filename.c_str(), meshes, vertices, indices, materials)) {
    cout<<"Cannot load the 3ds mesh"<<endl;
    exit(EXIT_FAILURE);
  }
```

Generate OpenGL texture objects for each material using the SOIL library if the material has a texture map.

  for(size_t k=0;k<materials.size();k++) {
    if(materials[k]->map_Kd != "") {
      GLuint id = 0;
      glGenTextures(1, &id);
      glBindTexture(GL_TEXTURE_2D, id);
      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_REPEAT);
      glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
      
      int texture_width = 0, texture_height = 0, channels=0;
      const string& filename =  materials[k]->map_Kd;
      std::string full_filename = mesh_path;
      full_filename.append(filename);

      GLubyte* pData = SOIL_load_image(full_filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO);
      if(pData == NULL) {
        cerr<<"Cannot load image: "<<full_filename.c_str()<<endl;
        exit(EXIT_FAILURE);
      }
      //… image flipping code
      GLenum format = GL_RGBA;
      switch(channels) {
        case 2: format = GL_RG32UI; break;
        case 3: format = GL_RGB;  break;
        case 4: format = GL_RGBA;  break;
      }
      glTexImage2D(GL_TEXTURE_2D, 0, format, texture_width, texture_height, 0, format, GL_UNSIGNED_BYTE, pData);
      SOIL_free_image_data(pData);
      textures.push_back(id);
    }
  }

Set up shaders and generate buffer objects to store the mesh file data in the GPU memory. The shader setup is similar to the previous recipes.

  glGenVertexArrays(1, &vaoID);
  glGenBuffers(1, &vboVerticesID);
  glGenBuffers(1, &vboIndicesID); 
  glBindVertexArray(vaoID);
  glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
  glBufferData (GL_ARRAY_BUFFER, sizeof(Vertex)*vertices.size(), &(vertices[0].pos.x), GL_STATIC_DRAW);
  glEnableVertexAttribArray(shader["vVertex"]);
  glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,sizeof(Vertex),0);
  
  glEnableVertexAttribArray(shader["vNormal"]);
  glVertexAttribPointer(shader["vNormal"], 3, GL_FLOAT, GL_FALSE,sizeof(Vertex),(const GLvoid*)(offsetof( Vertex, normal)) );
  
  glEnableVertexAttribArray(shader["vUV"]);
  glVertexAttribPointer(shader["vUV"], 2, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)(offsetof(Vertex, uv)) );
  if(materials.size()==1) {
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(GLushort)*indices.size(), &(indices[0]), GL_STATIC_DRAW);
  }

Bind the vertex array object associated with the mesh, use the shader and pass the shader uniforms, that is, the modelview (MV), projection (P), normal matrices (N) and light position, and so on.

  glBindVertexArray(vaoID); {
    shader.Use();
    glUniformMatrix4fv(shader("MV"), 1, GL_FALSE, glm::value_ptr(MV));
    glUniformMatrix3fv(shader("N"), 1, GL_FALSE, glm::value_ptr(glm::inverseTranspose(glm::mat3(MV))));
    glUniformMatrix4fv(shader("P"), 1, GL_FALSE, glm::value_ptr(P));
    glUniform3fv(shader("light_position"),1, &(lightPosOS.x));

To draw the mesh/submesh, loop through all of the materials in the mesh and then bind the texture to the GL_TEXTURE_2D target if the material contains a texture map. Otherwise, use a default color for the mesh. Finally, call the glDrawElements function to render the mesh/submesh.

for(size_t i=0;i<materials.size();i++) {
  Material* pMat = materials[i];
  if(pMat->map_Kd !="") {
    glUniform1f(shader("useDefault"), 0.0);
    GLint whichID[1];
    glGetIntegerv(GL_TEXTURE_BINDING_2D, whichID);
    if(whichID[0] != textures[i])
      glBindTexture(GL_TEXTURE_2D, textures[i]);
  }
  else
  glUniform1f(shader("useDefault"), 1.0);
  
  if(materials.size()==1)
  glDrawElements(GL_TRIANGLES, indices.size(), GL_UNSIGNED_SHORT, 0);
  else
  glDrawElements(GL_TRIANGLES, pMat->count, GL_UNSIGNED_SHORT, (const GLvoid*)(& indices[pMat->offset])); 
}
shader.UnUse();

How it works…

The main component of this recipe is the ObjLoader::Load function defined in the Obj.cpp file. The Wavefront® OBJ file is a text file which has different text descriptors for different mesh components. Usually, the mesh starts with the geometry definition, that is, vertices that begin with the letter v followed by three floating point values. If there are normals, their definitions begin with vn followed by three floating point values. If there are texture coordinates, their definitions begin with vt, followed by two floating point values. Comments start with the # character, so whenever a line with this character is encountered, it is ignored.

Following the geometry definition, the topology is defined. In this case, the line is prefixed with f followed by the indices for the polygon vertices. In case of a triangle, three indices sections are given such that the vertex position indices are given first, followed by texture coordinates indices (if any), and finally the normal indices (if any). Note that the indices start from 1, not 0.

So, for example, say that we have a quad geometry having four position indices (1,2,3,4) having four texture coordinate indices (5,6,7,8), and four normal indices (1,1,1,1) then the topology would be stored as follows:

f 1/5/1 2/6/1 3/7/1 4/8/1

If the mesh is a triangular mesh with position vertices (1,2,3), texture coordinates (7,8,9), and normals (4,5,6) then the topology would be stored as follows:

f 1/7/4 2/8/5 3/9/6

Now, if the texture coordinates are omitted from the first example, then the topology would be stored as follows:

f 1//1 2//1 3//1 4//1

The OBJ file stores material information in a separate material (.mtl) file. This file contains similar text descriptors that define different materials with their ambient, diffuse, and specular color values, texture maps, and so on. The details of the defined elements are given in the OBJ format specifications. The material file for the current OBJ file is declared using the mtllib keyword followed by the name of the .mtl file. Usually, the .mtl file is stored in the same folder as the OBJ file. A polygon definition is preceded with a usemtl keyword followed by the name of the material to use for the upcoming polygon definition. Several polygonal definitions can be grouped using the g or o prefix followed by the name of the group/object respectively.

The ObjLoader::Load function first finds the current prefix. Then, the code branches to the appropriate section depending on the prefix. The suffix strings are then parsed and the extracted data is stored in the corresponding vectors. For efficiency, rather than storing the indices directly, we store them by material so that we can then sort and render the mesh by material. The associated material library file (.mtl) is loaded using the ReadMaterialLibrary function. Refer to the Obj.cpp file for details.

The file parsing is the first piece of the puzzle. The second piece is the transfer of this data to the GPU memory. In this recipe, we use an interleaved buffer, that is, instead of storing each per-vertex attribute separately in its own vertex buffer object, we store them interleaved one after the other in a single buffer object. First positions are followed by normals and then texture coordinates. We achieve this by first defining our vertex format using a custom Vertex struct. Our vertices are a vector of this struct.

struct Vertex  {
   glm::vec3 pos, normal;
   glm::vec2 uv;
};

We generate the vertex array object and then the vertex buffer object. Next, we bind the buffer object passing it our vertices. In this case, we specify the stride of each attribute in the data stream separately as follows:

glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(Vertex)*vertices.size(), &(vertices[0].pos.x), GL_STATIC_DRAW);
glEnableVertexAttribArray(shader["vVertex"]);
glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,sizeof(Vertex),0);
glEnableVertexAttribArray(shader["vNormal"]);
glVertexAttribPointer(shader["vNormal"], 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)(offsetof(Vertex, normal)) );
glEnableVertexAttribArray(shader["vUV"]);
glVertexAttribPointer(shader["vUV"], 2, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)(offsetof(Vertex, uv)) );

If the mesh has a single material, we store the mesh indices into a GL_ELEMENT_ARRAY_BUFFER target. Otherwise, we render the submeshes by material.

if(materials.size()==1) {
  glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
  glBufferData(GL_ELEMENT_ARRAY_BUFFER,  sizeof(GLushort) * indices.size(), &(indices[0]), GL_STATIC_DRAW);
}

At the time of rendering, if we have a single material, we render the whole mesh, otherwise we render the subset stored with the material.

if(materials.size()==1)
  glDrawElements(GL_TRIANGLES,indices.size(),GL_UNSIGNED_SHORT,0);
else
  glDrawElements(GL_TRIANGLES, pMat->count, GL_UNSIGNED_SHORT, (const GLvoid*)(&indices[pMat->offset]));

There's more…

The demo application implementing this recipe shows a scene with three blocks on a planar quad. The camera view can be rotated with the left mouse button. The light source's position is shown by a 3D crosshair that can be moved by dragging the right mouse button. The output from this demo application is shown in the following figure:

How to do it…

Let us start the recipe by following these simple steps:

Create a global reference of the ObjLoader object. Call the ObjLoader::Load function,
passing it the name of the OBJ file. Pass vectors to store the meshes, vertices, indices, and materials contained in the OBJ file.
```
  ObjLoader obj;
  if(!obj.Load(mesh_filename.c_str(), meshes, vertices, indices, materials)) {
    cout<<"Cannot load the 3ds mesh"<<endl;
    exit(EXIT_FAILURE);
  }
```

Generate OpenGL texture objects for each material using the SOIL library if the material has a texture map.

  for(size_t k=0;k<materials.size();k++) {
    if(materials[k]->map_Kd != "") {
      GLuint id = 0;
      glGenTextures(1, &id);
      glBindTexture(GL_TEXTURE_2D, id);
      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_REPEAT);
      glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
      
      int texture_width = 0, texture_height = 0, channels=0;
      const string& filename =  materials[k]->map_Kd;
      std::string full_filename = mesh_path;
      full_filename.append(filename);

      GLubyte* pData = SOIL_load_image(full_filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO);
      if(pData == NULL) {
        cerr<<"Cannot load image: "<<full_filename.c_str()<<endl;
        exit(EXIT_FAILURE);
      }
      //… image flipping code
      GLenum format = GL_RGBA;
      switch(channels) {
        case 2: format = GL_RG32UI; break;
        case 3: format = GL_RGB;  break;
        case 4: format = GL_RGBA;  break;
      }
      glTexImage2D(GL_TEXTURE_2D, 0, format, texture_width, texture_height, 0, format, GL_UNSIGNED_BYTE, pData);
      SOIL_free_image_data(pData);
      textures.push_back(id);
    }
  }

Set up shaders and generate buffer objects to store the mesh file data in the GPU memory. The shader setup is similar to the previous recipes.

  glGenVertexArrays(1, &vaoID);
  glGenBuffers(1, &vboVerticesID);
  glGenBuffers(1, &vboIndicesID); 
  glBindVertexArray(vaoID);
  glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
  glBufferData (GL_ARRAY_BUFFER, sizeof(Vertex)*vertices.size(), &(vertices[0].pos.x), GL_STATIC_DRAW);
  glEnableVertexAttribArray(shader["vVertex"]);
  glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,sizeof(Vertex),0);
  
  glEnableVertexAttribArray(shader["vNormal"]);
  glVertexAttribPointer(shader["vNormal"], 3, GL_FLOAT, GL_FALSE,sizeof(Vertex),(const GLvoid*)(offsetof( Vertex, normal)) );
  
  glEnableVertexAttribArray(shader["vUV"]);
  glVertexAttribPointer(shader["vUV"], 2, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)(offsetof(Vertex, uv)) );
  if(materials.size()==1) {
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(GLushort)*indices.size(), &(indices[0]), GL_STATIC_DRAW);
  }

  glBindVertexArray(vaoID); {
    shader.Use();
    glUniformMatrix4fv(shader("MV"), 1, GL_FALSE, glm::value_ptr(MV));
    glUniformMatrix3fv(shader("N"), 1, GL_FALSE, glm::value_ptr(glm::inverseTranspose(glm::mat3(MV))));
    glUniformMatrix4fv(shader("P"), 1, GL_FALSE, glm::value_ptr(P));
    glUniform3fv(shader("light_position"),1, &(lightPosOS.x));

for(size_t i=0;i<materials.size();i++) {
  Material* pMat = materials[i];
  if(pMat->map_Kd !="") {
    glUniform1f(shader("useDefault"), 0.0);
    GLint whichID[1];
    glGetIntegerv(GL_TEXTURE_BINDING_2D, whichID);
    if(whichID[0] != textures[i])
      glBindTexture(GL_TEXTURE_2D, textures[i]);
  }
  else
  glUniform1f(shader("useDefault"), 1.0);
  
  if(materials.size()==1)
  glDrawElements(GL_TRIANGLES, indices.size(), GL_UNSIGNED_SHORT, 0);
  else
  glDrawElements(GL_TRIANGLES, pMat->count, GL_UNSIGNED_SHORT, (const GLvoid*)(& indices[pMat->offset])); 
}
shader.UnUse();

How it works…

f 1/5/1 2/6/1 3/7/1 4/8/1

If the mesh is a triangular mesh with position vertices (1,2,3), texture coordinates (7,8,9), and normals (4,5,6) then the topology would be stored as follows:

f 1/7/4 2/8/5 3/9/6

Now, if the texture coordinates are omitted from the first example, then the topology would be stored as follows:

f 1//1 2//1 3//1 4//1

struct Vertex  {
   glm::vec3 pos, normal;
   glm::vec2 uv;
};

glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(Vertex)*vertices.size(), &(vertices[0].pos.x), GL_STATIC_DRAW);
glEnableVertexAttribArray(shader["vVertex"]);
glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,sizeof(Vertex),0);
glEnableVertexAttribArray(shader["vNormal"]);
glVertexAttribPointer(shader["vNormal"], 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)(offsetof(Vertex, normal)) );
glEnableVertexAttribArray(shader["vUV"]);
glVertexAttribPointer(shader["vUV"], 2, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)(offsetof(Vertex, uv)) );

If the mesh has a single material, we store the mesh indices into a GL_ELEMENT_ARRAY_BUFFER target. Otherwise, we render the submeshes by material.

if(materials.size()==1) {
  glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
  glBufferData(GL_ELEMENT_ARRAY_BUFFER,  sizeof(GLushort) * indices.size(), &(indices[0]), GL_STATIC_DRAW);
}

At the time of rendering, if we have a single material, we render the whole mesh, otherwise we render the subset stored with the material.

if(materials.size()==1)
  glDrawElements(GL_TRIANGLES,indices.size(),GL_UNSIGNED_SHORT,0);
else
  glDrawElements(GL_TRIANGLES, pMat->count, GL_UNSIGNED_SHORT, (const GLvoid*)(&indices[pMat->offset]));

There's more…

How it works…

f 1/5/1 2/6/1 3/7/1 4/8/1

If the mesh is a triangular mesh with position vertices (1,2,3), texture coordinates (7,8,9), and normals (4,5,6) then the topology would be stored as follows:

f 1/7/4 2/8/5 3/9/6

Now, if the texture coordinates are omitted from the first example, then the topology would be stored as follows:

f 1//1 2//1 3//1 4//1

struct Vertex  {
   glm::vec3 pos, normal;
   glm::vec2 uv;
};

glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(Vertex)*vertices.size(), &(vertices[0].pos.x), GL_STATIC_DRAW);
glEnableVertexAttribArray(shader["vVertex"]);
glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,sizeof(Vertex),0);
glEnableVertexAttribArray(shader["vNormal"]);
glVertexAttribPointer(shader["vNormal"], 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)(offsetof(Vertex, normal)) );
glEnableVertexAttribArray(shader["vUV"]);
glVertexAttribPointer(shader["vUV"], 2, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)(offsetof(Vertex, uv)) );

If the mesh has a single material, we store the mesh indices into a GL_ELEMENT_ARRAY_BUFFER target. Otherwise, we render the submeshes by material.

if(materials.size()==1) {
  glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, vboIndicesID);
  glBufferData(GL_ELEMENT_ARRAY_BUFFER,  sizeof(GLushort) * indices.size(), &(indices[0]), GL_STATIC_DRAW);
}

At the time of rendering, if we have a single material, we render the whole mesh, otherwise we render the subset stored with the material.

if(materials.size()==1)
  glDrawElements(GL_TRIANGLES,indices.size(),GL_UNSIGNED_SHORT,0);
else
  glDrawElements(GL_TRIANGLES, pMat->count, GL_UNSIGNED_SHORT, (const GLvoid*)(&indices[pMat->offset]));

There's more…

Implementing EZMesh model loading

In this recipe, we will learn how to load and render an EZMesh model. There are several skeletal animation formats such as Quake's md2 (.md2), Autodesk® FBX (.fbx), and Collada (.dae). The conventional model formats such as Collada are overly complicated for doing simple skeletal animation. Therefore, in this recipe, we will learn how to load and render an EZMesh (.ezm) skeletal model.

Getting started

The code for this recipe is contained in the Chapter5/EZMeshViewer directory. For this recipe, we will be using two external libraries to aid with the EZMesh (.ezm) mesh file parsing. The first library is called MeshImport and it can be downloaded from http://code.google.com/p/meshimport/. Make sure to get the latest svn trunk of the code. After downloading, change directory to the compiler subdirectory which contains the visual studio solution files. Double-click to open the solution and build the project dlls. After the library is built successfully, copy MeshImport_[x86/x64].dll and MeshImportEZM_[x86/x64].dll (subject to your machine configuration) into your current project directory. In addition, also copy the MeshImport.[h/cpp] files which contain some useful library loading routines.

In addition, since EZMesh is an XML format to support loading of textures, we parse the EZMesh XML manually with the help of the pugixml library. You can download it from http://pugixml.org/downloads/. As pugixml is tiny, we can directly include the source files with the project.

How to do it...

Let us start this recipe by following these simple steps:

Create a global reference to an EzmLoader object. Call the EzmLoader::Load function passing it the name of the EZMesh (.ezm) file. Pass the vectors to store the submeshes, vertices, indices, and materials-to-image map. The Load function also accepts the min and max vectors to store the EZMesh bounding box.
```
   if(!ezm.Load(mesh_filename.c_str(), submeshes, vertices, indices, material2ImageMap, min, max)) {
     cout<<"Cannot load the EZMesh mesh"<<endl;
     exit(EXIT_FAILURE);
   }
```

Using the material information, generate the OpenGL textures for the EZMesh geometry.

  for(size_t k=0;k<materialNames.size();k++) {
    GLuint id = 0;
    glGenTextures(1, &id);
    glBindTexture(GL_TEXTURE_2D, id);
    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_REPEAT);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
    int texture_width = 0, texture_height = 0, channels=0;
    const string& filename =  materialNames[k];

    std::string full_filename = mesh_path;
    full_filename.append(filename);

    //Image loading using SOIL and vertical image flipping
    //…
    GLenum format = GL_RGBA;
    switch(channels) {
      case 2:  format = GL_RG32UI; break;
      case 3: format = GL_RGB;  break;
      case 4: format = GL_RGBA;  break;
    }
    glTexImage2D(GL_TEXTURE_2D, 0, format, texture_width, texture_height, 0, format, GL_UNSIGNED_BYTE, pData);
    SOIL_free_image_data(pData);
    materialMap[filename] = id ;
  }

Set up the interleaved buffer object as in the previous recipe, Implementing OBJ model loading using interleaved buffers.

  glBindVertexArray(vaoID);
  glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
  glBufferData (GL_ARRAY_BUFFER, sizeof(Vertex)*vertices.size(), &(vertices[0].pos.x), GL_DYNAMIC_DRAW);

  glEnableVertexAttribArray(shader["vVertex"]);
  glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,sizeof(Vertex),0);

  glEnableVertexAttribArray(shader["vNormal"]);
  glVertexAttribPointer(shader["vNormal"], 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)(offsetof(Vertex, normal)) );

  glEnableVertexAttribArray(shader["vUV"]);
  glVertexAttribPointer(shader["vUV"], 2, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)(offsetof(Vertex, uv)) );

To render the EZMesh, bind the mesh's vertex array object, set up the shader, and pass the shader uniforms.

  glBindVertexArray(vaoID); {
    shader.Use();
    glUniformMatrix4fv(shader("MV"), 1, GL_FALSE, glm::value_ptr(MV));
    glUniformMatrix3fv(shader("N"), 1, GL_FALSE, glm::value_ptr(glm::inverseTranspose(glm::mat3(MV))));
    glUniformMatrix4fv(shader("P"), 1, GL_FALSE, glm::value_ptr(P));
    glUniform3fv(shader("light_position"),1, &(lightPosES.x));

Loop through all submeshes, bind the submesh texture, and then issue the glDrawEements call, passing it the submesh indices. If the submesh has no materials, a default solid color material is assigned to the submesh.

  for(size_t i=0;i<submeshes.size();i++) {
    if(strlen(submeshes[i].materialName)>0) {
      GLuint id = materialMap[material2ImageMap[ submeshes[i].materialName]];

      GLint whichID[1];
      glGetIntegerv(GL_TEXTURE_BINDING_2D, whichID);
      
      if(whichID[0] != id)
        glBindTexture(GL_TEXTURE_2D, id);
        glUniform1f(shader("useDefault"), 0.0);
      } else {
        glUniform1f(shader("useDefault"), 1.0);
      }
      glDrawElements(GL_TRIANGLES, submeshes[i].indices.size(), GL_UNSIGNED_INT, &submeshes[i].indices[0]);
    }
  }

How it works…

EZMesh is an XML based skeletal animation format. There are two parts to this recipe: parsing of the EZMesh file using the MeshImport/pugixml libraries and handling of the data using OpenGL buffer objects. The first part is handled by the EzmLoader::Load function. Along with the filename, this function accepts vectors to store the submeshes, vertices, indices, and material names map contained in the mesh file.

If we open an EZMesh file, it contains a collection of XML elements. The first element is MeshSystem. This element contains four child elements: Skeletons, Animations, Materials, and Meshes. Each of these subelements has a count attribute that stores the total number of corresponding items in the EZMesh file. Note that we can remove the element as desired. So the hierarchy is typically as follows:

<MeshSystem>
    <Skeletons count="N">
    <Animations count="N">
    <Materials count="N">
    <Meshes count="N">
</MeshSystem>

For this recipe, we are interested in the last two subelements: Materials and Meshes. We will be using the first two subelements in the skeletal animation recipe in a later chapter of this book. Each Materials element has a counted number of Material elements. Each Material element stores the material's name in the name attribute and the material's details. For example, the texture map file name in the meta_data attribute. In the EZMLoader::Load function, we use pugi_xml to parse the Materials element and its subelements into a material map. This map stores the material's name and its texture file name. Note that the MeshImport library does provide functions for reading material information, but they are broken.

pugi::xml_node mats = doc.child("MeshSystem").child("Materials");
int totalMaterials = atoi(mats.attribute("count").value());
pugi::xml_node material = mats.child("Material");
for(int i=0;i<totalMaterials;i++) {
  std::string name = material.attribute("name").value();
  std::string metadata = material.attribute("meta_data").value();
  //clean up metadata
  int len = metadata.length();
  if(len>0) {
    string fullName="";
    int index = metadata.find_last_of("\\");
    if(index == string::npos) {
      fullName.append(metadata);
    } else {
      std::string fileNameOnly = metadata.substr(index+1,  
      metadata.length());
      fullName.append(fileNameOnly);
    }
    bool exists = true;
    if(materialNames.find(name)==materialNames.end() ) 
       exists = false;
    if(!exists)
      materialNames[name] = (fullName);
      material = material.next_sibling("Material");
  }
}

After the material information is loaded in, we initialize the MeshImport library by calling the NVSHARE::loadMeshImporters function and passing it the directory where MeshImport dlls (MeshImport_[x86,x64].dll and MeshImportEZM_[x86,x64].dll) are placed. Upon success, this function returns the NVSHARE::MeshImport library object. Using the MeshImport library object, we first create the mesh system container by calling the NVSHARE::MeshImport::createMeshSystemContainer function. This function accepts the object name and the EZMesh file contents. If successful, this function returns the MeshSystemContainer object which is then passed to the NVSHARE::MeshImport::getMeshSystem function which returns the NVSHARE::MeshSystem object. This represents the MeshSystem node in the EZMesh XML file.

Once we have the MeshSystem object, we can query all of the subelements. These reside in the MeshSystem object as member variables. So let's say we want to traverse through all of the meshes in the current EZMesh file and copy the per-vertex attributes to our own vector (vertices), we would simply do the following:

for(size_t i=0;i<ms->mMeshCount;i++) {
  NVSHARE::Mesh* pMesh = ms->mMeshes[i];
  vertices.resize(pMesh->mVertexCount);
  for(size_t j=0;j<pMesh->mVertexCount;j++) {
    vertices[j].pos.x = pMesh->mVertices[j].mPos[0];
    vertices[j].pos.y = pMesh->mVertices[j].mPos[1];
    vertices[j].pos.z = pMesh->mVertices[j].mPos[2];
    
    vertices[j].normal.x = pMesh->mVertices[j].mNormal[0];
    vertices[j].normal.y = pMesh->mVertices[j].mNormal[1];
    vertices[j].normal.z = pMesh->mVertices[j].mNormal[2]; 
    
    vertices[j].uv.x = pMesh->mVertices[j].mTexel1[0];
    vertices[j].uv.y = pMesh->mVertices[j].mTexel1[1];
  }
}

In an EZMesh file, the indices are sorted by materials into submeshes. We iterate through all of the submeshes and then store their material name and indices into our container.

submeshes.resize(pMesh->mSubMeshCount);
for(size_t j=0;j<pMesh->mSubMeshCount;j++) {
  NVSHARE::SubMesh* pSubMesh = pMesh->mSubMeshes[j];
  submeshes[j].materialName = pSubMesh->mMaterialName;
  submeshes[j].indices.resize(pSubMesh->mTriCount * 3);
  memcpy(&(submeshes[j].indices[0]), pSubMesh->mIndices, sizeof(unsigned int) *  pSubMesh->mTriCount * 3);
}

After the EZMesh file is parsed and we have the per-vertex data stored, we first generate the OpenGL textures from the EZMesh materials list. Then we store the texture IDs into a material map so that we can refer to the textures by material name.

for(size_t k=0;k<materialNames.size();k++) {
  GLuint id = 0;
  glGenTextures(1, &id);
  glBindTexture(GL_TEXTURE_2D, id);
  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_REPEAT);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
  int texture_width = 0, texture_height = 0, channels=0;
  const string& filename =  materialNames[k];
  std::string full_filename = mesh_path;
  full_filename.append(filename);
  GLubyte* pData = SOIL_load_image(full_filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO);
  if(pData == NULL) {
    cerr<<"Cannot load image: "<<full_filename.c_str()<<endl;
    exit(EXIT_FAILURE);
  }
  //… Flip the image on Y axis and determine the image format
  glTexImage2D(GL_TEXTURE_2D, 0, format, texture_width, texture_height, 0, format, GL_UNSIGNED_BYTE, pData);
  SOIL_free_image_data(pData);
  materialMap[filename] = id ;
}

After the materials, the shaders are loaded as in the previous recipes. The per-vertex data is then transferred to the GPU using vertex array and vertex buffer objects. In this case, we use the interleaved vertex buffer format.

glGenVertexArrays(1, &vaoID);
glGenBuffers(1, &vboVerticesID);
glGenBuffers(1, &vboIndicesID);
  
glBindVertexArray(vaoID);
glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(Vertex)*vertices.size(), &(vertices[0].pos.x), GL_DYNAMIC_DRAW);
glEnableVertexAttribArray(shader["vVertex"]);

glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,sizeof(Vertex),0);
glEnableVertexAttribArray(shader["vNormal"]);
glVertexAttribPointer(shader["vNormal"], 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)(offsetof(Vertex, normal)) ); 
glEnableVertexAttribArray(shader["vUV"]);
glVertexAttribPointer(shader["vUV"], 2, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)(offsetof(Vertex, uv)) );

For rendering of the mesh, we first bind the vertex array object of the mesh, attach our shader and pass the shader uniforms. Then we loop over all of the submeshes and bind the appropriate texture (if the submesh has texture). Otherwise, a default color is used. Finally, the indices of the submesh are used to draw the mesh using the glDrawElements function.

glBindVertexArray(vaoID); {
  shader.Use();
  glUniformMatrix4fv(shader("MV"), 1, GL_FALSE, glm::value_ptr(MV));
  glUniformMatrix3fv(shader("N"), 1, GL_FALSE, glm::value_ptr(glm::inverseTranspose(glm::mat3(MV))));
  glUniformMatrix4fv(shader("P"), 1, GL_FALSE, glm::value_ptr(P));
  glUniform3fv(shader("light_position"),1, &(lightPosES.x));
  for(size_t i=0;i<submeshes.size();i++) {
    if(strlen(submeshes[i].materialName)>0) {
      GLuint id = 
      materialMap[material2ImageMap[submeshes[i].materialName]];
      GLint whichID[1];
      glGetIntegerv(GL_TEXTURE_BINDING_2D, whichID);
      if(whichID[0] != id)
        glBindTexture(GL_TEXTURE_2D, id);
        glUniform1f(shader("useDefault"), 0.0);
    } else {
      glUniform1f(shader("useDefault"), 1.0);
    }
    glDrawElements(GL_TRIANGLES, submeshes[i].indices.size(), GL_UNSIGNED_INT, &submeshes[i].indices[0]);
  }
  shader.UnUse();
}

There's more…

The demo application implementing this recipe renders a skeletal model with textures. The point light source can be moved by dragging the right mouse button. The output result is shown in the following figure:

How to do it...

Let us start this recipe by following these simple steps:

Create a global reference to an EzmLoader object. Call the EzmLoader::Load function passing it the name of the EZMesh (.ezm) file. Pass the vectors to store the submeshes, vertices, indices, and materials-to-image map. The Load function also accepts the min and max vectors to store the EZMesh bounding box.
```
   if(!ezm.Load(mesh_filename.c_str(), submeshes, vertices, indices, material2ImageMap, min, max)) {
     cout<<"Cannot load the EZMesh mesh"<<endl;
     exit(EXIT_FAILURE);
   }
```

Using the material information, generate the OpenGL textures for the EZMesh geometry.

  for(size_t k=0;k<materialNames.size();k++) {
    GLuint id = 0;
    glGenTextures(1, &id);
    glBindTexture(GL_TEXTURE_2D, id);
    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_REPEAT);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
    int texture_width = 0, texture_height = 0, channels=0;
    const string& filename =  materialNames[k];

    std::string full_filename = mesh_path;
    full_filename.append(filename);

    //Image loading using SOIL and vertical image flipping
    //…
    GLenum format = GL_RGBA;
    switch(channels) {
      case 2:  format = GL_RG32UI; break;
      case 3: format = GL_RGB;  break;
      case 4: format = GL_RGBA;  break;
    }
    glTexImage2D(GL_TEXTURE_2D, 0, format, texture_width, texture_height, 0, format, GL_UNSIGNED_BYTE, pData);
    SOIL_free_image_data(pData);
    materialMap[filename] = id ;
  }

Set up the interleaved buffer object as in the previous recipe, Implementing OBJ model loading using interleaved buffers.

  glBindVertexArray(vaoID);
  glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
  glBufferData (GL_ARRAY_BUFFER, sizeof(Vertex)*vertices.size(), &(vertices[0].pos.x), GL_DYNAMIC_DRAW);

  glEnableVertexAttribArray(shader["vVertex"]);
  glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,sizeof(Vertex),0);

  glEnableVertexAttribArray(shader["vNormal"]);
  glVertexAttribPointer(shader["vNormal"], 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)(offsetof(Vertex, normal)) );

  glEnableVertexAttribArray(shader["vUV"]);
  glVertexAttribPointer(shader["vUV"], 2, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)(offsetof(Vertex, uv)) );

To render the EZMesh, bind the mesh's vertex array object, set up the shader, and pass the shader uniforms.

  glBindVertexArray(vaoID); {
    shader.Use();
    glUniformMatrix4fv(shader("MV"), 1, GL_FALSE, glm::value_ptr(MV));
    glUniformMatrix3fv(shader("N"), 1, GL_FALSE, glm::value_ptr(glm::inverseTranspose(glm::mat3(MV))));
    glUniformMatrix4fv(shader("P"), 1, GL_FALSE, glm::value_ptr(P));
    glUniform3fv(shader("light_position"),1, &(lightPosES.x));

  for(size_t i=0;i<submeshes.size();i++) {
    if(strlen(submeshes[i].materialName)>0) {
      GLuint id = materialMap[material2ImageMap[ submeshes[i].materialName]];

      GLint whichID[1];
      glGetIntegerv(GL_TEXTURE_BINDING_2D, whichID);
      
      if(whichID[0] != id)
        glBindTexture(GL_TEXTURE_2D, id);
        glUniform1f(shader("useDefault"), 0.0);
      } else {
        glUniform1f(shader("useDefault"), 1.0);
      }
      glDrawElements(GL_TRIANGLES, submeshes[i].indices.size(), GL_UNSIGNED_INT, &submeshes[i].indices[0]);
    }
  }

How it works…

<MeshSystem>
    <Skeletons count="N">
    <Animations count="N">
    <Materials count="N">
    <Meshes count="N">
</MeshSystem>

pugi::xml_node mats = doc.child("MeshSystem").child("Materials");
int totalMaterials = atoi(mats.attribute("count").value());
pugi::xml_node material = mats.child("Material");
for(int i=0;i<totalMaterials;i++) {
  std::string name = material.attribute("name").value();
  std::string metadata = material.attribute("meta_data").value();
  //clean up metadata
  int len = metadata.length();
  if(len>0) {
    string fullName="";
    int index = metadata.find_last_of("\\");
    if(index == string::npos) {
      fullName.append(metadata);
    } else {
      std::string fileNameOnly = metadata.substr(index+1,  
      metadata.length());
      fullName.append(fileNameOnly);
    }
    bool exists = true;
    if(materialNames.find(name)==materialNames.end() ) 
       exists = false;
    if(!exists)
      materialNames[name] = (fullName);
      material = material.next_sibling("Material");
  }
}

for(size_t i=0;i<ms->mMeshCount;i++) {
  NVSHARE::Mesh* pMesh = ms->mMeshes[i];
  vertices.resize(pMesh->mVertexCount);
  for(size_t j=0;j<pMesh->mVertexCount;j++) {
    vertices[j].pos.x = pMesh->mVertices[j].mPos[0];
    vertices[j].pos.y = pMesh->mVertices[j].mPos[1];
    vertices[j].pos.z = pMesh->mVertices[j].mPos[2];
    
    vertices[j].normal.x = pMesh->mVertices[j].mNormal[0];
    vertices[j].normal.y = pMesh->mVertices[j].mNormal[1];
    vertices[j].normal.z = pMesh->mVertices[j].mNormal[2]; 
    
    vertices[j].uv.x = pMesh->mVertices[j].mTexel1[0];
    vertices[j].uv.y = pMesh->mVertices[j].mTexel1[1];
  }
}

In an EZMesh file, the indices are sorted by materials into submeshes. We iterate through all of the submeshes and then store their material name and indices into our container.

submeshes.resize(pMesh->mSubMeshCount);
for(size_t j=0;j<pMesh->mSubMeshCount;j++) {
  NVSHARE::SubMesh* pSubMesh = pMesh->mSubMeshes[j];
  submeshes[j].materialName = pSubMesh->mMaterialName;
  submeshes[j].indices.resize(pSubMesh->mTriCount * 3);
  memcpy(&(submeshes[j].indices[0]), pSubMesh->mIndices, sizeof(unsigned int) *  pSubMesh->mTriCount * 3);
}

for(size_t k=0;k<materialNames.size();k++) {
  GLuint id = 0;
  glGenTextures(1, &id);
  glBindTexture(GL_TEXTURE_2D, id);
  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_REPEAT);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
  int texture_width = 0, texture_height = 0, channels=0;
  const string& filename =  materialNames[k];
  std::string full_filename = mesh_path;
  full_filename.append(filename);
  GLubyte* pData = SOIL_load_image(full_filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO);
  if(pData == NULL) {
    cerr<<"Cannot load image: "<<full_filename.c_str()<<endl;
    exit(EXIT_FAILURE);
  }
  //… Flip the image on Y axis and determine the image format
  glTexImage2D(GL_TEXTURE_2D, 0, format, texture_width, texture_height, 0, format, GL_UNSIGNED_BYTE, pData);
  SOIL_free_image_data(pData);
  materialMap[filename] = id ;
}

glGenVertexArrays(1, &vaoID);
glGenBuffers(1, &vboVerticesID);
glGenBuffers(1, &vboIndicesID);
  
glBindVertexArray(vaoID);
glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(Vertex)*vertices.size(), &(vertices[0].pos.x), GL_DYNAMIC_DRAW);
glEnableVertexAttribArray(shader["vVertex"]);

glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,sizeof(Vertex),0);
glEnableVertexAttribArray(shader["vNormal"]);
glVertexAttribPointer(shader["vNormal"], 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)(offsetof(Vertex, normal)) ); 
glEnableVertexAttribArray(shader["vUV"]);
glVertexAttribPointer(shader["vUV"], 2, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)(offsetof(Vertex, uv)) );

glBindVertexArray(vaoID); {
  shader.Use();
  glUniformMatrix4fv(shader("MV"), 1, GL_FALSE, glm::value_ptr(MV));
  glUniformMatrix3fv(shader("N"), 1, GL_FALSE, glm::value_ptr(glm::inverseTranspose(glm::mat3(MV))));
  glUniformMatrix4fv(shader("P"), 1, GL_FALSE, glm::value_ptr(P));
  glUniform3fv(shader("light_position"),1, &(lightPosES.x));
  for(size_t i=0;i<submeshes.size();i++) {
    if(strlen(submeshes[i].materialName)>0) {
      GLuint id = 
      materialMap[material2ImageMap[submeshes[i].materialName]];
      GLint whichID[1];
      glGetIntegerv(GL_TEXTURE_BINDING_2D, whichID);
      if(whichID[0] != id)
        glBindTexture(GL_TEXTURE_2D, id);
        glUniform1f(shader("useDefault"), 0.0);
    } else {
      glUniform1f(shader("useDefault"), 1.0);
    }
    glDrawElements(GL_TRIANGLES, submeshes[i].indices.size(), GL_UNSIGNED_INT, &submeshes[i].indices[0]);
  }
  shader.UnUse();
}

There's more…

How it works…

<MeshSystem>
    <Skeletons count="N">
    <Animations count="N">
    <Materials count="N">
    <Meshes count="N">
</MeshSystem>

pugi::xml_node mats = doc.child("MeshSystem").child("Materials");
int totalMaterials = atoi(mats.attribute("count").value());
pugi::xml_node material = mats.child("Material");
for(int i=0;i<totalMaterials;i++) {
  std::string name = material.attribute("name").value();
  std::string metadata = material.attribute("meta_data").value();
  //clean up metadata
  int len = metadata.length();
  if(len>0) {
    string fullName="";
    int index = metadata.find_last_of("\\");
    if(index == string::npos) {
      fullName.append(metadata);
    } else {
      std::string fileNameOnly = metadata.substr(index+1,  
      metadata.length());
      fullName.append(fileNameOnly);
    }
    bool exists = true;
    if(materialNames.find(name)==materialNames.end() ) 
       exists = false;
    if(!exists)
      materialNames[name] = (fullName);
      material = material.next_sibling("Material");
  }
}

for(size_t i=0;i<ms->mMeshCount;i++) {
  NVSHARE::Mesh* pMesh = ms->mMeshes[i];
  vertices.resize(pMesh->mVertexCount);
  for(size_t j=0;j<pMesh->mVertexCount;j++) {
    vertices[j].pos.x = pMesh->mVertices[j].mPos[0];
    vertices[j].pos.y = pMesh->mVertices[j].mPos[1];
    vertices[j].pos.z = pMesh->mVertices[j].mPos[2];
    
    vertices[j].normal.x = pMesh->mVertices[j].mNormal[0];
    vertices[j].normal.y = pMesh->mVertices[j].mNormal[1];
    vertices[j].normal.z = pMesh->mVertices[j].mNormal[2]; 
    
    vertices[j].uv.x = pMesh->mVertices[j].mTexel1[0];
    vertices[j].uv.y = pMesh->mVertices[j].mTexel1[1];
  }
}

In an EZMesh file, the indices are sorted by materials into submeshes. We iterate through all of the submeshes and then store their material name and indices into our container.

submeshes.resize(pMesh->mSubMeshCount);
for(size_t j=0;j<pMesh->mSubMeshCount;j++) {
  NVSHARE::SubMesh* pSubMesh = pMesh->mSubMeshes[j];
  submeshes[j].materialName = pSubMesh->mMaterialName;
  submeshes[j].indices.resize(pSubMesh->mTriCount * 3);
  memcpy(&(submeshes[j].indices[0]), pSubMesh->mIndices, sizeof(unsigned int) *  pSubMesh->mTriCount * 3);
}

for(size_t k=0;k<materialNames.size();k++) {
  GLuint id = 0;
  glGenTextures(1, &id);
  glBindTexture(GL_TEXTURE_2D, id);
  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_REPEAT);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
  int texture_width = 0, texture_height = 0, channels=0;
  const string& filename =  materialNames[k];
  std::string full_filename = mesh_path;
  full_filename.append(filename);
  GLubyte* pData = SOIL_load_image(full_filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO);
  if(pData == NULL) {
    cerr<<"Cannot load image: "<<full_filename.c_str()<<endl;
    exit(EXIT_FAILURE);
  }
  //… Flip the image on Y axis and determine the image format
  glTexImage2D(GL_TEXTURE_2D, 0, format, texture_width, texture_height, 0, format, GL_UNSIGNED_BYTE, pData);
  SOIL_free_image_data(pData);
  materialMap[filename] = id ;
}

glGenVertexArrays(1, &vaoID);
glGenBuffers(1, &vboVerticesID);
glGenBuffers(1, &vboIndicesID);
  
glBindVertexArray(vaoID);
glBindBuffer (GL_ARRAY_BUFFER, vboVerticesID);
glBufferData (GL_ARRAY_BUFFER, sizeof(Vertex)*vertices.size(), &(vertices[0].pos.x), GL_DYNAMIC_DRAW);
glEnableVertexAttribArray(shader["vVertex"]);

glVertexAttribPointer(shader["vVertex"], 3, GL_FLOAT, GL_FALSE,sizeof(Vertex),0);
glEnableVertexAttribArray(shader["vNormal"]);
glVertexAttribPointer(shader["vNormal"], 3, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)(offsetof(Vertex, normal)) ); 
glEnableVertexAttribArray(shader["vUV"]);
glVertexAttribPointer(shader["vUV"], 2, GL_FLOAT, GL_FALSE, sizeof(Vertex), (const GLvoid*)(offsetof(Vertex, uv)) );

glBindVertexArray(vaoID); {
  shader.Use();
  glUniformMatrix4fv(shader("MV"), 1, GL_FALSE, glm::value_ptr(MV));
  glUniformMatrix3fv(shader("N"), 1, GL_FALSE, glm::value_ptr(glm::inverseTranspose(glm::mat3(MV))));
  glUniformMatrix4fv(shader("P"), 1, GL_FALSE, glm::value_ptr(P));
  glUniform3fv(shader("light_position"),1, &(lightPosES.x));
  for(size_t i=0;i<submeshes.size();i++) {
    if(strlen(submeshes[i].materialName)>0) {
      GLuint id = 
      materialMap[material2ImageMap[submeshes[i].materialName]];
      GLint whichID[1];
      glGetIntegerv(GL_TEXTURE_BINDING_2D, whichID);
      if(whichID[0] != id)
        glBindTexture(GL_TEXTURE_2D, id);
        glUniform1f(shader("useDefault"), 0.0);
    } else {
      glUniform1f(shader("useDefault"), 1.0);
    }
    glDrawElements(GL_TRIANGLES, submeshes[i].indices.size(), GL_UNSIGNED_INT, &submeshes[i].indices[0]);
  }
  shader.UnUse();
}

There's more…

Implementing simple particle system

In this recipe, we will implement a simple particle system. Particle systems are a special category of objects that enable us to simulate fuzzy effects in computer graphics; for example, fire or smoke. In this recipe, we will implement a simple particle system that emits particles at the specified rate from an oriented emitter. In this recipe, we will assign particles with a basic fire color map without texture, to give the effect of fire.

Getting started

The code for this recipe is contained in the Chapter5/SimpleParticles directory. All of the work for particle simulation is carried out in the vertex shader.

How to do it…

Let us start this recipe by following these simple steps:

Create a vertex shader without any per-vertex attribute. The vertex shader generates the current particle position and outputs a smooth color to the fragment shader for use as the current fragment color.

#version 330 core  
smooth out vec4 vSmoothColor;
uniform mat4 MVP;
uniform float time;

const vec3 a = vec3(0,2,0);    //acceleration of particles
//vec3 g = vec3(0,-9.8,0);  // acceleration due to gravity

const float rate = 1/500.0;    //rate of emission
const float life = 2;        //life of particle

//constants
const float PI = 3.14159;
const float TWO_PI = 2*PI;

//colormap colours
const vec3 RED = vec3(1,0,0);
const vec3 GREEN = vec3(0,1,0);
const vec3 YELLOW = vec3(1,1,0);

//pseudorandom number generator
float rand(vec2 co){
  return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

//pseudorandom direction on a sphere
vec3 uniformRadomDir(vec2 v, out vec2 r) {
  r.x = rand(v.xy);
  r.y = rand(v.yx);
  float theta = mix(0.0, PI / 6.0, r.x);
  float phi = mix(0.0, TWO_PI, r.y);
  return vec3(sin(theta) * cos(phi), cos(theta), sin(theta) * sin(phi));
}

void main() {
  vec3 pos=vec3(0);
  float t = gl_VertexID*rate;
  float alpha = 1;
  if(time>t) {
    float dt = mod((time-t), life);
    vec2 xy = vec2(gl_VertexID,t);
    vec2 rdm=vec2(0);
    pos = ((uniformRadomDir(xy, rdm) + 0.5*a*dt)*dt);
    alpha = 1.0 - (dt/life);    
  }
  vSmoothColor = vec4(mix(RED,YELLOW,alpha),alpha);
  gl_Position = MVP*vec4(pos,1);
}

The fragment shader outputs the smooth color as the current fragment output color.

#version 330 core
smooth in vec4 vSmoothColor;

layout(location=0) out vec4 vFragColor;

void main() {
  vFragColor = vSmoothColor;
}

Set up a single vertex array object and bind it.

  glGenVertexArrays(1, &vaoID);
  glBindVertexArray(vaoID);

In the
rendering code, set up the shader and pass the shader uniforms. For example, pass the current time to the time shader uniform and the combined modelview projection matrix (MVP). Here we add an emitter transform matrix (emitterXForm) to the combined MVP matrix that controls the orientation of our particle emitter.
```
  shader.Use();
  glUniform1f(shader("time"), time);
  glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(P*MV*emitterXForm));
```
Finally, we render the total number of particles (MAX_PARTICLES) with a call to the glDrawArrays function and unbind our shader.
```
  glDrawArrays(GL_POINTS, 0, MAX_PARTICLES);
  shader.UnUse();
```

Tip

Versions of OpenGL prior to OpenGL 3 provided a special particle type called GL_POINT_SPRITE. In OpenGL 3.3 and above core profiles, the GL_POINT_SPRITE enum has been deprecated. Hence, now GL_POINTS acts as point sprites by default.

How it works…

The entire code from generation of particle positions to assignment of colors and forces is carried out in the vertex shader. In this recipe, we do not store any per-vertex attribute as in the previous recipes. Instead, we simply invoke the glDrawArrays call with the number of particles (MAX_PARTICLES) we need to render. This calls our vertex shader for each particle in turn.

We have two uniforms in the vertex shader, the combined modelview projection matrix (MVP) and the current simulation time (time). The other variables required for particle simulation are stored as shader constants.

#version 330  
smooth out vec4 vSmoothColor;
uniform mat4 MVP; 
uniform float time;
const vec3 a = vec3(0,2,0);      //acceleration of particles
//vec3 g = vec3(0,-9.8,0);             //acceleration due to gravity
const float rate = 1/500.0;     //rate of emission of particles
const float life = 2;             //particle life
const float PI = 3.14159;
const float TWO_PI = 2*PI;
const vec3 RED = vec3(1,0,0);
const vec3 GREEN = vec3(0,1,0);
const vec3 YELLOW = vec3(1,1,0);

In the main function, we calculate the current particle time (t) by multiplying its vertex ID (gl_VertexID) with the emission rate (rate). The gl_VertexID attribute is a unique integer identifier associated with each vertex. We then check the current time (time) against the particle's time (t). If it is greater, we calculate the time step amount (dt) and then calculate the particle's position using a simple kinematics formula.

void main() {
  vec3 pos=vec3(0);
  float t = gl_VertexID*rate;
  float alpha = 1;
  if(time>t) {

To generate the particle, we need to have its initial velocity. This is generated on the fly by using a pseudorandom generator with the vertex ID and time as the seeds using the function uniformRandomDir which is defined as follows:

//pseudorandom number generator
float rand(vec2 co){
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}
//pseudorandom direction on a sphere
vec3 uniformRadomDir(vec2 v, out vec2 r) {
    r.x = rand(v.xy);
    r.y = rand(v.yx);
    float theta = mix(0.0, PI / 6.0, r.x);
    float phi = mix(0.0, TWO_PI, r.y);
    return vec3(sin(theta) * cos(phi), cos(theta), sin(theta) * sin(phi));
}

The particle's position is then calculated using the current time and the random initial velocity. To enable respawning, we use the modulus operator (mod) of the difference between the particle's time and the current time (time-t) with the life of particle (life). After calculation of the position, we calculate the particle's alpha to gently fade it when its life is consumed.

  float dt = mod((time-t), life);
  vec2 xy = vec2(gl_VertexID,t);
  vec2 rdm;
  pos = ((uniformRadomDir(xy, rdm) + 0.5*a*dt)*dt);
  alpha = 1.0 - (dt/life);
}

The alpha value is used to linearly interpolate between red and yellow colors by calling the GLSL mix function to give the fire effect. Finally, the generated position is multiplied with the combined modelview projection (MVP) matrix to get the clip space position of the particle.

  vSmoothColor = vec4(mix(RED,YELLOW,alpha),alpha);
  gl_Position = MVP*vec4(pos,1);
}

The fragment shader simply uses the vSmoothColor output variable from the vertex shader as the current fragment color.

#version 330 core
smooth in vec4 vSmoothColor;
layout(location=0) out vec4 vFragColor;
void main() {
  vFragColor = vSmoothColor; 
}

Extending to textured billboarded particles requires us to change only the fragment shader. The point sprites provide a varying gl_PointCoord that can be used to sample a texture in the fragment shader as shown in the textured particle fragment shader (Chapter5/SimpleParticles/shaders/textured.frag).

#version 330 core
smooth in vec4 vSmoothColor;
layout(location=0) out vec4 vFragColor;
uniform sampler2D textureMap;
void main()
{
  vFragColor = texture(textureMap, gl_PointCoord) * vSmoothColor.a;
}

The application loads a particle texture and generates an OpenGL texture object from it.

GLubyte* pData = SOIL_load_image(texture_filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO);
if(pData == NULL) {
  cerr<<"Cannot load image: "<<texture_filename.c_str()<<endl;
  exit(EXIT_FAILURE);
} 
//Flip the image on Y axis
int i,j;
for( j = 0; j*2 < texture_height; ++j )
{
  int index1 = j * texture_width * channels;
  int index2 = (texture_height - 1 - j)*texture_width* channels;
  for( i = texture_width * channels; i > 0; --i )
  {
    GLubyte temp = pData[index1];
    pData[index1] = pData[index2];
    pData[index2] = temp;
    ++index1;
    ++index2;
  }
}
GLenum format = GL_RGBA;
switch(channels) {
  case 2:  format = GL_RG32UI; break;
  case 3: format = GL_RGB;  break;
  case 4: format = GL_RGBA;  break;
}

glGenTextures(1, &textureID);
glBindTexture(GL_TEXTURE_2D, textureID);
  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_REPEAT);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
  glTexImage2D(GL_TEXTURE_2D, 0, format, texture_width, texture_height, 0, format, GL_UNSIGNED_BYTE, pData);
  SOIL_free_image_data(pData);

Next, the texture unit to which the texture is bound is passed to the shader.

texturedShader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
texturedShader.LoadFromFile(GL_FRAGMENT_SHADER, "shaders/textured.frag");
texturedShader.CreateAndLinkProgram();
texturedShader.Use();
  texturedShader.AddUniform("MVP");
  texturedShader.AddUniform("time");
  texturedShader.AddUniform("textureMap");
  glUniform1i(texturedShader("textureMap"),0);
texturedShader.UnUse();

Finally, the particles are rendered using the glDrawArrays call as shown earlier.

There's more…

The demo application for this recipe renders a particle system to simulate fire emitting from a point emitter as would typically come out from a rocket's exhaust. We can press the space bar key to toggle display of textured particles. The current view can be rotated and zoomed by dragging the left and middle mouse buttons respectively. The output result from the demo is displayed in the following figure:

If the textured particles shader is used, we get the following output:

The orientation and position of the emitter is controlled using the emitter transformation matrix (emitterXForm). We can change this matrix to reorient/reposition the particle system in the 3D space.

The shader code given in the previous subsection generates a particle system from a point emitter source. If we want to change the source to a rectangular emitter, we can replace the position calculation with the following shader code snippet:

pos = ( uniformRadomDir(xy, rdm) + 0.5*a*dt)*dt;
vec2 rect = (rdm*2.0 - 1.0);
pos += vec3(rect.x, 0, rect.y) ;

Changing the emitter to a disc shape further filters the points spawned in the rectangle emitter by only accepting those which lie inside the circle of a given radius, as given in the following code snippet:

pos = ( uniformRadomDir(xy, rdm) + 0.5*a*dt)*dt;
vec2 rect = (rdm*2.0 - 1.0);
float dotP = dot(rect, rect);
if(dotP<1)
  pos += vec3(rect.x, 0, rect.y);

Using this position calculation gives a disc emitter as shown in the following output:

We can also add additional forces such as air drag, wind, vortex, and so on, by simply adding to the acceleration or velocity component of the particle system. Another option could be to direct the emitter to a specific path such as a b-spline. We could also add deflectors to deflect the generated particles or create particles that spawn other particles as is typically used in a fireworks particle system. Particle systems are an extremely interesting area in computer graphics which help us obtain wonderful effects easily.

The recipe detailed here shows how to do a very simple particle system entirely on the GPU. While such a particle system might be useful for basic effects, more detailed effects would need more elaborate treatment as detailed in the references in the See also section.

How to do it…

Let us start this recipe by following these simple steps:

#version 330 core  
smooth out vec4 vSmoothColor;
uniform mat4 MVP;
uniform float time;

const vec3 a = vec3(0,2,0);    //acceleration of particles
//vec3 g = vec3(0,-9.8,0);  // acceleration due to gravity

const float rate = 1/500.0;    //rate of emission
const float life = 2;        //life of particle

//constants
const float PI = 3.14159;
const float TWO_PI = 2*PI;

//colormap colours
const vec3 RED = vec3(1,0,0);
const vec3 GREEN = vec3(0,1,0);
const vec3 YELLOW = vec3(1,1,0);

//pseudorandom number generator
float rand(vec2 co){
  return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}

//pseudorandom direction on a sphere
vec3 uniformRadomDir(vec2 v, out vec2 r) {
  r.x = rand(v.xy);
  r.y = rand(v.yx);
  float theta = mix(0.0, PI / 6.0, r.x);
  float phi = mix(0.0, TWO_PI, r.y);
  return vec3(sin(theta) * cos(phi), cos(theta), sin(theta) * sin(phi));
}

void main() {
  vec3 pos=vec3(0);
  float t = gl_VertexID*rate;
  float alpha = 1;
  if(time>t) {
    float dt = mod((time-t), life);
    vec2 xy = vec2(gl_VertexID,t);
    vec2 rdm=vec2(0);
    pos = ((uniformRadomDir(xy, rdm) + 0.5*a*dt)*dt);
    alpha = 1.0 - (dt/life);    
  }
  vSmoothColor = vec4(mix(RED,YELLOW,alpha),alpha);
  gl_Position = MVP*vec4(pos,1);
}

The fragment shader outputs the smooth color as the current fragment output color.

#version 330 core
smooth in vec4 vSmoothColor;

layout(location=0) out vec4 vFragColor;

void main() {
  vFragColor = vSmoothColor;
}

Set up a single vertex array object and bind it.

  glGenVertexArrays(1, &vaoID);
  glBindVertexArray(vaoID);

In the
rendering code, set up the shader and pass the shader uniforms. For example, pass the current time to the time shader uniform and the combined modelview projection matrix (MVP). Here we add an emitter transform matrix (emitterXForm) to the combined MVP matrix that controls the orientation of our particle emitter.
```
  shader.Use();
  glUniform1f(shader("time"), time);
  glUniformMatrix4fv(shader("MVP"), 1, GL_FALSE, glm::value_ptr(P*MV*emitterXForm));
```
Finally, we render the total number of particles (MAX_PARTICLES) with a call to the glDrawArrays function and unbind our shader.
```
  glDrawArrays(GL_POINTS, 0, MAX_PARTICLES);
  shader.UnUse();
```

Tip

How it works…

#version 330  
smooth out vec4 vSmoothColor;
uniform mat4 MVP; 
uniform float time;
const vec3 a = vec3(0,2,0);      //acceleration of particles
//vec3 g = vec3(0,-9.8,0);             //acceleration due to gravity
const float rate = 1/500.0;     //rate of emission of particles
const float life = 2;             //particle life
const float PI = 3.14159;
const float TWO_PI = 2*PI;
const vec3 RED = vec3(1,0,0);
const vec3 GREEN = vec3(0,1,0);
const vec3 YELLOW = vec3(1,1,0);

void main() {
  vec3 pos=vec3(0);
  float t = gl_VertexID*rate;
  float alpha = 1;
  if(time>t) {

//pseudorandom number generator
float rand(vec2 co){
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}
//pseudorandom direction on a sphere
vec3 uniformRadomDir(vec2 v, out vec2 r) {
    r.x = rand(v.xy);
    r.y = rand(v.yx);
    float theta = mix(0.0, PI / 6.0, r.x);
    float phi = mix(0.0, TWO_PI, r.y);
    return vec3(sin(theta) * cos(phi), cos(theta), sin(theta) * sin(phi));
}

  float dt = mod((time-t), life);
  vec2 xy = vec2(gl_VertexID,t);
  vec2 rdm;
  pos = ((uniformRadomDir(xy, rdm) + 0.5*a*dt)*dt);
  alpha = 1.0 - (dt/life);
}

  vSmoothColor = vec4(mix(RED,YELLOW,alpha),alpha);
  gl_Position = MVP*vec4(pos,1);
}

The fragment shader simply uses the vSmoothColor output variable from the vertex shader as the current fragment color.

#version 330 core
smooth in vec4 vSmoothColor;
layout(location=0) out vec4 vFragColor;
void main() {
  vFragColor = vSmoothColor; 
}

#version 330 core
smooth in vec4 vSmoothColor;
layout(location=0) out vec4 vFragColor;
uniform sampler2D textureMap;
void main()
{
  vFragColor = texture(textureMap, gl_PointCoord) * vSmoothColor.a;
}

The application loads a particle texture and generates an OpenGL texture object from it.

GLubyte* pData = SOIL_load_image(texture_filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO);
if(pData == NULL) {
  cerr<<"Cannot load image: "<<texture_filename.c_str()<<endl;
  exit(EXIT_FAILURE);
} 
//Flip the image on Y axis
int i,j;
for( j = 0; j*2 < texture_height; ++j )
{
  int index1 = j * texture_width * channels;
  int index2 = (texture_height - 1 - j)*texture_width* channels;
  for( i = texture_width * channels; i > 0; --i )
  {
    GLubyte temp = pData[index1];
    pData[index1] = pData[index2];
    pData[index2] = temp;
    ++index1;
    ++index2;
  }
}
GLenum format = GL_RGBA;
switch(channels) {
  case 2:  format = GL_RG32UI; break;
  case 3: format = GL_RGB;  break;
  case 4: format = GL_RGBA;  break;
}

glGenTextures(1, &textureID);
glBindTexture(GL_TEXTURE_2D, textureID);
  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_REPEAT);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
  glTexImage2D(GL_TEXTURE_2D, 0, format, texture_width, texture_height, 0, format, GL_UNSIGNED_BYTE, pData);
  SOIL_free_image_data(pData);

Next, the texture unit to which the texture is bound is passed to the shader.

texturedShader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
texturedShader.LoadFromFile(GL_FRAGMENT_SHADER, "shaders/textured.frag");
texturedShader.CreateAndLinkProgram();
texturedShader.Use();
  texturedShader.AddUniform("MVP");
  texturedShader.AddUniform("time");
  texturedShader.AddUniform("textureMap");
  glUniform1i(texturedShader("textureMap"),0);
texturedShader.UnUse();

Finally, the particles are rendered using the glDrawArrays call as shown earlier.

There's more…

If the textured particles shader is used, we get the following output:

pos = ( uniformRadomDir(xy, rdm) + 0.5*a*dt)*dt;
vec2 rect = (rdm*2.0 - 1.0);
pos += vec3(rect.x, 0, rect.y) ;

Using this position calculation gives a disc emitter as shown in the following output:

pos = ( uniformRadomDir(xy, rdm) + 0.5*a*dt)*dt;
vec2 rect = (rdm*2.0 - 1.0);
float dotP = dot(rect, rect);
if(dotP<1)
  pos += vec3(rect.x, 0, rect.y);

How it works…

#version 330  
smooth out vec4 vSmoothColor;
uniform mat4 MVP; 
uniform float time;
const vec3 a = vec3(0,2,0);      //acceleration of particles
//vec3 g = vec3(0,-9.8,0);             //acceleration due to gravity
const float rate = 1/500.0;     //rate of emission of particles
const float life = 2;             //particle life
const float PI = 3.14159;
const float TWO_PI = 2*PI;
const vec3 RED = vec3(1,0,0);
const vec3 GREEN = vec3(0,1,0);
const vec3 YELLOW = vec3(1,1,0);

void main() {
  vec3 pos=vec3(0);
  float t = gl_VertexID*rate;
  float alpha = 1;
  if(time>t) {

//pseudorandom number generator
float rand(vec2 co){
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
}
//pseudorandom direction on a sphere
vec3 uniformRadomDir(vec2 v, out vec2 r) {
    r.x = rand(v.xy);
    r.y = rand(v.yx);
    float theta = mix(0.0, PI / 6.0, r.x);
    float phi = mix(0.0, TWO_PI, r.y);
    return vec3(sin(theta) * cos(phi), cos(theta), sin(theta) * sin(phi));
}

  float dt = mod((time-t), life);
  vec2 xy = vec2(gl_VertexID,t);
  vec2 rdm;
  pos = ((uniformRadomDir(xy, rdm) + 0.5*a*dt)*dt);
  alpha = 1.0 - (dt/life);
}

  vSmoothColor = vec4(mix(RED,YELLOW,alpha),alpha);
  gl_Position = MVP*vec4(pos,1);
}

The fragment shader simply uses the vSmoothColor output variable from the vertex shader as the current fragment color.

#version 330 core
smooth in vec4 vSmoothColor;
layout(location=0) out vec4 vFragColor;
void main() {
  vFragColor = vSmoothColor; 
}

#version 330 core
smooth in vec4 vSmoothColor;
layout(location=0) out vec4 vFragColor;
uniform sampler2D textureMap;
void main()
{
  vFragColor = texture(textureMap, gl_PointCoord) * vSmoothColor.a;
}

The application loads a particle texture and generates an OpenGL texture object from it.

GLubyte* pData = SOIL_load_image(texture_filename.c_str(), &texture_width, &texture_height, &channels, SOIL_LOAD_AUTO);
if(pData == NULL) {
  cerr<<"Cannot load image: "<<texture_filename.c_str()<<endl;
  exit(EXIT_FAILURE);
} 
//Flip the image on Y axis
int i,j;
for( j = 0; j*2 < texture_height; ++j )
{
  int index1 = j * texture_width * channels;
  int index2 = (texture_height - 1 - j)*texture_width* channels;
  for( i = texture_width * channels; i > 0; --i )
  {
    GLubyte temp = pData[index1];
    pData[index1] = pData[index2];
    pData[index2] = temp;
    ++index1;
    ++index2;
  }
}
GLenum format = GL_RGBA;
switch(channels) {
  case 2:  format = GL_RG32UI; break;
  case 3: format = GL_RGB;  break;
  case 4: format = GL_RGBA;  break;
}

glGenTextures(1, &textureID);
glBindTexture(GL_TEXTURE_2D, textureID);
  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_REPEAT);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
  glTexImage2D(GL_TEXTURE_2D, 0, format, texture_width, texture_height, 0, format, GL_UNSIGNED_BYTE, pData);
  SOIL_free_image_data(pData);

Next, the texture unit to which the texture is bound is passed to the shader.

texturedShader.LoadFromFile(GL_VERTEX_SHADER, "shaders/shader.vert");
texturedShader.LoadFromFile(GL_FRAGMENT_SHADER, "shaders/textured.frag");
texturedShader.CreateAndLinkProgram();
texturedShader.Use();
  texturedShader.AddUniform("MVP");
  texturedShader.AddUniform("time");
  texturedShader.AddUniform("textureMap");
  glUniform1i(texturedShader("textureMap"),0);
texturedShader.UnUse();

Finally, the particles are rendered using the glDrawArrays call as shown earlier.

There's more…

If the textured particles shader is used, we get the following output:

pos = ( uniformRadomDir(xy, rdm) + 0.5*a*dt)*dt;
vec2 rect = (rdm*2.0 - 1.0);
pos += vec3(rect.x, 0, rect.y) ;

Using this position calculation gives a disc emitter as shown in the following output:

pos = ( uniformRadomDir(xy, rdm) + 0.5*a*dt)*dt;
vec2 rect = (rdm*2.0 - 1.0);
float dotP = dot(rect, rect);
if(dotP<1)
  pos += vec3(rect.x, 0, rect.y);

There's more…

If the textured particles shader is used, we get the following output:

pos = ( uniformRadomDir(xy, rdm) + 0.5*a*dt)*dt;
vec2 rect = (rdm*2.0 - 1.0);
pos += vec3(rect.x, 0, rect.y) ;