Gradient Fresnel Shading for Rim Lighting

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.

[gumroad id=”gradientfresnelue4″ text=”Get It Now!”, type=”embed”]

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

References

8 Responses

  1. Hi Tom, handy work you’ve done here. I used this in my project and it has worked brilliantly with very little configuring. I have searched YouTube and other places for a simple material I could copy from, and yours is by far and away the simplest and easiest to implement. Keep up the great work!

  2. Awesome recreation of the effect here! What version of Unreal is compatible with these files, I tried 4.17 which was listed on your git repo, but that didn’t seem to work.

    • Thanks! I haven’t tried these in years, I don’t recall what would have changed for this material to break – materials have been pretty stable in unreal and can usually be loaded into much newer versions

      • Aha! I did a little more digging, if I import the material function files into a new project they still work. I was confused since the material function had been detatched from the material, but after plugging that back in everything seemed to work! Thank you!

  3. Would it be possible to do this effect as a post process masked by depth? For example Enemy Characters have a Red light on them, and friendly have a Green?

    • You are probably looking for Light Channels, this exists in the engine for cinematic lighting purposes. You have 3 channels available with first being the default used for any light.

      You can use channel 2 for enemies and channel 3 for friendlies. If you mark the MESH to be lit by the specific channel and the light to only use that channel. You have your lighting setup.

Leave a comment on this post!