GLSL Shader Unwanted Grayscale Effect

Question

Let me preface this with the fact that I am very new to GLSL.

I am attempting to use a shader to add a blur effect to slot reel symbols while they spin. I have a working blur effect going, which I have commented out just for simplicity and isolating this issue.

Vertex Shader:

//Vertex Shader
attribute vec4 position;
attribute vec4 inColor;
attribute vec2 inUV;

//To be passed to the Fragment Shader "BlurShader.fsh"
varying vec4 colorVarying;
varying vec2 uvOut;

void main()
{
    colorVarying = inColor;
    gl_Position = position;
    uvOut = inUV;
}

Fragment Shader:

//Fragment Shader

uniform sampler2D tex0;

//Passed from Vertex Shader "BlurShader.vsh"
varying vec4 colorVarying; //ISSUE: this is always solid white
varying vec2 uvOut;

//This is the intensity of the blur. Higher is a larger blur
//  25 is a good starting point
//  Could possibly make it a varible to be passed in to control directly from Lua
#define INTENSITY 25.0

vec4 BlurVertical(vec2 size, vec2 uv, float radius) {
    if (radius >= 1.0)
    {
        vec4 C = vec4(0.0); 
        float height = 1.0 / size.y;
        float divisor = 0.0; 

        for (float y = -radius; y <= radius; y++)
        {
            C += texture(tex0, uv + vec2(0.0, y * height));
            divisor++; 
        }
        return vec4(C.r / divisor, C.g / divisor, C.b / divisor, 1.0);
    }
    return texture2D(tex0, uv);
}

void main()
{
    //Apply blur to final output
    //gl_FragColor = BlurVertical(textureSize(tex0, 0), uvOut, INTENSITY);
    //gl_FragColor = texture2D(tex0, uvOut) * colorVarying; SAME RESULT
    gl_FragColor = texture2D(tex0, uvOut);
}

My problem is that the shader results in a strange unwanted grayscale effect and a loss of transparency.

Strange Grayscale Effect

How it Should Look

I am very lost at what could be causing this, and I can't seem to find anyone with a similar issue.

I'm not entirely sure. I'm working with a large c++ codebase that I don't understand that has a function that is supposed to do it — Brett Weiss, Jan 30 '19 at 20:56
Is there a [`glTexImage2D`](https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/glTexImage2D.xhtml) call somewhere and what are the parameters? — Rabbid76, Jan 30 '19 at 21:03
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, buffer) — Brett Weiss, Jan 30 '19 at 21:11
glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, width, height, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, tmpbuf) — Brett Weiss, Jan 30 '19 at 21:11
I'm not sure which one, but these are the only 2 in the entire solution. I'm currently trying to figure one is executed — Brett Weiss, Jan 30 '19 at 21:13
When I replace the second one with GL_RGBA instead of GL_LUMINANCE, it has a disastrous effect (textures are jumbled) and there is still the same grayscale effect going on in the symbols — Brett Weiss, Jan 30 '19 at 21:23
Yes the issue is the `GL_LUMINANCE`. It has to be `GL_RGBA`, but this is not enough. `tmpbuf` seems to be a grayscale image. This should be an RGBA image. — Rabbid76, Jan 30 '19 at 21:25

score 3 · Answer 1 · answered Jan 30 '19 at 22:50

Found the solution! The texture I was using was encoded in YUVA,so there were actually 4 textures I needed to sample and then convert to a single RGBA.

uniform sampler2D tex[4];

vec4 YUVAtoRGBA() 
{
    mat4 xForm = mat4(
        1.164, 1.164, 1.164, 0.0,
        0.0, -0.391, 2.018, 0.0,
        1.596, -0.813, 0.0, 0.0,
        0.0, 0.0, 0.0, 1.0);

    vec4 yuva = vec4(
        texture2D(tex[0], (uvOut.xy / uvOut.z).x - 0.0625,
        texture2D(tex[1], (uvOut.xy / uvOut.z).x - 0.5,
        texture2D(tex[2], (uvOut.xy / uvOut.z).x - 0.5,
        texture2D(tex[3], (uvOut.xy / uvOut.z).x);

    return colorVarying * (xForm * yuva);
}

GLSL Shader Unwanted Grayscale Effect

1 Answers1