GUI Material: Black Silhouette

Let’s say I have 5 characters and 4 of them are locked at the beginning of the game. In the GUI I want to show to the user only the unique silhouette of the character. I’m pretty sure that somebody has already created this and you can link me to the correct GUI MATERIAL that converts every input pixel to a black pixel.

If you really want black, there is a shortcut:

gui.set_color(node, vmath.vector4(0,0,0,1)

It gets trickier if you need it to be a different colour.

1 Like

Also you can play with opacity to make it more gray or matching your background
Usually it’s enough

2 Likes

I found a solution:

with silhouette_gui.fp being:

varying lowp vec4 var_color;
varying mediump vec2 var_texcoord0;
uniform lowp sampler2D texture_sampler;

void main()
{
	// Get pixel color from texture
	lowp vec4 color = texture2D(texture_sampler, var_texcoord0.xy);

	if (color.a > 0.0) {
		// Non-transparent pixel: Output black
		gl_FragColor = vec4(0.0, 0.0, 0.0, color.a);
	} else {
		// Transparent pixel: Output original color (should be fully transparent)
		gl_FragColor = color;
	}
}
3 Likes

Here is the latest version that allows you to set the silhouette color programmatically:

(Add silhouette_color as fragment constant)

// Fragment shader for rendering silhouettes
// Outputs a configurable silhouette color for non-transparent pixels and retains transparency for transparent pixels

varying lowp vec4 var_color;            // Color passed from the vertex shader
varying mediump vec2 var_texcoord0;     // Texture coordinates passed from the vertex shader
uniform lowp sampler2D texture_sampler; // Texture sampler for the input texture
uniform lowp vec4 silhouette_color;     // Color to use for the silhouette

void main()
{
    // Get pixel color from texture
    lowp vec4 color = texture2D(texture_sampler, var_texcoord0.xy);

    // Output silhouette color for non-transparent pixels, retain transparency for transparent pixels
    gl_FragColor = mix(color, vec4(silhouette_color.rgb, color.a), step(0.0, color.a));
}

(Uses mix and step function instead of if-else to improve performance.)

3 Likes