Android OpenGLES2.0(十一)——利用OpenGLES做Camera预览

版权声明:欢迎转载,转载请保留文章出处。 https://blog.csdn.net/junzia/article/details/53166332

OpenGLES在Android上除了可以用来做游戏、处理图片也可以用来处理视频图像、做相机预览美颜等等。本篇博客将介绍利用OpenGLES做相机预览的基本实现。

预览方案

前面我们有介绍过利用OpenGLES显示图片处理图片。视频每一帧其实也是一张图片,Camera预览时,每一帧自然也是一幅图片,我们可以把每张图片按照时间顺序显示出来,就完成了Camera预览的实现。
那么问题来了,在前面我们都是直接传入一个Bitmap,难道我们要把Camera每帧的数据转为Bitmap再作为纹理传入OpenGLES程序绘制出来么?
显示一张图片,我们使用的是诸如GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, mBitmap, 0);这样的代码,前面竟然不是GLES20开头的,这显然是“不科学”的。OpenGLES提供的绑定纹理贴图的方法为GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D,0,GLES20.GL_RGBA,width,height,0,GLES20.GL_RGBA,GLES20.GL_UNSIGNED_BYTE,buffer);用这个方法可以直接传入Buffer数据。
那么问题又来了,虽然OpenGLES给我们提供的入口是传入Buffer,然而,它却限制了Buffer的格式为单一通道,或者是RGBA、RGB等格式,而Camera的帧数据却只能为NV21或者YV21的,不在OpenGLES贴图数据格式的支持范围。虽然我们可以将NV21、YV12的数据转换成RGBA的,但是对于预览来说,这个时间消耗实在是太大了。
我们可以直接将NV21的数据按照YUV三个分量直接拆分作为三张纹理传入,然后利用GPU来将它们转换为RGB显示出来,这样时间消耗会小的多。然而这种方式也不是最简单的,我们还有更简单的方式去实现。
Android的Camera及Camera2都允许使用SurfaceTexture作为预览载体,但是它们所使用的SurfaceTexture传入的OpenGL texture object name必须为GLES11Ext.GL_TEXTURE_EXTERNAL_OES。这种方式,实际上就是两个OpenGL Thread共享一个Texture,不再需要数据导入导出,从Camera采集的数据直接在GPU中完成转换和渲染。

Camera预览实现

在之前的博客Android Camera的使用(一)中以SurfaceHolder做预览来介绍了Camera的使用。利用OpenGLES和之前使用步骤大同小异,使用时,我们不在使用camera.setPreviewDisplay(SurfaceHolder)来设置预览载体,转而使用camera.setPreviewTexture(SurfaceTexture)来使用SurfaceTexture来设置。我们也不在需要使用camera.setDisplayOrientation(int)来设置正确的预览方向,直接通过计算OpenGLES 程序的顶点坐标或者纹理坐标,或者直接计算出合适的变换矩阵,能够将预览的大小和方向一步到位的设置好。

纹理的创建

相机预览使用EXTERNAL_OES纹理,创建方式与2D纹理创建基本相同:

private int createTextureID(){
    int[] texture = new int[1];
    GLES20.glGenTextures(1, texture, 0);
    GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, texture[0]);
    GLES20.glTexParameterf(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,
        GL10.GL_TEXTURE_MIN_FILTER,GL10.GL_LINEAR);
    GLES20.glTexParameterf(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,
        GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);
    GLES20.glTexParameteri(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,
        GL10.GL_TEXTURE_WRAP_S, GL10.GL_CLAMP_TO_EDGE);
    GLES20.glTexParameteri(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,
        GL10.GL_TEXTURE_WRAP_T, GL10.GL_CLAMP_TO_EDGE);
    return texture[0];
}

由于我们创建的是扩展纹理,所以绑定的时候我们也需要绑定到扩展纹理上才可以正常使用,
GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,texture[0])

修改着色器

预览相机的着色器,顶点着色器不变,需要修改片元着色器,不再用sampler2D采样,需要使勇samplerExternalOES 纹理采样器,并且要在头部增加使用扩展纹理的声明#extension GL_OES_EGL_image_external : require。

#extension GL_OES_EGL_image_external : require
precision mediump float;
varying vec2 textureCoordinate;
uniform samplerExternalOES vTexture;
void main() {
    gl_FragColor = texture2D( vTexture, textureCoordinate );
}

计算变换矩阵

依照之前绘制图片的经验+利用SurfaceHolder做相机预览的经验,应该很容易就可以看到预览效果了。这时候预览的方向和大小比例一般不是我们所期望的样子。顶点坐标我们以(-1.0,-1.0)-(1.0,1.0)的范围,纹理坐标以(0.0,0.0)-(1.0,1.0)的范围,且上下左右各个角一一对应。这时候,我们需要得到一个合适的变换矩阵,传入顶点着色器,以得到我们期望的预览效果。
根据大多数的Android手机,前摄像头预览数据旋转了90度,并且左右镜像了,后摄像头旋转了270度。我们需要将其旋转回来。另外,相机数据的高宽比和预览区域的高宽比也许并不相等,所以我们还需要进行适当的裁剪:

//通过传入图片宽高和预览宽高,计算变换矩阵,得到的变换矩阵是预览类似ImageView的centerCrop效果
public static float[] getShowMatrix(int imgWidth,int imgHeight,int viewWidth,int viewHeight){
    float[] projection=new float[16];
    float[] camera=new float[16];
    float[] matrix=new float[16];

    float sWhView=(float)viewWidth/viewHeight;
    float sWhImg=(float)imgWidth/imgHeight;
    if(sWhImg>sWhView){
        Matrix.orthoM(projection,0,-sWhView/sWhImg,sWhView/sWhImg,-1,1,1,3);
    }else{
        Matrix.orthoM(projection,0,-1,1,-sWhImg/sWhView,sWhImg/sWhView,1,3);
    }
    Matrix.setLookAtM(camera,0,0,0,1,0,0,0,0,1,0);
    Matrix.multiplyMM(matrix,0,projection,0,camera,0);
    return matrix;
}

//旋转
public static float[] rotate(float[] m,float angle){
    Matrix.rotateM(m,0,angle,0,0,1);
    return m;
}

//镜像
public static float[] flip(float[] m,boolean x,boolean y){
    if(x||y){
        Matrix.scaleM(m,0,x?-1:1,y?-1:1,1);
    }
    return m;
}
利用上面三个方法,针对前后摄像头,我们可以计算我们需要的变换矩阵:

float[] matrix=new float[16];
Gl2Utils.getShowMatrix(matrix,this.dataWidth,this.dataHeight,this.width,this.height);
if(cameraId==1){
    Gl2Utils.flip(matrix,true,false);
    Gl2Utils.rotate(matrix,90);
}else{
    Gl2Utils.rotate(matrix,270);
}
mOesFilter.setMatrix(matrix);

渲染

然后我们可以像渲染图片将摄像头每一帧都渲染出来了。和图片不同的是,图片数据是相同的,而摄像头数据是变换的,所以每当摄像头有新的数据来时,我们需要通过surfaceTexture.updateTexImage()更新预览上的图像。怎样知道摄像头有新的数据到来呢?答案是SurfaceTexture的OnFrameAvailableListener监听。通常updateTexImage不应该在OnFrameAvailableLister的回调方法中直接调用,而应该在onDrawFrame中执行。而调用requestRender,可以触发onDrawFrame。即通常我们的写法应该为:

surfaceTexture.setOnFrameAvailableListener(new SurfaceTexture.OnFrameAvailableListener() {
    @Override
    public void onFrameAvailable(SurfaceTexture surfaceTexture) {
        ...
        requestRender();
        ...
    }
});

其他

虽然预览效果OK了,但是我们花费如此大的精力,仅仅只是显示出摄像头的数据那多不值得。在之前处理图片的方式,我们同样可以用在处理摄像头数据上,黑白、冷暖色调、放大镜效果,等等。我们所用的美颜相机,美白、大眼、瘦脸等等效果基本都是基于GPU实现的,大眼和瘦脸等和人脸特征相关的还需要用到人脸特征点检测。

源码

所有的代码全部在一个项目中,托管在Github上——Android OpenGLES 2.0系列博客的Demo


欢迎转载,转载请保留文章出处。湖广午王的博客[http://blog.csdn.net/junzia/article/details/53166332]


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页