终端图像处理系列 - 图像混合模式的Shader实现

在图像处理应用中,将两张或者多张图片混合显示是非常常见的一种操作,应用场景包括但不限于:加水印、标签,插入画中画,遮盖等等。

最常见的图像混合模式是普通混合模式,比如加水印。对于叠加在原图上的水印图片,其中根据透明度来选择原图和水印图片像素所占的权重,从而可以形成一个半透明的水印。

除了普通混合模式外,还有多种图像混合模式,包括但不局限于:正片叠底(multiply)、滤色模式(screen)、叠加模式(overlay)、柔光模式(softlight)、强光模式(hardlight)、增加模式(add)、减去模式(subtract)等等。每一种混合模式都对应了一种函数T=F(S,D),其中,T是混合后的像素颜色,S表示用于混合的像素颜色,D表示底图的像素颜色(S,D,T的取值范围都是0~1)。

下面是各种混合模式的计算公式,这里选择最常见的12种混合模式作为例子。其它的混合模式可以类似实现。

混合模式

公式

条件、备注

normal

T=S

multiply

T=S*D

screen

T=1-(1-S)*(1-D)

overlay

T=2*S*D

D<0.5

T=1-2*(1-S)*(1-D)

D>=0.5

hardlight

T= 2*S*D

S<0.5

T=1-2*(1-S)*(1-D)

S>=0.5

softlight

T=2*S*D+D*D*(1-2*S)

S<0.5

T=2*D*(1-S)+sqrt(D)*(2*S-1)

S>=0.5

divide

T=D/S

D/S取0~1之间

add

T=D+S

D+S取0~1之间

subtract

T=D-S

D-S取0~1之间

diff

T=|D-S|

darken

T=MIN(D,S)

lighten

T=MAX(D,S)

另外,当融合图片是半透明的时候(α值不是1),融合后的像素值T’=T*α+(1-α)*D。从中可以看出,当α为0时(全透明),T’=D,即融合图片不影响结果;当α为1时(不透明),T’=T。

具体的效果如下图所示:

底图:

融合图:

融合结果:

底图:

融合图:

融合结果:

看完了效果,那么,怎么在GPUImage里实现呢?这里就要实现自定义的FragmentShader了。

这里的返回值是T和S的α值,后续会有一个跟底图的α融合过程。该融合过程可以放在shader中实现,也可以让OpenGL自动实现。

  • 让OpenGL自动实现的方法如下:

1) 在render之前,设置:

这两句的含义是:让OpenGL根据α值自动融合结果;融合公式是:

T=S*α+(1-α)*D

2) glDrawArray

3) glDisable(GL_BLEND);

这样设置好之后,就可以实现原地多次增加贴图了(绘制在同一个frameBuffer上,不用两个frameBuffer来回倒腾),相当方便~

  • 在shader里面手动实现的方法如下:

更多关于移动开发,图像处理的相关技术,请持续关注我们的公众号!

作者简介:dreamqian(钱梦仁),外号"大魔王",天天P图iOS工程师

原文发布于微信公众号 - 天天P图攻城狮(ttpic_dev)

原文发表时间:2018-04-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏pangguoming

WebGL 入门-WebGL简介与3D图形学

什么是WebGL? WebGL是一项使用JavaScript实现3D绘图的技术,浏览器无需插件支持,Web开发者就能借助系统显卡(GPU)进行编写代码从而呈现3...

50211
来自专栏数据小魔方

图表制作理念——最大化信息墨水比

昨天给大家简单介绍了排版四原则。 今天趁热打铁,跟大家聊一聊图表制作中那些如圣经般的金言。 著名的世界级视觉设计大师——爱德华·塔夫特曾在其经典著作《The V...

3317
来自专栏小白课代表

有了它,图片放大100倍不是梦

2234
来自专栏量子位

三分钟训练眼球追踪术,AI就知道你在盯着哪个妹子 | TensorFlow.js代码

如果有个眼球追踪AI,加上人脸识别,或许就能在被老板盯上的瞬间,进入奋力工作模式。

8963
来自专栏数据小魔方

数据地图多图层对象的颜色标度重叠问题解决方案

一篇旧文,解决一个困扰已经的小技术问题,权当是学习ggplot2以来的整理回顾与查漏补缺。 ---- 今天这一篇是昨天推送的基础上进行了进一步的深化,主要讲如何...

3775
来自专栏编程之旅

Rem布局的原理探究

在用前端给移动端页面写布局时,我接触到了Rem布局,但是老实说我也看了几篇手淘适配的文章,并且主要的目的是拿到代码写出demo,所以对于Rem我还是停留在只会使...

4012
来自专栏落影的专栏

OpenGL ES实践教程(六)全景视频获取焦点

教程 OpenGL ES实践教程1-Demo01-AVPlayer OpenGL ES实践教程2-Demo02-摄像头采集数据和渲染 OpenGL ES实践...

3195
来自专栏Material Design组件

Human Interface Guidelines — Sliders

982
来自专栏MixLab科技+设计实验室

从Storyboard到DIY实现一个漫画生成器-01

用户只需拍摄一段视频并将其加载到 Storyboard 中即可将视频转换为单页漫画的布局。该应用会自动选择有趣的帧,并将其应用于6种视觉样式中的一种。生成的漫画...

1404
来自专栏阿凯的Excel

帕累托图(主次图)绘制方法(Excel绘制图表系列课程)

有朋友让我快点、马上、立刻、最先分享帕累托图的绘制方法。什么是帕累托图?主要想表达何种含义呢?让我们慢慢聊。 帕累托图(Pareto chart)由来 是以意大...

3135

扫码关注云+社区

领取腾讯云代金券