Colored Shadows

Rate this Article:
(one vote)

Approved for Versions:(please verify)

Colored Transluscent Shadows for Stained Glass


You can download the Individual image pack and the project used in this example below:

Image Pack

Colored Shadow Tutorial Project

The goal with this project is to replicate something similar to this from the linked documentation.

We’ll go through the process of creating unlit version since this is the most practical and visibly noticeable.

Stained Glass from Documentation

Setting up the material

First we’ll want to import our material that we will use for our Colored Transluscent Shadow.

Once you’ve imported the materials you will want to create a new material based and set it up like so:

Unlit Material Setup:

Set Blend Mode: Modulate
(Optional): Check Two Sided (Best for single planes)
Translucency: Uncheck Enable Separate Translucency

Unlit Mat Setup.png

Making use of the material

Now that our materials are setup we can apply these to a single plane mesh and setup our lighting to render a Colored Translucent Shadow.

Note It is important to remember that Translucent Colored Shadows will ONLY work with lighting set to STATIC.

Unlit Colored Shadow.png

Getting Better Resolutions:
Just like static lightmap shadows you’ll need to apply the same methodologies here as well. The higher resolution on the mesh receiving the cast shadow will give you better image results.

Here are two examples:

Lightmap Resolution of the Floor Mesh set to 64

CS LM Res 64.png

Lightmap Resolution of the Floor Mesh set to 1024

CS LM Res 1024.png

Note With the higher resolution this is much more noticeable, the angle of your shadow casting static light will determine the sharpness of your Colored Translucent Shadow. The narrower the angle the more stretched and blurred your colored shadow will appear, as shown above. We have a sharper shadow closer to the plan than further away.

Using this effect in combination with other assets

Since we’re using an unlit material to drive our Colored Translucent Shadow we don’t have a way to use normal maps and get that amazing detail for our rippled effect for Stained glass.

Here is the target result:

Faked CS Effect.png

To achieve this affect we’re going to cheat a little bit.
In total we’re going to place two planes with two separate materials.
On the first plane we’ll set up our original unlit material to cast our Colored Translucent Shadow.
We’ll place this in our scene where we want our window to be.
Next we’ll create a new material that will be our lit material to represent our Stained glass and have a normal map setup.

Here is the material setup:

Lit Mat Setup.jpg

We’ll place this material on our second plane.
Place both these planes together or at least close together.
In the settings for our unlit material plane that will cast our Colored Translucent Shadow we’ll need to set it up so that it doesn't appear in game, but still cast our colored shadow.
In the details panel make sure to uncheck “Actor Hidden in Game” so that it does not render.
We’ll next need to change our settings for our Lit material plane.
Make sure to uncheck cast shadows in the details panel.
This setup will allow us to have a lit material that does not cast shadow but that we can adjust the settings via our material itself. By setting up the opacity and the emissive power as a parameter we can adjust how translucent our material is and how bright the material is to get our desired result.

I hope you’ve enjoyed this short tutorial!

Dynamically Faked Colored Shadow starting point in Provided Scene

Note In the example scene provided there is a setup for a dynamically faked version of colored shadows using 3 light function (one for each color channel, RGB). The start of using Blueprints to get the position of the sun and move the shadow along with the light is there. I will get more up on the wiki with the start of the setup for this. It's not finalized and will probably require tweaking to get perfect.