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 灰度滤镜代码实现
- 返回数据结构
- 顶点函数
- 片元函数
- 并行计算函数
著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。