Android OpenGLES2.0（十一）——利用OpenGLES做Camera预览

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实现的，大眼和瘦脸等和人脸特征相关的还需要用到人脸特征点检测。