Proper way to attach shader to ViewportContainer or Viewport?

Question

shader_type canvas_item;

uniform vec4 whiteColor : hint_color = vec4(0.627, 0.812, 0.039, 1.0);
uniform vec4 lightGreyColor : hint_color = vec4(0.549, 0.749, 0.039, 1.0);
uniform vec4 darkGreyColor : hint_color = vec4(0.18, 0.451, 0.125, 1.0);
uniform vec4 blackColor : hint_color = vec4(0.0, 0.247, 0.0, 1.0);

float min4(float a, float b, float c, float d){
    return min(a, min(b, min(c, d)));
}

void fragment(){
    vec4 currentColor = texture(SCREEN_TEXTURE, SCREEN_UV);

    float blackDistance = distance(currentColor, vec4(vec3(0.0), 1.0));
    float whiteDistance = distance(currentColor, vec4(vec3(1.0), 1.0));
    float lightGrayDistance = distance(currentColor, vec4(vec3(0.666, 0.666, 0.666), 1.0));
    float darkGrayDistance = distance(currentColor, vec4(vec3(0.333, 0.333, 0.333), 1.0));

    if (
        whiteDistance == min4(whiteDistance, lightGrayDistance, darkGrayDistance, blackDistance)
    )
    {
        COLOR = whiteColor;
    }
    else if (
        blackDistance == min4(whiteDistance, lightGrayDistance, darkGrayDistance, blackDistance)
    )
    {
        COLOR = blackColor;
    }
    else if (
        darkGrayDistance == min4(whiteDistance, lightGrayDistance, darkGrayDistance, blackDistance)
    )
    {
        COLOR = darkGreyColor;
    }
    else if (
        lightGrayDistance == min4(whiteDistance, lightGrayDistance, darkGrayDistance, blackDistance)
    )
    {
        COLOR = lightGreyColor;
    }
    else{
        COLOR = whiteColor;
    }
}

I'm currently using a Viewport to display the game window in the center of the screen. Without the above shader being applied, everything looks as it should. But when I apply the shader to the viewport container it ignores whatever is in the viewport and only shades the wallpaper instead.

How do I get the shader to apply to the game window content?

Comments

Whats' ignored? What is a "wallpaper"? It's quite unclear what's happening. Central part looks shaded.
Can you provide another picture demonstrating an issue (and a scene structure)?

---

This is the screen without the shader applied. The wallpaper is the image behind the actual game viewport. (I wanted something other than just straight black behind the game when running fullscreen). When I apply the shader, it doesn't apply to the actual image in the center.

Answer 1

Normally, you apply canvas shader to a textured quad, like TextureRectangle or Sprite.
So basically you should put said node above viewport and apply shader to it instead of ViewportContainer.

BTW, do you really need an extra Viewport? It eats resources. Looking at your layout, I'd consider to use built-in default viewportm but instead turn your "wallpaper" into textured "frame".