This tutorial covers **two-sided per-vertex lighting**.

It's part of a series of tutorials about basic lighting in Blender. In this tutorial, we extend the tutorial on specular highlights to render two-sided surfaces. If you haven't read the tutorial on specular highlights, this would be a very good time to read it.

### Two-Sided LightingEdit

As shown by the figure to the left, it's sometimes useful to apply different colors to the two sides of a surface. In the tutorial on cutaways, we have seen how a fragment shader can use the built-in variable `gl_FrontFacing`

to determine whether a fragment is part of a front-facing or a back-facing triangle. Can a vertex shader also determine whether it is part of a front-facing or a back-facing triangle? The answer is a clear: **no!** One reason is that the same vertex can be part of a front-facing **and** a back-facing triangle at the same time; thus, whatever decision is made in the vertex shader, it is potentially wrong for some triangles. If you want a simple rule to remember: “Fragments are either front-facing or back-facing. Vertices are bi.”

Thus, two-sided per-vertex lighting has to let the fragment shader determine, whether the front or the back material color should be applied. For example, with this fragment shader:

varying vec4 frontColor; // color for front face varying vec4 backColor; // color for back face void main() { if (gl_FrontFacing) // is the fragment part of a front face? { gl_FragColor = frontColor; } else // fragment is part of a back face { gl_FragColor = backColor; } }

On the other hand, this means that the vertex shader has to compute the surface lighting twice: for a front face and for a back face. Fortunately, this is usually still less work than computing the surface lighting for each fragment.

### Vertex Shader CodeEdit

The vertex shader code for two-sided per-vertex lighting is a straightforward extension of the code in the tutorial on specular highlights. However, we have to deactivate back-face culling as described in the tutorial on transparency. Furthermore, the shader requires two sets of material parameters (front and back), which could be available as `gl_FrontMaterial`

and `gl_BackMaterial`

. With these two sets of parameters, the vertex shader could compute two colors, one for front faces and one for back faces, where the negated normal vector has to be used for the back faces. Both colors are handed to the fragment shader, which decides which color to apply. Unfortunately, there is apparently no way in Blender to specify different materials for the front and back faces. Instead, `gl_FrontMaterial`

and `gl_BackMaterial`

contain always the same data. Thus, in Blender you will have to introduce new uniforms or constants to specify different parameters for the front and the back material. In this tutorial, however, we just pretend that Blender would different parameters in `gl_FrontMaterial`

and `gl_BackMaterial`

. The vertex shader code is then:

varying vec4 frontColor; // the lighting of front faces // that was computed in the vertex shader varying vec4 backColor; // the lighting of back faces // that was computed in the vertex shader 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); } } } // Computation of lighting for front faces vec3 ambientLighting = vec3(gl_LightModel.ambient) * vec3(gl_FrontMaterial.emission); vec3 diffuseReflection = attenuation * vec3(gl_LightSource[0].diffuse) * vec3(gl_FrontMaterial.emission) * max(0.0, dot(normalDirection, lightDirection)); 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); } frontColor = vec4(ambientLighting + diffuseReflection + specularReflection, 1.0); // Computation of lighting for back faces // (uses negative normalDirection and back material colors) vec3 backAmbientLighting = vec3(gl_LightModel.ambient) * vec3(gl_BackMaterial.emission); vec3 backDiffuseReflection = attenuation * vec3(gl_LightSource[0].diffuse) * vec3(gl_BackMaterial.emission) * max(0.0, dot(-normalDirection, lightDirection)); vec3 backSpecularReflection; if (dot(-normalDirection, lightDirection) < 0.0) // light source on the wrong side? { backSpecularReflection = vec3(0.0, 0.0, 0.0); // no specular reflection } else // light source on the right side { backSpecularReflection = attenuation * vec3(gl_LightSource[0].specular) * vec3(gl_BackMaterial.specular) * pow(max(0.0, dot(reflect(-lightDirection, -normalDirection), viewDirection)), gl_BackMaterial.shininess); } backColor = vec4(backAmbientLighting + backDiffuseReflection + backSpecularReflection, 1.0); gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex; }

The fragment shader code is described above.

### SummaryEdit

Congratulations, you made it to the end of this short tutorial with a long shader. We have seen:

- Why a vertex shader cannot distinguish between front-facing and back-facing vertices (because the same vertex might be part of a front-facing and a back-facing triangles).
- How to compute lighting for front faces and for back faces in the vertex shader.
- How to let the fragment shader decide which color to apply.

### Further ReadingEdit

If you still want to know more

- about the shader version for single-sided surfaces, you should read the tutorial on specular highlights.
- about front-facing and back-facing triangles in GLSL, you should read the tutorial on cutaways.