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

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中给定坐标(从第一阶段的vertex shader传入)的像素颜色。这些坐标被归一化到 0.0-1.0 范围内，因此与输入图像大小无关。

这些值被加载到一个 vector 类型 (vec4) 中，该 vector 类型在一个类型中包含多个组件。在这种情况下，红色、绿色、蓝色和 alpha 的颜色分量存储在这个四分量 vector 中，可以通过 .r、.g、.b 和 .a 访问。颜色分量值也标准化为 0.0-1.0 范围，以防您习惯使用 0-255 值。

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

有许多方法可以操纵颜色以达到特定效果。 GPUImage 框架充满了它们，主要基于 Adob​​e 或其他组织发布的颜色转换标准等内容。对于给定的效果，在着手编写自己的实现之前，您应该先确定这些现有实现中的一个是否能满足您的要求。

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

GPUImage 中的查找过滤器采用另一种方法，即从您在 Photoshop 中根据您希望模仿的过滤条件操作的查找图像开始。然后，您获取过滤后的查找图像并将其附加到查找过滤器。它在传入颜色和查找中的等效颜色之间进行转换，以提供任意颜色操作。

一旦你有了你的着色器，你就可以用几种不同的方式围绕它创建一个新的过滤器。我应该说我的新 GPUImage 2 framework如果您愿意放弃一些向后兼容性，则大大简化了该过程。