前面幾篇文章梳理了 android 相機的基本使用流程及相關的 api，完成了預覽拍照等功能。
就預覽而言，後續想做實時濾鏡等功能的話，如果按照之前的方法用 ImageReader 拿到數據之後做處理再顯示，一是繁瑣，而是效率太低，卡頓嚴重。所以需要使用 opengles 對相機的預覽數據進行渲染，可以很大的提高效率，防止卡頓。
這篇文章先不做濾鏡，而是先實現 opengles 渲染相機數據的功能，爲後續實時濾鏡等功能打基礎。
opengles 基本使用
opengles 在 android 平臺上的簡單使用可以參考之前寫的 opengles 相關的文章。
主要流程：
- 佈局中使用 GLSurfacView 作爲預覽窗口。
- 準備相關的頂點屬性數據和着色器文件。
- 實現 GLSurfaceView.Render 接口，編寫具體的渲染代碼。
具體的操作在之前 opengles 相關的文章中都有，完整的代碼放在 android-opengl-demo項目
opengles 相機預覽
android 相機的預覽數據可以輸出到 SurfaceTexture 上，所以用 opengles 做相機預覽的主要思路是
- 在 GLSurfaceView.Render 中創建一個紋理，再使用該紋理創建一個 SurfaceTexture
- 使用該 SurfaceTexture 創建一個 Surface 傳給相機，相機預覽數據就輸出到一個紋理上了
- 使用 GLSurfaceView.Render 將該紋理渲染到 GLSurfaceView 窗口上
- 使用 SurfaceTexture 的 setOnFrameAvailableListener 方法 給 SurfaceTexture 添加一個數據幀數據可用的監聽器，在監聽器中 調用 GLSurfaceView 的 requestRender 方法渲染該幀數據，這樣相機每次輸出一幀數據就可以渲染一次，在GLSurfaceView窗口中就可以看到相機的預覽數據了
準備着色器
頂點着色器
#version 300 es
layout (location = 0) in vec4 a_Position;
layout (location = 1) in vec2 a_texCoord;
out vec2 v_texCoord;
void main()
{
gl_Position = a_Position;
v_texCoord = a_texCoord;
}
片段着色器，需要注意的是，做相機預覽的話，紋理的類型需要使用 samplerExternalOES ，而不是之前渲染圖片的 sampler2D。
#version 300 es
#extension GL_OES_EGL_image_external_essl3 : require
precision mediump float;
in vec2 v_texCoord;
out vec4 outColor;
uniform samplerExternalOES s_texture;
void main(){
outColor = texture(s_texture, v_texCoord);
}
實現Render
流程和之前文章裏基本一樣，需要注意的是需要使用紋理創建一個 SurfaceTexture，並提供 SurfaceTexture 實例的獲取方法，以便後續相機獲取使用。
另外注意渲染的時候先調用 SurfaceTexture 的 updateTexImage 方法，更新紋理。
public class GLRender implements GLSurfaceView.Renderer{
private static final String VERTEX_ATTRIB_POSITION = "a_Position";
private static final int VERTEX_ATTRIB_POSITION_SIZE = 3;
private static final String VERTEX_ATTRIB_TEXTURE_POSITION = "a_texCoord";
private static final int VERTEX_ATTRIB_TEXTURE_POSITION_SIZE = 2;
private static final String UNIFORM_TEXTURE = "s_texture";
private float[] vertex ={
-1f,1f,0.0f,//左上
-1f,-1f,0.0f,//左下
1f,-1f,0.0f,//右下
1f,1f,0.0f//右上
};
//紋理座標，（s,t），t座標方向和頂點y座標反着
public float[] textureCoord = {
0.0f,1.0f,
1.0f,1.0f,
1.0f,0.0f,
0.0f,0.0f
};
private FloatBuffer vertexBuffer;
private FloatBuffer textureCoordBuffer;
private int program;
//接收相機數據的紋理
private int[] textureId = new int[1];
//接收相機數據的 SurfaceTexture
public SurfaceTexture surfaceTexture;
public GLRender() {
//初始化頂點數據
initVertexAttrib();
}
private void initVertexAttrib() {
textureCoordBuffer = GLUtil.getFloatBuffer(textureCoord);
vertexBuffer = GLUtil.getFloatBuffer(vertex);
}
//向外提供 surfaceTexture 實例
public SurfaceTexture getSurfaceTexture(){
return surfaceTexture;
}
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
//創建紋理對象
glGenTextures(textureId.length, textureId, 0);
//將紋理對象綁定到srufaceTexture
surfaceTexture = new SurfaceTexture(textureId[0]);
//創建並連接程序
program = GLUtil.createAndLinkProgram(R.raw.texture_vertex_shader, R.raw.texture_fragtment_shader);
//設置清除渲染時的顏色
glClearColor(1.0f, 1.0f, 1.0f, 0.0f);
}
@Override
public void onSurfaceChanged(GL10 gl, int width, int height) {
glViewport(0,0,width,height);
}
@Override
public void onDrawFrame(GL10 gl) {
//srufaceTexture 獲取新的紋理數據
surfaceTexture.updateTexImage();
glClear(GL_COLOR_BUFFER_BIT);
glUseProgram(program);
int vertexLoc = glGetAttribLocation(program, VERTEX_ATTRIB_POSITION);
int textureLoc = glGetAttribLocation(program, VERTEX_ATTRIB_TEXTURE_POSITION);
glEnableVertexAttribArray(vertexLoc);
glEnableVertexAttribArray(textureLoc);
glVertexAttribPointer(vertexLoc,
VERTEX_ATTRIB_POSITION_SIZE,
GL_FLOAT,
false,
0,
vertexBuffer);
glVertexAttribPointer(textureLoc,
VERTEX_ATTRIB_TEXTURE_POSITION_SIZE,
GL_FLOAT,
false,
0,
textureCoordBuffer);
//綁定0號紋理單元紋理
glActiveTexture(GL_TEXTURE0);
//將紋理放到當前單元的 GL_TEXTURE_BINDING_EXTERNAL_OES 目標對象中
glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, textureId[0]);
//設置紋理過濾參數
glTexParameterf(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_MIN_FILTER,GL_NEAREST);
glTexParameterf(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameterf(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameterf(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_WRAP_T,GL_CLAMP_TO_EDGE);
//將片段着色器的紋理屬性值（s_texture）設置爲 0 號單元
int uTextureLoc = glGetUniformLocation(program, UNIFORM_TEXTURE);
glUniform1i(uTextureLoc,0);
glDrawArrays(GL_TRIANGLE_FAN,0,vertex.length / 3);
glDisableVertexAttribArray(vertexLoc);
glDisableVertexAttribArray(textureLoc);
}
}
相機使用前面創建的SurfaceTexture實例
通過 SurfaceTexture 實例創建一個 Surface ，傳給相機即可。
//獲取Render中的 SurfaceTexture 實例
surfaceTexture = glRender.getSurfaceTexture();
if (surfaceTexture == null) {
return;
}
surfaceTexture.setDefaultBufferSize(photoSize.getWidth(), photoSize.getHeight());
//添加幀可用監聽，讓GLSurfaceView 進行渲染
surfaceTexture.setOnFrameAvailableListener(new SurfaceTexture.OnFrameAvailableListener() {
@Override
public void onFrameAvailable(final SurfaceTexture surfaceTexture) {
glSurfaceView.requestRender();
}
});
//通過 SurfaceTexture 實例創建一個 Surface
surface = new Surface(surfaceTexture);
try {
cameraDevice = camera;
previewRequestBuilder = cameraDevice.createCaptureRequest(CameraDevice.TEMPLATE_PREVIEW);
//將 surface 傳給相機
previewRequestBuilder.addTarget(surface);
previewRequest = previewRequestBuilder.build();
cameraDevice.createCaptureSession(Arrays.asList(surface), sessionsStateCallback, null);
} catch (CameraAccessException e) {
e.printStackTrace();
Log.d(TAG, "相機訪問異常");
}
總結
本文梳理了使用 opengles 將相機預覽數據渲染到 GLSurfaceView 的基本流程，後續以此爲基礎，結合 opengles 的離屏渲染機制實現實時濾鏡功能。