opengl的渲染之前讲过很多，包括FBO等常用的技术(可参考我的博客：fbo)，今天解决之前的一个小疑问：手机系统相机中，九宫格的滤镜选择是如何实现的，今天闲暇就实现起来看看，同时开放出来之前私有的相机项目：LammyOpenglCamera
原理:先利用fbo，将相机数据绘制到一个纹理当中，然后将纹理设置到不同的filter，利用 glViewport来确定绘制窗口位置，然后利用不同的filter绘制在一个glsurfaceview不同的位置。

确定滤镜的位置

过滤格子位置不包含间隔

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<LyFilter> 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