How to modulate transparency of a texture with "Multiply" blend mode?

Godot Version



In my 3D game, I have a TextureRect node with a “grimy paper” kind of texture that I’m overlaying on the viewport. I’m then setting the blend mode of the textureRect to be “multiply”, for an effect I want to achieve.

It looks the way I want, but there’s an issue: I can’t control the transparency of the overlay anymore, since the Multiply blend mode behaves in a way where I imagine it just ignores the alpha value of the texture. Not completely sure.

Is there any workaround? Can I parent the node to some specific transparency-based container or something? Or do I have to go hunting for a shader to accomplish this behaviour for me?

I believe you can use the “Modulate” color of a parent canvas item to affect children opacity

Thay unfortunately doesn’t work, it results in the same behaviour. Everything else fades as normal, but the multiplied texture gets roughly cut away only when reaching immediately 0 alpha value.

Maybe the shader code somehow overrided the effect that modulate has on these nodes.

You could try a custom shader. I think the code would be really straightforward and close to what the post processing tutorial covers.

I think the most simple implementation would be something like this

shader_type canvas_item;

uniform sampler2D overlay: source_color;
uniform sampler2D screen_texture : hint_screen_texture, repeat_disable, filter_nearest;

void fragment() {
	vec4 overlay_sample = texture(overlay, SCREEN_UV);
	vec4 screen_sample = texture(screen_texture, SCREEN_UV);
	COLOR.rgb = screen_sample.rgb * overlay_sample.rgb;
	COLOR.a = 0.5;

The only downside is you’ll need to figure out things like “Expand Mode” and “Stretch Mode” yourself.

That did the trick! Thanks, didn’t realize it would be so simple.

For future readers, this works with clamping as well, in a way. I use a two ColorRect nodes for my background, one which is just a black square with the alpha turned down to darken the screen, and the second one to which a script like the one bepis provided can be attached. That one’s kept as pure white.

Then in the node’s CanvasItem>Material you just attach the shader, set the texture you want to use (and write additional code as needed, maybe other blending modes etc) and it should work in accordance to the ColorRect’s expands and stretchings.

I haven’t really tested that out too much, and I’m using a texture of size 1920x1080, so other resolutions might demand something else. Also, I don’t imagine you’ll be able to zoom on the texture as the shader just overrides everything on screen equally (hard to explain), so in more specific cases this might be a difficult thing to do…

But for background/overlay images where the backround doesn’t move in any way this works great! Thanks again for the answer

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.