Android平台美颜相机/Camera实时滤镜/视频编解码/影像后期/人脸技术探索——2.2 来一份LOMO滤镜

Github项目地址

回到目录

了解了滤镜的基本知识以后，我们就可以试着来做我们的第一个滤镜了

虽然之前做过一个灰度滤镜，但是是采用直接修改片元着色器代码的方式，非常“不优雅”，所以这次我们试着来搭一个框架，让增加新的滤镜变得更加容易。
由于相关代码过多，本文只会贴出关键部分，其余的请去项目中查找
省略的内容包括但不限于:

• 类似GPU-Image的滤镜组
• 相关工具类

固定顶点着色器

由于大部分滤镜都是在片元着色器当中进行，我们可以直接固定顶点着色器部分的代码

代码很简单，只有顶点相关信息

attribute vec4 aPosition;
attribute vec4 aTextureCoord;
varying vec2 vTextureCoord;
void main() {
  gl_Position = aPosition;
  vTextureCoord = aTextureCoord.xy;
}

然后写一个简单的类包装一下，以后我们只修改fragmentShader的滤镜都可以继承这个类

public class SimpleFragmentShaderFilter extends AbsFilter {

protected GLSimpleProgram glSimpleProgram;
protected Plain plain;

public SimpleFragmentShaderFilter(Context context,
final String fragmentShaderPath) {
        glSimpleProgram=new GLSimpleProgram(context, "filter/vsh/simple.glsl",fragmentShaderPath);
        plain=new Plain(true);
    }

@Override
public void init() {
        glSimpleProgram.create();
    }

@Override
public void onPreDrawElements() {
super.onPreDrawElements();
        glSimpleProgram.use();
        plain.uploadTexCoordinateBuffer(glSimpleProgram.getTextureCoordinateHandle());
        plain.uploadVerticesBuffer(glSimpleProgram.getPositionHandle());
    }

@Override
public void destroy() {
        glSimpleProgram.onDestroy();
    }

@Override
public void onDrawFrame(int textureId) {
        onPreDrawElements();
        TextureUtils.bindTexture2D(textureId, GLES20.GL_TEXTURE0,glSimpleProgram.getTextureSamplerHandle(),0);
        GLES20.glViewport(0,0,surfaceWidth,surfaceHeight);
        plain.draw();
    }
}

来一份LOMO滤镜

严格来说这个应该是炫影(Vignette)效果，而不是LOMO效果

/**
 * Created by Ads on 2017/1/31.
 * VignetteFilter (炫影)
 */

public class VignetteFilter extends SimpleFragmentShaderFilter {
public VignetteFilter(Context context) {
super(context, "filter/fsh/mx_vignette.glsl");
    }
}

类的代码异常简单有没有，因为变化的只有着色器代码而已

美丽的滤镜背后都是数学和艺术在支撑，但是本文暂时还不会详细阐述每个滤镜的原理，代码来自某个相机app（侵删），就直接贴出来吧

mx_vignette.glsl

precision mediump float;
uniform sampler2D sTexture;
varying vec2 vTextureCoord;
vec4 calVignette2(vec4 color, vec2 coord, float strength) {
float distance = (coord.x - 0.5) * (coord.x - 0.5) + (coord.y - 0.5) * (coord.y - 0.5);
float scale = distance / 0.5 * strength;
    color.r =  color.r - scale;
    color.g = color.g - scale;
    color.b = color.b - scale;
return color;
}
vec4 calNewSaturation(vec4 color,float saturation) {
float gray = dot(color.rgb, vec3(0.299,0.587,0.114));
return vec4(gray + (saturation / 100.0 + 1.0) * (color.r - gray), gray + (saturation / 100.0 + 1.0) * (color.g - gray), gray + (saturation / 100.0 + 1.0) * (color.b - gray), color.a);
}
void main() {
vec4 color = texture2D(sTexture, vTextureCoord);
    color = calVignette2(color, vTextureCoord,1.0);
    color = calNewSaturation(color, 57.0);
gl_FragColor = color;
}

效果预览

把刚做好的滤镜加进滤镜组：

filterGroup.addFilter(spherePlugin);
filterGroup.addFilter(new VignetteFilter(statusHelper.getContext()));

这个滤镜放在渲染到球体之后（如果放在前面又是另一番效果）。可以和原图对比一下：

是不是感觉不加滤镜简直丑爆了（虽然加了好像也好看不到哪里去嘛）？

Github项目地址

回到目录