Last modified on 19 May 2012, at 11:28

GLSL Programming/Blender/Lighting Textured Surfaces

Earthrise as seen from Apollo 8.

This tutorial covers per-vertex lighting of textured surfaces.

It combines the shader code of the tutorial on textured spheres and the tutorial on specular highlights to compute lighting with a diffuse material color determined by a texture. If you haven't read the tutorial on textured spheres or the tutorial on specular highlights, this would be a very good opportunity to read them.

Texturing and Diffuse Per-Vertex LightingEdit

In the tutorial on textured spheres, the texture color was used as output of the fragment shader. However, it is also possible to use the texture color as any of the parameters in lighting computations, in particular the material constant k_\text{diffuse} for diffuse reflection, which was introduced in the tutorial on diffuse reflection. It appears in the diffuse part of the Phong reflection model:

I_\text{diffuse} = I_\text{incoming}\,k_\text{diffuse} \max(0,\mathbf{N}\cdot \mathbf{L})

where this equation is used with different material constants for the three color components red, green, and blue. By using a texture to determine these material constants, they can vary over the surface.

Shader CodeEdit

In comparison to the per-vertex lighting in the tutorial on specular highlights, the vertex shader here computes two varying colors: diffuseColor is multiplied with the texture color in the fragment shader and specularColor is just the specular term, which shouldn't be multiplied with the texture color. This makes perfect sense but for historically reasons (i.e. older graphics hardware that was less capable) this is sometimes referred to as “separate specular color”.

         varying vec3 diffuseColor; 
            // the diffuse Phong lighting computed in the vertex shader
         varying vec3 specularColor; 
            // the specular Phong lighting computed in the vertex shader
         varying vec4 texCoords; // the texture coordinates 
 
         void main()
         {                              
            vec3 normalDirection = 
               normalize(gl_NormalMatrix * gl_Normal);
            vec3 viewDirection = 
               -normalize(vec3(gl_ModelViewMatrix * gl_Vertex)); 
            vec3 lightDirection;
            float attenuation;
 
            if (0.0 == gl_LightSource[0].position.w) 
               // directional light?
            {
               attenuation = 1.0; // no attenuation
               lightDirection = 
                  normalize(vec3(gl_LightSource[0].position));
            } 
            else // point light or spotlight (or other kind of light) 
            {
               vec3 vertexToLightSource = 
                  vec3(gl_LightSource[0].position 
                  - gl_ModelViewMatrix * gl_Vertex);
               float distance = length(vertexToLightSource);
               attenuation = 1.0 / distance; // linear attenuation 
               lightDirection = normalize(vertexToLightSource);
 
               if (gl_LightSource[0].spotCutoff <= 90.0) // spotlight?
               {
                  float clampedCosine = max(0.0, dot(-lightDirection, 
                     gl_LightSource[0].spotDirection));
                  if (clampedCosine < gl_LightSource[0].spotCosCutoff) 
                     // outside of spotlight cone?
                  {
                     attenuation = 0.0;
                  }
                  else
                  {
                     attenuation = attenuation * pow(clampedCosine, 
                        gl_LightSource[0].spotExponent);
                  }
               }
            }
 
            vec3 ambientLighting = vec3(gl_LightModel.ambient); 
               // without material color!
 
            vec3 diffuseReflection = attenuation 
               * vec3(gl_LightSource[0].diffuse) 
               * max(0.0, dot(normalDirection, lightDirection)); 
               // without material color!
 
            vec3 specularReflection;
            if (dot(normalDirection, lightDirection) < 0.0) 
               // light source on the wrong side?
            {
               specularReflection = vec3(0.0, 0.0, 0.0); 
                  // no specular reflection
            }
            else // light source on the right side
            {
               specularReflection = attenuation 
                  * vec3(gl_LightSource[0].specular) 
                  * vec3(gl_FrontMaterial.specular) 
                  * pow(max(0.0, dot(reflect(-lightDirection, 
                  normalDirection), viewDirection)), 
                  gl_FrontMaterial.shininess);
            }
 
            diffuseColor = ambientLighting + diffuseReflection;
            specularColor = specularReflection;
            texCoords = gl_MultiTexCoord0;
            gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
         }

And the fragment shader modulates the diffuseColor with the texture color and adds the specularColor:

         varying vec3 diffuseColor; 
            // the interpolated diffuse Phong lighting
         varying vec3 specularColor; 
            // the interpolated specular Phong lighting
         varying vec4 texCoords; 
            // the interpolated texture coordinates 
         uniform sampler2D textureUnit;
 
         void main()
         {
            vec2 longitudeLatitude = vec2(
              (atan(texCoords.y, texCoords.x) / 3.1415926 + 1.0) * 0.5, 
               1.0 - acos(texCoords.z) / 3.1415926);
               // unusual processing of texture coordinates
 
            gl_FragColor = vec4(diffuseColor 
               * vec3(texture2D(textureUnit, longitudeLatitude))
               + specularColor, 1.0);
         }

In order to assign a texture image to this shader, you should follow the steps discussed in the tutorial on textured spheres; in particular, the Python script has to set the value of the uniform textureUnit, e.g. with:

shader.setSampler('textureUnit', 0)

SummaryEdit

Congratulations, you have reached the end. We have looked at:

  • How texturing and per-vertex lighting are usually combined.
  • What a “separate specular color” is.

Further ReadingEdit

If you still want to know more


< GLSL Programming/Blender

Unless stated otherwise, all example source code on this page is granted to the public domain.