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

2016年11月26日 20:09:19

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]


OpenGLES Android篇零基础系列(一):OpenGLES2.x可渲染管道基本流程

转载请注明出处前言OpenGL ES是OpenGL的一个子集,是针对手机、PDA和游戏主机等嵌入式设备而设计的。该API由Khronos集团定义推广,Khronos是一个图形软硬件行业协会,该协会主要...
  • u011153817
  • u011153817
  • 2016年07月12日 19:17
  • 2948

OpenGL ES2.0入门之Android篇(一)——绘制三角形

OpenGL ES简介 OpenGL ES是一个为便携式或嵌入式设备例如:移动电话、监视器等发展的3D绘图API。 在Android框架中有两个基础类用于使用OpenGL ES创建和处理图形 GLS...
  • lb377463323
  • lb377463323
  • 2016年08月06日 15:22
  • 4286

Android OpenGLES2.0(十七)——球形天空盒VR效果实现

在3D游戏中通常都会用到天空盒,在3D引擎中也一般会存在天空盒组件,让开发者可以直接使用。那么天空盒是什么?天空盒又是如何实现的呢?本篇博客主要介绍如何在Android中利用OpenGLES绘制一个天...
  • junzia
  • junzia
  • 2017年05月29日 17:44
  • 8039

Android OpenGLES2.0(十五)——利用EGL后台处理图像

在Android OpenGLES2.0(十二)——FBO离屏渲染中,记录了采用FBO进行离屏渲染的方式来进行后台处理图像,但是在使用时,示例中还是用到了GLSurfaceView控件来提供GL环境。...
  • junzia
  • junzia
  • 2017年02月20日 10:36
  • 3403

Android OpenGLES2.0(十二)——FBO离屏渲染

之前的博客我们所做的示例都是直接渲染到屏幕上的,如果我们并不需要渲染到屏幕上,也就是离屏渲染,该怎么做呢?FBO离屏渲染是一个很好的选择。在这篇博客中,我们将以渲染摄像头数据为例,使用FBO进行离屏渲...
  • junzia
  • junzia
  • 2016年12月24日 18:36
  • 7083

Android OpenGLES 实现结构

OpenGL实现路径: frameworks/native/opengl/libs/Android.mk 该makefile里面会编译出libEGL libGLESv1_CM 以及 libGLES...
  • taoshengyang
  • taoshengyang
  • 2015年10月04日 12:34
  • 1195

OpenglES2.0 for Android:各种变换来一波

OpenglES2.0 for Android:各种变换来一波 监听屏幕事件 在进行各种变换之前,我们先来了解一下如何监听屏幕的事件。我们下面的变换都需要用立方体来演示,所以我们继续使用上一节的绘制立...
  • cassiePython
  • cassiePython
  • 2016年06月09日 09:04
  • 5304

android graphic(14)—EGL和OpenGL ES之间的关系

OpenGL ES EGL 例子 EGL加载OpenGL ES库 涉及的库 库的加载 小结 OpenGL ES 什么是OpenGL?Open Graphics L...
  • lewif
  • lewif
  • 2016年03月25日 16:23
  • 12116

Android Camera2 Opengles2.0 图像实时滤镜 显示 视频编码

demo: http://download.csdn.net/download/keen_zuxwang/10043183 在博文"Android Camera2 Opengles2.0 预览图像实...
  • keen_zuxwang
  • keen_zuxwang
  • 2017年10月28日 22:28
  • 309

Android用CameraApi实现相机开发以及用opengl es实现相机实时滤镜

对相机开发一直很感兴趣,最近研究了一下自定义相机以及实时滤镜的实现,写了个简单的demo,项目地址,有些地方写的比较粗糙,但大体功能基本都实现了。大体分为三块。1 利用CameraApi实现自定义相机...
  • aasoga
  • aasoga
  • 2017年06月07日 14:26
  • 1809
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android OpenGLES2.0(十一)——利用OpenGLES做Camera预览
举报原因:
原因补充:

(最多只允许输入30个字)