iOS基于GPUImage的图像形变设计(简单形变部分)

GPUImage是iOS平台主流的GPU图像处理框架,能够非常方便地使用GPU对图像进行处理,包括:滤镜、分布统计等。

我们知道,如果需要对一个图像进行滤镜处理,一般而言只需要设计FragmentShader即可以达到目的。比如:需要对图像进行亮度调节,仅需要FragmentShader中对像素点的颜色值进行修改即可,并不需要自定义VertexShader。

那么,能否基于GPUImage进行一定的形变处理呢?答案是肯定的。对于形变的处理,可以是基于FragmentShader的,也可以是基于VertexShader的,也可以通过自定义顶点vertices和textureCoordinates来实现。下面会分别介绍一下如何通过设计来实现基于GPUImage的图像形变。

Part1:基于FragmentShader的图像形变设计

其实,有一部分形变是可以基于FragmentShader去实现的。直观的比如:翻转、旋转、压缩等。下面举几个具体的示例和相应FragmentShader的实现。

1. 翻转

为了实现翻转,只需要简单的将textureCoordinate的x、y值进行相应的改变即可:

vec2 newTex = vec2(1.0 – textureCoordinate.x, textureCoordinate.y); //代表水平翻转vec2 newTex = vec2(textureCoordinate.x, 1.0 – textureCoordinate.y); //代表垂直翻转vec2 newTex = vec2(1.0 – textureCoordinate.x, 1.0 - textureCoordinate.y); //代表水平+垂直翻转

2. 旋转

vec2 newTex = vec2(textureCoordinate.y, 1.0 - textureCoordinate.x);  //代表向右旋转90度

3. 压缩

vec2 newTex = vec2(textureCoordinate.x * 2.0 – 0.5, textureCoordinate.y * 2.0 – 0.5);

代表将图像缩小到原来的1/2长和宽,并居住

4. 变平行四边形

vec2 newTex = vec2(textureCoordinate.x * 2.0 + textureCoordinate.y – 1.0, textureCoordinate.y);

5. 大眼

相比于之前的几种形变,大眼的操作就相对比较复杂了。这里假设奥巴马右眼(图中左眼)中心的坐标是(x0, y0),放大范围的半径为r,则:

vec2 center = vec2(x0, y0);vec2 newTex = textureCoordinate.xy;float dist = sqrt((center.x – newTex.x)* (center.x – newTex.x) + (center.y – newTex.y)* (center.y – newTex.y));if (dist < r){
         float ratio = sqrt(dist / r);
         float x1 = center.x – (center.x – newTex.x) * ratio;
         float y1 = center.y – (center.y – newTex.y) * ratio;
         newTex = vec2(x1, y1);
}

具体思想是:对于中心(x0,y0)半径r中的点,做一个偏移的调整,使得整体偏移值更大(ratio<1,所以相比正常情况,会取离(x0,y0)点更近的图中的点,从而实现眼睛的“放大”)

需要特别注意的一点是,对于通过FragmentShader进行形变处理时,如果形变后的图像有像素缺失(即:形变后图像小于旧的图像),需要对多出来的点有一个特殊赋值,否则就会出现下面的情况:

如上图所示,如果不设置超出画面像素的填充颜色,则会将最外层的像素重复填充(主观感受是线条拉伸),当然,也可以设置Texture Wrapping Mode为GL_REPEAT来平铺填充(重复画面)。不过,一般而言,还是设置超出屏幕部分为纯色底图(纯白、纯黑)比较合适~

小结一下:

基于FragmentShader的图像形变设计,主要是基于坐标点的x,y的简单变换得到的,适合于旋转、翻转、缩放、一些规则四边形变形等情况。对与复杂的形变,比如大眼,就需要设计较为复杂的Shader来实现。由于每个像素点都需要进行一次FragmentShader的计算,因此复杂形变处理时,需要的GPU计算量更大。

Part2:基于自定义vertices的图像形变设计

对于Part1中举例的简单形变而言,通过巧妙的传递顶点坐标,可以实现在使用默认Shader的情况下的图像形变。具体示例如下:

对于GPUImage而言,默认的顶点如左上角的A、B、C、D点所示。我们只需要调整这4个实际渲染顶点的位置(vertices),即可以轻松实现简单形变。代码如下:

在- (void)renderToTextureWithVertices:(const GLfloat *)vertices textureCoordinates:(const GLfloat *)textureCoordinates函数中,修改如下:

//不使用默认的顶点//默认的vertices: {-1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0}//glVertexAttribPointer(filterPositionAttribute, 2, GL_FLOAT, 0, 0, vertices);       GLfloat meshVertices[8] = {1.0, -1.0, -1.0, -1.0, 1.0, 1.0, -1.0, 1.0};
glVertexAttribPointer(filterPositionAttribute, 2, GL_FLOAT, 0, 0, &meshVertices[0]);

这样就实现了水平翻转。同理可以实现旋转、压缩等。

小结一下:

通过自定义顶点的方式,可以在不改变默认fragmentShader和vertexShader的情况下,轻松实现简单的形变。然而,对于局部形变(比如大眼),就没有这么轻松了。

那么,如何实现复杂形变呢?我们会在“基于GPUImage的图像形变设计(复杂形变部分)”再做介绍~


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

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

原文发表时间:2017-04-26

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Petrichor的专栏

像素、分辨率 区别 & 介绍

举个例子,比如一张图片由100×100个像点组成,那么这张图片的像素数就是1万。但是,如果这张图片边长为1英寸,那么其分辨率就是100点/英寸,也就是100dp...

1412
来自专栏重庆的技术分享区

HTML5-canvas之绘制圆弧和贝塞尔曲线(3)

2052
来自专栏柠檬先生

grid 布局的使用

grid 布局的使用    css 网格布局,是一种二维布局系统。    浏览器支持情况:老旧浏览器不支持,    概念: 网格容器。元素应用dispalay:...

2347
来自专栏ml

初学java之(盒子分布)

1 import javax.swing.*; 2 3 import java.awt.*; 4 class WinGrid extends JFr...

52210
来自专栏Petrichor的专栏

opencv: 阈值处理(cv2.threshold) 探究(图示+源码)

左半边为(单通道)源图片; 右半边为(阈值设为150,填充色设为100)在 不同阈值类型 的取值下生成的(单通道)阈值处理图片。

1614
来自专栏杂七杂八

Matplotlib 绘2D图

Matplotlib 是一个非常简单而又完善的开源绘图库。那么它到底有多简单呢? 基本知识 首先官方文档奉上 下面,我们通过 3 行代码绘制一张简单的折线图...

6595
来自专栏前端那些事

过渡与动画 - 缓动效果&基于贝塞尔曲线的调速函数

给过渡和动画加上缓动效果是一种常见的手法(比如具有回弹效果的过渡过程)是一种流行的表现手法,可以让界面显得更加生动和真实:在现实世界中,物体A点到B点往往也是不...

2881
来自专栏机器之心

灵魂追问 | 教程那么多,你……看完了吗?

2979
来自专栏SHERlocked93的前端小站

CSS 中重要的层叠概念

最近在项目的过程中遇到了一个问题,menu-bar希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因,因...

1032
来自专栏python读书笔记

python 数据分析基础 day14-matplotlib模块概括条形图直方图折线图散点图箱线图

今天是读《pyhton数据分析基础》的第14天,今天读书笔记的内容为使用matplotlib模块绘制常用的统计图。 模块概括 matplotlib 是最基础的绘...

3064

扫码关注云+社区

领取腾讯云代金券