本文总结了20种iOS滤镜都是基于GPUImage
的,有3种滤镜是GPUImage
库中包含的,还有17种是Instagram
中的经典滤镜,集成在一个项目中。使用GPUImage
可以非常容易创建我们自己的滤镜效果总会有你想要的效果吧。在文章下面附源码下载。
相信你也在使用滤镜吧,今天就让你见识一下滤镜实现其实也不是一件特别难的技术,下面附一些效果图。由于几种滤镜最主要的实现是一段片段着色程序,所以会进行展示。
Amaro
滤镜,通过FWAmaroFilter
类来实现。它是Instagram
应用中的经典滤镜之一,适用于任何色调暗沉的照片。
NSString *const kFWAmaroShaderString = SHADER_STRING
(
precision lowp float;
varying highp vec2 textureCoordinate;
uniform sampler2D inputImageTexture;
uniform sampler2D inputImageTexture2; //blowout;
uniform sampler2D inputImageTexture3; //overlay;
uniform sampler2D inputImageTexture4; //map
void main()
{
vec4 texel = texture2D(inputImageTexture, textureCoordinate);
vec3 bbTexel = texture2D(inputImageTexture2, textureCoordinate).rgb;
texel.r = texture2D(inputImageTexture3, vec2(bbTexel.r, texel.r)).r;
texel.g = texture2D(inputImageTexture3, vec2(bbTexel.g, texel.g)).g;
texel.b = texture2D(inputImageTexture3, vec2(bbTexel.b, texel.b)).b;
vec4 mapped;
mapped.r = texture2D(inputImageTexture4, vec2(texel.r, .16666)).r;
mapped.g = texture2D(inputImageTexture4, vec2(texel.g, .5)).g;
mapped.b = texture2D(inputImageTexture4, vec2(texel.b, .83333)).b;
mapped.a = 1.0;
gl_FragColor = mapped;
}
);
效果图
![](https://img.haomeiwen.com/i1840444/5a9bbe761752c69d.png)
![](https://img.haomeiwen.com/i1840444/16417ae5de29983c.png)
SoftElegance
滤镜,通过GPUImageSoftEleganceFilter
来实现。复古型滤镜,感觉像旧上海滩~~~
![](https://img.haomeiwen.com/i1840444/c3da8609c5756112.png)
![](https://img.haomeiwen.com/i1840444/27aaac18c7bc1244.png)
MissEtikate
滤镜
![](https://img.haomeiwen.com/i1840444/b12a058ca5b7aec9.png)
![](https://img.haomeiwen.com/i1840444/fb6adf886418db69.png)
Nashville
滤镜,Nashville
是Instagram
众多滤镜中最惊艳的一款,独特的奶昔色调赋予照片童话般的唯美感觉。适用范围:营造浪漫唯美的感觉。
![](https://img.haomeiwen.com/i1840444/3753aeb09267d5da.png)
![](https://img.haomeiwen.com/i1840444/429398209071f506.png)
LordKelvin
滤镜
![](https://img.haomeiwen.com/i1840444/92e235a1937a9132.png)
![](https://img.haomeiwen.com/i1840444/79798dabbe34e8ff.png)
Amatorka
滤镜
![](https://img.haomeiwen.com/i1840444/e6531edaadcb3624.png)
![](https://img.haomeiwen.com/i1840444/3f7e79422b76b3e0.png)
Rise
滤镜,可以使人像皮肤得到很好的调整
![](https://img.haomeiwen.com/i1840444/c531bb287faa0ae1.png)
![](https://img.haomeiwen.com/i1840444/e422be580614bb6e.png)
Hudson
滤镜
![](https://img.haomeiwen.com/i1840444/11ba90b6c7134517.png)
![](https://img.haomeiwen.com/i1840444/7e2ac66af6ddbb3e.png)
XproII
滤镜
![](https://img.haomeiwen.com/i1840444/b21f2d704fd29160.png)
![](https://img.haomeiwen.com/i1840444/3d405b57f2c77c6f.png)
1977
滤镜
![](https://img.haomeiwen.com/i1840444/399f3085a1a160a7.png)
![](https://img.haomeiwen.com/i1840444/59e88d985361812b.png)
Valencia
滤镜
![](https://img.haomeiwen.com/i1840444/8ad6213cfde1adfc.png)
![](https://img.haomeiwen.com/i1840444/fffe712d29a0c504.png)
Walden
滤镜
![](https://img.haomeiwen.com/i1840444/1e6099bd4e9bbc06.png)
![](https://img.haomeiwen.com/i1840444/5e14a010850fcd90.png)
Lomofi
滤镜
![](https://img.haomeiwen.com/i1840444/7b53932bc2926e43.png)
![](https://img.haomeiwen.com/i1840444/8066acbd3b9c9b6d.png)
Inkwell
滤镜
![](https://img.haomeiwen.com/i1840444/c5a00825e654fdd1.png)
![](https://img.haomeiwen.com/i1840444/bd98467122231f65.png)
Sierra
滤镜
![](https://img.haomeiwen.com/i1840444/4bea8ec6fc27b29d.png)
![](https://img.haomeiwen.com/i1840444/7cc5e63f7f5823f5.png)
Earlybird
滤镜
![](https://img.haomeiwen.com/i1840444/f0db5fe096faf2c1.png)
![](https://img.haomeiwen.com/i1840444/09570224184fb9a9.png)
Sutro
滤镜
![](https://img.haomeiwen.com/i1840444/1692096ac0d57bd1.png)
![](https://img.haomeiwen.com/i1840444/ff8957cd2685c246.png)
Toaster
滤镜
![](https://img.haomeiwen.com/i1840444/96366bfd0ed9eacd.png)
![](https://img.haomeiwen.com/i1840444/252f5c6dcb4734eb.png)
Brannan
滤镜
![](https://img.haomeiwen.com/i1840444/c1f0c2eeb3399429.png)
![](https://img.haomeiwen.com/i1840444/09caf80b60cb4f8b.png)
Hefe
滤镜
![](https://img.haomeiwen.com/i1840444/0515e08710bf3c71.png)
![](https://img.haomeiwen.com/i1840444/2870f7b9186dab64.png)
实现【以FWNashvilleFilter
为例】
创建滤镜类 ,我将所有滤镜类都继承自GPUImageFilterGroup
类,它允许我们所创建的类混合其他滤镜。它其实是向FWFilter1
类中添加需要的输入纹理图片。
@interface FWNashvilleFilter : GPUImageFilterGroup
{
GPUImagePicture *imageSource ;
}
创建滤镜效果 ,该类主要实现滤镜的效果,包含一个片段着色程序。它是滤镜效果的具体实现
@interface FWFilter1 : GPUImageTwoInputFilter
@end
应用
+ (UIImage *)applyNashvilleFilter:(UIImage *)image
{
FWNashvilleFilter *filter = [[FWNashvilleFilter alloc] init];
[filter forceProcessingAtSize:image.size];
GPUImagePicture *pic = [[GPUImagePicture alloc] initWithImage:image];
[pic addTarget:filter];
[pic processImage];
[filter useNextFrameForImageCapture];
return [filter imageFromCurrentFramebuffer];
}
网友评论