GPUImage创建一个自定义过滤器，用于更改所选颜色 [英] GPUImage create a custom Filter that change selected colors

问题描述

使用令人惊叹的GPU图像框架，我正在尝试使用自定义片段着色器创建自定义过滤器，该着色器将一些颜色向量作为制服传递，详细说明每个片段用一个选择的颜色替换一个制服。我使用Quartz制作它并且它可以工作，但是由于我正在使用这个框架在OpenGL世界中迈出第一步，我想尝试一下GPU处理。

我制作的片段着色器似乎工作正常，但输出中存在问题。我发布了一个用于调试海豚的样本

Using the amazing GPU image framework, I'm trying to create a custom filter using a custom fragment shader that passed some color vectors as uniforms, elaborate each fragment substituting a choosen color with one in the uniform. I made that using Quartz and it works, but since I'm moving my first step in OpenGL world using this framework, I'd like to give a try to the GPU processing.
The fragment shader I made seems to work fine, but there is a problem in the output. I post just a sample for debugging porpoise

varying highp vec2 textureCoordinate;

uniform sampler2D inputImageTexture;


bool compareVectors (lowp vec3 x,lowp vec3 y){
    bool result;
    if (x.r != y.r) {
        return result = false;
    }
    if (x.b != y.b) {
       return result = false;
    }
    if (x.g  != y.g ) {
       return result = false;
    }
    return result = true;
}

void main()
{
    lowp vec3 tc = vec3(0.0, 0.0, 0.0);

    lowp vec4 pixcol = texture2D(inputImageTexture, textureCoordinate).rgba;
    lowp vec3 sampleColors[3];
    lowp vec3 newColors[3];
    sampleColors[0] = vec3(0.2, 0.2, 0.2);
    sampleColors[1] = vec3(0.0, 0.0, 0.0);
    sampleColors[2] = vec3(1.0, 1.0, 1.0);

    newColors[0] = vec3(0.4, 0.4, 1.0);
    newColors[1] = vec3(0.3, 0.4, 1.0);
    newColors[2] = vec3(0.6, 0.7, 0.5);
    if (pixcol.a >= 0.2) {
        if (compareVectors (sampleColors[0],pixcol.rgb))
            tc = newColors[0];
        else if (compareVectors (sampleColors[1],pixcol.rgb))
            tc = newColors[1];
        else if (compareVectors (sampleColors[2],pixcol.rgb))
            tc = newColors[2];
        else
            tc = pixcol.rgb;
    }
    else
        tc = pixcol.rgb;

    gl_FragColor = vec4(tc.rgb, pixcol.a);
}

生成的图像有很多文物。它似乎在屏幕上像素化，如果写入磁盘则不能很好地创建。这是一些屏幕。

The resulting image has a lot of artifacts. It seems pixellate on the screen and not well created if written to disk. Here are some screen.

第一张图像是起始图像，第二张是iphone屏幕上过滤图像的屏幕截图，第三张是过滤后的图像写入磁盘。
深入研究我记得texel和像素不是一回事，所以可能我没有正确映射它们。我希望有一个1：1的职位比例，可能没有发生。
我怎样才能实现这一目标？
谢谢，Andrea

The first image is the starting image, the second is a screenshot of the filtered mage on iphone screen, the third is the filtered image written to disk. Digging into that I remembered that texel and pixel aren't the same thing, so probably I'm not mapping them correctly. I'd like to have a 1:1 position ratio and probably is not happening.
How can I achieve that?
Thanks, Andrea

推荐答案

如Brad的评论中所述，解决方案是简单地在一系列值中面对纹理颜色。这是由于浮动精度（我现在感觉很愚蠢，很明显）。起始图像具有固定的受控颜色，但由于原始图像被采样，因此信息可能与起始图像不相等。
这是正确的片段着色器：

As stated in the comment by Brad, the solution was to simply confront the texel color in a range of values. This is due to the float precision (I'm feeling stupid writing it right now, it was pretty obvious). The starting image was with fixed controlled color, but since the original image is sampled probably the information is not equal from the starting image. Here is the correct fragment shader:

varying highp vec2 textureCoordinate;
uniform sampler2D inputImageTexture;


bool compareVectors (lowp vec3 sample,lowp vec3 texel){
    bool result;
    if ( abs(texel.r-sample.r) > 0.1 ) {
        return result = false;
    }
    if ( abs(texel.g-sample.g) > 0.1 ) {
        return result = false;
    }
    if ( abs(texel.b-sample.b) > 0.1 ) {
        return result = false;
    }

    return result = true;
}

void main()
{
    lowp vec3 tc = vec3(0.0, 0.0, 0.0);

    lowp vec4 pixcol = texture2D(inputImageTexture, textureCoordinate).rgba;
    lowp vec3 sampleColors[3];
    lowp vec3 newColors[3];
    sampleColors[0] = vec3(0.5, 0.5, 0.5);
    sampleColors[1] = vec3(0.0, 0.0, 0.0);
    sampleColors[2] = vec3(1.0, 1.0, 1.0);

    newColors[0] = vec3(0.4, 0.4, 1.0);
    newColors[1] = vec3(0.3, 0.4, 1.0);
    newColors[2] = vec3(0.6, 0.7, 0.5);

    if (pixcol.a >= 0.2) {
        if (compareVectors (sampleColors[0],pixcol.rgb))
            tc = newColors[0];
        else if (compareVectors (sampleColors[1],pixcol.rgb))
            tc = newColors[1];
        else if (compareVectors (sampleColors[2],pixcol.rgb))
            tc = newColors[2];
        else
            tc = pixcol.rgb;
    }
    else
        tc = pixcol.rgb;

    gl_FragColor = vec4(tc.rgb, pixcol.a);
}

我要感谢Brad找到答案。希望这会有所帮助。

I'd like to thanks Brad that found the answer. Hope this helps.

这篇关于GPUImage创建一个自定义过滤器，用于更改所选颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！