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

SPKENI · Jul 2017

So we are trying to achieve a similar effect to Color Dodge Blend Mode from PS for some of 2d sprites in our game.

We've tried using Blend Function - Color Dodge and all existing Blend Modes, but for some reason it just doesn't do anything similar to PS.

Any suggestions on what we are missing? Or maybe another approach we should take?

leleuxart · Jul 2017

I don't have the editor open right now, but chances are that the function is already doing this, however you can give it a shot yourself just to be sure.
"The Color Dodge blend mode divides the bottom layer by the inverted top layer." - taken from the Wikipedia page

Edit: It seems to work fine for me and gives me a near identical result. There are a few discrepancies, but if I didn't have both the Photoshop and the editor blends open at the same time, I wouldn't really notice. The function does use the same method that I quoted.

SPKENI · Jul 2017

leleuxart said:

I don't have the editor open right now, but chances are that the function is already doing this, however you can give it a shot yourself just to be sure.
"The Color Dodge blend mode divides the bottom layer by the inverted top layer." - taken from the Wikipedia page

Edit: It seems to work fine for me and gives me a near identical result. There are a few discrepancies, but if I didn't have both the Photoshop and the editor blends open at the same time, I wouldn't really notice. The function does use the same method that I quoted.

Then probably I'm using it wrong))

I have following setup for the material:

Material Domain = Surface
Blend Mode = Additive
Shading Model = Unlit

What should be added as a Base and what should be a Blend?

leleuxart · Jul 2017

Compared to the Photoshop layer setup, base = bottom layer, blend = top layer that has Color Dodge set as the blend mode. Some of the Blend functions in Unreal have different input orders for Base/Blend, so it's possible that you just put the wrong textures in the wrong input.

The only issue I can see with the material setup is Additive might change how it appears in the scene when it's in front of other objects, depending on their overall luminance. You can double check in the material if the blend looks correct just by previewing the blend node.

SPKENI · Jul 2017

The big question for me is how to set other sprites in the scene to be a base? Should it be done in their materials? Or can I just "call" them in this material.

I mean, I'm trying it like this:

Image: https://us.v-cdn.net/5021068/uploads/editor/5w/zq0b6tq8x1dx.png

But maybe I just don't understand what SceneTexture is doing and it should be something completely different.

Butthair · Jul 2017

You take a look at Photoshop blend mode math? Link

From the hlsl code:
define BlendColorDodgef(base, blend) ((blend == 1.0) ? blend : min(base / (1.0 - blend), 1.0))

SPKENI · Jul 2017

Butthair said:

You take a look at Photoshop blend mode math? Link

From the hlsl code:
define BlendColorDodgef(base, blend) ((blend == 1.0) ? blend : min(base / (1.0 - blend), 1.0))

Thanks for your input, not sure if it helps me though, 'cuz basically UE already has BlendColorDodge function, so I suppose I don't really need math here, do I?

The question for me is what inputs for this function I should use. Like in my screenshot above, I input SceneTexture:DiffuseColor as a Base and a Color as a Parameter as a Blend, is it the right approach or do I need to use something different as a Base?

Obscura · Jul 2017

If you would show an example of how do you want it to look like, and how does it look currently, would definitely help.

SPKENI · Jul 2017

Obscura said:

If you would show an example of how do you want it to look like, and how does it look currently, would definitely help.

Image: https://us.v-cdn.net/5021068/uploads/editor/y7/v57su2mif6dm.png

Here I'm just adding PNG in attachments as a layer with ColorDodge to a screenshot of our gamescene in Photoshop.
But I don't understand how to make it mix with other sprites in scene like this in UE. Can you show me an example of how ColorDodge function is used in some material in UE? Any tutorial?)

leleuxart · Jul 2017

So you're trying to Color Dodge the color, or in your recent example the PNG, on top of whatever is in the scene? It looks like you were on the right path then using the Post-Process shading model. The only issue is the SceneTexture node should use the PostProcess input. I forgot the name, but there's a couple of them, just chose one and connect the Color output to the Base input of the Color Dodge function. Then connect whatever you want to be on top of everything else. Your node setup looked fine, other than the DiffuseColor instead of the PostProcess in the Scene Texture node.

Now if you wanted it to be only on certain meshes, you'd either have to add it to each shader(which isn't hard if everything is using a master material) or use the Custom Depth in the shader to single out the mesh for Post Process.

SPKENI · Jul 2017

Basically the T_Test.png is a test sprite of a Light Beam and it should be processed as a layer in a ColorDodge mode in PS.

So you're saying material+node setup should be something like this:

Image: https://us.v-cdn.net/5021068/uploads/editor/3a/z5o5swygfyd9.png

Then I should apply it to any sprite I want to work as a ColorDodge layer in PS? When I try to do it, sprite just become transparent (I've tried added PostProcess Volume and making it unbound but it doesn't help).

If I set it other way around (Meaning Color going into Base it fills sprite with just white).

Am I missing something?

leleuxart · Jul 2017

The setup is correct, but the material shouldn't be applied to your meshes because it's using the Post-Process domain. It's only meant to work as a "Blendable" inside the Post-Process Volume. When used that way, it'll Color Dodge blend the color with your final scene color. Because there is no simple way to mask out single assets through the Post-Process Volume, you get the blend everywhere or you have to look into the Custom Depth feature. I've never used it personally though.

If you want to Color Dodge a single asset, you'd do the Color Dodge on your Base Color inputs, not the SceneTexture node. Your Material Domain would be Surface, but the Blend mode would be up to you depending on what it was. For a light beam, it'd probably be Translucent or Additive, although Color Dodging something with that bright of a color when using Additive might make it seem more opaque. I guess the same goes for any Blend Mode, if your Base input is pretty bright already, Color Dodging it with white will probably just blow it out

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

Replies