前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >图片滤镜

图片滤镜

作者头像
CC老师
发布2019-07-30 15:30:54
1.1K0
发布2019-07-30 15:30:54
举报
文章被收录于专栏:HelloCode开发者学习平台

01

图片滤镜处理原理

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

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

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

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

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

02

了解图片显示原理

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

顶点着色器处理:

片元着色器处理:

03

了解灰度滤镜

我们都知道,一般我们拿到的彩色图片中都有 rgb 三个通道。有些还有额外的 alpha 通道。其中 rgbalpha 通道分别表示红色、绿色、蓝色和透明度通道. 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 灰度滤镜代码实现

  • 返回数据结构
  • 顶点函数
  • 片元函数
  • 并行计算函数

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-06-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 HelloCode开发者学习平台 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 三种常见灰度滤镜算法
相关产品与服务
GPU 云服务器
GPU 云服务器(Cloud GPU Service,GPU)是提供 GPU 算力的弹性计算服务,具有超强的并行计算能力,作为 IaaS 层的尖兵利器,服务于生成式AI,自动驾驶,深度学习训练、科学计算、图形图像处理、视频编解码等场景。腾讯云随时提供触手可得的算力,有效缓解您的计算压力,提升业务效率与竞争力。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档