android 滤镜 原理,android openglse实现滤镜九宫格

opengl的渲染之前讲过很多，包括FBO等常用的技术(可参考我的博客：fbo)，今天解决之前的一个小疑问：手机系统相机中，九宫格的滤镜选择是如何实现的，今天闲暇就实现起来看看，同时开放出来之前私有的相机项目：LammyOpenglCamera

原理:先利用fbo，将相机数据绘制到一个纹理当中，然后将纹理设置到不同的filter，利用 glViewport来确定绘制窗口位置，然后利用不同的filter绘制在一个glsurfaceview不同的位置。

确定滤镜的位置

过滤格子位置不包含间隔

如图，假如每个格子代表一个滤镜的显示，不包含过滤之间的间隔，为何这样标记主要是因为 glViewport的参数坐标是 左下角为圆心的。

为了符合应用的审美习惯，从左上角开始显示filter，因此，在结算第二个参数y的时候，用2-当前的y的竖直参数，计算位置如下：然后将位置以point来存储在filtersStartPoints中

private void getFiltersStartPoints( int width, int height){

int offsetW = width /24;

int offsetH = height/24;

int size = filters.size();

for(int i = 0; i < size; i ++){

int index = i/9;

int offX = offsetW + index * width + (i % 3) * width/3;

int offY = offsetH + (2-(i % 9)/3) * height/3;

filtersStartPoints.add(new Point(offX,offY));

}

}

offsetW是距离glsurfaceView左边的距离，offsetW是距离底边的距离。每个filter的宽高是总的控件宽高的1/4。

绘制filter

确定了每个filter的位置后，只需要利用glViewport来控制绘制的位置，然后将每个filter的texture设置为camera数据离频渲染的texture，然后就可以将所有filter的滤镜效果绘制出来：

private ArrayList filters = new ArrayList<>();

public void drawFilters(int textureId, int width, int height){

if(filtersStartPoints.size() < filters.size()){

getFiltersStartPoints( width, height);

}

GLES20.glClearColor(0.0f, 0.0f, 0.0f, 0.0f);

GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);

int size = filters.size();

for(int i = 0; i < size; i ++){

LyFilter filter = filters.get(i);

filter.setTextureId(textureId);

GLES20.glViewport(filtersStartPoints.get(i).x, filtersStartPoints.get(i).y ,

width/4, height/4);

filter.drawNoClear();

}

GLES20.glViewport(0,0,width,height);

这样就可以将多个filter绘制到一个glsurfaceview上，当然在ontouch中实现滑动翻页，因此，可以最多绘制2页就够了，在滑动的时候，我们只需要平移窗口即可。

效果如下：

device-2019-06-13-155722.png

也希望各位老铁下载，如有收获还请多多给予鼓励，谢谢，github地址：LammyOpenglCamera