图片滤镜

01

—

图片滤镜处理原理

Metal 框架/OpenGL ES 框架在处理都是面向过程.

顶点着色器: 处理图形的顶点计算;

片元着色器: 计算每个片元(像素点)上颜色值;

那么,如果想对图片实现灰度滤镜? 是在顶点着色器处理还是片元着色器上处理了?

答案: 片元着色器上来计算每个像素点灰度处理后的颜色值.

02

—

了解图片显示原理

在Metal / OpenGL ES 框架,只有3种基本图元. 点,线,三角形. 所以在显示一个矩形图片时. 实际在显示本质是由2个三角形组成.

顶点着色器处理:

片元着色器处理:

03

—

了解灰度滤镜

我们都知道，一般我们拿到的彩色图片中都有 rgb 三个通道。有些还有额外的 alpha 通道。其中 rgb 和 alpha 通道分别表示红色、绿色、蓝色和透明度通道. RGBA 值的范围 [0,1];

什么叫灰度? 就是每个像素的亮度. 灰度值为1时,图片像素亮度最亮; 灰度值为 0 时,图片像素的亮度是最暗的.

什么叫灰度滤镜 就是原本 RGB 三个通道中的颜色值退化成只有 0-1 的亮度值. 常见灰度化的思想就是将 RGB 三颜色通道

最简单的做法就是将: RGB 三个通道上的颜色值都填充绿色值.

04

—

灰度滤镜算法

三种常见灰度滤镜算法

最大值法：即新的颜色值R＝G＝B＝Max(R，G，B);

• 这种方法处理后的图片看起来亮度值偏高

平均值法：即新的颜色值R＝G＝B＝(R＋G＋B)／3;

• 这种方法处理的图片会相对而言比较柔和

加权平均值法：即新的颜色值R＝G＝B＝(R ＊ Wr＋G＊Wg＋B＊Wb);

• 一般由于人眼对不同颜色的敏感度不一样，所以三种颜色值的权重不一样，一般来说绿色最高，红色其次，蓝色最低，最合理的取值分别为Wr ＝ 30％，Wg ＝ 59％，Wb ＝ 11％ 或者 可以借鉴GPUImage 框架中灰度滤镜的权值: Wr = 21% , Wg = 71% , Wb = 7%

05

—

OpenGL ES 灰度滤镜代码实现

顶点着色器代码:

片元着色器代码:

06

—

Metal 灰度滤镜代码实现

• 返回数据结构

• 顶点函数

• 片元函数

• 并行计算函数

著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。