SHAFIU

PORTFOLIO

Unreal's Broken Overlay issue fix

Material


Problem at hand

This is a alternative to unreal engine material blend overlay node. i came across an issue where a client wanted the overlay blend to work exactly like how it does on photoshop.

To understand the problem more lets look at how it looks in photoshop.

now one would assume that the unreal engines material blend overlay works the same way. Nope its quite bland. lets have a look at it

Unreal Engine Blend Overlay Node

yes that is exactly how it looks. so to fix this with a little help from our custom node you can write your own version of it with the help of our good friend Claude sonnet for fine tuning and boom. The key difference being that we're introducing a light element to it to give more control in dark and light areas

Custom Unreal engine Overlay node

Custom HLSL node

// Photoshop Overlay Blend Mode
// Input: Base (float3), Blend (float3)
// Output: float3 overlayed texture

float3 result;

// Calculate the overlay for each channel R G B
for(int i = 0; i < 3; i++)
{
    if(Texture[i] < 0.5)
    {
        // Multiply blend for dark base values
        result[i] = Lightness * Texture[i] * OverlayColor[i];
    }
    else
    {
        // Screen blend for light base values
        result[i] = 1.0 - 2.0 * (1.0 - Texture[i]) * (1.0 - OverlayColor[i]);
    }
}

return result;

You can have it as is , but i would recommend moving it into a material function to make it more reusable across your project


Contents