GLSL Programming/Blender/Two-Sided Surfaces

An algebraic surface that includes an oloid in the center. The rendering uses different colors for the two sides of the surface.

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.

The surface normal vector N and the direction to the viewer V are usually on the same side of the surface but there are exceptions; thus, one shouldn't rely on it.

Two-Sided Lighting

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.

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.

Summary

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.