[OpenGL]未来视觉3-摄像头帧缓冲

Android组件化架构热卖中

相信很多人都用过相机功能，也开发过简单调度相机功能。相机采集功能是图像信号输入的重要来源。
我们首先了解一下Android相机采集数据的格式一般为YUV格式的数据。YUV 表示三个分量， Y 表示 亮度（Luminance），即灰度值，UV表示色度（Chrominance），描述图像色彩和饱和度，指定颜色。YUV格式有YUV444、 YUV422 和 YUV420 三种，差别在于：
YUV444： 每个Y分量对应一组UV分量
YUV422：每两个Y分量共用一组UV分量
YUV420：每四个Y分量共用一组UV分量
一张图让你理解理解这三种比例的区别。

YUV解析图

而YUV打包时其排列也会有不同，可以查看此Android中的YUV格式解析。

如果你英文好的，可以看着篇，这篇更加详细介绍排列和RGB等转换计算Video Rendering with 8-Bit YUV Formats

为何使用YUV呢？

因为普通的RGB排布大小是width* height* 3,RGBA排布大小是width* height* 4,而YUV420的大小是width* height* 1.5，在移动端内存利用非常重要的情况下，在采集效果不变的情况下，YUV420的数据量会比RGB排列少将近一倍的大小，这有利于数据的采集速度和传输速度。

但是这样就会有另外一个问题出现，就是我们的屏幕是RGBA排列着色的，但是采集的数据却是YUV数据，那他是如何转换到屏幕上显示呢？这里需要利用Opengl调用GPU计算资源来渲染绘制，而比较高效的调用GPU的渲染的有SurfaceView和GLSurfaceView。但有一个差异GLSurfaceView是已经内置了单独线程用于更新，而SurfaceView可以开发者去自定义线程做任务管理。

然而我在一些demo中看到了别人是采集了数据之后，通过帧缓冲（FBO）获取到帧图，然后再做滤镜处理，为何要这样做呢？

是因为如果你使用摄像图采集帧图是yuv数据，Android中shader（glsl）需要使用GL_OES的扩展库来对数据做特殊处理，glsl文件是类C文件，不存在覆写和扩展。如果你想将图片和摄像头采集的数据做同一种转换，那就需要两个不同的文件，意思就是你需要维护两份shader的代码，这是一件很蛋痛的事。那要怎么做呢，最好的方式是先用GL_OES采集数据，然后通过帧缓冲来缓冲图转变为RGBA数据，这样再做滤镜操作，这样滤镜的shader就只需要一份就了事了。

这节主要介绍摄像头帧缓冲，先来一个总图吧。

摄像头帧缓冲.png

直接在native代码中分析吧，下面是创建摄像头采集和绘制的代码。

//surfaceView初始化的时候创建JNIEXPORT jint JNICALLJava_com_cangwang_magic_util_OpenGLJniLib_magicFilterCreate(JNIEnv *env, jobject obj,
                                                        jobject surface,jobject assetManager) {    std::unique_lock<std::mutex> lock(gMutex);    if(glCameraFilter){ //停止摄像头采集并销毁
        glCameraFilter->stop();        delete glCameraFilter;
    }    //初始化native window
    ANativeWindow *window = ANativeWindow_fromSurface(env,surface);    //初始化app内获取数据管理
    aAssetManager= AAssetManager_fromJava(env,assetManager);    //初始化相机采集
    glCameraFilter = new CameraFilter(window,aAssetManager);    //创建
    return glCameraFilter->create();
}//窗口大小设置，SurfaceView初始化后会触发一次JNIEXPORT void JNICALLJava_com_cangwang_magic_util_OpenGLJniLib_magicFilterChange(JNIEnv *env, jobject obj,jint width,jint height) {    std::unique_lock<std::mutex> lock(gMutex);    //视口变换，可视区域
    if (!glCameraFilter){
        ALOGE("change error, glCameraFilter is null");        return;
    }    //更改窗口大小
    glCameraFilter->change(width,height);
}JNIEXPORT void JNICALLJava_com_cangwang_magic_util_OpenGLJniLib_magicFilterDraw(JNIEnv *env, jobject obj,jfloatArray matrix_,jstring address) {    //获取摄像头矩阵
    jfloat *matrix = env->GetFloatArrayElements(matrix_,NULL);    //加锁
    std::unique_lock<std::mutex> lock(gMutex);    //如果为空，就判断错误，中断
    if (!glCameraFilter){ 
        ALOGE("draw error, glCameraFilter is null");        return;
    }    //摄像头采集画图
    glCameraFilter->draw(matrix);  
    //释放矩阵数据
    env->ReleaseFloatArrayElements(matrix_,matrix,0); 
}

初始化帧缓冲，涉及到视口的地方都需要设定长宽，这里glTexImage2D需要长宽，在SurfaceView的surfaceChanged的时候可以获取到surfaceview的长宽，来作为输入大小。

void CameraFilter::change(int width, int height) {    //设置视口
    glViewport(0,0,width,height);
    mWidth = width;
    mHeight = height;    if (cameraInputFilter!= nullptr){        if (cameraInputFilter!= nullptr){            //触发输入大小更新
            cameraInputFilter->onInputSizeChanged(width, height);            //初始化帧缓冲
            cameraInputFilter->initCameraFrameBuffer(width,height);
        }        if (filter != nullptr){            //初始化滤镜的大小
            filter->onInputSizeChanged(width,height);
        } else{
            cameraInputFilter->destroyCameraFrameBuffers();
        }
    }
}void CameraInputFilter::initCameraFrameBuffer(int width, int height) {    //比对大小
    if ( mFrameWidth != width || mFrameHeight !=height){
        destroyCameraFrameBuffers();
    }
    mFrameWidth = width;
    mFrameHeight = height;
    mFrameBuffer=0;
    mFrameBufferTextures=0;    //生成帧缓冲id
    glGenFramebuffers(1,&mFrameBuffer);    //生成纹理id
    glGenTextures(1,&mFrameBufferTextures);    //绑定纹理
    glBindTexture(GL_TEXTURE_2D,mFrameBufferTextures);    //纹理赋值为空，先纹理占位
    glTexImage2D(GL_TEXTURE_2D,0,GL_RGBA,width,height,0,GL_RGBA,GL_UNSIGNED_BYTE, nullptr);    //设定纹理参数
    glTexParameterf(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
    glTexParameterf(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST);
    glTexParameterf(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S,GL_CLAMP_TO_EDGE);
    glTexParameterf(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T,GL_CLAMP_TO_EDGE);    //绑定帧图
    glBindFramebuffer(GL_FRAMEBUFFER,mFrameBuffer);    //绑定纹理到帧图
    glFramebufferTexture2D(GL_FRAMEBUFFER,GL_COLOR_ATTACHMENT0,GL_TEXTURE_2D,mFrameBufferTextures,0);    //切换回默认纹理
    glBindTexture(GL_TEXTURE_2D,0);    //切换回默认的帧缓冲
    glBindFramebuffer(GL_FRAMEBUFFER,0);
}

画帧图，并回调帧缓冲纹理id。这里帧图使用的是GL_TEXTURE_2D，但是采集图像的时候需要使用GL_TEXTURE_EXTERNAL_OES。

void CameraFilter::draw(GLfloat *matrix) {    //清屏
    glClearColor(0,0,0,0);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);    if (cameraInputFilter != nullptr){//        cameraInputFilter->onDrawFrame(mTextureId,matrix,VERTICES,TEX_COORDS);
        //获取帧缓冲id
        GLuint id = cameraInputFilter->onDrawToTexture(mTextureId,matrix);        if (filter != nullptr) 
            //通过滤镜filter绘制
            filter->onDrawFrame(id,matrix);        //缓冲区交换
        glFlush();
        mEGLCore->swapBuffer();
    }
}

GLuint CameraInputFilter::onDrawToTexture(const GLuint textureId, GLfloat *matrix) {    //视口切换
    glViewport(0,0,mFrameWidth,mFrameHeight);    //绑定帧缓冲id
    glBindFramebuffer(GL_FRAMEBUFFER,mFrameBuffer);
    glUseProgram(mGLProgId);    if (!mIsInitialized){        return (GLuint) NOT_INIT;
    }    //顶点缓冲
    glVertexAttribPointer(mGLAttribPosition,2,GL_FLOAT,GL_FALSE,0,mGLCubeBuffer);
    glEnableVertexAttribArray(mGLAttribPosition);
    glVertexAttribPointer(mGLAttribTextureCoordinate,2,GL_FLOAT,GL_FALSE,0,mGLTextureBuffer);
    glEnableVertexAttribArray(mGLAttribTextureCoordinate);
    glUniformMatrix4fv(mTexturetransformMatrixlocation,1,GL_FALSE,matrix);    //设置美颜等级
    setBeautyLevelOnDraw(beautyLevel);
    setTexelSize(mInputWidth,mInputHeight);    //加载矩阵//    glUniformMatrix4fv(mMatrixLoc,1,GL_FALSE,matrix);

    if (textureId != NO_TEXTURE){        //绑定纹理
        glActiveTexture(GL_TEXTURE0);
        glBindTexture(GL_TEXTURE_EXTERNAL_OES,textureId);
        glUniform1i(mGLUniformTexture,0);
    }    //绘制图像（长方形）
    glDrawArrays(GL_TRIANGLE_STRIP,0,4);    //关闭顶点缓冲
    glDisableVertexAttribArray(mGLAttribPosition);
    glDisableVertexAttribArray(mGLAttribTextureCoordinate);    //切换回默认纹理
    glBindTexture(GL_TEXTURE_EXTERNAL_OES,0);    //切换回默认帧缓冲
    glBindFramebuffer(GL_FRAMEBUFFER,0);    return mFrameBufferTextures;
}

返回来的帧缓冲id，用于滤镜操作
再看一下shader中输出图像采集代码的转换，需要使用扩展库已经smplerExternalOES

#version 300 es//加入opengles扩展库#extension GL_OES_EGL_image_external_essl3 : requireprecision highp float;//来自摄像头预览的外部纹理uniform samplerExternalOES sTexture;in vec2 vTexCoord;out vec4 fragColor;void main() {
    fragColor = texture(sTexture, vTexCoord);

作者：CangWang
链接：https://www.jianshu.com/p/04b58a8521e9