3D Game Shaders For Beginners

Rim Lighting

Taking inspiration from the fresnel factor, rim lighting targets the rim or silhouette of an object. When combined with cel shading and outlining, it can really complete that cartoon look. You can also use it to highlight objects in the game, making it easier for players to navigate and accomplish tasks.

  // ...

  vec3 eye = normalize(-vertexPosition.xyz);

  // ...

As it was for the fresnel factor, you'll need the eye vector. If your vertex positions are in view space, the eye vector is the negation of the vertex position.

Rim Light

  // ...

  float rimLightIntensity = dot(eye, normal);
        rimLightIntensity = 1.0 - rimLightIntensity;
        rimLightIntensity = max(0.0, rimLightIntensity);

  // ...

The Intensity of the rim light ranges from zero to one. When the eye and normal vector point in the same direction, the rim light intensity is zero. As the two vectors start to point in different directions, the rim light intensity increases until it eventually reaches one when the eye and normal become orthogonal or perpendicular to one another.

Rim Light Power

  // ...

  rimLightIntensity = pow(rimLightIntensity, rimLightPower);

  // ...

You can control the falloff of the rim light using the power function.

  // ...

  rimLightIntensity = smoothstep(0.3, 0.4, rimLightIntensity)

  // ...

step or smoothstep can also be used to control the falloff. This tends to look better when using cel shading. You'll learn more about these functions in later sections.

  // ...

  vec4 rimLight   = rimLightIntensity * diffuse;
       rimLight.a = diffuse.a;

  // ...

What color you use for the rim light is up to you. The demo code multiplies the diffuse light by the rimLightIntensity. This will highlight the silhouette without overexposing it and without lighting any shadowed fragments.

  // ...

  vec4 outputColor     = vec4(0.0);
       outputColor.a   = diffuseColor.a;
       outputColor.rgb =
           ambient.rgb
        +  diffuse.rgb
        + specular.rgb
        + rimLight.rgb
        + emission.rgb;

  // ...

After you've calculated the rim light, add it to the ambient, diffuse, specular, and emission lights.

Source

Copyright

◀️ ⏫ 🔼 🔽 ▶️