如何使用 GPUImageLibrary“减去”滤色器？

Posted 2023-04-14

【中文标题】如何使用 GPUImageLibrary“减去”滤色器？

【英文标题】：How do I "subtract" a color filter using GPUImageLibrary?

【发布时间】：2016-01-26 06:57:53

【问题描述】：

目前，BlendModes（减去、排除等）使用 LauncherImage 作为遮罩。我可以将这些 BlendMode 应用于 ColorMatrix 吗？

我正在使用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;
    

我猜这涉及到用 String SUBTRACT_BLEND_GRAGMENT_SHADER 和 String VERTEX_SHADER 改变一些东西。

【问题讨论】：

对不起，我的误解，但请您提供您有哪些数据作为输入以及您希望接收哪些数据作为输出？

嗨。我有一个位图作为输入，最终输出也应该是一个位图

您到底想达到什么目的？我尝试重新阅读您的问题，但无法理解要求。

【参考方案1】：

颜色矩阵是将某些像素的新颜色分量值定义为同一像素当前颜色分量的线性函数的实体。 IE。颜色矩阵转换的唯一输入是像素，应该转换哪些颜色。没有办法让其他像素参与这种转换。无论它们是来自另一个图像的像素，还是转换后像素的邻居，都是不可能的。

【参考方案2】：

免责声明

最初我回答了同一作者的another question，似乎是在同一个问题中提出的。我决定不将此标记为重复，因为第一个问题没有使用GPUImageLibrary 的上下文，这使事情变得更简单。不过我不想表现得过火，所以如果您需要任何其他详细信息，请参阅the original answer。在这里我将仅概述解决方案。

---

您实际上不需要扩展GPUImageSubtractBlendFilter 或GPUImageTwoInputFilter 的任何后代，因为（正如Sergio 正确指出的那样）您应该只处理一个纹理实例。而是定义您自己的片段着色器，该着色器将采用颜色过滤器，应用它并减去结果 原始像素的值：

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);

现在只需将您的滤色器矩阵附加到着色器：

@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);

请随意将gist 与工作子类一起使用。只需实例化它并传递给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
));

在右侧，您可以看到应用于左侧图像的减法滤波器的输出：