The Rants of an Angry Game Dev Girl: Mapping Tutorial

So I know it's been a while since I last blogged and partly it is because I've been busy with my animation and Production class and also my parents were recently in a pretty bad car accident and have been needing my help with a lot of things around the house and sometimes even sitting up (which really cuts into homework, studying and Blogging time but you know that's life I guess). No in my last blog, which you can find Here, I talked about 4 different types of mapping. In this tutorial I'm going to show you how to create a simple Displacement map in Photoshop, as well as the shader (in version 120 since that's the only version I know how to write the shader for displacement mapping) and how to write the shader for normal mapping. In addition, I'll be showing how to get the different types of maps from a model you have manipulated and sculpted in Mudbox.

DISPLACEMENT MAPPING

When creating a displacement map in Photoshop the easiest way is to start by using an image of clouds. Now if your confused about the clouds I promise I will explain it so it all makes sense by the end of this blog.

An image like this works perfectly, in Photoshop there are 2 simple steps you have to do to create a simple displacement map.

Step 1: Strip the colour out of the image
=> This can by down under the Image tab, under Adjustments, select the Black & White option. This is strip all colour out of the image.

Step 2: Save the image as Displacement1, them horizontally flip the image to get a second displacement map.
=>This allows for you to switch between the images to demonstrate the displacement.

Example Maps

Now these maps aren't going to do much good with having the shader to go with it. I will be showing you how to write the shader and list a few things that are important to do and have in your main. Just remember that I will be showing you how to write the displacement Map shader in version 120 since that's the way I know how to write it.

Fragment Shader:

#version 120

varying vec2 out_texcoord;
uniform sampler2D DisMap;

void main()
{
gl_FragColor= texture2D(DisMap, out_texcoord);
}

Vertex Shader:

#version 120

uniform sampler2D DisMap;
varying vec2 out_texcoord;

void main()
{
    out_texcoord = gl_MultiTexCoord0.st;
    float x=texture2D(DisMap, out_texcoord).r;

    vec4 newcoordinate = vec4(gl_Normal, 1.0) * x + gl_Vertex;
    gl_Position = gl_ModelViewProjectionMatrix * newcoordinate;


}

Now a few thing to remember to do and include in your main are the following (Now remember my code is set up differently than yours will be, these are just a few guidelines to keep in mind and depending on how you do your code you may need more or less of these suggestions):

Ensure you have your proper variables and handles necessary

unsigned int disp_DisplacementMap;
unsigned int DisplaceProgram;
unsigned int Displacement_tex;
unsigned int Displacement2_tex;

Don't forget to bind you texture to your object

glBindTexture(GL_TEXTURE_2D, Displacement_tex);

Don't forget to include your shader programs

const char *frag = "resource/shaders/Displacement_f.glsl";
const char *frag = "resource/shaders/Displacement_v.glsl";

Make sure to create a handle for the texture Uniform

disp_DisplacementMap = glGetUniformLocation(DisplaceProgram, "DisMap");

Load your images properly

Displacement_tex = ilutGLLoadImage("resource/images/Displacement.png");
Displacement2_tex = ilutGLLoadImage("resource/images/Displacement2.png");

Make sure you set up your load projection and view matrices for the current viewer properly

    glUseProgram(DisplaceProgram);

    glUniform1i(disp_DisplacementMap, 1);
    glActiveTexture(GL_TEXTURE1);

    if (mode1)
    {
        glBindTexture(GL_TEXTURE_2D, Displacement_tex);
    }
    else if(!mode1)
    {
        glBindTexture(GL_TEXTURE_2D, Displacement2_tex);
    }

NORMAL MAPPING

Now for Normal Mapping I will show you how to write the shader in version 330 (since that's the way I know how to write it best), then using Mudbox I will show you how to extract maps from you models.

Here is the normal mapping fragment and vertex shaders, these shaders are using per-fragment Phong Lighting in these shaders.

Fragment Shader:

/*
    Object-Space Normal Mapping with Phong Lighting FS

    GLSL fragment shader that performs per-fragment Phong Lighting.
    Also applies texture.
*/

#version 330 core

in vertex
{
    vec3 positionObj;
    vec3 normalObj;
    vec2 texcoordObj;
} data;

uniform vec3 eyePos;
uniform vec3 lightPos;
uniform sampler2D diffuseMap;

layout (location=0) out vec4 fragColour;

vec3 PhongLighting(in vec3 fragPos, in vec3 fragNorm,
    in vec3 diffuseColour, in vec3 specularColour)
{
    const float shininess = 10.0;

    // ...this is generally a dark constant
    const vec3 ambient = vec3(0.00, 0.00, 0.05);

    // diffuse component
    vec3 N = normalize(fragNorm);
    vec3 L = normalize(lightPos - fragPos);
    float Lambert = max(0.0, dot(L, N));

    // specular coefficient
    vec3 E = normalize(eyePos - fragPos);
    vec3 R = reflect(L, N);
    float Phong = max(0.0, dot(R, -E));
    Phong = pow(Phong, shininess);

    // add components
    vec3 diffuse = Lambert * diffuseColour;
    vec3 specular = Phong * specularColour;
    return ( diffuse + specular + ambient );
}

uniform sampler2D normalMap;

void main()
{
    vec3 diffuseColour = texture(diffuseMap, data.texcoordObj).rgb;
    const vec3 specularColour = vec3(1.0);

    vec3 normal = texture(normalMap, data.texcoordObj).rgb;
    normal = normal*2.0 - 1.0;

    //fragColour.rgb = PhongLighting(data.positionObj, data.normalObj, diffuseColour, specularColour);

    fragColour.rgb = PhongLighting(data.positionObj, normal, diffuseColour, specularColour);

    //fragColour.rgb = normal; //this is a preview only
}

Vertex Shader:

/*
    Pass Attributes VS

    GLSL vertex shader that performs the clip transformation and passes all
    relevant attributes down the pipeline.
*/

#version 330 core

layout (location=0) in vec4 position;
layout (location=2) in vec3 normal;
layout (location=8) in vec2 texcoord;

uniform mat4 mvp;

out vertex
{
    vec3 positionObj;
    vec3 normalObj;
    vec2 texcoordObj;
} data;

void main()
{
    // mandatory!
    gl_Position = mvp * position;

    // additional info
    data.positionObj = position.xyz;
    data.normalObj = normal;
    data.texcoordObj = texcoord;
}

HOW TO CREATE AND EXTRACT MAPS IN MUDBOX

In this section of the tutorial I will be focusing on how to create and extract few types of maps that can be used for a different techniques.

The first thing you want to do is load a model and manipulate the model (now if you already manipulated your model or have a higher res model you want to create these maps for well then you're golden).

So for my model I have a tree that I have carved and manipulated both the leaves and the trunk area and will be using this model to show you how to get the maps you need.

Step 1: Open the UV & MAPS Tab