Godot 4.2.1 I get wierd results from using shaders

ANAZHTHTHS88

Hello, I am new in Godot. I've created in inkscape a .png where the texture (it is number 4) has only transparent, black and white pixels and I want to manipulate white pixels in godot (using shaders) so as to give the white pixels other colors dynamicly. I am testing and wrote code for white pixels to become red. But I get wierd results.
The code in shader file is:
`shader_type canvas_item;

void fragment() {

vec4 color = texture(TEXTURE, SCREEN_UV);
if (color.a > 0.0) {
    if (color.rgb == vec3(1.0, 1.0, 1.0)) {
        COLOR.rgb = vec3(1.0, 0.0, 0.0);
    } else {
        COLOR.rgb = color.rgb;
    }
} else {
    COLOR.rgb = vec3(0.0, 0.0, 0.0); // Black
}
COLOR.a = color.a;
}

`
The original .png is the number four and the result is the wierd red thing. Am I doing sth wrong?

Haystack

What is your texture filter setting (nearest, linear, etc)? It looks like at the border the black pixels and white pixels are being blended together, resulting in something that is not pure white. Make sure your texture filter is 'nearest' (TEXTURE_FILTER_NEAREST)

You can set the texture filter for a specific texture in the material settings.
You can set the default texture filter for the project in your project settings.

Project -> Project Settings -> Rendering -> Textures -> Canvas Textures -> Default Texture Filter

ANAZHTHTHS88

Thank you. The filter is set to "nearest". But I don't think this is the problem. The result texture is a lot difrent than the original.

Haystack

Can you post the .png, and the godot project here?

ANAZHTHTHS88

The texture is the none.png and it is inside Assets/Textures/none.png
The project is in my personal nextcloud and it is here:
https://nextcloud.blacksheep.homes/s/2TFMDtzGHyPafRo

Haystack

Your shader only replaces texels that are pure white. But texture "none.png" has gray texels on the border between black and white. The shader won't replace those gray texels. You either need to modify the texture so that each texel is pure white or pure black, or you need to modify your shader to also accept gray texels.

How to do that: multiply the texture color (which is white or gray or black) by the color you want to replace it.

ANAZHTHTHS88

Can you give me an example based on my code?
Thank you for your time.

Haystack

ANAZHTHTHS88 Replace your shader with this:

shader_type canvas_item;

void fragment() {
	// Get the color of the current pixel from the texture
	vec4 color = texture(TEXTURE, SCREEN_UV);

	// This can be whatever color you want.
	vec4 my_custom_color = vec4(1.0,0.0,0.0,1.0); // red

	// Multiply the original color (which is grayscale with alpha)
	// by our 'custom' color, resulting in our custom color, but
	// with the original texture's alpha (b.c the custom color's alpha is 1.0)
		
	COLOR = color * my_custom_color;
	
}

Megalomaniak

I don't see the problem, based on the code the result is precisely what it should be...

 if (color.rgb == vec3(1.0, 1.0, 1.0)) {
        COLOR.rgb = vec3(1.0, 0.0, 0.0);

It's recoloring only the PURE WHITE(actually it might skip HDR beyond-white) as red. Anything more gray or anything with a hint of blue or green to it won't be recolored here. Remember this is fragment calculations so per pixel. Rather than using is equal(==) operator in there, maybe you want to use greater than (>=) operator and experiment with lower than 1.0 values to find a better 'sweetspot' for this.

OR you know, better yet. Take the texture result and multiply over a color...

ANAZHTHTHS88

Thank you for your help. When you say multiply how can I do it. Can you give me a simple example with code?

Megalomaniak

Try something like:

shader_type canvas_item;

void fragment() {
    vec4 color = vec4(1.0, 0.0, 0.0, 1.0); 
    vec4 myTex = texture(TEXTURE, SCREEN_UV);

/*     if (myTex.a > 0.0) {
        if (myTex.rgb >= vec3(0.67, 0.67, 0.67)) {
            COLOR.rgb = vec3(1.0, 0.0, 0.0) * myTex.rgb;
        } else {
            COLOR.rgb = color.rgb * myTex.rgb;
        }
    } else {
        COLOR.rgb = vec3(0.0, 0.0, 0.0); // Black
    } */
    COLOR.rgb = color.rgb * myTex.rgb;
    COLOR.a = myTex.a;
}

note, this is untested. I just copied the code in OP and quickly edited in VSCode before pasting here.