Android 仿抖音之使用OpenGL显示摄像头

前言

在上一篇博客中，简单介绍了一下有关于OpenGL的基础内容，没看过的，可以看一下OpenGL ES基础，如果对里面有很多内容还是不懂的话，就百度一下吧，里面我都是简单说了一下大概内容，从这一篇开始，用仿抖音的项目来一步步具体介绍怎么在Android中使用OpenGL。
首先抖音其实就是录制前处理和录制后特效的处理，今天先来第一步使用OpenGL显示摄像头，为后面的工作做准备。

需求

使用OpenGL显示摄像头，分析一下需求，其实也就是两步，第一步采集摄像头数据，第二步将摄像头数据显示到屏幕上

采集摄像头数据

使用Android的Camera就可以实现采集

将摄像头数据显示到屏幕上

这里显示到屏幕上，其实有很多方法，比如ANative_window等等，但是这个是使用OpenGL实现，使用OpenGL怎么实现呢，在上一篇博客中说到了OpenGL的绘制流程，基本就是按照那个流程进行实现的。
下面是项目结构中一个不太规范的类图，下面根据这种图来实现具体的代码
一张不太规范的类图
简单点说，我们都知道SurfaceView实质是将底层显存Surface显示到界面上，而GLSurfaceView实际就是在这个基础之上增加了OpenGL环境，DouyinView实际就相当于一块画布，而ScreenFilter中是封装了如何使用画笔去画当前摄像头采集到的内容，而DouyinRender渲染器，就是将ScreenFilter中的画渲染到画布上。

创建工程

创建一个JNI工程，就是在一开始创建项目的时候，勾选上 Include C++ support,这样就创建好了

配置文件 AndroidManifest.xml

OpenGL的使用还需要有设备制造商提供支持，以下是设备的支持情况，项目里都是用来2.0

OpenGL ES 1.0 和 1.1 ：Android 1.0和更高的版本支持这个API规范。
OpenGL ES 2.0 ：Android 2.2(API 8)和更高的版本支持这个API规范。
OpenGL ES 3.0 ：Android 4.3(API 18)和更高的版本支持这个API规范。
OpenGL ES 3.1 : Android 5.0(API 21)和更高的版本支持这个API规范。

DouyinView.java

在这里插入图片描述

DouyinRender.java

这里使用的Render,是实现了OpenGL配置好EGL的渲染器，后面会自己来配置，这里先使用这个，上面也有提到过，OpenGL的操作都是在GLThread线程中完成，所以这里的onSurfaceCreated，onSurfaceChanged，onDrawFrame都是在GLThread中实现的，下面单独看看每个方法的使用
在这里插入图片描述
CameraHelper是封装了对Camera的一系列操作

创建着色器

AS里面有个插件可以支持GLSL的高亮显示，在plugin里面搜索 GLSL Support
顶点着色器
片元着色器
这里我们需要画的是矩形，也就是两个三角形，给了4个点的坐标，这4个点，会执行4次顶点着色器，依次将顶点传递给gl_Position，当4个点都传递完成之后，会进行光栅化，将一个矩形变换成一个个的片元，然后再去使用gl_FragColor去着色
因为SurfaceTexture是Android中的，并不是OpenGL的，所以需要使用额外扩展的采样器samplerExternalOES，而不是普通的sample2D采样器，在使用samplerExternalOES时候，需要再添加一句：#extension GL_OES_EGL_image_external : require

ScreenFilter.java

 public ScreenFilter(Context context) {

        //把camera_vertext内容读出来
        String vertexSource= OpenUtils.readRawTextFile(context, R.raw.camera_vertex);
        String fragSource = OpenUtils.readRawTextFile(context, R.raw.camera_frag);


        //通过字符串创建着色器程序
        //使用opengl
        //一.顶点着色器
        //1.1创建顶点着色器
        int vSharderId = GLES20.glCreateShader(GLES20.GL_VERTEX_SHADER);
        //1.2绑定代码到着色器中
        GLES20.glShaderSource(vSharderId,vertexSource);
        //1.3编译着色器
        GLES20.glCompileShader(vSharderId);
        //1.4主动获取成功失败
        int[] status=new int[1];
        GLES20.glGetShaderiv(vSharderId,GLES20.GL_COMPILE_STATUS,status,0);
        if (status[0] != GLES20.GL_TRUE){
            throw new IllegalStateException("ScreenFitler 顶点着色器配置失败！");
        }

        //二.创建片元着色器
        int fShaderId = GLES20.glCreateShader(GLES20.GL_FRAGMENT_SHADER);
        //绑定代码到着色器中
        GLES20.glShaderSource(fShaderId,fragSource);
        //编译
        GLES20.glCompileShader(fShaderId);
        GLES20.glGetShaderiv(fShaderId,GLES20.GL_COMPILE_STATUS,status,0);
        if (status[0] != GLES20.GL_TRUE){
            throw new IllegalStateException("ScreenFilter 片元着色器配置失败");
        }


        //三、把着色器塞到程序里面去，GPU
        mProgram = GLES20.glCreateProgram();
        GLES20.glAttachShader(mProgram,vSharderId);
        GLES20.glAttachShader(mProgram,fShaderId);

        //连接着色器
        GLES20.glLinkProgram(mProgram);

        //获取程序是否配置成功
   GLES20.glGetProgramiv(mProgram,GLES20.GL_LINK_STATUS,status,0);
        if (status[0] != GLES20.GL_TRUE){
            throw  new IllegalStateException("Screen Filter 着色器程序连接失败");
        }

        //因为着色器已经塞到了GPU程序中，所以可以删除了
        GLES20.glDeleteShader(vSharderId);
        GLES20.glDeleteShader(fShaderId);

        //获得着色器程序中的变量的索引，通过这个索引对其进行赋值
        vPosition = GLES20.glGetAttribLocation(mProgram,"vPosition");
        vCoord = GLES20.glGetAttribLocation(mProgram,"vCoord");
        vMatrix = GLES20.glGetUniformLocation(mProgram,"vMatrix");

        vTexture =  GLES20.glGetUniformLocation(mProgram,"vTexture");


        //创建一个数据缓冲区
        //OpenGL的中顶点的位置坐标
        mVertextBuffer = ByteBuffer.allocateDirect(4 * 2 * 4).order(ByteOrder.nativeOrder()).asFloatBuffer();
        mVertextBuffer.clear();
        float[] v = {-1.0f,-1.0f,
                1.0f,-1.0f,
                -1.0f,1.0f,
                1.0f,1.0f
        };

        mVertextBuffer.put(v);

        //采样器采样图片的坐标
        mTextureBuffer = ByteBuffer.allocateDirect(4 * 2 * 4).order(ByteOrder.nativeOrder()).asFloatBuffer();
        mTextureBuffer.clear();

//        float[] f={0.0f,1.0f,
//                1.0f,1.0f,
//                0.0f,0.0f,
//                1.0f,0.0f
//        };
//
        //顺时针旋转90度
//        float[] f={1.0f,1.0f,
//                1,0,
//                0,1,
//                0,0
//
//
//        };

//        镜像
        float[] f={1.0f,0.0f,
                1.0f,1.0f,
                0.0f,0.0f,
                0.0f,1.0f
        };
        mTextureBuffer.put(f);
    }


    /**
     * 使用着色器程序开始画画
     * @param texture
     * @param mtx
     */
    public void onDrawFrame(int texture,float[] mtx){
        //1.设置窗口大小
        GLES20.glViewport(0,0,mWidth,mHeight);
        //2.使用着色器程序
        GLES20.glUseProgram(mProgram);
        /**
         * 3. 画顶点
         */
        //3.1传入顶点数据，确定形状
        mVertextBuffer.position(0);
        //size:2表示xy两个数据
        GLES20.glVertexAttribPointer(vPosition,2,GLES20.GL_FLOAT,false,0,mVertextBuffer);
        //3.2激活
        GLES20.glEnableVertexAttribArray(vPosition);
        //4，片元，纹理
        mTextureBuffer.position(0);
        GLES20.glVertexAttribPointer(vCoord,2,GLES20.GL_FLOAT,false,0,mTextureBuffer);
        GLES20.glEnableVertexAttribArray(vCoord);

        //5.变换矩阵
        GLES20.glUniformMatrix4fv(vMatrix,1,false,mtx,0);

        //片元
        //激活图层
        GLES20.glActiveTexture(GLES20.GL_TEXTURE);
        //图像数据
        GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,texture);
        //传递参数
        GLES20.glUniform1i(vTexture,0);

        //参数传完了，通知OpenGL画画，从第0个点开始，共4个点
        GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP,0,4);
    }

Tips

因为OpenGL中如果显示不正确，错误一般都比较难找，所以在代码里有在一些地方去获取是否配置正确，来方便找错
记录我遇到的两个bug，如果遇到问题可做参考，第一个是在获取索引的时候，类型弄错了。第二个是在顶点着色器中，获取像素点aCoord进行矩阵变换的时候，写成了纹理坐标 * 矩阵，这样出来的结果是错的，一定要是矩阵 * 纹理坐标。

点击可以下载Demo源码，里面也都有注释
源码下载