Color Burn Blend over Scene Color

[Caleb_Vetter]

I have a motion graphics project and I’m trying to create a material that will apply a blend onto what’s behind it. I created a new material that’s really simple, just sample the scene color behind and apply a color on top with a color burn. Here’s the setup:

As you can see from the material preview it’s extrememly dark. Here’s what it looks like in the scene applied to a rectangle:

And here’s the scene in Photoshop with a rectangle, same color, and the same color burn blend applied:

As you can see, the colors are way off in UE, much darker.

Am I doing something wrong? Where’s the discrepancy?

[3dRaven]

I’m a little confused with your post. The title is color dodge blend, yet inside of the post you only use color burn

I tried recreating your setup

original image:

Image with color burn applied

shader in unreal demonstrating the color burn effect (same grey values as in Photoshop)

They pretty much line up.

If you want color dodge that’s a different story all together.

Color dodge uses a different node

Base and blend nodes are switched around for some reason. A little inconsistency.

A whole thread on color dodge in unreal

Color Dodge - how to make a similiar effect to photoshop?

You need to use black color information to represent no color dodging. Then you can Lerp between the color dodge effect and any transparency information you needed to use A UI material I devised this workaround for: [267014-ue4-color-dodge-workaround-ui.jpg] This is the color dodge texture I am using here: [267015-color-dodge-layer1-flasher-info-over-everything.jpg]

[Caleb_Vetter]

You’re right, I had the title wrong, but the rest of the post is correct. I’m trying to do a Color Burn. Thanks for pointing that out. I fixed the title.

Your example still shows the difference in rendering, no? In the cube image you can see the dark part of the gradient is much darker in UE.

Just to be sure, I also tested in Figma.

Figma:

For some reason the color burn isn’t rendered the same way in UE as it is in other image apps. I created a custom node and actually coded a color burn and got the same result, so it seems like it’s related to some other render process in UE rather than the color burn effect itself. Any ideas on what else could be affecting the way this is getting rendered?

[3dRaven]

Burn seems pretty close but dodge is broken to all heck (at least when it’s not modifying texture samples).

Perhaps a post processing volume could work (not sure if it uses the same color space)

Some differences could also stem from the texture format itself. They are by default set to sRGB so that might shift the color output somewhat.
The texture preset maybe set to UI might change how it behaves.

[Caleb_Vetter]

I decided to test things even more simply: by only using a 50% opacity white. That way the blend modes aren’t getting in the way of figuring out exactly what’s happening.

Here are my test swatches:

1. UE simple material (unlit), solid color #FFFFFF80
2. UE new Material Designer material (surface, translucent, unlit) with one layer #FFFFFFFF, only that layer is set to 50% opacity
3. UE new Material Designer material (surface, translucent, unlit) with one layer #FFFFFFFF, entire material is set to 50% opacity
4. UE custom material (surface, translucent, unlit), Scene Color and solid white lerp at 0.5 and passed into Emmissive Color
5. Photoshop solid white (normal blend mode) at 50% opacity.

#1, #3, and #4 look identical to me. There’s something funky going on inside the Material Designer in #2, but we can disregard that and focus on the others.

#5 is what they should actually look like. A straight 50% blend of white on top of the background. Also confirmed with Figma.

The new Motion Design Mode creates a PostProcessVolume that essentially neutralizes everything. 0 bloom, 1.0 exposure, all color grading unchecked, etc.

Any idea what could be causing this? I’d like to be able to follow brand guides exactly when creating graphics and know that the colors are to specification.