First time writing a shader, why does this happen?

Azedaxen

This shader takes a base albedo texture, a black and white color map texture, and two colors as uniforms. White spots on the color map cause the corresponding pixels on the base texture to be replaced with the first color, and black spots by the second color. Any other color simply renders as the base texture.

This works exactly as intended, but I'm noticing some weird distance-based artifacting on the color replacements. Some splotches of color simply aren't visible if the camera is far enough. There also seems to be a single pixel thick gap between the "good" and "bad" color in places where they meet on the color map.

I really have no idea what this issue is, so I'm not sure where else to research it. Any help would be appreciated. One pixel gap between "good" and "bad" colors, despite there not being a gap on the color map

Colors become invisible when viewed from far away. The green square from the first image is supposed to be visible here, but is not.

Here's the shader code, if it helps:

shader_type spatial;

uniform vec4 good_color : hint_color;
uniform vec4 bad_color : hint_color;
uniform sampler2D base_texture : hint_albedo;
uniform sampler2D color_map : hint_black;

const float good = 1f;
const float bad = 0f;

void fragment() {
	vec4 color = texture(base_texture, UV);
	vec4 color_state = texture(color_map, UV);
	if (color_state.r == good) {
		color = vec4(good_color.r, good_color.g, good_color.b, 1);
	}
	else if (color_state.r == bad) {
		color = vec4(bad_color.r, bad_color.g, bad_color.b, 1);
	}
	ALBEDO = vec3(color.r, color.g, color.b);
}

SIsilicon28

Don't worry, your shader is working as intended. It's your black and white texture that's causing the issue.

Normally filtering is applied to textures to prevent them looking pixelated. The seam in-between the green and purple spaces due to it interpolating between 0 and 1, hence just showing the texture. The second problem is due to mipmapping, which basically means that the farther away the texture is being sampled from, the smaller and blurrier it gets. The blur causes the pure black and white areas to disappear.

The solution would be to disable both when reimporting the texture.

In case you are new to importing images too: https://docs.godotengine.org/en/stable/getting_started/workflow/assets/importing_images.html

Megalomaniak

@SIsilicon28 said: Don't worry, your shader is working as intended. It's your black and white texture that's causing the issue.

Normally filtering is applied to textures to prevent them looking pixelated. The seam in-between the green and purple spaces due to it interpolating between 0 and 1, hence just showing the texture.

Yeah, checking for values below or above 0.5 would be a way to get around that.

Azedaxen

@SIsilicon28 said: Normally filtering is applied to textures to prevent them looking pixelated. The seam in-between the green and purple spaces due to it interpolating between 0 and 1, hence just showing the texture. The second problem is due to mipmapping, which basically means that the farther away the texture is being sampled from, the smaller and blurrier it gets. The blur causes the pure black and white areas to disappear.

Thank you! Since the color map texture is generated dynamically at runtime in my game, I had to do some research on ImageTextures. I found that ImageTextures generated with create_from_image() have mipmaps and filtering enabled by default. So the way around this was to set the flags for the newly generated image to 0. No more weird artifacting now. :)