大家好，我系苍王。
以下是我这个系列的相关文章，有兴趣可以参考一下，可以给个喜欢或者关注我的文章。
[Android]如何做一个崩溃率少于千分之三噶应用app--章节列表
相信很多人都用过相机功能，也开发过简单调度相机功能。相机采集功能是图像信号输入的重要来源。
我们首先了解一下Android相机采集数据的格式一般为YUV格式的数据。YUV 表示三个分量， Y 表示 亮度（Luminance），即灰度值，UV表示色度（Chrominance），描述图像色彩和饱和度，指定颜色。YUV格式有YUV444、 YUV422 和 YUV420 三种，差别在于：
YUV444： 每个Y分量对应一组UV分量
YUV422：每两个Y分量共用一组UV分量
YUV420：每四个Y分量共用一组UV分量
一张图让你理解理解这三种比例的区别。
而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就只需要一份就了事了。
这节主要介绍摄像头帧缓冲，先来一个总图吧。
直接在native代码中分析吧，下面是创建摄像头采集和绘制的代码。
//surfaceView初始化的时候创建
JNIEXPORT jint JNICALL
Java_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 JNICALL
Java_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 JNICALL
Java_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 : require
precision highp float;
//来自摄像头预览的外部纹理
uniform samplerExternalOES sTexture;
in vec2 vTexCoord;
out vec4 fragColor;
void main() {
fragColor = texture(sTexture, vTexCoord);
}
这节就到这里，下一节再介绍滤镜基础介绍。
本节的例子的代码在(MagicCamera3)[https://github.com/cangwang/MagicCamera3] 的CameraFilterV2Activity当中可以查看，欢迎大家Star。
群号是316556016，也可以扫码进群。我在这里期待你们的加入！！！
