How do I "subtract" a color filter using GPUImageLibrary?

Question

Currently the BlendModes (Subtract, Exclusion, etc.) use the LauncherImage as the mask. Can I apply these BlendModes to a ColorMatrix?

I'm using the GPUImageLibrary:

colorMatrix[
    0.393, 0.7689999, 0.18899999, 0, 0,
    0.349, 0.6859999, 0.16799999, 0, 0,
    0.272, 0.5339999, 0.13099999, 0, 0,
    0,     0,         0,          1, 0];

SubtractBlendFilter.java

public class GPUImageSubtractBlendFilter extends GPUImageTwoInputFilter {
    public static final String SUBTRACT_BLEND_FRAGMENT_SHADER = "varying highp vec2 textureCoordinate;\n" +
            " varying highp vec2 textureCoordinate2;\n" +
            "\n" +
            " uniform sampler2D inputImageTexture;\n" +
            " uniform sampler2D inputImageTexture2;\n" +
            " \n" +
            " void main()\n" +
            " {\n" +
            "   lowp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);\n" +
            "   lowp vec4 textureColor2 = texture2D(inputImageTexture2, textureCoordinate2);\n" +
            "\n" +
            "   gl_FragColor = vec4(textureColor.rgb - textureColor2.rgb, textureColor.a);\n" +
            " }";

    public GPUImageSubtractBlendFilter() {
        super(SUBTRACT_BLEND_FRAGMENT_SHADER);
    }
}

GPUIMageTwoInputFilter.java

public class GPUImageTwoInputFilter extends GPUImageFilter {
    private static final String VERTEX_SHADER = "attribute vec4 position;\n" +
            "attribute vec4 inputTextureCoordinate;\n" +
            "attribute vec4 inputTextureCoordinate2;\n" +
            " \n" +
            "varying vec2 textureCoordinate;\n" +
            "varying vec2 textureCoordinate2;\n" +
            " \n" +
            "void main()\n" +
            "{\n" +
            "    gl_Position = position;\n" +
            "    textureCoordinate = inputTextureCoordinate.xy;\n" +
            "    textureCoordinate2 = inputTextureCoordinate2.xy;\n" +
            "}";

    public int mFilterSecondTextureCoordinateAttribute;
    public int mFilterInputTextureUniform2;
    public int mFilterSourceTexture2 = OpenGlUtils.NO_TEXTURE;
    private ByteBuffer mTexture2CoordinatesBuffer;
    private Bitmap mBitmap;

    public GPUImageTwoInputFilter(String fragmentShader) {
        this(VERTEX_SHADER, fragmentShader);
    }

    public GPUImageTwoInputFilter(String vertexShader, String fragmentShader) {
        super(vertexShader, fragmentShader);
        setRotation(Rotation.NORMAL, false, false);
    }

    @Override
    public void onInit() {
        super.onInit();

        mFilterSecondTextureCoordinateAttribute = GLES20.glGetAttribLocation(getProgram(), "inputTextureCoordinate2");
        mFilterInputTextureUniform2 = GLES20.glGetUniformLocation(getProgram(), "inputImageTexture2"); // This does assume a name of "inputImageTexture2" for second input texture in the fragment shader
        GLES20.glEnableVertexAttribArray(mFilterSecondTextureCoordinateAttribute);

        if (mBitmap != null&&!mBitmap.isRecycled()) {
            setBitmap(mBitmap);
        }
    }

    public void setBitmap(final Bitmap bitmap) {
        if (bitmap != null && bitmap.isRecycled()) {
            return;
        }
        mBitmap = bitmap;
        if (mBitmap == null) {
            return;
        }
        runOnDraw(new Runnable() {
            public void run() {
                if (mFilterSourceTexture2 == OpenGlUtils.NO_TEXTURE) {
                    if (bitmap == null || bitmap.isRecycled()) {
                        return;
                    }
                    GLES20.glActiveTexture(GLES20.GL_TEXTURE3);
                    mFilterSourceTexture2 = OpenGlUtils.loadTexture(bitmap, OpenGlUtils.NO_TEXTURE, false);
                }
            }
        });
    }

    public Bitmap getBitmap() {
        return mBitmap;
    }

    public void recycleBitmap() {
        if (mBitmap != null && !mBitmap.isRecycled()) {
            mBitmap.recycle();
            mBitmap = null;
        }
    }

    public void onDestroy() {
        super.onDestroy();
        GLES20.glDeleteTextures(1, new int[]{
                mFilterSourceTexture2
        }, 0);
        mFilterSourceTexture2 = OpenGlUtils.NO_TEXTURE;
    }

    @Override
    protected void onDrawArraysPre() {
        GLES20.glEnableVertexAttribArray(mFilterSecondTextureCoordinateAttribute);
        GLES20.glActiveTexture(GLES20.GL_TEXTURE3);
        GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mFilterSourceTexture2);
        GLES20.glUniform1i(mFilterInputTextureUniform2, 3);

        mTexture2CoordinatesBuffer.position(0);
        GLES20.glVertexAttribPointer(mFilterSecondTextureCoordinateAttribute, 2, GLES20.GL_FLOAT, false, 0, mTexture2CoordinatesBuffer);
    }

    public void setRotation(final Rotation rotation, final boolean flipHorizontal, final boolean flipVertical) {
        float[] buffer = TextureRotationUtil.getRotation(rotation, flipHorizontal, flipVertical);

        ByteBuffer bBuffer = ByteBuffer.allocateDirect(32).order(ByteOrder.nativeOrder());
        FloatBuffer fBuffer = bBuffer.asFloatBuffer();
        fBuffer.put(buffer);
        fBuffer.flip();

        mTexture2CoordinatesBuffer = bBuffer;
    }
}

My guess it involves changing something with String SUBTRACT_BLEND_GRAGMENT_SHADER & String VERTEX_SHADER .

Sorry for my misunderstanding, but could you, please, provide what data do you have as input and what do you want to receive as output? — Michael Spitsin, Jul 18 '16 at 17:18
Hi. I have a bitmap as the input and the final output should also be a bitmap — Zen, Jul 27 '16 at 12:12
What exactly are you trying to achieve? I tried reading your question ew times, but not able to understand the requirement. — codetiger, Aug 15 '16 at 11:34

score 2 · Answer 1 · answered Sep 14 '16 at 14:57

Color matrix is the entity that defines new color component values for some pixel as linear functions of the current color components of the same pixel. I.e. the only input for color matrix conversion is the pixel, which colors should be transformed. There is no way to involve another pixels to such conversion. Regardless if they are pixels from another image or even neighbors of transformed pixel - it is impossible.

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

Disclaimer

Originally I answered another question from the same author and it seems was asked within the same problem. I decided not to mark this one as a duplicate, because the first question doesn't have context of using the GPUImageLibrary, which makes the things way simpler. However I don't want to overact, so if you need any additional details, please refer to the original answer. Here I'll merely outline the solution.

You don't actually need to extend the GPUImageSubtractBlendFilter or any descendants of the GPUImageTwoInputFilter, because (as correctly was noted by Sergio) you should deal with only one instance of texture. Instead define your own fragment shader that will take a color filter, apply it and subtract the resulting value from original pixel:

precision mediump float;
struct ColorFilter {
  mat4 factor;
  vec4 shift;
};
uniform sampler2D inputImageTexture;
uniform ColorFilter uColorFilter;
varying vec2 textureCoordinate;
void main() {
  vec4 originalColor = texture2D(inputImageTexture, textureCoordinate);
  originalColor.rgb *= originalColor.a;
  vec4 filteredColor = (originalColor * uColorFilter.factor) + uColorFilter.shift;
  filteredColor.rgb *= filteredColor.a;
  gl_FragColor = vec4(originalColor.rgb - filteredColor.rgb, originalColor.a);
}

And now just attach your color filter matrix to the shader:

@Override
public void onInitialized() {
    super.onInitialized();
    attachColorFilter(getProgram());
}

// ========================================== //
// Private
// ========================================== //

private void attachColorFilter(int program) {
    final float[] colorFilterFactor = new float[4 * 4];
    final float[] colorFilterShift = new float[4];
    for (int i = 0; i < mColorFilter.length; i++) {
        final float value = mColorFilter[i];
        final int calculateIndex = i + 1;
        if (calculateIndex % 5 == 0) {
            colorFilterShift[calculateIndex / 5 - 1] = value / 255;
        } else {
            colorFilterFactor[i - calculateIndex / 5] = value;
        }
    }
    final int colorFactorLocation = GLES20.glGetUniformLocation(program,
            "uColorFilter.factor");
    setUniformMatrix4f(colorFactorLocation, colorFilterFactor);
    final int colorShiftLocation = GLES20.glGetUniformLocation(program,
            "uColorFilter.shift");
    setFloatVec4(colorShiftLocation, colorFilterShift);
}

Feel free to use the gist with the working subclass. Just instantiate it and pass to the GPUImageView:

mBlendedImageView.setFilter(new ColorMatrixSubtractFilter(new float[] {
    0.393f, 0.7689999f, 0.18899999f, 0, 0,
    0.349f, 0.6859999f, 0.16799999f, 0, 0,
    0.272f, 0.5339999f, 0.13099999f, 0, 0,
    0,      0,         0,            1, 0
}));

On the right you can see the output of subtracted filter applied to the image on the left:

How do I "subtract" a color filter using GPUImageLibrary?

2 Answers2

Disclaimer