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 上显示摄像头滤镜效果

  • 2015年11月04日 16:43
  • 2.3MB
  • 下载

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

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

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

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

Android上的OpenGLES程序--开发环境介绍

我觉得这篇文章思路是对的, 随着项目的积累, 我发现这里面有些细节描述是不对的, 希望不要误导大家!  几年前搞过一个Android项目, 对Android开发有个简单了解, OpenGLE...
  • zg260
  • zg260
  • 2017-07-05 09:13:07
  • 504

OpenglES2.0 for Android:第一个OpenglES应用

OpenglES2.0 for Android:第一个OpenglES应用 首先我们新建一个Android工程:com.opengl.openglestest 打开MainActivity,定...
  • cassiePython
  • cassiePython
  • 2016-05-30 18:23:00
  • 1967

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

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

Opengles应用开发实践指南android版_openglES_for_Android_电子书

  • 2017年09月08日 09:58
  • 58.44MB
  • 下载

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

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

Android OpenGL ES

1.    OpenGL ES 简介 Android 3D引擎采用的是OpenGL ES。OpenGL ES是一套为手持和嵌入式系统设计的3D引擎API,由Khronos公司维护。在PC领域,一直有...
  • hgl868
  • hgl868
  • 2011-11-15 08:54:55
  • 8505

Android OpenGL ES 2.0之纹理映射学习总结

今天主要学习了纹理映射的基本原理、两种不同的拉伸方式、两种不同的采样方式、MinMap纹理、多重纹理与过程纹理等。 基本原理: 首先理解几个基本概念:纹理图、纹理坐标、映射、片元 纹理图就是Bi...
  • baipeng298
  • baipeng298
  • 2015-08-03 19:44:22
  • 801
收藏助手
不良信息举报
您举报文章:Android OpenGLES2.0(十一)——利用OpenGLES做Camera预览
举报原因:
原因补充:

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