Applying Shader Materials to multiple UI elements

[lazarstarlite]

Godot Version

v4.3.stable.steam [77dcf97d8]

Question

Hi, i’m trying to create a grey-scale shader for custom buttons in my game (so the regular button disabled StyleBox is insufficient). The way is works is I draw ColorRect with a custom ShaderMaterial over the entire button, effectively turning it grey-scale, see shader code below.

Now, this works great for the induvial node scene (figure1), however, I have multiple buttons in my UI (figure2) and it seems only the first button in the tree works correctly with the shader (figure3) (as if the shaders SCREEN_TEXTURE, dose not detect any UI nodes after the first instance (even when the material is set to local to scene).

Anyways, I have a few (bad) work arounds for this, however, I would like to know what the optimal solution is.

figure1

figure2

figure3

Shader (copied from online)

shader_type canvas_item;

uniform sampler2D SCREEN_TEXTURE : hint_screen_texture;

void fragment() {
	COLOR = texture(SCREEN_TEXTURE,SCREEN_UV);
	COLOR.rgb = mix(vec3((COLOR.r + COLOR.g + COLOR.b) / 3.0),  vec3(0.299 * COLOR.r + 0.587 * COLOR.g + 0.114 * COLOR.b),0.0);
}

[zdrmlpzdrmlp]

make sure the resource (shader material) is local to scene
check this on your item scene’s shader material

[lazarstarlite]

Thanks for your quick response, I have enabled ‘local to scene’, on both the ShaderMaterial and the Shader Script itself.

[lazarstarlite]

Another interesting thing to note, is that the shader only works on the ‘top’ most button instance in the scene tree. (see below how I reorder button1 and button2)

Thanks for all your help!

[zdrmlpzdrmlp]

@lazarstarlite

COLOR = texture(SCREEN_TEXTURE,SCREEN_UV);

try change this to just UV
COLOR = texture(SCREEN_TEXTURE,UV);

[lazarstarlite]

Unfortunately this breaks the shader, as every button now displays a compressed version of the entire screen. (since UV is no longer relative)

[zdrmlpzdrmlp]

who contains these buttons?
you put the shader on the Button parent node?

[lazarstarlite]

The full scene tree can be seen below. With the buttons usually being a seperate scene (made local for demonstration purposes). The ColorRect titled ‘Grey’ has the shader, and their is a new ‘Grey’ for every button instance. (with local to scene turned on on both the material and shader)