Question

我想知道如何为GPUImage创建自定义过滤器。现在我可以从这段代码创建一个棕褐色自定义过滤器（这是由Brad Larson在GitHub上提供的例子）：

varying highp vec2 textureCoordinate;

uniform sampler2D inputImageTexture;

void main()
{
    lowp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);
    lowp vec4 outputColor;
    outputColor.r = (textureColor.r * 0.393) + (textureColor.g * 0.769) + (textureColor.b * 0.189);
    outputColor.g = (textureColor.r * 0.349) + (textureColor.g * 0.686) + (textureColor.b * 0.168);    
    outputColor.b = (textureColor.r * 0.272) + (textureColor.g * 0.534) + (textureColor.b * 0.131);
    outputColor.a = 1.0;

    gl_FragColor = outputColor;
}

我很想知道Brad Larson如何知道这些数字及其含义。我到处搜索，没有找到关于此的教程。有人可以指导我用Photoshop创建我自己的自定义照片过滤器，然后将其翻译成.fsh代码文件吗？

例如，如果我要在Photoshop中将图像更改为粉红色调。如何在上面的代码中获得这些数字？

Answer 1

你的问题有点宽泛，因为你可以逐字write an entire book on how to create custom shaders，但这是一个常见问题，所以我至少可以指出人们正确的方向。

GPUImage中的过滤器是用OpenGL着色语言（GLSL）编写的。 OpenGL目标（Mac，桌面Linux）和OpenGL ES（iOS，嵌入式Linux）之间存在细微差别，后者的着色器使用前者缺少的精度限定符。除此之外，语法是相同的。

着色器程序由一对匹配的顶点着色器和一个片段着色器组成。顶点着色器在每个顶点上操作，通常处理几何操作。片段着色器对每个片段（通常是像素）进行操作，并计算要在该片段输出到屏幕的颜色。

GPUImage处理图像处理，因此大多数时候您只使用片段着色器并依赖其中一个库存顶点着色器。以上是片段着色器的示例，其接收输入纹理的每个像素（来自处理管线中的前一步骤的图像），操纵其颜色值，并将结果写出到gl_FragColor内置。

main（）函数的第一行：

lowp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);

使用texture2D()函数在给定坐标处读取inputImageTexture中的像素颜色（从第一阶段的顶点着色器传入）。这些坐标标准化为0.0-1.0范围，因此与输入图像大小无关。

将值加载到包含单个类型中的多个组件的向量类型（vec4）中。在这种情况下，红色，绿色，蓝色和alpha的颜色分量存储在这个四分量矢量中，可以通过.r，.g，.b和.a访问。如果您习惯使用0-255值，颜色分量值也会标准化为0.0-1.0范围。

在棕褐色调滤镜的特殊情况下，我试图将a well-known color matrix应用于棕褐色调效果，以将传入的颜色转换为传出的颜色。这需要矩阵乘法，我在上面的代码中明确地做了。在实际框架中，这是使用着色器中的内置类型进行矩阵数学运算。

有许多方法可以操纵颜色来达到某些效果。 GPUImage框架充满了它们，主要基于Adobe或其他组织发布的颜色转换标准。对于给定的效果，您应该确定这些现有实现中的一个是否会在您开始编写自己的实现之前执行所需的操作。

如果您确实想自己编写，请首先找出将传入颜色转换为您想要的任何输出所需的数学运算。完成后，编写着色器代码很简单。

GPUImage中的查找过滤器采用另一种方法，那就是从您在Photoshop中根据您希望模拟的过滤条件操作的查找图像开始。然后，您将获取该筛选的查找图像并将其附加到查找过滤器。它在查找中转换颜色和它们的等价物，以提供任意颜色操作。

拥有着色器后，您可以通过几种不同的方式创建一个新的过滤器。我应该说，如果你愿意放弃一些向后兼容性，我的新GPUImage 2 framework会大大简化这个过程。

iOS - 如何使用OpenGLES创建自定义GPUImageFilters

1 个答案: