用于图像处理的OpenGL ES 2.0着色器示例？

Question

我正在学习着色器编程和查找示例，专门用于图像处理。我想为我的照片应用一些Photoshop效果，例如曲线，色阶，色相/饱和度调整等

Answer 1

我假设你有一个简单的没有争议的顶点着色器，因为它不是真正的问题有关，如：

void main() 
{ 
    gl_Position = modelviewProjectionMatrix * position; 
    texCoordVarying = vec2(textureMatrix * vec4(texCoord0, 0.0, 1.0)); 
} 

所以，做多如果照明被禁用，则与ES 1.x相同，包括几乎没有人使用过的纹理矩阵。

我不是Photoshop专家，所以请原谅我对各种工具的看法 - 特别是如果我错了。

我想我说得对，水平工具有效地拉伸（和剪辑）的亮度直方图？在这种情况下，例如着色器可以是：

varying mediump vec2 texCoordVarying; 
uniform sampler2D tex2D; 

const mediump mat4 rgbToYuv = mat4(0.257, 0.439, -0.148, 0.06, 
            0.504, -0.368, -0.291, 0.5, 
            0.098, -0.071, 0.439, 0.5, 
            0.0,  0.0,  0.0, 1.0); 

const mediump mat4 yuvToRgb = mat4(1.164, 1.164, 1.164, -0.07884, 
            2.018, -0.391, 0.0, 1.153216, 
             0.0, -0.813, 1.596, 0.53866, 
             0.0, 0.0, 0.0, 1.0); 

uniform mediump float centre, range;  

void main() 
{ 
    lowp vec4 srcPixel = texture2D(tex2D, texCoordVarying); 
    lowp vec4 yuvPixel = rgbToYuv * srcPixel; 

    yuvPixel.r = ((yuvPixel.r - centre) * range) + 0.5; 

    gl_FragColor = yuvToRgb * yuvPixel; 
} 

你会控制，通过设置你想要让通过范围的中心（将移动到输出范围的中心）和总范围你想通过（整个范围为1.0，范围的一半为0.5）等。

有趣的是，我从RGB输入空间切换到YUV色彩空间进行中间调整。我使用矩阵乘法来做到这一点。然后我调整亮度通道，并应用从YUV变回RGB的另一个矩阵。对我而言，在亮度/色度色彩空间中工作是最有意义的，从那里我选择YUV是相当任意的，尽管它对于ES目的是RGB空间的简单线性变换具有很大的优势。

我的理解是，曲线工具也可以重新映射亮度，但根据一些函数f（x）= y，它是单调递增的（所以，只会与任何水平或垂直只相交一次）并且被设置在界面中以某种方式从左下到右上的曲线。

因为GL ES对于数据结构并不是很好，并且尽可能避免分支，所以我建议最好的方法是上传一个256x1的亮度纹理，其中'x'的值为f X）。然后，您可以仅通过二次纹理进行映射，例如，与：

... same as before down to ... 
lowp vec4 yuvPixel = rgbToYuv * srcPixel; 

yuvPixel.r = texture2D(lookupTexture, vec2(yuvPixel.r, 0.0)); 

... and as above to convert back to RGB, etc ... 

您正在使用备用纹理单元有效地索引查找表。在支持ES 2.0的iOS设备上，您至少可以获得八个纹理单元，因此您希望有一个备用。因为从RGB到HSV的映射涉及很多条件，但过程基本相同 - 从RGB到HSV的映射，在H和S上执行所需的修改，映射回RGB和输出。

基于一个快速谷歌搜索，this site提供了一些可下载的代码，其中包括一些Photoshop的功能（虽然不是曲线或水平，这样我可以看到），并显著，功能RGBToHSL和HSLToRGB用品示例实现。它适用于桌面GLSL，它具有更多预定义的变量，类型和功能，但您不应该遇到任何重大问题。请记住添加精度修饰符并为缺失的min和max函数提供您自己的替换。

Answer 2

对于曲线photoshop使用双三次样条插值。对于给定的一组控制点，您可以预先计算每个通道和主曲线的所有256个值。我发现将结果存储为256x1纹理并将其传递给着色器，然后更改每个组件的值会更加容易：

uniform sampler2D curvesTexture; 

vec3 RGBCurvesAdjustment(vec3 color) 
{ 
    return vec3(texture2D(curvesTexture, vec2(color.r, 1.0)).r, 
       texture2D(curvesTexture, vec2(color.g, 1.0)).g, 
       texture2D(curvesTexture, vec2(color.b, 1.0)).b); 
}