揭秘 OpenGL Android 相机预览的神秘面纱（附赠 Demo）

Android

2023-12-05 20:51:41

从前，在 Android 开发的浩瀚世界中，OpenGL 和相机预览犹如两颗璀璨的明星，闪烁着令人着迷的光芒。但是，将它们结合在一起，却是一项艰巨的任务。像谜团般的代码和棘手的错误，让许多勇敢的开发者望而却步。

但是，今天，我们将揭开这层神秘面纱，踏上探索 Android OpenGL 相机预览的激动人心之旅。

准备就绪

首先，让我们装备好必要的武器：

Android Studio，我们的开发基地
OpenGL ES，图形魔法师
Android 相机 API，打开通往相机世界的门户

编写顶点和片段着色器

就如同在乐谱上跳舞的音符，着色器是为 OpenGL ES 的图形渲染注入生命的脚本。对于相机预览，我们需要两个着色器：

顶点着色器：

#version 300 es

layout (location = 0) in vec3 a_position;
layout (location = 1) in vec2 a_texCoord;

out vec2 v_texCoord;

void main() {
    gl_Position = vec4(a_position, 1.0);
    v_texCoord = a_texCoord;
}

片段着色器：

#version 300 es

precision mediump float;

in vec2 v_texCoord;

uniform sampler2D u_texture;

out vec4 fragColor;

void main() {
    fragColor = texture(u_texture, v_texCoord);
}

设置 OpenGL 环境

现在，让我们为 OpenGL ES 设置舞台：

private void setupGL() {
    GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);

    // 创建着色器程序
    mProgram = createProgram(vertexShaderCode, fragmentShaderCode);

    // 启用顶点坐标和纹理坐标数组
    GLES20.glEnableVertexAttribArray(mPositionHandle);
    GLES20.glEnableVertexAttribArray(mTexCoordHandle);
}

创建纹理并绑定帧缓冲

接下来，我们需要创建纹理并将其绑定到帧缓冲：

private void createTexture() {
    GLES20.glGenTextures(1, mTextureHandle, 0);
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextureHandle[0]);

    // 设置纹理参数
    GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);
    GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);
}

private void bindFrameBuffer() {
    // 创建帧缓冲对象
    GLES20.glGenFramebuffers(1, mFrameBufferHandle, 0);
    GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, mFrameBufferHandle[0]);

    // 将纹理附加到帧缓冲
    GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0, GLES20.GL_TEXTURE_2D, mTextureHandle[0], 0);
}

配置相机

现在，让我们连接到相机：

private void configureCamera() {
    mCamera = Camera.open();
    Camera.Parameters parameters = mCamera.getParameters();

    // 设置相机参数
    parameters.setPreviewSize(mWidth, mHeight);
    mCamera.setParameters(parameters);

    mCamera.setPreviewCallback(new Camera.PreviewCallback() {
        @Override
        public void onPreviewFrame(byte[] data, Camera camera) {
            // 更新纹理数据
            updateTexture(data);
        }
    });
}

绘制相机预览

最后，让我们将相机预览渲染到屏幕上：

private void draw() {
    GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);

    // 绑定顶点和纹理坐标数据
    GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, mVertexBuffer);
    GLES20.glVertexAttribPointer(mPositionHandle, 3, GLES20.GL_FLOAT, false, 0, 0);
    GLES20.glBindBuffer(GLES20.GL_ARRAY_BUFFER, mTexCoordBuffer);
    GLES20.glVertexAttribPointer(mTexCoordHandle, 2, GLES20.GL_FLOAT, false, 0, 0);

    // 绑定纹理
    GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTextureHandle[0]);

    // 绘制
    GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);
}