作者：字节流动

来源：https://blog.csdn.net/Kennethdroid/article/details/103189489

penGL ES 相机预览

相机开发是 OpenGL ES 的重要应用，利用 OpenGL 可以很方便地实现相机美颜、滤镜、塑型以及一些动态特效，其性能显著优于对应功能的 CPU 实现。

相机的预览实现一般有 2 种方式，一种是基于 Android 原生 SurfaceTexture 的纯 GPU 实现方式，另一种是通过相机的预览回调接口获取帧的 YUV 数据，利用 CPU 算法处理完成之后，传入显存，再利用 GPU 实现 YUV 转 RGBA 进行渲染，即 CPU + GPU 的实现方式。

基于 Android 原生 SurfaceTexture 的纯 GPU 实现方式，相机可以使用 SurfaceTexture 作为预览载体，SurfaceTexture 可来自于 GLSurfaceView、TextureView 或 SurfaceView 这些独立拥有 Surface 的封装类，也可以自定义实现。

作为预览载体的 SurfaceTexture 绑定的纹理需要是 OES 纹理，即 GLES11Ext.GL_TEXTURE_EXTERNAL_OES 纹理，来自于 GLES 的扩展 #extension GL_OES_EGL_image_external 中，使用 OES 纹理后，我们不需要在片段着色器中自己做 YUV to RGBA 的转换，因为 OES 纹理可以直接接收 YUV 数据或者直接输出 YUV 数据。

类似于普通 2D 纹理的创建，OES 纹理创建的实现如下：

private int createOESTexture(){
    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];
}

使用 OES 纹理需要修改片段着色器，在着色器脚本的头部增加扩展纹理的声明 #extension GL_OES_EGL_image_external : require ，并且纹理采样器不再使用 sample2D ，需要换成 samplerExternalOES 作为纹理采样器。

#version 300 es
#extension GL_OES_EGL_image_external : require
precision mediump float;
in vec2 v_texCoord;
uniform samplerExternalOES s_TexSampler;
void main() {
    gl_FragColor = texture(s_TexSampler, v_texCoord);
}

实际上当使用 TextureView 时，实际上也不需要自己去创建 OES 纹理，只需要绑定相机，配置好变换矩阵后即可实现相机预览。具体例子可直接参考Android 官方的 Samples https://github.com/android/camera-samples 。

相机预览基于 Android 原生 API 的纯 GPU 实现方式，操作简单，代码量很少，原生 API 已经做了很多封装，可以利用片段着色器轻易实现美颜滤镜等相机特效，缺点是扩展性差，例如要使用传统的 CPU 算法做一些滤镜或者美颜特效就很不方便，图像数据需要多次在内存与显存之间拷贝，会造成性能和功耗问题。

本文主要介绍将图像数据取出，传入 Native 层，然后对数据做一些处理（可选），最后再做渲染的方式，这种方式相对复杂一些。相机预览数据的常见格式是 YUV420P 或者 YUV420SP(NV21) ，需要将图像数据对应 YUV 3 个分量使用 3 个纹理传入显存，在片段着色器中将 YUV 数据转为 RGBA 。

相关原理可参考NDK OpenGL ES 3.0 开发（三）：YUV 渲染章节。

相机预览数据获取，以 Camera2 为例，主要是通过 ImageReader 实现，该类封装了 Surface ：

private ImageReader.OnImageAvailableListener mOnPreviewImageAvailableListener = new ImageReader.OnImageAvailableListener() {
    @Override
    public void onImageAvailable(ImageReader reader) {
        Image image = reader.acquireLatestImage();
        if (image != null) {
            if (mCamera2FrameCallback != null) {
                mCamera2FrameCallback.onPreviewFrame(CameraUtil.YUV_420_888_data(image), image.getWidth(), image.getHeight());
            }
            image.close();
        }
    }
};
mPreviewImageReader = ImageReader.newInstance(mPreviewSize.getWidth(), mPreviewSize.getHeight(), ImageFormat.YUV_420_888, 2);
mPreviewImageReader.setOnImageAvailableListener(mOnPreviewImageAvailableListener, mBackgroundHandler);
CaptureRequest.Builder builder = mCameraDevice.createCaptureRequest(CameraDevice.TEMPLATE_PREVIEW);
builder.addTarget(mPreviewImageReader.getSurface());
ession.setRepeatingRequest(mPreviewRequest, null, mBackgroundHandler);
//在自定义接口中获取预览数据，通过 JNI 传入到 C++ 层
public void onPreviewFrame(byte[] data, int width, int height) {
    Log.d(TAG, "onPreviewFrame() called with: data = [" + data + "], width = [" + width + "], height = [" + height + "]");
    mByteFlowRender.setRenderFrame(IMAGE_FORMAT_I420, data, width, height);
    //每次传入新数据，请求重新渲染
    mByteFlowRender.requestRender();
}

主要的 JNI ：

public abstract class ByteFlowRender {
    public static final int GL_RENDER_TYPE = 0;
    public static final int CL_RENDER_TYPE = 1;
    public static final int IMAGE_FORMAT_RGBA = 0x01;
    public static final int IMAGE_FORMAT_NV21 = 0x02;
    public static final int IMAGE_FORMAT_NV12 = 0x03;
    public static final int IMAGE_FORMAT_I420 = 0x04;
    public static final int PARAM_TYPE_SET_SHADER_INDEX = 201;
    static {
        System.loadLibrary("byteflow_render");
    }
    private long mNativeContextHandle;
    protected native void native_CreateContext(int renderType);
    protected native void native_DestroyContext();
    protected native int native_Init(int initType);
    protected native int native_UnInit();
    protected native void native_UpdateFrame(int format, byte[] data, int width, int height);
    protected native void native_LoadFilterData(int index, int format, int width, int height, byte[] bytes);
    protected native void native_LoadShaderScript(int shaderIndex, String scriptStr);
    protected native void native_SetTransformMatrix(float translateX, float translateY, float scaleX, float scaleY, int degree, int mirror);
    protected native void native_SetParamsInt(int paramType, int value);
    protected native int native_GetParamsInt(int paramType);
    protected native void native_OnSurfaceCreated();
    protected native void native_OnSurfaceChanged(int width, int height);
    protected native void native_OnDrawFrame();
}

渲染 YUV 数据用到的着色器脚本，主要是将 3 个纹理对应的 YUV 分量，分别采样后转成 RGBA ：

//顶点着色器
#version 100
varying vec2 v_texcoord;
attribute vec4 position;
attribute vec2 texcoord;
uniform mat4 MVP;
void main() {
    v_texcoord = texcoord;
    gl_Position = MVP*position;
}
//片段着色器
#version 100
precision highp float;
varying vec2 v_texcoord;
uniform lowp sampler2D s_textureY;
uniform lowp sampler2D s_textureU;
uniform lowp sampler2D s_textureV;
void main() {
    float y, u, v, r, g, b;
    y = texture2D(s_textureY, v_texcoord).r;
    u = texture2D(s_textureU, v_texcoord).r;
    v = texture2D(s_textureV, v_texcoord).r;
    u = u - 0.5;
    v = v - 0.5;
    r = y + 1.403 * v;
    g = y - 0.344 * u - 0.714 * v;
    b = y + 1.770 * u;
    gl_FragColor = vec4(r, g, b, 1.0);
}

C++ 层的主要实现：

//编译链接着色器
int GLByteFlowRender::CreateProgram(const char *pVertexShaderSource, const char *pFragShaderSource)
{
  m_Program = GLUtils::CreateProgram(pVertexShaderSource, pFragShaderSource, m_VertexShader,
                     m_FragShader);
  if (!m_Program)
  {
    GLUtils::CheckGLError("Create Program");
    LOGCATE("GLByteFlowRender::CreateProgram Could not create program.");
    return 0;
  }
  m_YTextureHandle = glGetUniformLocation(m_Program, "s_textureY");
  m_UTextureHandle = glGetUniformLocation(m_Program, "s_textureU");
  m_VTextureHandle = glGetUniformLocation(m_Program, "s_textureV");
  m_VertexCoorHandle = (GLuint) glGetAttribLocation(m_Program, "position");
  m_TextureCoorHandle = (GLuint) glGetAttribLocation(m_Program, "texcoord");
  m_MVPHandle = glGetUniformLocation(m_Program, "MVP");
  return m_Program;
}
//创建 YUV 分量对应的 3 个纹理
bool GLByteFlowRender::CreateTextures()
{
  LOGCATE("GLByteFlowRender::CreateTextures");
  GLsizei yWidth = static_cast<GLsizei>(m_RenderFrame.width);
  GLsizei yHeight = static_cast<GLsizei>(m_RenderFrame.height);
  glActiveTexture(GL_TEXTURE0);
  glGenTextures(1, &m_YTextureId);
  glBindTexture(GL_TEXTURE_2D, m_YTextureId);
  glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
  glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
  glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, yWidth, yHeight, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE,
         NULL);
  if (!m_YTextureId)
  {
    GLUtils::CheckGLError("Create Y texture");
    return false;
  }
  GLsizei uWidth = static_cast<GLsizei>(m_RenderFrame.width / 2);
  GLsizei uHeight = yHeight / 2;
  glActiveTexture(GL_TEXTURE1);
  glGenTextures(1, &m_UTextureId);
  glBindTexture(GL_TEXTURE_2D, m_UTextureId);
  glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
  glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
  glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, uWidth, uHeight, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE,
         NULL);
  if (!m_UTextureId)
  {
    GLUtils::CheckGLError("Create U texture");
    return false;
  }
  GLsizei vWidth = static_cast<GLsizei>(m_RenderFrame.width / 2);
  GLsizei vHeight = (GLsizei) yHeight / 2;
  glActiveTexture(GL_TEXTURE2);
  glGenTextures(1, &m_VTextureId);
  glBindTexture(GL_TEXTURE_2D, m_VTextureId);
  glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
  glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
  glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
  glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, vWidth, vHeight, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE,
         NULL);
  if (!m_VTextureId)
  {
    GLUtils::CheckGLError("Create V texture");
    return false;
  }
  return true;
}
//每传入一帧新数据后，更新纹理
bool GLByteFlowRender::UpdateTextures()
{
  LOGCATE("GLByteFlowRender::UpdateTextures");
  if (m_RenderFrame.ppPlane[0] == NULL)
  {
    return false;
  }
  if (!m_YTextureId && !m_UTextureId && !m_VTextureId && !CreateTextures())
  {
    return false;
  }
  glActiveTexture(GL_TEXTURE0);
  glBindTexture(GL_TEXTURE_2D, m_YTextureId);
  glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, (GLsizei) m_RenderFrame.width,
         (GLsizei) m_RenderFrame.height, 0,
         GL_LUMINANCE, GL_UNSIGNED_BYTE, m_RenderFrame.ppPlane[0]);
  glActiveTexture(GL_TEXTURE1);
  glBindTexture(GL_TEXTURE_2D, m_UTextureId);
  glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, (GLsizei) m_RenderFrame.width >> 1,
         (GLsizei) m_RenderFrame.height >> 1, 0,
         GL_LUMINANCE, GL_UNSIGNED_BYTE, m_RenderFrame.ppPlane[1]);
  glActiveTexture(GL_TEXTURE2);
  glBindTexture(GL_TEXTURE_2D, m_VTextureId);
  glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, (GLsizei) m_RenderFrame.width >> 1,
         (GLsizei) m_RenderFrame.height >> 1, 0,
         GL_LUMINANCE, GL_UNSIGNED_BYTE, m_RenderFrame.ppPlane[2]);
  return true;
}
//绑定纹理到着色器，传入顶点和纹理坐标数据
GLuint GLByteFlowRender::UseProgram()
{
  LOGCATE("GLByteFlowRender::UseProgram");
  ByteFlowLock lock(&m_ShaderBufLock);
  if (m_IsShaderChanged)
  {
    GLUtils::DeleteProgram(m_Program);
    CreateProgram(kVertexShader, m_pFragShaderBuf);
    m_IsShaderChanged = false;
    m_IsProgramChanged = true;
  }
  if (!m_Program)
  {
    LOGCATE("GLByteFlowRender::UseProgram Could not use program.");
    return 0;
  }
  if (m_IsProgramChanged)
  {
    glUseProgram(m_Program);
    GLUtils::CheckGLError("GLByteFlowRender::UseProgram");
    glVertexAttribPointer(m_VertexCoorHandle, 2, GL_FLOAT, GL_FALSE, 2 * 4, VERTICES_COORS);
    glEnableVertexAttribArray(m_VertexCoorHandle);
    glUniform1i(m_YTextureHandle, 0);
    glUniform1i(m_UTextureHandle, 1);
    glUniform1i(m_VTextureHandle, 2);
    glVertexAttribPointer(m_TextureCoorHandle, 2, GL_FLOAT, GL_FALSE, 2 * 4, TEXTURE_COORS);
    glEnableVertexAttribArray(m_TextureCoorHandle);
    m_IsProgramChanged = false;
  }
  return m_Program;
}
//渲染预览图像
void GLByteFlowRender::OnDrawFrame()
{
  LOGCATE("GLByteFlowRender::OnDrawFrame");
  glViewport(0, 0, m_ViewportWidth, m_ViewportHeight);
  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
  glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
  glDisable(GL_CULL_FACE);
  if (!UpdateTextures() || !UseProgram())
  {
    LOGCATE("GLByteFlowRender::OnDrawFrame skip frame");
    return;
  }
  glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
}

后面文章会基于该预览实现添加一些滤镜效果。

联系与交流

技术交流/获取源码可以添加我的微信：Byte-Flow

「视频云技术」你最值得关注的音视频技术公众号，每周推送来自阿里云一线的实践技术文章，在这里与音视频领域一流工程师交流切磋。

阿里云社区.png

NDK OpenGL ES 3.0 开发（十六）：相机预览

penGL ES 相机预览

联系与交流

阿里云视频云

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

NDK OpenGL ES 3.0 开发（十六）：相机预览

penGL ES 相机预览

联系与交流

阿里云视频云

热门文章

最新文章

相关课程

相关电子书

相关实验场景