[Tutorial] Gradient Fresnel Shading for Cinematic Lighting in Unreal 4

Background

During the Unreal 4 Beta I experimented a lot with materials, one of these experiments was inspired by Star Wars: The Old Republic’s cinematic character lighting presentation. I wondered how their ambient fresnel shading could be replicated in Unreal 4 and ended up with something that closely resembles the original shading results. After several months of leaving it in an abandoned project I decided it could be of use for the Unreal 4 Community and build a demo with some new features (Z-clamped fresnel and simplied to single Material Function) a download is available at the bottom of this page!

GradientFresnel_Ribbons_01

The Basics

The basic idea behind this shading effect is to provide a more diverse palette of colors in any given environment or character with predictable results regardless of scene light orientation. Fresnel lighting works well from any angle and is therefor well suited for in-game cinematic lighting. This is exactly why SW:TOR applied this effect on their characters – to get a consistant lighting model regardless of camera points during in-game conversations. The gradient texture can we swapped based on the level or even the current room a player is in. In SW:TOR every planet has a unique gradient texture to define light colors on both characters and environment. (see SW:TOR sample image at the bottom)

You can create any gradient texture in Photoshop and apply it to the material. Theoretically texture height doesn’t need to be more than 1 pixel since we sample U-value based on normal and always use V = 1, I simply added some extra pixels for visibility. The color on the right of the texture is applied to the surface directly facing the “sun” (LightDirection parameter) the left side is the shadow side of the mesh. Any pixel in between is sampled from the texture based on the PixelNormal. For more details I recommend checking out the original presentation by Bioware.

I tried to illustrate this “wrapping” of this gradient texture by adding a ribbon around the spheres. You can see the lighting move along with the ribbon as they rotate based on the changing light direction parameter. Fun fact that may be of interest to anyone working with materials is that the ribbon is actually the same sphere mesh, but with opacity masked based on lightdirection (cross) pixel normal to get an animated ribbon effect. (This material is included on GitHub)

gradientfresnel_character

Reference screenshot from Star Wars: The Old Republic

The fresnel effect in the image is most noticable on the left side of the character and on the edges of the environment geometry. This screenshot was taken on Alderaan and uses a white + blue gradient texture. Planets like Korriban use a mostly red gradient.

swtor_fresnel_01

Demo Scene

The demo scene is included in the GitHub repository, and includes the material function and several materials. The “LightTweaker” blueprint is not required, but I find it useful in visualizing light direction. You may choose to bind this LightDirection parameter to the dominant light source in your scene instead.

The demo scene and source is available on my GitHub tutorial repository. Alternatively you can download the Material Function as a standalone package instead.

Gradient Fresnel (Material Function)

Instructions: Simply paste the content of this archive into your project files. It includes one demo material.

Note: The material parameter collection is optional and can be replaced by a simple Vector3 Parameter.

I hope you guys enjoyed this post! Leave any questions in the comment section.

References

One Comment

Leave a Reply