玩转Android Camera开发(三):国内首发—使用GLSurfaceView预览Camera 基础拍照demo

GLSurfaceView是OpenGL中的一个类，也是可以预览Camera的，而且在预览Camera上有其独到之处。独到之处在哪？当使用Surfaceview无能为力、痛不欲生时就只有使用GLSurfaceView了，它能够真正做到让Camera的数据和显示分离，所以搞明白了这个，像Camera只开预览不显示这都是小菜，妥妥的。Android4.0的自带Camera源码是用SurfaceView预览的，但到了4.2就换成了GLSurfaceView来预览。如今到了4.4又用了自家的TextureView，所以从中可以窥探出新增TextureView的用意。

虽说Android4.2的Camera源码是用GLSurfaceView预览的，但是进行了大量的封装又封装的，由于是OpenGL小白，真是看的不知所云。俺滴要求不高，只想弄个可拍照的摸清GLSurfaceView在预览Camera上的使用流程。经过一番百度一无所获，后来翻出去Google一大圈也没发现可用的。倒是很多人都在用GLSurfaceView和Surfaceview同时预览Camera，Surfaceview用来预览数据，在上面又铺了一层GLSurfaceView绘制一些信息。无奈自己摸索，整出来的是能拍照也能得到数据，但是界面上不是一块白板就是一块黑板啥都不显示。后来在stackoverflow终于找到了一个可用的链接，哈哈，苍天啊，终于柳暗花明了！参考此链接，自己又改改摸索了一天才彻底搞定。之所以费这么多时间是不明白OpenGL ES2.0的绘制基本流程，跟简单的OpenGL的绘制还是稍有区别。下面上源码:

一、CameraGLSurfaceView.java 此类继承GLSurfaceView，并实现了两个接口

**[java]** [view plain](http://blog.csdn.net/yanzi1225627/article/details/33339965#)[copy](http://blog.csdn.net/yanzi1225627/article/details/33339965#)[print](http://blog.csdn.net/yanzi1225627/article/details/33339965#)[?](http://blog.csdn.net/yanzi1225627/article/details/33339965#)[![在CODE上查看代码片](https://code.csdn.net/assets/CODE_ico.png)](https://code.csdn.net/snippets/402612)[![派生到我的代码片](https://code.csdn.net/assets/ico_fork.svg)](https://code.csdn.net/snippets/402612/fork)

  <div>
  </div>
</div>

- <span style="color: black;"><span style=<span class="string" style="color: red;">&#8220;font-family:Comic Sans MS;font-size:18px;&#8221;</span>><span class="keyword" style="font-weight: bold; color: blue;">package</span> org.yanzi.camera.preview;  </span>

- <span style="color: black;">  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">import</span> javax.microedition.khronos.egl.EGLConfig;  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">import</span> javax.microedition.khronos.opengles.GL10;  </span>

- <span style="color: black;">  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">import</span> org.yanzi.camera.CameraInterface;  </span>

- <span style="color: black;">  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">import</span> android.content.Context;  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">import</span> android.graphics.SurfaceTexture;  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">import</span> android.opengl.GLES11Ext;  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">import</span> android.opengl.GLES20;  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">import</span> android.opengl.GLSurfaceView;  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">import</span> android.opengl.GLSurfaceView.Renderer;  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">import</span> android.util.AttributeSet;  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">import</span> android.util.Log;  </span>

- <span style="color: black;">  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">public</span> <span class="keyword" style="font-weight: bold; color: blue;">class</span> CameraGLSurfaceView <span class="keyword" style="font-weight: bold; color: blue;">extends</span> GLSurfaceView <span class="keyword" style="font-weight: bold; color: blue;">implements</span> Renderer, SurfaceTexture.OnFrameAvailableListener {  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">private</span> <span class="keyword" style="font-weight: bold; color: blue;">static</span> <span class="keyword" style="font-weight: bold; color: blue;">final</span> String TAG = <span class="string" style="color: red;">&#8220;yanzi&#8221;</span>;  </span>

- <span style="color: black;">    Context mContext;  </span>

- <span style="color: black;">    SurfaceTexture mSurface;  </span>


- <span style="color: black;">    DirectDrawer mDirectDrawer;  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">public</span> CameraGLSurfaceView(Context context, AttributeSet attrs) {  </span>

- <span style="color: black;">        <span class="keyword" style="font-weight: bold; color: blue;">super</span>(context, attrs);  </span>

- <span style="color: black;">        <span class="comment" style="color: #008200;">// TODO Auto-generated constructor stub</span>  </span>

- <span style="color: black;">        mContext = context;  </span>

- <span style="color: black;">        setEGLContextClientVersion(<span class="number" style="color: #c00000;">2</span>);  </span>

- <span style="color: black;">        setRenderer(<span class="keyword" style="font-weight: bold; color: blue;">this</span>);  </span>

- <span style="color: black;">        setRenderMode(RENDERMODE_WHEN_DIRTY);  </span>

- <span style="color: black;">    }  </span>

- <span style="color: black;">    <span class="annotation" style="color: #646464;">@Override</span>  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">public</span> <span class="keyword" style="font-weight: bold; color: blue;">void</span> onSurfaceCreated(GL10 gl, EGLConfig config) {  </span>

- <span style="color: black;">        <span class="comment" style="color: #008200;">// TODO Auto-generated method stub</span>  </span>

- <span style="color: black;">        Log.i(TAG, <span class="string" style="color: red;">&#8220;onSurfaceCreated&#8230;&#8221;</span>);  </span>

- <span style="color: black;">        mTextureID = createTextureID();  </span>

- <span style="color: black;">        mSurface = <span class="keyword" style="font-weight: bold; color: blue;">new</span> SurfaceTexture(mTextureID);  </span>

- <span style="color: black;">        mSurface.setOnFrameAvailableListener(<span class="keyword" style="font-weight: bold; color: blue;">this</span>);  </span>

- <span style="color: black;">        mDirectDrawer = <span class="keyword" style="font-weight: bold; color: blue;">new</span> DirectDrawer(mTextureID);  </span>

- <span style="color: black;">        CameraInterface.getInstance().doOpenCamera(<span class="keyword" style="font-weight: bold; color: blue;">null</span>);  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">    }  </span>

- <span style="color: black;">    <span class="annotation" style="color: #646464;">@Override</span>  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">public</span> <span class="keyword" style="font-weight: bold; color: blue;">void</span> onSurfaceChanged(GL10 gl, <span class="keyword" style="font-weight: bold; color: blue;">int</span> width, <span class="keyword" style="font-weight: bold; color: blue;">int</span> height) {  </span>

- <span style="color: black;">        <span class="comment" style="color: #008200;">// TODO Auto-generated method stub</span>  </span>

- <span style="color: black;">        Log.i(TAG, <span class="string" style="color: red;">&#8220;onSurfaceChanged&#8230;&#8221;</span>);  </span>

- <span style="color: black;">        GLES20.glViewport(<span class="number" style="color: #c00000;"></span>, <span class="number" style="color: #c00000;"></span>, width, height);  </span>

- <span style="color: black;">        <span class="keyword" style="font-weight: bold; color: blue;">if</span>(!CameraInterface.getInstance().isPreviewing()){  </span>

- <span style="color: black;">            CameraInterface.getInstance().doStartPreview(mSurface, <span class="number" style="color: #c00000;">1</span>.33f);  </span>

- <span style="color: black;">        }  </span>

- <span style="color: black;">      </span>

- <span style="color: black;">  </span>

- <span style="color: black;">    }  </span>

- <span style="color: black;">    <span class="annotation" style="color: #646464;">@Override</span>  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">public</span> <span class="keyword" style="font-weight: bold; color: blue;">void</span> onDrawFrame(GL10 gl) {  </span>

- <span style="color: black;">        <span class="comment" style="color: #008200;">// TODO Auto-generated method stub</span>  </span>

- <span style="color: black;">        Log.i(TAG, <span class="string" style="color: red;">&#8220;onDrawFrame&#8230;&#8221;</span>);  </span>

- <span style="color: black;">        GLES20.glClearColor(<span class="number" style="color: #c00000;">1</span>.0f, <span class="number" style="color: #c00000;">1</span>.0f, <span class="number" style="color: #c00000;">1</span>.0f, <span class="number" style="color: #c00000;">1</span>.0f);  </span>

- <span style="color: black;">        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GLES20.GL_DEPTH_BUFFER_BIT);  </span>

- <span style="color: black;">        mSurface.updateTexImage();  </span>

- <span style="color: black;">        <span class="keyword" style="font-weight: bold; color: blue;">float</span>[] mtx = <span class="keyword" style="font-weight: bold; color: blue;">new</span> <span class="keyword" style="font-weight: bold; color: blue;">float</span>[<span class="number" style="color: #c00000;">16</span>];  </span>

- <span style="color: black;">        mSurface.getTransformMatrix(mtx);  </span>

- <span style="color: black;">        mDirectDrawer.draw(mtx);  </span>

- <span style="color: black;">    }  </span>

- <span style="color: black;">      </span>

- <span style="color: black;">    <span class="annotation" style="color: #646464;">@Override</span>  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">public</span> <span class="keyword" style="font-weight: bold; color: blue;">void</span> onPause() {  </span>

- <span style="color: black;">        <span class="comment" style="color: #008200;">// TODO Auto-generated method stub</span>  </span>

- <span style="color: black;">        <span class="keyword" style="font-weight: bold; color: blue;">super</span>.onPause();  </span>

- <span style="color: black;">        CameraInterface.getInstance().doStopCamera();  </span>

- <span style="color: black;">    }  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">private</span> <span class="keyword" style="font-weight: bold; color: blue;">int</span> createTextureID()  </span>

- <span style="color: black;">    {  </span>

- <span style="color: black;">        <span class="keyword" style="font-weight: bold; color: blue;">int</span>[] texture = <span class="keyword" style="font-weight: bold; color: blue;">new</span> <span class="keyword" style="font-weight: bold; color: blue;">int</span>[<span class="number" style="color: #c00000;">1</span>];  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">        GLES20.glGenTextures(<span class="number" style="color: #c00000;">1</span>, texture, <span class="number" style="color: #c00000;"></span>);  </span>

- <span style="color: black;">        GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, texture[<span class="number" style="color: #c00000;"></span>]);  </span>

- <span style="color: black;">        GLES20.glTexParameterf(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,  </span>

- <span style="color: black;">                GL10.GL_TEXTURE_MIN_FILTER,GL10.GL_LINEAR);          </span>

- <span style="color: black;">        GLES20.glTexParameterf(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,  </span>

- <span style="color: black;">                GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR);  </span>

- <span style="color: black;">        GLES20.glTexParameteri(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,  </span>

- <span style="color: black;">                GL10.GL_TEXTURE_WRAP_S, GL10.GL_CLAMP_TO_EDGE);  </span>

- <span style="color: black;">        GLES20.glTexParameteri(GLES11Ext.GL_TEXTURE_EXTERNAL_OES,  </span>

- <span style="color: black;">                GL10.GL_TEXTURE_WRAP_T, GL10.GL_CLAMP_TO_EDGE);  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">        <span class="keyword" style="font-weight: bold; color: blue;">return</span> texture[<span class="number" style="color: #c00000;"></span>];  </span>

- <span style="color: black;">    }  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">public</span> SurfaceTexture _getSurfaceTexture(){  </span>

- <span style="color: black;">        <span class="keyword" style="font-weight: bold; color: blue;">return</span> mSurface;  </span>

- <span style="color: black;">    }  </span>

- <span style="color: black;">    <span class="annotation" style="color: #646464;">@Override</span>  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">public</span> <span class="keyword" style="font-weight: bold; color: blue;">void</span> onFrameAvailable(SurfaceTexture surfaceTexture) {  </span>

- <span style="color: black;">        <span class="comment" style="color: #008200;">// TODO Auto-generated method stub</span>  </span>

- <span style="color: black;">        Log.i(TAG, <span class="string" style="color: red;">&#8220;onFrameAvailable&#8230;&#8221;</span>);  </span>

- <span style="color: black;">        <span class="keyword" style="font-weight: bold; color: blue;">this</span>.requestRender();  </span>

- <span style="color: black;">    }  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">}  </span>

- <span style="color: black;"></span>  </span>

关于这个类进行简单说明:

1、Renderer这个接口里有三个回调: onSurfaceCreated() onSurfaceChanged() onDrawFrame(),在onSurfaceCreated里设置了GLSurfaceView的版本: setEGLContextClientVersion(2); 如果没这个设置是啥都画不出来了，因为Android支持OpenGL ES1.1和2.0及最新的3.0，而且版本间差别很大。不告诉他版本他不知道用哪个版本的api渲染。在设置setRenderer(this);后，再设置它的模式为RENDERMODE_WHEN_DIRTY。这个也很关键，看api：

When renderMode is RENDERMODE_CONTINUOUSLY, the renderer is called repeatedly to re-render the scene. When renderMode is RENDERMODE_WHEN_DIRTY, the renderer only rendered when the surface is created, or when [requestRender](eclipse-javadoc:%E2%98%82=PlayCamera_V3.0.0/D:%5C/ProgramFile%5C/adt-bundle-windows-x86-20130522%5C/sdk%5C/platforms%5C/android-19%5C/android.jar%3Candroid.opengl(GLSurfaceView.class%E2%98%83GLSurfaceView~setRenderMode~I%E2%98%82%E2%98%82requestRender) is called. Defaults to RENDERMODE_CONTINUOUSLY.

Using RENDERMODE_WHEN_DIRTY can improve battery life and overall system performance by allowing the GPU and CPU to idle when the view does not need to be updated.

大意是RENDERMODE_CONTINUOUSLY模式就会一直Render，如果设置成RENDERMODE_WHEN_DIRTY，就是当有数据时才rendered或者主动调用了GLSurfaceView的requestRender.默认是连续模式，很显然Camera适合脏模式，一秒30帧，当有数据来时再渲染。

2、正因是RENDERMODE_WHEN_DIRTY所以就要告诉GLSurfaceView什么时候Render，也就是啥时候进到onDrawFrame()这个函数里。SurfaceTexture.OnFrameAvailableListener这个接口就干了这么一件事，当有数据上来后会进到

public void onFrameAvailable(SurfaceTexture surfaceTexture) {
// TODO Auto-generated method stub
Log.i(TAG, “onFrameAvailable…”);
this.requestRender();
}

这里，然后执行requestRender()。

3、网上有一些OpenGL ES的示例是在Activity里实现了SurfaceTexture.OnFrameAvailableListener此接口，其实这个无所谓。无论是被谁实现，关键看在回调里干了什么事。

4、与TextureView里对比可知，TextureView预览时因为实现了SurfaceTextureListener会自动创建SurfaceTexture。但在GLSurfaceView里则要手动创建同时绑定一个纹理ID。

5、本文在onSurfaceCreated()里打开Camera，在onSurfaceChanged()里开启预览，默认1.33的比例。原因是相比前两种预览，此处SurfaceTexture创建需要一定时间。如果想要开预览时由Activity发起，则要GLSurfaceView利用Handler将创建的SurfaceTexture传递给Activity。

二、DirectDrawer.java 此类非常关键，负责将SurfaceTexture内容绘制到屏幕上

  <div>
  </div>
</div>

- <span style="color: black;"><span style=<span class="string" style="color: red;">&#8220;font-family:Comic Sans MS;font-size:18px;&#8221;</span>><span class="keyword" style="font-weight: bold; color: blue;">package</span> org.yanzi.camera.preview;  </span>

- <span style="color: black;">  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">import</span> java.nio.ByteBuffer;  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">import</span> java.nio.ByteOrder;  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">import</span> java.nio.FloatBuffer;  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">import</span> java.nio.ShortBuffer;  </span>

- <span style="color: black;">  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">import</span> android.opengl.GLES11Ext;  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">import</span> android.opengl.GLES20;  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">import</span> android.opengl.Matrix;  </span>

- <span style="color: black;">  </span>

- <span style="color: black;"><span class="keyword" style="font-weight: bold; color: blue;">public</span> <span class="keyword" style="font-weight: bold; color: blue;">class</span> DirectDrawer {  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">private</span> <span class="keyword" style="font-weight: bold; color: blue;">final</span> String vertexShaderCode =  </span>

- <span style="color: black;">            <span class="string" style="color: red;">&#8220;attribute vec4 vPosition;&#8221;</span> +  </span>

- <span style="color: black;">            <span class="string" style="color: red;">&#8220;attribute vec2 inputTextureCoordinate;&#8221;</span> +  </span>

- <span style="color: black;">            <span class="string" style="color: red;">&#8220;varying vec2 textureCoordinate;&#8221;</span> +  </span>

- <span style="color: black;">            <span class="string" style="color: red;">&#8220;void main()&#8221;</span> +  </span>

- <span style="color: black;">            <span class="string" style="color: red;">&#8220;{&#8220;</span>+  </span>

- <span style="color: black;">                <span class="string" style="color: red;">&#8220;gl_Position = vPosition;&#8221;</span>+  </span>

- <span style="color: black;">                <span class="string" style="color: red;">&#8220;textureCoordinate = inputTextureCoordinate;&#8221;</span> +  </span>

- <span style="color: black;">            <span class="string" style="color: red;">&#8220;}&#8221;</span>;  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">private</span> <span class="keyword" style="font-weight: bold; color: blue;">final</span> String fragmentShaderCode =  </span>

- <span style="color: black;">            <span class="string" style="color: red;">&#8220;#extension GL_OES_EGL_image_external : require\n&#8221;</span>+  </span>

- <span style="color: black;">            <span class="string" style="color: red;">&#8220;precision mediump float;&#8221;</span> +  </span>

- <span style="color: black;">            <span class="string" style="color: red;">&#8220;varying vec2 textureCoordinate;\n&#8221;</span> +  </span>

- <span style="color: black;">            <span class="string" style="color: red;">&#8220;uniform samplerExternalOES s_texture;\n&#8221;</span> +  </span>

- <span style="color: black;">            <span class="string" style="color: red;">&#8220;void main() {&#8220;</span> +  </span>

- <span style="color: black;">            <span class="string" style="color: red;">&#8221;  gl_FragColor = texture2D( s_texture, textureCoordinate );\n&#8221;</span> +  </span>

- <span style="color: black;">            <span class="string" style="color: red;">&#8220;}&#8221;</span>;  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">private</span> FloatBuffer vertexBuffer, textureVerticesBuffer;  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">private</span> ShortBuffer drawListBuffer;  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">private</span> <span class="keyword" style="font-weight: bold; color: blue;">final</span> <span class="keyword" style="font-weight: bold; color: blue;">int</span> mProgram;  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">private</span> <span class="keyword" style="font-weight: bold; color: blue;">int</span> mPositionHandle;  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">private</span> <span class="keyword" style="font-weight: bold; color: blue;">int</span> mTextureCoordHandle;  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">private</span> <span class="keyword" style="font-weight: bold; color: blue;">short</span> drawOrder[] = { <span class="number" style="color: #c00000;"></span>, <span class="number" style="color: #c00000;">1</span>, <span class="number" style="color: #c00000;">2</span>, <span class="number" style="color: #c00000;"></span>, <span class="number" style="color: #c00000;">2</span>, <span class="number" style="color: #c00000;">3</span> }; <span class="comment" style="color: #008200;">// order to draw vertices</span>  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">    <span class="comment" style="color: #008200;">// number of coordinates per vertex in this array</span>  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">private</span> <span class="keyword" style="font-weight: bold; color: blue;">static</span> <span class="keyword" style="font-weight: bold; color: blue;">final</span> <span class="keyword" style="font-weight: bold; color: blue;">int</span> COORDS_PER_VERTEX = <span class="number" style="color: #c00000;">2</span>;  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">private</span> <span class="keyword" style="font-weight: bold; color: blue;">final</span> <span class="keyword" style="font-weight: bold; color: blue;">int</span> vertexStride = COORDS_PER_VERTEX * <span class="number" style="color: #c00000;">4</span>; <span class="comment" style="color: #008200;">// 4 bytes per vertex</span>  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">static</span> <span class="keyword" style="font-weight: bold; color: blue;">float</span> squareCoords[] = {  </span>




- <span style="color: black;">        <span class="number" style="color: #c00000;">1</span>.0f,  <span class="number" style="color: #c00000;">1</span>.0f,  </span>

- <span style="color: black;">    };  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">static</span> <span class="keyword" style="font-weight: bold; color: blue;">float</span> textureVertices[] = {  </span>

- <span style="color: black;">        <span class="number" style="color: #c00000;"></span>.0f, <span class="number" style="color: #c00000;">1</span>.0f,  </span>

- <span style="color: black;">        <span class="number" style="color: #c00000;">1</span>.0f, <span class="number" style="color: #c00000;">1</span>.0f,  </span>

- <span style="color: black;">        <span class="number" style="color: #c00000;">1</span>.0f, <span class="number" style="color: #c00000;"></span>.0f,  </span>

- <span style="color: black;">        <span class="number" style="color: #c00000;"></span>.0f, <span class="number" style="color: #c00000;"></span>.0f,  </span>

- <span style="color: black;">    };  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">private</span> <span class="keyword" style="font-weight: bold; color: blue;">int</span> texture;  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">public</span> DirectDrawer(<span class="keyword" style="font-weight: bold; color: blue;">int</span> texture)  </span>

- <span style="color: black;">    {  </span>

- <span style="color: black;">        <span class="keyword" style="font-weight: bold; color: blue;">this</span>.texture = texture;  </span>

- <span style="color: black;">        <span class="comment" style="color: #008200;">// initialize vertex byte buffer for shape coordinates</span>  </span>

- <span style="color: black;">        ByteBuffer bb = ByteBuffer.allocateDirect(squareCoords.length * <span class="number" style="color: #c00000;">4</span>);  </span>

- <span style="color: black;">        bb.order(ByteOrder.nativeOrder());  </span>

- <span style="color: black;">        vertexBuffer = bb.asFloatBuffer();  </span>

- <span style="color: black;">        vertexBuffer.put(squareCoords);  </span>

- <span style="color: black;">        vertexBuffer.position(<span class="number" style="color: #c00000;"></span>);  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">        <span class="comment" style="color: #008200;">// initialize byte buffer for the draw list</span>  </span>

- <span style="color: black;">        ByteBuffer dlb = ByteBuffer.allocateDirect(drawOrder.length * <span class="number" style="color: #c00000;">2</span>);  </span>

- <span style="color: black;">        dlb.order(ByteOrder.nativeOrder());  </span>

- <span style="color: black;">        drawListBuffer = dlb.asShortBuffer();  </span>

- <span style="color: black;">        drawListBuffer.put(drawOrder);  </span>

- <span style="color: black;">        drawListBuffer.position(<span class="number" style="color: #c00000;"></span>);  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">        ByteBuffer bb2 = ByteBuffer.allocateDirect(textureVertices.length * <span class="number" style="color: #c00000;">4</span>);  </span>

- <span style="color: black;">        bb2.order(ByteOrder.nativeOrder());  </span>

- <span style="color: black;">        textureVerticesBuffer = bb2.asFloatBuffer();  </span>

- <span style="color: black;">        textureVerticesBuffer.put(textureVertices);  </span>

- <span style="color: black;">        textureVerticesBuffer.position(<span class="number" style="color: #c00000;"></span>);  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">        <span class="keyword" style="font-weight: bold; color: blue;">int</span> vertexShader    = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);  </span>

- <span style="color: black;">        <span class="keyword" style="font-weight: bold; color: blue;">int</span> fragmentShader  = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode);  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">        mProgram = GLES20.glCreateProgram();             <span class="comment" style="color: #008200;">// create empty OpenGL ES Program</span>  </span>

- <span style="color: black;">        GLES20.glAttachShader(mProgram, vertexShader);   <span class="comment" style="color: #008200;">// add the vertex shader to program</span>  </span>

- <span style="color: black;">        GLES20.glAttachShader(mProgram, fragmentShader); <span class="comment" style="color: #008200;">// add the fragment shader to program</span>  </span>

- <span style="color: black;">        GLES20.glLinkProgram(mProgram);                  <span class="comment" style="color: #008200;">// creates OpenGL ES program executables</span>  </span>

- <span style="color: black;">    }  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">public</span> <span class="keyword" style="font-weight: bold; color: blue;">void</span> draw(<span class="keyword" style="font-weight: bold; color: blue;">float</span>[] mtx)  </span>

- <span style="color: black;">    {  </span>

- <span style="color: black;">        GLES20.glUseProgram(mProgram);  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">        GLES20.glActiveTexture(GLES20.GL_TEXTURE0);  </span>

- <span style="color: black;">        GLES20.glBindTexture(GLES11Ext.GL_TEXTURE_EXTERNAL_OES, texture);  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">        <span class="comment" style="color: #008200;">// get handle to vertex shader&#8217;s vPosition member</span>  </span>

- <span style="color: black;">        mPositionHandle = GLES20.glGetAttribLocation(mProgram, <span class="string" style="color: red;">&#8220;vPosition&#8221;</span>);  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">        <span class="comment" style="color: #008200;">// Enable a handle to the triangle vertices</span>  </span>

- <span style="color: black;">        GLES20.glEnableVertexAttribArray(mPositionHandle);  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">        <span class="comment" style="color: #008200;">// Prepare the <insert shape here> coordinate data</span>  </span>

- <span style="color: black;">        GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX, GLES20.GL_FLOAT, <span class="keyword" style="font-weight: bold; color: blue;">false</span>, vertexStride, vertexBuffer);  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">        mTextureCoordHandle = GLES20.glGetAttribLocation(mProgram, <span class="string" style="color: red;">&#8220;inputTextureCoordinate&#8221;</span>);  </span>

- <span style="color: black;">        GLES20.glEnableVertexAttribArray(mTextureCoordHandle);  </span>

- <span style="color: black;">          </span>

- <span style="color: black;"><span class="comment" style="color: #008200;">//        textureVerticesBuffer.clear();</span>  </span>

- <span style="color: black;"><span class="comment" style="color: #008200;">//        textureVerticesBuffer.put( transformTextureCoordinates( textureVertices, mtx ));</span>  </span>

- <span style="color: black;"><span class="comment" style="color: #008200;">//        textureVerticesBuffer.position(0);</span>  </span>

- <span style="color: black;">        GLES20.glVertexAttribPointer(mTextureCoordHandle, COORDS_PER_VERTEX, GLES20.GL_FLOAT, <span class="keyword" style="font-weight: bold; color: blue;">false</span>, vertexStride, textureVerticesBuffer);  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">        GLES20.glDrawElements(GLES20.GL_TRIANGLES, drawOrder.length, GLES20.GL_UNSIGNED_SHORT, drawListBuffer);  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">        <span class="comment" style="color: #008200;">// Disable vertex array</span>  </span>

- <span style="color: black;">        GLES20.glDisableVertexAttribArray(mPositionHandle);  </span>

- <span style="color: black;">        GLES20.glDisableVertexAttribArray(mTextureCoordHandle);  </span>

- <span style="color: black;">    }  </span>

- <span style="color: black;">      </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">private</span>  <span class="keyword" style="font-weight: bold; color: blue;">int</span> loadShader(<span class="keyword" style="font-weight: bold; color: blue;">int</span> type, String shaderCode){  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">        <span class="comment" style="color: #008200;">// create a vertex shader type (GLES20.GL_VERTEX_SHADER)</span>  </span>

- <span style="color: black;">        <span class="comment" style="color: #008200;">// or a fragment shader type (GLES20.GL_FRAGMENT_SHADER)</span>  </span>

- <span style="color: black;">        <span class="keyword" style="font-weight: bold; color: blue;">int</span> shader = GLES20.glCreateShader(type);  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">        <span class="comment" style="color: #008200;">// add the source code to the shader and compile it</span>  </span>

- <span style="color: black;">        GLES20.glShaderSource(shader, shaderCode);  </span>

- <span style="color: black;">        GLES20.glCompileShader(shader);  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">        <span class="keyword" style="font-weight: bold; color: blue;">return</span> shader;  </span>

- <span style="color: black;">    }  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">private</span> <span class="keyword" style="font-weight: bold; color: blue;">float</span>[] transformTextureCoordinates( <span class="keyword" style="font-weight: bold; color: blue;">float</span>[] coords, <span class="keyword" style="font-weight: bold; color: blue;">float</span>[] matrix)  </span>

- <span style="color: black;">    {            </span>

- <span style="color: black;">       <span class="keyword" style="font-weight: bold; color: blue;">float</span>[] result = <span class="keyword" style="font-weight: bold; color: blue;">new</span> <span class="keyword" style="font-weight: bold; color: blue;">float</span>[ coords.length ];          </span>

- <span style="color: black;">       <span class="keyword" style="font-weight: bold; color: blue;">float</span>[] vt = <span class="keyword" style="font-weight: bold; color: blue;">new</span> <span class="keyword" style="font-weight: bold; color: blue;">float</span>[<span class="number" style="color: #c00000;">4</span>];        </span>

- <span style="color: black;">  </span>

- <span style="color: black;">       <span class="keyword" style="font-weight: bold; color: blue;">for</span> ( <span class="keyword" style="font-weight: bold; color: blue;">int</span> i = <span class="number" style="color: #c00000;"></span> ; i < coords.length ; i += <span class="number" style="color: #c00000;">2</span> ) {  </span>

- <span style="color: black;">           <span class="keyword" style="font-weight: bold; color: blue;">float</span>[] v = { coords[i], coords[i+<span class="number" style="color: #c00000;">1</span>], <span class="number" style="color: #c00000;"></span> , <span class="number" style="color: #c00000;">1</span>  };  </span>

- <span style="color: black;">           Matrix.multiplyMV(vt, <span class="number" style="color: #c00000;"></span>, matrix, <span class="number" style="color: #c00000;"></span>, v, <span class="number" style="color: #c00000;"></span>);  </span>

- <span style="color: black;">           result[i] = vt[<span class="number" style="color: #c00000;"></span>];  </span>

- <span style="color: black;">           result[i+<span class="number" style="color: #c00000;">1</span>] = vt[<span class="number" style="color: #c00000;">1</span>];  </span>

- <span style="color: black;">       }  </span>

- <span style="color: black;">       <span class="keyword" style="font-weight: bold; color: blue;">return</span> result;  </span>

- <span style="color: black;">    }  </span>

- <span style="color: black;">}  </span>

- <span style="color: black;"></span>  </span>

三、有了上面两个类就完成95%的工作，可以将GLSurfaceView看成是有生命周期的。在onPause里进行关闭Camera，在Activity里复写两个方法:

  <div>
  </div>
</div>

- <span style="color: black;"><span style=<span class="string" style="color: red;">&#8220;font-family:Comic Sans MS;font-size:18px;&#8221;</span>>    <span class="annotation" style="color: #646464;">@Override</span>  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">protected</span> <span class="keyword" style="font-weight: bold; color: blue;">void</span> onResume() {  </span>

- <span style="color: black;">        <span class="comment" style="color: #008200;">// TODO Auto-generated method stub</span>  </span>

- <span style="color: black;">        <span class="keyword" style="font-weight: bold; color: blue;">super</span>.onResume();  </span>

- <span style="color: black;">        glSurfaceView.bringToFront();  </span>

- <span style="color: black;">    }  </span>

- <span style="color: black;">  </span>

- <span style="color: black;">    <span class="annotation" style="color: #646464;">@Override</span>  </span>

- <span style="color: black;">    <span class="keyword" style="font-weight: bold; color: blue;">protected</span> <span class="keyword" style="font-weight: bold; color: blue;">void</span> onPause() {  </span>

- <span style="color: black;">        <span class="comment" style="color: #008200;">// TODO Auto-generated method stub</span>  </span>

- <span style="color: black;">        <span class="keyword" style="font-weight: bold; color: blue;">super</span>.onPause();  </span>

- <span style="color: black;">        glSurfaceView.onPause();  </span>

- <span style="color: black;">    }</span>  </span>

这个glSurfaceView.bringToFront();其实不写也中。在布局里写入自定义的GLSurfaceView就ok了:

**[html]** [view plain](http://blog.csdn.net/yanzi1225627/article/details/33339965#)[copy](http://blog.csdn.net/yanzi1225627/article/details/33339965#)[print](http://blog.csdn.net/yanzi1225627/article/details/33339965#)[?](http://blog.csdn.net/yanzi1225627/article/details/33339965#)[![在CODE上查看代码片](https://code.csdn.net/assets/CODE_ico.png)](https://code.csdn.net/snippets/402612)[![派生到我的代码片](https://code.csdn.net/assets/ico_fork.svg)](https://code.csdn.net/snippets/402612/fork)

  <div>
  </div>
</div>

- <span style="color: black;"><span class="tag" style="font-weight: bold; color: blue;"><</span><span class="tag-name" style="font-weight: bold; color: blue;">span</span> <span class="attribute" style="color: red;">style</span>=<span class="attribute-value" style="color: blue;">&#8220;font-family:Comic Sans MS;font-size:18px;&#8221;</span><span class="tag" style="font-weight: bold; color: blue;">></span>    <span class="tag" style="font-weight: bold; color: blue;"><</span><span class="tag-name" style="font-weight: bold; color: blue;">FrameLayout</span>  </span>

- <span style="color: black;">        <span class="attribute" style="color: red;">android:layout_width</span>=<span class="attribute-value" style="color: blue;">&#8220;wrap_content&#8221;</span>  </span>

- <span style="color: black;">        <span class="attribute" style="color: red;">android:layout_height</span>=<span class="attribute-value" style="color: blue;">&#8220;wrap_content&#8221;</span> <span class="tag" style="font-weight: bold; color: blue;">></span>  </span>

- <span style="color: black;">        <span class="tag" style="font-weight: bold; color: blue;"><</span><span class="tag-name" style="font-weight: bold; color: blue;">org.yanzi.camera.preview.CameraGLSurfaceView</span>  </span>

- <span style="color: black;">            <span class="attribute" style="color: red;">android:id</span>=<span class="attribute-value" style="color: blue;">&#8220;@+id/camera_textureview&#8221;</span>  </span>

- <span style="color: black;">            <span class="attribute" style="color: red;">android:layout_width</span>=<span class="attribute-value" style="color: blue;">&#8220;0dip&#8221;</span>  </span>

- <span style="color: black;">            <span class="attribute" style="color: red;">android:layout_height</span>=<span class="attribute-value" style="color: blue;">&#8220;0dip&#8221;</span> <span class="tag" style="font-weight: bold; color: blue;">/></span>  </span>

- <span style="color: black;">    <span class="tag" style="font-weight: bold; color: blue;"></</span><span class="tag-name" style="font-weight: bold; color: blue;">FrameLayout</span><span class="tag" style="font-weight: bold; color: blue;">></span><span class="tag" style="font-weight: bold; color: blue;"></</span><span class="tag-name" style="font-weight: bold; color: blue;">span</span><span class="tag" style="font-weight: bold; color: blue;">></span>  </span>

CameraActivity里只负责UI部分，CameraGLSurfaceView负责开Camera、预览，并调用DirectDrawer里的draw()进行绘制。其他代码就不上了。

注意事项:

1、**在onDrawFrame()里，如果不调用mDirectDrawer.draw(mtx);是啥都显示不出来的！！！**这是GLSurfaceView的特别之处。为啥呢？因为GLSurfaceView不是Android亲生的，而Surfaceview和TextureView是。所以得自己按照OpenGL ES的流程画。

2、究竟mDirectDrawer.draw(mtx)里在哪获取的Buffer目前杂家还么看太明白，貌似么有请求buffer，而是根据GLSurfaceView里创建的SurfaceTexture之前，生成的有个纹理ID。这个纹理ID一方面跟SurfaceTexture是绑定在一起的，另一方面跟DirectDrawer绑定，而SurfaceTexture作渲染载体。

3、参考链接里有,有人为了解决问题，给出了下面三段代码:

@Override
public void onDrawFrame(GL10 gl)
{
    float[] mtx = new float[16];
    mSurface.updateTexImage();
    mSurface.getTransformMatrix(mtx);    

    mDirectVideo.draw(mtx);
}

 private float[] transformTextureCoordinates( float[] coords, float[] matrix)
 {          
    float[] result = new float[ coords.length ];        
    float[] vt = new float[4];      

    for ( int i = 0 ; i < coords.length ; i += 2 ) {
        float[] v = { coords[i], coords[i+1], 0 , 1  };
        Matrix.multiplyMV(vt, 0, matrix, 0, v, 0);
        result[i] = vt[0];
        result[i+1] = vt[1];
    }
    return result;
 }

textureVerticesBuffer.clear();
textureVerticesBuffer.put( transformTextureCoordinates( textureVertices, mtx ));
textureVerticesBuffer.position(0);

我已经把代码都融入到了此demo，只不过在draw()方法里么有使用。原因是使用之后，得到的预览画面反而是变形的，而不用的话是ok的。上面的代码是得到SurfaceTexture的变换矩阵：mSurface.getTransformMatrix

然后将此矩阵传递给draw()，在draw的时候对textureVerticesBuffer作一个变化，然后再画。

下图是未加这个矩阵变换效果时: