androidopengles教程

A. Android OpenGLES3绘图 - 音频可视化（模仿MIUI系统效果）

小米手机播放音乐时锁屏页面可以设置音频可视化效果，这是用OpenGL绘制出来的，我们来实现一下。

首先简单分析一下原理：
图形的每一行代表一个声音片段，它就是一个一维数组，按照数值大小绘制不同的高度，就形成了一条“山脉”；获取到下一个声音片段后，将它绘制到下面一行，然后画面整体向上滚动就可以了。整体类似于绘制一张游戏里常见的3D地形图。

创建一个MediaPlayer，它可以直接读取res/raw里面的音频文件，start()开始播放

Visualizer是Android SDK里面提供的音频分析工具，它可以直接获取播放的音频的波形和频谱。onWaveFormDataCapture回调方法里返回的是原始的PCM波形数组，onFftDataCapture回调方法里返回的是经过快速傅里叶方法转换后的声音频谱数组，数组的第一位是直流分量，后面是不同频率的数值。

每次获取到的是一组声音数据，将它传给Render绘制。

首先确定图形的长宽，宽度w其实是由每组音频的数组长度决定，可以由Visualizer.getCaptureSizeRange()[0]获取，这里获取的是最小的数组，也可以用Visualizer.getCaptureSizeRange()[1]获取最大的数组；长度h可以自己设置想展示多长。

绘制地形图也就是绘制w * h * 2个三角形，创建vao、vbo和ebo，由于顶点的位置都是固定的，可以在顶点着色器中用gl_VertexID获取，所以vbo里面不用传顶点数据，直接传声音数组。

由于图形是不断刷新最后一行并向上滚动的，那么需要使用一个队列，为了每一帧数据改变最小，不至于进行大量的数组复制和移动。我们 用ByteBuffer vertexBuffer模拟一个循环队列，使用一个行号int lineNum来标记队列的头部。每添加一行数据后，lineNum会加上w，这样ByteBuffer分成了两部分：lineNum * w之后的是新旧数据，之前的是旧数据 。

现在我们需要将数据从主内存（vertexBuffer）复制到GPU显存（vbo）。vertexBuffer里是一个循环队列，而vbo里面只能顺序保存（因为ebo序号是顺序的，vbo不是顺序图形就会错乱），更新vbo数据缓存的glBufferSubData方法支持设置偏移位置部分更新。那么我们 先将vertexBuffer定位到lineNum * w，将它后面的旧数据复制到vbo的前面；然后将vertexBuffer定位到0，将剩下的新数据复制到vbo的后面 。这样就保证了绘制时从上到下，从旧到新。

为了让颜色更丰富，这里用了地形图中常用的热度渐变色数组。
理论上音频数值是unsigned byte格式的，但是着色器不支持byte格式，我直接用int vPosition接收数据，然而数值范围不再是0~255了，这有点奇怪，我没有深入研究。简单测试了一下，发现取int的前8位，再进行一点比例缩放，用它去渐变色数组里取颜色，会取得较好的显示效果。

顶点着色器
shader_audio_v.glsl

将颜色传给片段着色器显示
shader_audio_f.glsl

最终效果如下图，录屏设置的码率比较低，实际上是很清晰的。

完整项目在 SurfacePaint 项目下的 opengles3 模块里的audio。

B. 如何在Android上使用OpenGL ES 2.0绘制点

OpenGLES是一个让人崩溃的东西。在Andorid手机上做3D还就得用它。把我记的一些笔记分享在这里吧：AndroidOpenGLES简介20011-6-3Android系统使用OpenGL的标准接口来支持3D图形功能，android3D图形系统也分为java框架和本地代码两部分。本地代码主要实现的OpenGL接口的库，在Java框架层，javax.microedition.khronos.opengles是java标准的OpenGL包，android.opengl包提供了OpenGL系统和AndroidGUI系统之间的联系。Android的本地代码位于frameworks/base/opengl下,JNI代码位于frameworks/base/core/com_google_android_gles_jni_GLImpl.cpp和frameworks/base/core/com_google_android_gles_jni_EGLImpl.cpp，java类位于opengl/java/javax/microedition/khronos下本地测试代码位于frameworks/base/opengl/tests。包括angeles、fillrate等14个测试代码，这些代码都可以通过终端进行本地调用测试（模拟器中使用adbshell）。OpenGLES1.x固定管线操作，支持glVertexPointer()等函数，不支持GLSL。头文件在ndk的GLES目录下，库文件是libGLESv1_CM.so。OpenGLES2.x可编程管线操作，不兼容1.x，不支持固定管线操作，例如glVertexPointer()等函数。支持GLSL(还必须用这个来编程)。头文件在ndk的GLES2目录下，库文件是libGLESv2.so。OpenGLES学习2011-6-30OpenGL定义了自己的数据类型。应该坚持使用这些OpenGL的数据类型，从而保证可移植性和效率。OpenGLES目前不支持64位数据类型。OpenGLES只支持三边形。OpenGLES只支持gl开头的函数，glu库都不支持。OpenGLES从OpenGL中删除的功能：1.glBegin/glEnd2.glArrayElement3.显示列表4.求值器5.索引色模式6.自定义裁剪平面7.glRect8.图像处理(这个一般显卡也没有，FireGL/Quadro显卡有)9.反馈缓冲10.选择缓冲11.累积缓冲12.边界标志13.glPolygonMode14.GL_QUADS,GL_QUAD_STRIP,GL_POLYGON15.glPushAttrib,glPopAttrib,glPushClientAttrib,glPopClientAttrib16.TEXTURE_1D、TEXTURE_3D、TEXTURE_RECT、TEXTURE_CUBE_MAP17.GL_COMBINE18.自动纹理坐标生成19.纹理边界20.GL_CLAMP、GL_CLAMP_TO_BORDER21.消失纹理代表22.纹理LOD限定23.纹理偏好限定24.纹理自动压缩、解压缩25.glDrawPixels,glPixelTransfer,glPixelZoom26.glReadBuffer,glDrawBuffer,glCopyPixelsOpenGLES2.02011-10-92.0和1.1不兼容。-2.0使用的头文件是ndk的include目录下的GLES2目录，有gl2.h,gl2ext.h,gl2platform.h，而1.1使用的是GLES目录。-2.0使用的库文件是ndk的lib目录下的libGLESv2.so，而1.1使用的是libGLESv1_CM.so。-2.0中取消了很多1.1函数，例如glMatrixModel和glLoadIdentity等。OpenGL着色语言（GLSL――OpenGLShadingLanguage）-使用2.0，必须学此语言。因为很多1.1的函数都被取消了。san-angelesNDKOpenGLES1.1的例子程序2012-3-8SanAngeles，查维基网络，是一个虚构的未来概念城市，位于南加州。常在电影中出现，来源自LosAngeles和SanDiego.该程序的演示效果是，观察一个宏伟的城市，地面是镜面有建筑倒影，城市中有飞船飞过。前后有5、6个观察点，而且镜头在每个观察点不停的移动。这个例子，用NDK(C++)调用OpenGLES1.1来绘制了SanAngeles这个城市。基本上全部使用了NDK，Java程序只有1个。用vc2005演示一下，目的通过跟踪代码了解一些细节。方法是：-将jni下所有的.h文件，以及demo.c,app-win32.c复制出来，放在一个专门的目录下，然后改造成用OpenGL的而不是ES的。（或者干脆删除大段的绘制代码，保证编译通过）首先分析Java代码-DemoActivity.java，这是唯一的Java文件，它主要需要下列4个jni的接口：-();//初始化-(intw,inth);-();//绘制1帧-();其次分析C++代码app-android.c-首先，调用了importGLInit()，动态导入OpenGL的库。-其次，调用了appInit()，在内存中建立了平台无关的3D对象集合。建立方法是用一个数组，用类似画圆拔高的方式产生诸多三角形。-然后，在每个时钟周期中调用appRender()，细节是：-prepareFrame(width,height);//准备OpenGLES绘制框架。其实就是清空颜色和深度缓冲，重置投影和模型矩阵。-camTrack();//算好在当前时钟周期，镜头的位置、朝向及焦距等。然后调用gluLookAt来实现。-configureLightAndMaterial();//设置光源和材质-drawModels(-1);//先绘制倒影(其实就是将所有模型z轴倒过来画)-第一个循环，是画精致的物体-第二个循环，是画运动的物体-drawGroundPlane();//再绘制镜子一般的地面。在绘制前取消光照，打开混合，然后绘制。绘制后还原状态。-drawModels(1);//再绘制所有模型-drawFadeQuad();//最后绘制淡出框，用融合的方式画一个遮住整个视口的2D框，融合系数和时间相关。

C. [OpengGL]渲染流程和程序流程

这节要说的是Opengles的渲染流程和程序流程，都是一些非常基础的东西，觉得已经熟悉的同学可以自行忽略。
以下是一幅经典的Opengl渲染管线流程图

Opengles中包含三种图元方式，点，线，三角形

包含对顶点数据的处理和转换

把所有输入的顶点数据作为输入，将所有点配装成指定图元的形状

（Opengl特有） 把基本图元形式的顶点的几何作为输入，可以通过产生新顶点构造出新的基本图元来生成其它形状

（Opengl特有）可以把基本图元细分为更多的基本图形，创建出更加平滑的视觉效果

像素化，图形映射到屏幕上网络的像素点，生成提供片段给片元着色器处理，光栅化包含一个剪裁处理，会计算舍弃超出定义视窗外的像素

为每一个像素点提供最终的颜色，这里会可以提供纹理题图，如果是3D场景其可以包含3D场景的一些额外数据，例如光线，阴影

对每个像素点进行深度测试，Alpha测试并进行颜色混合操作，进一步合成整个视窗每一个像素点最终要显示的颜色和透明度

如果从API的角度来分析，你会发现有更多的操作。

在输入顶点数据的时候需要线做顶点缓冲，这里可以使用顶点缓冲去对象（VBO），顶点数组对象（VAO）。VBO可以减少IO开销，并使用数组记录每一个快数据对应绑定的类型（顶点位置、法向量），这些数据会存放在GPU上。VAO是使用一个数组来存每一个VBO储存的数据、类型，每次回执时就不需要一个一个传递了。
经过片元着色之后，测试和混合也是分很多种

每一个片元在帧缓冲中对应的位置，若干对应的位置裁剪窗口中则将此片元送入下一个阶段，否则会丢弃此片元，可以在屏幕上指定区域绘制，不在这片区域不进行绘制

深度测试是用片元的深度值和帧缓冲中储存的对应位置的片元的深度值进行比较，深度值小的片元会覆盖或混合深度值大得片元。
模板测试 讲回执区域限定在一定的范围内，一般用于湖面倒影，镜像等场合

如果程序开启了Alpha混合，则可以根据上一阶段对应的片元和帧缓冲的位置片元进行alpha混合

抖动可以模拟更大的色深，需要自己编写算法实现，通过GL_DITHER来控制

opengles并不是直接在屏幕上进行绘制，是预先在帧缓冲区进行绘制，当绘制完之后再下将绘制的结果交换到屏幕上，因此每绘制新的一帧是都需要清除缓冲区的相关数据，否则会产生不正确的绘制效果。

这些都是基本的渲染流程，接下来说一下程序流程，以Android程序为例
这个之前需要了解一下Android中屏幕显示对Opengles的承载，
SurfaceTexture，TextureView, SurfaceView和GLSurfaceView

值得注意的是Android直接内置了Opengles，并内置了GL10，GL20，GL30的类，封装了Opengles的Android API，当然其中也屏蔽了一些细节，对于真正去理解opengles实现有一定的差距。
初学者很多会选用GLSurfaceView来做实现，例如简单绘制图形是没问题的。但是我们如果深入一点学习，例如滤镜，例如录制播放，还是需要使用SurfaceView来做的，因为SurfaceView可以控制绘制的线程，需要自己定义EGL环境，还有SurfaceTexture绑定，同样这也是初学者使用时的难点。

使用一个GLSurfaceView来显示一个三角形为例，这里就屏蔽了EGL、GLThread和SurfaceTexture使用的细节，重点关注在Opengles中的实现。
GLSurfaceView.Render提供三个回调接口
onSurfaceCreated 纹理窗口创建
onSurfaceChanged 视口大小更改
onDrawFrame 绘制

初始化的时候，准备好顶点着色器和片元着色器内容，这里面顶点做色器和片元着色器可以使用字符串读取，也可以使用glsl的shader文件来读取。

加载纹理

创建纹理空间->加载纹理资源->编译纹理

加载纹理绑定到程序

加载纹理->绑定程序

在GLsurfaceView绘制的时候，调用绘制渲染

清屏->指定使用程序->传入参数到着色器->允许GPU读取->绘制图形

日志打印

Opengles2.0对应的是Android 2.2(API 8)
Opengles3.0对应的是Android 4.3(API 18)
Opengles3.1对应的是Android 5.0(API 21)

先将顶点着色器和片段着色器文件贴出来（这是用来渲染普通视频用的），这是使用的OpenGLES3.0版本。（存在兼容性问题），下面只是一部分问题，且这里就不将bug的log写出来了，这是提示大家正确的写法。

顶点着色器

片段着色器

1.没有在着色器文件中标明使用版本的时候默认使用2.0版本。
在上面的着色器文件中添加#version 300 es即表明使用3.0版本，如果不添加则使用默认2.0版本（注意此行必须放在第一行）。同时注意使用3.0的api的时候必须添加此行。

2.3.0中attribute变成了in和out
OpenGL ES 3.0中将2.0的attribute改成了in，顶点着色器的varying改成out，片段着色器的varying改成了in，也就是说顶点着色器的输出就是片段着色器的输入，另外uniform跟2.0用法一样。

3.3.0中使用内置参数gl_FragColor会出问题
这里我们只能自定义颜色向量out vec4 vFragColor;

4.3.0中将GL_OES_EGL_image_external变为了GL_OES_EGL_image_external_essl3
在使用纹理扩展的时候，也就是uniform samplerExternalOES sTexture的时候。在3.0中我们使用GL_OES_EGL_image_external_essl3而不是GL_OES_EGL_image_external。使用相机采集纹理的时候就知道了

5.3.0中将纹理的处理方法统一为texture
在2.0中2D纹理和3D纹理处理分别使用texture2D和texture3D方法，而在3.0后使用texture统一处理。

6.in或者out变量等不能在函数内（如main函数内）声明

OpenglES3.0新特性

D. Android OpenGLES2.0（十六）——3D模型贴图及光照处理（obj+mtl）

在Android OpenGLES2.0（十四）——Obj格式3D模型加载中实现了Obj格式的3D模型的加载，加载的是一个没有贴图，没有光照处理的帽子，为了呈现出立体效果，“手动”加了光照，拥有贴图的纹理及光照又该怎么加载呢？

本篇博客例子中加载的是一个卡通形象皮卡丘，资源是在网上随便找的一个。加载出来如图所示：

obj内容格式如下：

mtl文件内容格式如下：

关于Obj的内容格式，在上篇博客中已经做了总结，本篇博客中使用的obj，可以看到f后面的不再跟的是4个数字，而是 f 2/58/58 3/59/59 17/60/60 这种样子的三组数，每一组都表示为顶点坐标索引/贴图坐标点索引/顶点法线索引，三个顶点组成一个三角形。而头部的 mtllib pikachu.mtl 则指明使用的材质库。
而mtl格式文件中，主要数据类型为：

模型加载和之前的模型加载大同小异，不同的是，这次我们需要将模型的贴图坐标、顶点法线也一起加载，并传入到shader中。其他参数，有的自然也要取到。
模型加载以obj文件为入口，解析obj文件，从中获取到mtl文件相对路径，然后解析mtl文件。将材质库拆分为诸多的单一材质。obj对象的 加载，根据具使用材质不同来分解为多个3D模型。具体加载过程如下：

顶点着色器

片元着色器

完成了以上准备工作，就可以调用 readMultiObj 方法，将obj文件读成一个或多个带有各项参数的3D模型类，然后将每一个3D模型的参数传入shader中，进而进行渲染：

E. Android OpenGLES2.0（十八）——轻松搞定Blend颜色混合

Blend是OpenGL中的一个非常重要的部分，它可以让每个输出的源和目的颜色以多种方式组合在一起，以呈现出不同的效果，满足不同的需求。

在OpenGLES1.0中，Blend在OpenGLES固定的管线中，OpenGLES2.0相对1.0来说，更为灵活。在OpenGLES2.0中，与Blend相关的函数及功能主要有：

Blend的使用比较简单，但是如果不理解Blend的这些函数及参数的意义，使用了错误的参数，就难以获得我们所期望的混合结果了。
想要使用Blend， glEnable(GL_BLEND) 当然是必须的。与之对应的，不需要Blend的时候，我们需要调用 glDisable(GL_BLEND) 来关闭混合。
另外的四个方法，看名字差不多就能知道他们的意义了。
glBlendFunc 和 glBlendFuncSeparate 都是设置混合因子，反正就是这么个意思了。区别在于glBlendFunc是设置RGBA的混合因子，而glBlendFuncSeparate是分别设置RGB和Alpha的混合因子。设置混合因子是做什么的呢？继续看。
glBlendEquation 和 glBlendEquationSeparate 都是设置Blend的方程式，也就是设置混合的计算方式了，具体参数后面说。他们的区别在同 glBlendFunc 和 glBlendFuncSeparate 的区别一样。
颜色、因子、方程式，组合起来就是：最终颜色=(目标颜色 目标因子)@(源颜色 源因子)，其中@表示一种运算符。
至于glBlendColor则是在glBlendFunc和glBlendFuncSeparate的设置中，因子可以设置和常量相关的，这个常量就是由glBlendColor设置进去的。

glBlendFuncSeparate设置混合因子，参数及它们表示的主要如下，而glBlendFunc的参数也是这些，表示的意义就是RGB和A合并为RGBA就是了。在下表中，s0表示源，d表示目的，c表示有glBlendColor设置进来的常量。

glBlendEquationSeparate的设置混合操作，参数及其意义如下表所示。通过glBlendEquationSeparate或者glBlendEquation设置的方程中，源和目的颜色分别为(Rs,Gs,Bs,As)
和(Rd,Gd,Bd,Ad)。最终混合的颜色结果为(Rr,Gr,Br,Ar)。源和目的的混合因子分别为(sR,sG,sB,sA)和(dR,dG,dB,dA)

。其中，所有的颜色分量的取值范围都为[ 0, 1 ]。 GL_MIN和GL_MAX是在OpenGLES3.0才有的 。
Mode RGB Components Alpha Component
GL_FUNC_ADD RrGrBr=sRRs+dRRd=sGGs+dGGd=sBBs+dBBd
Ar=sAAs+dAAd
GL_FUNC_SUBTRACT RrGrBr=sRRs−dRRd=sGGs−dGGd=sBBs−dBBd
Ar=sAAs−dAAd
GL_FUNC_REVERSE_SUBTRACT RrGrBr=dRRd−sRRs=dGGd−sGGs=dBBd−sBBs
Ar=dAAd−sAAs
GL_MIN RrGrBr=min(Rs,Rd)=min(Gs,Gd)=min(Bs,Bd)
Ar=min(As,Ad)
GL_MAX RrGrBr=max(Rs,Rd)=max(Gs,Gd)=max(Bs,Bd)
Ar=max(As,Ad)

目的纹理和源纹理使用的图片分别如下所示（作为源的图片为了表现混合效果，上中下三部分用了不一样的透明度，最下面部分不透明）：

根据公式推敲下渲染的结果：

F. 如何使用Android中的OpenGL ES媒体效果

设置OpenGLES环境创建GLSurfaceView为了显示OpenGL的图形，需要使用GLSurfaceView类，就像其他任何的View子类意义，可以将它添加到自己的Activity或Fragment之上，通过在布局xml文件中定义或者在代码中创建实例。在这里，咱们使用GLSurfaceView作为唯一的View在咋们的Activity中，因此，为了简便，咱在代码中创建GLSurfaceView的实例并将其传入setContentView中，这样它将会填充自己的整个手机屏幕。Activity中的onCreate方法如下：protectedvoidonCreate(BundlesavedInstanceState){super.onCreate(savedInstanceState);GLSurfaceViewview=newGLSurfaceView(this);setContentView(view);}因为媒体效果的框架仅仅支持OpenGLES2.0及以上的版本，所以在setEGLContextClientVersion方法中传入2；view.setEGLContextClientVersion(2);为了确保GLSurfaceView仅仅在必要的时候进行渲染，咱们在setRenderMode方法中进行设置：view.setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);创建RendererRenderer负责渲染GLSurfaceView中的内容。创建类实现接口GLSurfaceView.Renderer，在这里咱打算将这个类命名为EffectsRenderer，添加构造函数并覆写接口中的抽象方法，如下：.Renderer{publicEffectsRenderer(Contextcontext){super();}@(GL10gl,EGLConfigconfig){}@(GL10gl,intwidth,intheight){}@OverridepublicvoidonDrawFrame(GL10gl){}}