目录
- OES是什么？SurfaceTeture是什么？
- 实时滤镜的流程
- 具体实践
- 遇到的问题
- 收获
一、基本知识介绍
**外部纹理是什么？ **
public static native void glBindTexture(
int target,
int texture
);
我们在前面几篇中target一直是GL_TEXTURE_2D，即一张纹理图片，直接进行渲染。而在播放视频或者Camera预览 对数据进行滤镜、特效处理后在渲染到屏幕上而不是直接渲染到屏幕，这是就需要用到OES外部纹理，GLES11Ext.GL_TEXTURE_EXTERNAL_OES
SurfaceTeture是什么？
我们在前面章节介绍Camera预览时使用的是SurfaceHolder进行的preview。
SurfaceTexture 类是在 Android 3.0 中引入的，它对图像流的处理并不直接显示，而是转为GL外部纹理，可用于图像流数据的二次处理（如Camera滤镜，特效等）
SurfaceTexture从图像流（Camera预览、视频解码）中获得帧数据，调用updateTexImage()，根据内容流中最近的图像更新SurfaceTexture对应的GL纹理对象，接下来，就可以像操作普通GL纹理一样操作它了。
二、流程
Camera采集数据后不直接显示到屏幕上，而是先对这个图像做滤镜处理，即先渲染在一个外部纹理上，处理完之后在显示在屏幕上。
OpenGL纹理绘制的基本流程。
- 创建Camera
- 创建和加载glsl，创建编译链接program, 获取location
- 创建外部纹理、绑定纹理、设置参数
- 根据创建的纹理id生成一个SurfaceTexture
- 设置Camera通过SurfaceTeture方式而不是SurfaceHolder进行预览
- Camera将预览数据输出至此SurfaceTexture上，将一帧预览数据推送给外部纹理上
- 给此纹理添加滤镜
- 处理后的数据通过OpenGL ES绘制出来
三、实践：Camera预览添加实时滤镜（原图、黑白、冷暖色）
1. 创建Camera
private void initCamera(int cameraId) {
curCameraId = cameraId;
mCamera = Camera.open(curCameraId);
Log.d(TAG, "initCamera: Camera Open ");
Camera.Parameters parameters = mCamera.getParameters();
Camera.Size closelyPreSize = CameraUtil.getCloselyPreSize(true, SystemUtils.getDisplayWidth(), SystemUtils.getDisplayHeight(), parameters.getSupportedPreviewSizes());
Log.i(TAG, "initCamera: closelyPreSizeW=" + closelyPreSize.width + " closelyPreSizeH=" + closelyPreSize.height);
parameters.setPreviewSize(closelyPreSize.width, closelyPreSize.height);
//这里把Camera的宽高做下反转
mPreviewWidth = closelyPreSize.height;
mPreviewHeight = closelyPreSize.width;
mCamera.setParameters(parameters);
}
2. 加载glsl，创建program,获取location
省略
3. 创建外部纹理
private int genOesTextureId() {
int[] textureObjectId = new int[1];
GLES20.glGenTextures(1, textureObjectId, 0);
//绑定纹理
GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, textureObjectId[0]);
//设置放大缩小。设置边缘测量
GLES20.glTexParameterf(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,
GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_NEAREST_MIPMAP_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 textureObjectId[0];
}
int[] textureObjectId = new int[1];
GLES20.glGenTextures(1, textureObjectId, 0);
绑定外部纹理
GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, textureObjectId[0]);
设置放大缩小。设置边缘测量
GLES20.glTexParameterf(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,
GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_NEAREST_MIPMAP_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);
4. 根据创建的纹理id生成一个SurfaceTexture
mSurfaceTexture = new SurfaceTexture(mTextureId);
5. 设置Camera通过SurfaceTeture方式而不是SurfaceHolder进行预览
mCamera.setPreviewTexture(mSurfaceTexture);
6. Camera将预览数据输出至此SurfaceTexture上，将一帧预览数据推送给外部纹理上
public void onDrawFrame(GL10 gl) {
//每次绘制后，都通知texture刷新
if (mSurfaceTexture != null) {
mSurfaceTexture.updateTexImage();
}
}
7. OpenGL ES就可以操作此纹理，加滤镜
private void onBindFilter() {
GLES20.glUniform1i(mUFilterIndex, mIndex);
switch (mIndex){
case 0:
//原图效果，不同处理
break;
case 1:
//黑白滤镜
GLES20.glUniform3fv(uColor,1,ImageBgData.GRAY_FILTER_COLOR_DATA,0);
break;
case 2:
//暖色滤镜
GLES20.glUniform3fv(uColor,1,ImageBgData.WARM_FILTER_COLOR_DATA,0);
break;
case 3:
//冷色滤镜
GLES20.glUniform3fv(uColor,1,ImageBgData.COOL_FILTER_COLOR_DATA,0);
break;
}
}
8. 处理后的数据通过OpenGL ES绘制出来
GLES20.glActiveTexture(GLES20.GL_TEXTURE0 + getTextureType());
GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, getTextureId());
GLES20.glUniform1i(mUTexture, getTextureType());
//设置定点数据
GLES20.glEnableVertexAttribArray(mAPosition);
GLES20.glVertexAttribPointer(
mAPosition,
2,
GLES20.GL_FLOAT,
false,
0,
mVerBuffer);
//
GLES20.glEnableVertexAttribArray(mACoord);
GLES20.glVertexAttribPointer(
mACoord,
2,
GLES20.GL_FLOAT,
false,
0,
mTextureCoordinate);
//绘制三角形带
GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 4);
GLES20.glDisableVertexAttribArray(mAPosition);
GLES20.glDisableVertexAttribArray(mACoord);
四、遇到的问题
- 如何设置给Camera设置SurfaceTexure而不是SurfaceHolde
- 画面预览被放大了，进行正交投影 矩阵变换前 把视图的宽高比反转下，因为camera的width大于height
- 在片元着色器中定义了uniform vec3 u_Color;但是写program中绑定数据时却用了glVertexAttrib3fv（这个只用于顶点着色器，如果把color定义在顶点着色器，然后通过varying传递也可以）
修正为 GLES20.glUniform3fv(uColor,1,ImageBgData.COOL_FILTER_COLOR_DATA,0);即可正常切换预览
五、资料
[Android视频编辑器（四）通过OpenGL给视频增加不同滤镜效果]
[专栏：Android图像处理之实时滤镜]
[专栏：图像处理]
[Android Camera使用OpenGL ES 2.0和GLSurfaceView对预览进行实时二次处理（黑白滤镜）]
六、收获
- 了解OES概念
- 了解FBO、VBO、PBO概念
- 通过实践实时滤镜熟悉流程
感谢你的阅读
下一篇我们开始进入粒子系统，逐步实现网易云鲸云特效。欢迎关注公众号“音视频开发之旅”，一起学习成长。
欢迎交流
