图像处理(opengl)|ANDROID 高性能图形处理之 OPENGL ES 图像处理(opengl)|Android

原文：http://tangzm.com/blog/?p=20

在之前的介绍中我们说到在Android 4.2上使用RenderScript有诸多限制，我们于是尝试改用OpenGL ES 2.0来实现滤镜。本文不详细介绍OpenGL ES的规范以及组成部分，感兴趣的同学可以阅读《OpenGL -ES Programming Guide》。这本书是OpenGL ES的权威参考，内容深入浅出，只可惜没有中文版引进。
根据Intel的介绍，在Android平台上使用OpenGL ES主要有两种方式：NDK和SDK。通过NativeActivity，应用在native(c/c++)中管理整个activity的生命周期，以及绘制过程。由于在native代码中，可以访问OpenGL ES 1.1/2.0的代码，因此，可以认为NativeActivity提供了一个OpenGL ES的运行环境，关于NativeActivity的详细用法，可以参考Google的文档介绍。同时，在Java的世界中，Android提供了两个可以运行OpenGL ES的类：GLSurfaceView和TextureView。由于真正的OpenGL ES仍然运行在native在层，因此在performance上，使用SDK并不比NDK差。而避免了JNI,客观上对于APP开发者来说使用SDK要比NDK容易。
GLSurfaceView在Android 1.5 Cupcake就被引入，是一个非常方便的类。使用GLSurfaceView, Android会自动为你创建运行OpenGL ES所需要的环境，包括E2GL Surface和GL context。开发者只需要专注于如何使用OpenGL的commands绘制屏幕。在Android的网上教程和API Demo中也都采用了GLSurfaceView来演示Android的OpenGL ES能力。
考虑到示例代码的简洁，我们移除了错误检查，以及异常的处理。可以在Github查找完整的实现。
GLSurfaceView 创建并初始化GLSurfaceView
创建一个新的类，继承自GLSurfaceView，在构造函数中指定 OpenGL ES的版本，这里我们使用OpenGL ES 2.0。在Android 4.3之后，Google开始支持ES 3.0。指定Render方式，GLSurfaceView支持两种render方式，”CONTINUOUSLY“是指连续绘制，“WHEN_DIRTY”是由用户调用requestRenderer()绘制。值得注意的是，GLSurfaceView的绘制(renderer)是在单独的线程里执行的，因此即使选择连续绘制，并不会阻塞应用的主线程。最后，还必须设置GLSurfaceView的renderer。程序在renderer中处理GLSurfaceView的回调，包括GLSurfaceView创建成功，尺寸变化，以及最最重要的绘制（onDrawFrame()）

class PreviewGLSurfaceView extends GLSurfaceView { public PreviewGLSurfaceView(Context context){ super(context); setEGLContextClientVersion(2); setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY); setRenderer(new PreviewGLRenderer()); } }public class PreviewGLRenderer implements GLSurfaceView.Renderer{private GLCameraPreview mView; @Override public void onDrawFrame(GL10 gl) { // TODO Auto-generated method stub GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT); GLPreviewActivity app = GLPreviewActivity.getAppInstance(); app.updateCamPreview(); mView.draw(); }@Override public void onSurfaceChanged(GL10 gl, int width, int height) { GLES20.glViewport(0,0,width,height); }@Override public void onSurfaceCreated(GL10 gl, EGLConfig config) { GLES20.glClearColor(1.0f, 0, 0, 1.0f); mView = new GLCameraPreview(0); }}

然后将我们自己的GLSurfaceView插入View hierachy中。为了简便，我在练习中直接将它设置为Activity的congtent

protected void onCreate(Bundle savedInstanceState) { ...... mGLSurfaceView = new PreviewGLSurfaceView(this); setContentView(mGLSurfaceView); }

创建，加载和编译（链接）着色器
着色器是OpenGL ES 2.0的核心。自从2.0开始，OpenGL ES转向可编程管线，并不再支持固定管线。一次OpenGL的绘制动作必须包含一个定点着色器（Vertex Shader）和一个片段着色器()。
对于Live filter的实现来说，Vertex Shader比较简单，就是画一个矩形（2个三角）

attribute vec4 aPosition; attribute vec2 aTextureCoord; varying vec2 vTextureCoord; void main() { gl_Position = aPosition; vTextureCoord = aTextureCoord; }

Fragment Shader取决于具体实现的滤镜效果，这里只选取最简单的灰阶滤镜作为例子

#extension GL_OES_EGL_image_external : requireprecision mediump float; varying vec2 vTextureCoord; uniform samplerExternalOES sTexture; const vec3 monoMultiplier = vec3(0.299, 0.587, 0.114); void main() { vec4 color = texture2D(sTexture, vTextureCoord); float monoColor = dot(color.rgb,monoMultiplier); gl_FragColor = vec4(monoColor, monoColor, monoColor, 1.0); }

值得注意的是，在Android中Camera产生的preview texture是以一种特殊的格式传送的，因此shader里的纹理类型并不是普通的sampler2D,而是samplerExternalOES, 在shader的头部也必须声明OES 的扩展。除此之外，external OES的纹理和Sampler2D在使用时没有差别。
为了方便频繁修改，以及增加新的着色器，将着色器的脚本放在应用资源中是一个不错的选择，同时提供一个静态函数，读取资源中的内容，以字符串形式返回。由于编译和链接着色器是一项费时的工作，一般在应用中只编译/链接一次，将结果保存在program对象中。然后在每次绘制屏幕时使用program对象。性能要求更高的程序也可以用GPU厂商提供的SDK将shader提前编译好，放到应用资源中。
Load Shader 资源

private static String readRawTextFile(Context context, int resId){ InputStream inputStream = context.getResources().openRawResource(resId); InputStreamReader inputreader = new InputStreamReader(inputStream); BufferedReader buffreader = new BufferedReader(inputreader); String line; StringBuilder text = new StringBuilder(); try { while (( line = buffreader.readLine()) != null) { text.append(line); text.append('\n'); } } catch (Exception e) { e.printStackTrace(); } return text.toString(); }

编译，链接 Shader

private int compileShader(final int filterType){ int program; GLPreviewActivity app = GLPreviewActivity.getAppInstance(); //1. Create Shader Object int vertexShader = GLES20.glCreateShader(GLES20.GL_VERTEX_SHADER); int fragmentShader = GLES20.glCreateShader(GLES20.GL_FRAGMENT_SHADER); //2. Load Shader source code (in string) GLES20.glShaderSource(vertexShader, readRawTextFile(app, R.raw.vertex)); GLES20.glShaderSource(fragmentShader, readRawTextFile(app, R.raw.fragment_fish_eye)); //3. Compile Shader GLES20.glCompileShader(vertexShader); ; GLES20.glCompileShader(fragmentShader); //4. Link Shader program = GLES20.glCreateProgram(); GLES20.glAttachShader(program, vertexShader); GLES20.glAttachShader(program, fragmentShader); GLES20.glLinkProgram(program); return program; }

绘制屏幕
做完这些准备工作之后，就可以开始着手处理绘制函数了。绘制函数的内容在GLSurfaceView.Renderer::onDrawFrame()中。根据用户设置的render类型（持续绘制/按需要绘制），onDrawFrame()在独立的GL线程中被调用。一般地，onDrawFrame()需要处理背景清楚=>选择Program对象=>设置Vertex Attribute/Uniform=>调用glDrawArrays（）或者glDrawElements()进行绘制。
背景擦除,由于在我们的应用中没有使用depth buffer 和 stencil buffer (主要用于3D绘图)，因此只需要擦除color buffer

GLES20.glClearColor(0, 0, 0, 1.0f); //Set clear color as pure black GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);

设置当前的Program对象。Program中包含了已经编译，链接的vertex shader和fragment shader。如果程序运行过程中只有一个program的话，也可以之设置一次。

GLES20.glUseProgram(mProgram);

在SDK中，所有的GLESXX.glXXX函数都只接受java.nio.Buffer的对象作为Buffer handler,而不直接接受java数组对象。因此，在设置vertex attribute时，我们需要先将数组转为java.nio.Buffer，然后将其映射到vertex shader中相应的attribute变量。

//Original array private static float shapeCoords[] = { -1.0f,1.0f, 0.0f,// top left -1.0f, -1.0f, 0.0f,// bottom left 1.0f, -1.0f, 0.0f,// bottom right 1.0f,1.0f, 0.0f }; // top right......//Convert to java.nio.Buffer ByteBuffer bb = ByteBuffer.allocateDirect(4*shapeCoords.length); bb.order(ByteOrder.nativeOrder()); mVertexBuffer = bb.asFloatBuffer(); mVertexBuffer.put(shapeCoords); mVertexBuffer.position(0); ......//Set Vertex Attributes int positionHandler = GLES20.glGetAttribLocation(mProgram, "aPosition"); GLES20.glEnableVertexAttribArray(positionHandler); GLES20.glVertexAttribPointer(positionHandler, COORDS_PER_VERTEX, GLES20.GL_FLOAT, false, COORDS_PER_VERTEX*4, mVertexBuffer);

接下来是将通过照相机得到的纹理传入。不考虑如何从Camera的到纹理，首先我们在GL的上下文（Java线程）中创建纹理。值得注意的是，GLSurfaceView.Renderer在同一个线程中（GL THREAD）中执行所有的回调（onSurfaceCreated, onSurfaceChanged, onDrawFrame),因此我们需要在onSurfaceCreated()中完成所有的gl初始化工作，而不能在应用的主线程中执行这些操作，比如，activity的onCreate,onResume回调函数。
纹理
创建一个纹理对象

int textures[] = new int[1]; GLES20.glGenTextures(1, textures, 0); mTexName = textures[0];

绑定纹理,值得注意的是，纹理帮定的目标(target)并不是通常的GL_TEXTURE_2D，而是GL_TEXTURE_EXTERNAL_OES,这是因为Camera使用的输出texture是一种特殊的格式。同样的，在shader中我们也必须使用SamperExternalOES 的变量类型来访问该纹理。

GLES20.glActiveTexture(GLES20.GL_TEXTURE0); GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, mTexName);

绑定之后，我们还需要设置纹理的插值方式和wrap方式，虽然我们的应用中不会使用0-1。0以外的纹理坐标，按照惯例，还是会设置wrap的参数。

GLES20.glTexParameteri(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR); GLES20.glTexParameteri(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR); GLES20.glTexParameteri(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE); GLES20.glTexParameteri(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);

然后，由于我们将纹理绑定到了TEXTURE_0单元，需要将shader中的uniform变量也设置成0（其实不设置，默认也是0）。在Android上，OpenGL最多可以支持到16个纹理单元（TEXTURE_0 ~ TEXTURE_15）

int textureHandler = GLES20.glGetUniformLocation(mProgram, "sTexture"); GLES20.glUniform1i(textureHandler, 0);

获取照相机预览
最后，我们需要将Camera的预览绑定到我们创建的纹理上。Android SDK提供了SurfaceTexture类，来处理从Camera或者Video得到的数据，并绑定到OpenGL的纹理上。首先，我们先创建一个Camera对象

mCamera = Camera.open()

创建SurfaceTexture对象

mSurfaceTexture = new SurfaceTexture(texture);

【图像处理(opengl)|ANDROID 高性能图形处理之 OPENGL ES】 将SurfaceTexture设置成camera预览的纹理，并开始preview

mCamera.setPreviewTexture(mSurfaceTexture); mCamera.startPreview();

为SurfaceTexture注册frame available的回调，并且在回调函数中请求重绘（requestRenderer）。

... @Override public void onFrameAvailable(SurfaceTexture surfaceTexture) { mGLSurfaceView.requestRender(); } ... //在start preview之前设置callback ++mSurfaceTexture.setOnFrameAvailableListener(this); mCamera.setPreviewTexture(mSurfaceTexture); mCamera.startPreview();

在GLSurfaceView.Renderer::onDrawFrame()中（被请求重绘），用updateTexImage将Camera中新的预览写入纹理。

mSurfaceTexture.updateTexImage();

有人可能会觉得在onFerameAvailable()中更新texture会比较直接，但是这里有一个陷阱。必须在GL thread中执行updateTexImage(),而onFrameAvailable()会在设置回调的线程中被执行。
这样，大功告成。运行应用，可以在屏幕上看到一个通过GL 处理的实时预览。

使用TextureView
TextureView在Android ICS被引入。通过TextureView,可以将一个内容流（视频或者是照相机预览）直接投射到一个View中，或者在这个View中通过OpenGL 进行绘制。和GLSurfaceView不同，Window manager不会为TextureView创建单独的窗口，而把它作为一个普通的View，插入view hierachy,这样，就可以对TextureView进行移动，旋转和缩放（甚至设置成半透明）。
和GLSurfaceView不同，TextureView并没有自动为我们创建GL 上下文，render surface和L thread.因此，如果我们需要在TextureView中用OpenGL进行绘制，必须手动地做这些事。
实现自己的GL线程
由于每个OpenGL的上下文和单独的线程绑定，因此，如果我们需要在屏幕上绘制多个TextureView的话，必须要为每个View创建单独的线程。。
实现GL renderer 线程。

public classGLCameraRenderThread extends Thread{ ...... @Override public void run(){ ...... } ...... }

创建egl context 在GL线程中，首先需要创建gl context, render surface，并将它们设置为当前（激活的）上下文。具体的步骤比较繁琐，可以参考<> Chapter 3. An Introduction to EGL

private void initGL() { /*Get EGL handle*/ mEgl = (EGL10)EGLContext.getEGL(); /*Get EGL display*/ mEglDisplay = mEgl.eglGetDisplay(EGL10.EGL_DEFAULT_DISPLAY); /*Initialize & Version*/ int versions[] = new int[2]; mEgl.eglInitialize(mEglDisplay, versions)); /*Configuration*/ int configsCount[] = new int[1]; EGLConfig configs[] = new EGLConfig[1]; int configSpec[] = new int[]{ EGL10.EGL_RENDERABLE_TYPE, EGL14.EGL_OPENGL_ES2_BIT, EGL10.EGL_RED_SIZE, 8, EGL10.EGL_GREEN_SIZE, 8, EGL10.EGL_BLUE_SIZE, 8, EGL10.EGL_ALPHA_SIZE, 8, EGL10.EGL_DEPTH_SIZE, 0, EGL10.EGL_STENCIL_SIZE, 0, EGL10.EGL_NONE }; mEgl.eglChooseConfig(mEglDisplay, configSpec, configs, 1, configsCount); mEglConfig = configs[0]; /*Create Context*/ int contextSpec[] = new int[]{ EGL14.EGL_CONTEXT_CLIENT_VERSION, 2, EGL10.EGL_NONE }; mEglContext = mEgl.eglCreateContext(mEglDisplay, mEglConfig, EGL10.EGL_NO_CONTEXT, contextSpec); /*Create window surface*/ mEglSurface = mEgl.eglCreateWindowSurface(mEglDisplay, mEglConfig, mSurface, null); /*Make current*/ mEgl.eglMakeCurrent(mEglDisplay, mEglSurface, mEglSurface, mEglContext)； }public void run(){ initGL(); ...... }

要注意的是，在eglCreateWindowSurface()中的第三个参数，mSurface代表实际绘制的窗口handle。在这里代表TextureView的绘制表面。可以通过TextureView::getSxurfaceTexture()获取，或者从TextureVisiew.SurfaceTextureListener::OnSurfaceTextureAvailable()中返回。
在GL 线程中，完成初始化之后，我们就可以开始进行绘制。绘制被放在一个无限循环中，以保证绘制内容被不断更新，但是为了节约不必要的重绘，我们在循环中加入了 wait()/notify() 线程同步。GL线程在画完一帧之后等待，直到camera预览有数据更新之后绘制下一帧。

class XXXMyGLThread extends Thread{ ...... public void run(){ initGL(); ... while(true){ ... drawFrame(); ... wait(); //Wait for next frame available } } ...... }zzz implements SurfacaTexture.onFrameAvailableListener { ...... public void onFrameAvailable(SurfaceTexture surfaceTexture) { for (int i=0; i < mActiveRender; i++){ synchronized(mRenderThread[i]){G mRenderThread[i].notify(); //Notify a new frame comes } } } ......

从Camera中获取纹理的过程和GLSurfaceView基本类似。SurfaceTexture很好地解决了多个线程（多个你EGL上下文）共同使用一个输入源（video, camera preview）的问题。通过SurfaceTexture.attachToGLContext(int texName)和SurfaceTexture.detachFromGLContext(),可以将SurfaceTexture绑定到当前EGL上下文的指定纹理对象上。因此，在GL thread中的绘制循环看起来是：

synchronized(app){public void run(){ ... while(true){ synchronized(app){ mSurfaceTexture.attachToGLContext(mTexName); mSurfaceTexture.updateTexImage(); ... drawFrame(); ... mSurfaceTexture.detachFromGLContext(); }eglSwapBuffers(mEglDisplay, mEglSurface); wait(); }

为了避免多个线程同时尝试绑定一个SurfaceTexture,我们还在这这段绘制代码之外增加了同步互斥。以保证每个GL线程都可以不被打断地执行“绑定=》绘图=》解除”的动作。
最后，在每次绘制完成之后，我们还要手动调用eglSwapBuffers()将front buffer替换成当前buffer，从而使绘制内容可见。
全部完成之后，我们可以在一屏上显示多个camera preview的滤镜效果