Search code examples
androidopengl-esopengl-es-2.0fragment-shadervertex-shader

issue: when an image is displayed on this camera and contains a glow effect, it becomes black


Solved. Please see my answer below.

---------------------------

Edit 3:

It's almost solved. Last push please. I tried the scale and the modulateGlow that Rabbid76 suggested and the butterflies are transparent. Please look at the butterfly on the chair and the big one on the floor.

enter image description here

And here are the original images(one of them) :

enter image description here ---------------------------

Edit 2:

Thanks to Rabbid76, it's almost solved! The left image shows the current result with Rabbid76 solution. The right image shows the expected solution. As you see, the butterflies became lighter\transparent now.

enter image description here

---------------------------

Edit 1:

I tried to add the suggested glBlendFunc and it didn't help although it affected the glow effect a little bit. I needed to add GLES20.glEnable(GLES20.GL_BLEND) because it's disabled by default.

---------------------------

I'm using this repository

https://github.com/MasayukiSuda/GPUVideo-android

It contains filters that can be displayed on the camera. One of the filters is named "WATERMARK". When I change this image to be an image with a glow effect, the glow becomes black.

The image is located at: GPUVideo-android-master\sample\src\main\res\drawable-nodpi\sample_bitmap.png. In order to trigger the problem, it should be changed to an image with glow effect. For example I generated this image: https://drive.google.com/file/d/1u8PtIftovPbXRLnI3OR9_1Kv37L5s96_/view?usp=sharing

You can see the issue with the white glow effect that becomes black: the white glow effect becomes light black

Just run the app, click on "Camera Record", then choose "Portrait" and from the left list choose "WATERMARK" (the 5th from the end). Don't forget to change the image I mentioned.

The relevant class is named: GlWatermarkFilter. It extends GlOverlayFilter which contains the next shader:

 private final static String FRAGMENT_SHADER =
        "precision mediump float;\n" +
                "varying vec2 vTextureCoord;\n" +
                "uniform lowp sampler2D sTexture;\n" +
                "uniform lowp sampler2D oTexture;\n" +
                "void main() {\n" +
                "   lowp vec4 textureColor = texture2D(sTexture, vTextureCoord);\n" +
                "   lowp vec4 textureColor2 = texture2D(oTexture, vTextureCoord);\n" +
                "   \n" +
                "   gl_FragColor = mix(textureColor, textureColor2, textureColor2.a);\n" +
                "}\n";

and this class also contains this setup:

GLES20.glGenTextures(1, textures, 0);
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textures[0]);

GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);

This class extends GlFilter which contains:

protected static final String DEFAULT_VERTEX_SHADER =
        "attribute highp vec4 aPosition;\n" +
                "attribute highp vec4 aTextureCoord;\n" +
                "varying highp vec2 vTextureCoord;\n" +
                "void main() {\n" +
                "gl_Position = aPosition;\n" +
                "vTextureCoord = aTextureCoord.xy;\n" +
                "}\n";

protected static final String DEFAULT_FRAGMENT_SHADER =
        "precision mediump float;\n" +
                "varying highp vec2 vTextureCoord;\n" +
                "uniform lowp sampler2D sTexture;\n" +
                "void main() {\n" +
                "gl_FragColor = texture2D(sTexture, vTextureCoord);\n" +
                "}\n";

Please help me to figure out how to fix it. I know it's something about semi-alpha issue and this camera that doesn't know to display it. My goal is to record a video with glowing butterflies.


Solution

  • This solves all the issues so please notice the last 2 lines:

    private final static String FRAGMENT_SHADER =
            "precision mediump float;\n" +
                    "varying vec2 vTextureCoord;\n" +
                    "uniform lowp sampler2D sTexture;\n" +
                    "uniform lowp sampler2D oTexture;\n" +
                    "void main() {\n" +
                    "   lowp vec4 textureColor = texture2D(sTexture, vTextureCoord);\n" +
                    "   lowp vec4 textureColor2 = texture2D(oTexture, vTextureCoord);\n" +
                    "   lowp float alphaDivisor = textureColor2.a + step(textureColor2.a, 0.0);\n" +
                    "   gl_FragColor = vec4(mix(textureColor.rgb, textureColor2.rgb / alphaDivisor, textureColor2.a), textureColor.a);\n" +
                    "}\n";