[OpenGL]从零开始写一个Android平台下的全景视频播放器——6.2 来一份LOMO滤镜~

2019-11-09 15:41:08

字体：大中小

来源：转载

供稿：网友

Github项目地址

为了方便没有准备好梯子的同学，我把项目在CSDN上打包下载，不过不会继续更新（保留在初始版本）

回到目录

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

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

类似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;}