Merge pull request #5032 from Sir-Irk/normalmap_example

[examples] New example: `shaders_normalmap`

Author: raysan5

examples/Makefile

@@ -639,6 +639,7 @@ SHADERS = \
     shaders/shaders_mesh_instancing \
     shaders/shaders_model_shader \
     shaders/shaders_multi_sample2d \
+    shaders/shaders_normalmap \
     shaders/shaders_palette_switch \
     shaders/shaders_postprocessing \
     shaders/shaders_raymarching \

examples/Makefile.Web

@@ -639,6 +639,7 @@ SHADERS = \
     shaders/shaders_mesh_instancing \
     shaders/shaders_model_shader \
     shaders/shaders_multi_sample2d \
+    shaders/shaders_normalmap \
     shaders/shaders_palette_switch \
     shaders/shaders_postprocessing \
     shaders/shaders_raymarching \

examples/shaders/resources/shaders/glsl100/normalmap.fs

@@ -0,0 +1,64 @@
+#version 100
+
+precision mediump float;
+
+// Input vertex attributes (from vertex shader)
+varying vec3 fragPosition;
+varying vec2 fragTexCoord;
+varying vec3 fragNormal; //used for when normal mapping is toggled off
+varying vec4 fragColor;
+varying mat3 TBN;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform sampler2D normalMap;
+uniform vec4 colDiffuse;
+uniform vec3 viewPos;
+
+// NOTE: Add your custom variables here
+
+uniform vec3 lightPos;
+uniform bool useNormalMap;
+uniform float specularExponent;
+
+void main()
+{
+    vec4 texelColor = texture(texture0, vec2(fragTexCoord.x, fragTexCoord.y));
+    vec3 specular = vec3(0.0);
+    vec3 viewDir = normalize(viewPos - fragPosition);
+    vec3 lightDir = normalize(lightPos - fragPosition);
+
+    vec3 normal;
+    if (useNormalMap)
+    {
+        normal = texture(normalMap, vec2(fragTexCoord.x, fragTexCoord.y)).rgb;
+
+        //Transform normal values to the range -1.0 ... 1.0
+        normal = normalize(normal * 2.0 - 1.0);
+
+        //Transform the normal from tangent-space to world-space for lighting calculation
+        normal = normalize(normal * TBN);
+    }
+    else
+    {
+        normal = normalize(fragNormal);
+    }
+
+    vec4 tint = colDiffuse * fragColor;
+
+    vec3 lightColor = vec3(1.0, 1.0, 1.0);
+    float NdotL = max(dot(normal, lightDir), 0.0);
+    vec3 lightDot = lightColor * NdotL;
+
+    float specCo = 0.0;
+
+    if (NdotL > 0.0) specCo = pow(max(0.0, dot(viewDir, reflect(-lightDir, normal))), specularExponent); // 16 refers to shine
+
+    specular += specCo;
+
+    finalColor = (texelColor * ((tint + vec4(specular, 1.0)) * vec4(lightDot, 1.0)));
+    finalColor += texelColor * (vec4(1.0, 1.0, 1.0, 1.0) / 40.0) * tint;
+
+    // Gamma correction
+    gl_FragColor = pow(finalColor, vec4(1.0 / 2.2));
+}

examples/shaders/resources/shaders/glsl100/normalmap.vs

@@ -0,0 +1,76 @@
+#version 100
+
+// Input vertex attributes
+attribute vec3 vertexPosition;
+attribute vec2 vertexTexCoord;
+attribute vec3 vertexNormal;
+attribute vec4 vertexTangent;
+attribute vec4 vertexColor;
+
+// Input uniform values
+uniform mat4 mvp;
+uniform mat4 matModel;
+
+// Output vertex attributes (to fragment shader)
+varying vec3 fragPosition;
+varying vec2 fragTexCoord;
+varying vec3 fragNormal; //used for when normal mapping is toggled off
+varying vec4 fragColor;
+varying mat3 TBN;
+
+// NOTE: Add your custom variables here
+
+// https://github.com/glslify/glsl-inverse
+mat3 inverse(mat3 m)
+{
+    float a00 = m[0][0], a01 = m[0][1], a02 = m[0][2];
+    float a10 = m[1][0], a11 = m[1][1], a12 = m[1][2];
+    float a20 = m[2][0], a21 = m[2][1], a22 = m[2][2];
+
+    float b01 = a22 * a11 - a12 * a21;
+    float b11 = -a22 * a10 + a12 * a20;
+    float b21 = a21 * a10 - a11 * a20;
+
+    float det = a00 * b01 + a01 * b11 + a02 * b21;
+
+    return mat3(b01, (-a22 * a01 + a02 * a21), (a12 * a01 - a02 * a11),
+        b11, (a22 * a00 - a02 * a20), (-a12 * a00 + a02 * a10),
+        b21, (-a21 * a00 + a01 * a20), (a11 * a00 - a01 * a10)) / det;
+}
+
+// https://github.com/glslify/glsl-transpose
+mat3 transpose(mat3 m)
+{
+    return mat3(m[0][0], m[1][0], m[2][0],
+        m[0][1], m[1][1], m[2][1],
+        m[0][2], m[1][2], m[2][2]);
+}
+
+void main()
+{
+    // Compute binormal from vertex normal and tangent. W component is the tangent handedness
+    vec3 vertexBinormal = cross(vertexNormal, vertexTangent.xyz) * vertexTangent.w;
+
+    // Compute fragment normal based on normal transformations
+    mat3 normalMatrix = transpose(inverse(mat3(matModel)));
+
+    // Compute fragment position based on model transformations
+    fragPosition = vec3(matModel * vec4(vertexPosition, 1.0));
+
+    //Create TBN matrix for transforming the normal map values from tangent-space to world-space
+    fragNormal = normalize(normalMatrix * vertexNormal);
+
+    vec3 fragTangent = normalize(normalMatrix * vertexTangent.xyz);
+    fragTangent = normalize(fragTangent - dot(fragTangent, fragNormal) * fragNormal);
+
+    vec3 fragBinormal = normalize(normalMatrix * vertexBinormal);
+    fragBinormal = cross(fragNormal, fragTangent);
+
+    TBN = transpose(mat3(fragTangent, fragBinormal, fragNormal));
+
+    fragColor = vertexColor;
+
+    fragTexCoord = vertexTexCoord;
+
+    gl_Position = mvp * vec4(vertexPosition, 1.0);
+}

examples/shaders/resources/shaders/glsl120/normalmap.fs

@@ -0,0 +1,62 @@
+#version 120
+
+// Input vertex attributes (from vertex shader)
+varying vec3 fragPosition;
+varying vec2 fragTexCoord;
+varying vec3 fragNormal; //used for when normal mapping is toggled off
+varying vec4 fragColor;
+varying mat3 TBN;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform sampler2D normalMap;
+uniform vec4 colDiffuse;
+uniform vec3 viewPos;
+
+// NOTE: Add your custom variables here
+
+uniform vec3 lightPos;
+uniform bool useNormalMap;
+uniform float specularExponent;
+
+void main()
+{
+    vec4 texelColor = texture(texture0, vec2(fragTexCoord.x, fragTexCoord.y));
+    vec3 specular = vec3(0.0);
+    vec3 viewDir = normalize(viewPos - fragPosition);
+    vec3 lightDir = normalize(lightPos - fragPosition);
+
+    vec3 normal;
+    if (useNormalMap)
+    {
+        normal = texture(normalMap, vec2(fragTexCoord.x, fragTexCoord.y)).rgb;
+
+        //Transform normal values to the range -1.0 ... 1.0
+        normal = normalize(normal * 2.0 - 1.0);
+
+        //Transform the normal from tangent-space to world-space for lighting calculation
+        normal = normalize(normal * TBN);
+    }
+    else
+    {
+        normal = normalize(fragNormal);
+    }
+
+    vec4 tint = colDiffuse * fragColor;
+
+    vec3 lightColor = vec3(1.0, 1.0, 1.0);
+    float NdotL = max(dot(normal, lightDir), 0.0);
+    vec3 lightDot = lightColor * NdotL;
+
+    float specCo = 0.0;
+
+    if (NdotL > 0.0) specCo = pow(max(0.0, dot(viewDir, reflect(-lightDir, normal))), specularExponent); // 16 refers to shine
+
+    specular += specCo;
+
+    finalColor = (texelColor * ((tint + vec4(specular, 1.0)) * vec4(lightDot, 1.0)));
+    finalColor += texelColor * (vec4(1.0, 1.0, 1.0, 1.0) / 40.0) * tint;
+
+    // Gamma correction
+    gl_FragColor = pow(finalColor, vec4(1.0 / 2.2));
+}

examples/shaders/resources/shaders/glsl120/normalmap.vs

@@ -0,0 +1,76 @@
+#version 120
+
+// Input vertex attributes
+attribute vec3 vertexPosition;
+attribute vec2 vertexTexCoord;
+attribute vec3 vertexNormal;
+attribute vec4 vertexTangent;
+attribute vec4 vertexColor;
+
+// Input uniform values
+uniform mat4 mvp;
+uniform mat4 matModel;
+
+// Output vertex attributes (to fragment shader)
+varying vec3 fragPosition;
+varying vec2 fragTexCoord;
+varying vec3 fragNormal; //used for when normal mapping is toggled off
+varying vec4 fragColor;
+varying mat3 TBN;
+
+// NOTE: Add your custom variables here
+
+// https://github.com/glslify/glsl-inverse
+mat3 inverse(mat3 m)
+{
+    float a00 = m[0][0], a01 = m[0][1], a02 = m[0][2];
+    float a10 = m[1][0], a11 = m[1][1], a12 = m[1][2];
+    float a20 = m[2][0], a21 = m[2][1], a22 = m[2][2];
+
+    float b01 = a22 * a11 - a12 * a21;
+    float b11 = -a22 * a10 + a12 * a20;
+    float b21 = a21 * a10 - a11 * a20;
+
+    float det = a00 * b01 + a01 * b11 + a02 * b21;
+
+    return mat3(b01, (-a22 * a01 + a02 * a21), (a12 * a01 - a02 * a11),
+        b11, (a22 * a00 - a02 * a20), (-a12 * a00 + a02 * a10),
+        b21, (-a21 * a00 + a01 * a20), (a11 * a00 - a01 * a10)) / det;
+}
+
+// https://github.com/glslify/glsl-transpose
+mat3 transpose(mat3 m)
+{
+    return mat3(m[0][0], m[1][0], m[2][0],
+        m[0][1], m[1][1], m[2][1],
+        m[0][2], m[1][2], m[2][2]);
+}
+
+void main()
+{
+    // Compute binormal from vertex normal and tangent. W component is the tangent handedness
+    vec3 vertexBinormal = cross(vertexNormal, vertexTangent.xyz) * vertexTangent.w;
+
+    // Compute fragment normal based on normal transformations
+    mat3 normalMatrix = transpose(inverse(mat3(matModel)));
+
+    // Compute fragment position based on model transformations
+    fragPosition = vec3(matModel * vec4(vertexPosition, 1.0));
+
+    //Create TBN matrix for transforming the normal map values from tangent-space to world-space
+    fragNormal = normalize(normalMatrix * vertexNormal);
+
+    vec3 fragTangent = normalize(normalMatrix * vertexTangent.xyz);
+    fragTangent = normalize(fragTangent - dot(fragTangent, fragNormal) * fragNormal);
+
+    vec3 fragBinormal = normalize(normalMatrix * vertexBinormal);
+    fragBinormal = cross(fragNormal, fragTangent);
+
+    TBN = transpose(mat3(fragTangent, fragBinormal, fragNormal));
+
+    fragColor = vertexColor;
+
+    fragTexCoord = vertexTexCoord;
+
+    gl_Position = mvp * vec4(vertexPosition, 1.0);
+}

examples/shaders/resources/shaders/glsl330/normalmap.fs

@@ -0,0 +1,67 @@
+#version 330
+
+// Input vertex attributes (from vertex shader)
+in vec3 fragPosition;
+in vec2 fragTexCoord;
+in vec3 fragNormal; //used for when normal mapping is toggled off
+in vec4 fragColor;
+
+// Input uniform values
+uniform sampler2D texture0;
+uniform sampler2D normalMap;
+uniform vec4 colDiffuse;
+
+uniform vec3 viewPos;
+uniform vec4 tintColor;
+
+uniform vec3 lightPos;
+uniform bool useNormalMap;
+uniform float specularExponent;
+
+// Output fragment color
+out vec4 finalColor;
+
+in mat3 TBN;
+
+void main()
+{
+    vec4 texelColor = texture(texture0, vec2(fragTexCoord.x, fragTexCoord.y));
+    vec3 specular = vec3(0.0);
+    vec3 viewDir = normalize(viewPos - fragPosition);
+    vec3 lightDir = normalize(lightPos - fragPosition);
+
+    vec3 normal;
+    if (useNormalMap)
+    {
+        normal = texture(normalMap, vec2(fragTexCoord.x, fragTexCoord.y)).rgb;
+
+        //Transform normal values to the range -1.0 ... 1.0
+        normal = normalize(normal * 2.0 - 1.0);
+
+        //Transform the normal from tangent-space to world-space for lighting calculation
+        normal = normalize(normal * TBN);
+    }
+    else
+    {
+        normal = normalize(fragNormal);
+    }
+
+    vec4 tint = colDiffuse * fragColor;
+
+    vec3 lightColor = vec3(1.0, 1.0, 1.0);
+    float NdotL = max(dot(normal, lightDir), 0.0);
+    vec3 lightDot = lightColor * NdotL;
+
+    float specCo = 0.0;
+
+    if (NdotL > 0.0) specCo = pow(max(0.0, dot(viewDir, reflect(-lightDir, normal))), specularExponent); // 16 refers to shine
+
+    specular += specCo;
+
+    finalColor = (texelColor * ((tint + vec4(specular, 1.0)) * vec4(lightDot, 1.0)));
+    finalColor += texelColor * (vec4(1.0, 1.0, 1.0, 1.0) / 40.0) * tint;
+
+    // Gamma correction
+    finalColor = pow(finalColor, vec4(1.0 / 2.2));
+    //finalColor = vec4(normal, 1.0);
+}