VBO 和 EBO
VBO（Vertex Buffer Object）是指顶点缓冲区对象，而 EBO（Element Buffer Object）是指图元索引缓冲区对象，VAO 和 EBO 实际上是对同一类 Buffer 按照用途的不同称呼。
OpenGLES2.0 编程中，用于绘制的顶点数组数据首先保存在 CPU 内存，在调用 glDrawArrays 或者 glDrawElements 等进行绘制时，需要将顶点数组数据从 CPU 内存拷贝到显存。
但是很多时候我们没必要每次绘制的时候都去进行内存拷贝，如果可以在显存中缓存这些数据，就可以在很大程度上降低内存拷贝带来的开销。
OpenGLES3.0 编程中， VBO 和 EBO 的出现就是为了解决这个问题。
VBO 和 EBO 的作用是在显存中提前开辟好一块内存，用于缓存顶点数据或者图元索引数据，从而避免每次绘制时的 CPU 与 GPU 之间的内存拷贝，可以改进渲染性能，降低内存带宽和功耗。
OpenGLES3.0 支持两类缓冲区对象：顶点数组缓冲区对象、图元索引缓冲区对象。
GL_ARRAY_BUFFER 标志指定的缓冲区对象用于保存顶点数组，GL_ELEMENT_ARRAY_BUFFER 标志指定的缓存区对象用于保存图元索引。
VBO（EBO）的创建和更新：
// 创建 2 个 VBO（EBO 实际上跟 VBO 一样，只是按照用途的另一种称呼）
glGenBuffers(2, m_VboIds);
// 绑定第一个 VBO，拷贝顶点数组到显存
glBindBuffer(GL_ARRAY_BUFFER, m_VboIds[0]);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 绑定第二个 VBO（EBO），拷贝图元索引数据到显存
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, m_VboIds[1]);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
GL_STATIC_DRAW 标志标识缓冲区对象数据被修改一次，使用多次，用于绘制。
本例中顶点着色器和片段着色器增加 color 属性：
//顶点着色器
#version 300 es
layout(location = 0) in vec4 a_position; // 位置变量的属性位置值为 0
layout(location = 1) in vec3 a_color; // 颜色变量的属性位置值为 1
out vec3 v_color; // 向片段着色器输出一个颜色
void main()
{
v_color = a_color;
gl_Position = a_position;
};
//片段着色器
#version 300 es
precision mediump float;
in vec3 v_color;
out vec4 o_fragColor;
void main()
{
o_fragColor = vec4(v_color, 1.0);
}
顶点数组数据和图元索引数据：
// 4 vertices, with(x,y,z) ,(r, g, b, a) per-vertex
GLfloat vertices[] =
{
-0.5f, 0.5f, 0.0f, // v0
1.0f, 0.0f, 0.0f, // c0
-0.5f, -0.5f, 0.0f, // v1
0.0f, 1.0f, 0.0f, // c1
0.5f, -0.5f, 0.0f, // v2
0.0f, 0.0f, 1.0f, // c2
0.5f, 0.5f, 0.0f, // v3
0.5f, 1.0f, 1.0f, // c3
};
// Index buffer data
GLushort indices[6] = { 0, 1, 2, 0, 2, 3};
由于顶点位置和颜色数据在同一个数组里，一起更新到 VBO 里面，所以需要知道 2 个属性的步长和偏移量。
为获得数据队列中下一个属性值（比如位置向量的下个 3 维分量）我们必须向右移动 6 个 float ，其中 3 个是位置值，另外 3 个是颜色值，那么步长就是 6 乘以 float 的字节数（= 24 字节）。
同样，也需要指定顶点位置属性和颜色属性在 VBO 内存中的偏移量。
对于每个顶点来说，位置顶点属性在前，所以它的偏移量是 0 。而颜色属性紧随位置数据之后，所以偏移量就是 3 * sizeof(GLfloat) ，用字节来计算就是 12 字节。
使用 VBO 和 EBO 进行绘制。
glUseProgram(m_ProgramObj);
//不使用 VBO 的绘制
glEnableVertexAttribArray(0);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, (3+3)*sizeof(GLfloat), vertices);
glEnableVertexAttribArray(1);
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, (3+3)*sizeof(GLfloat), (vertices + 3));
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, indices);
//使用 VBO 的绘制
glBindBuffer(GL_ARRAY_BUFFER, m_VboIds[0]);
glEnableVertexAttribArray(0);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, (3+3)*sizeof(GLfloat), (const void *)0);
glEnableVertexAttribArray(1);
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, (3+3)*sizeof(GLfloat), (const void *)(3 *sizeof(GLfloat)));
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, m_VboIds[1]);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, (const void *)0);
VAO
VAO（Vertex Array Object）是指顶点数组对象，主要用于管理 VBO 或 EBO ，减少 glBindBuffer 、glEnableVertexAttribArray、 glVertexAttribPointer 这些调用操作，高效地实现在顶点数组配置之间切换。
基于上小节的例子创建 VAO ：
// 创建并绑定 VAO
glGenVertexArrays(1, &m_VaoId);
glBindVertexArray(m_VaoId);
// 在绑定 VAO 之后，操作 VBO ，当前 VAO 会记录 VBO 的操作
glBindBuffer(GL_ARRAY_BUFFER, m_VboIds[0]);
glEnableVertexAttribArray(0);
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, (3+3)*sizeof(GLfloat), (const void *)0);
glEnableVertexAttribArray(1);
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, (3+3)*sizeof(GLfloat), (const void *)(3 *sizeof(GLfloat)));
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, m_VboIds[1]);
glBindVertexArray(GL_NONE);
使用 VAO 进行绘制：
// 是不是精简了很多？
glUseProgram(m_ProgramObj);
glBindVertexArray(m_VaoId);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, (const void *)0);
离屏渲染(FBO)
FBO（Frame Buffer Object）即帧缓冲区对象，实际上是一个可添加缓冲区的容器，可以为其添加纹理或渲染缓冲区对象（RBO）。
FBO 本身不能用于渲染，只有添加了纹理或者渲染缓冲区之后才能作为渲染目标，它仅且提供了 3 个附着（Attachment），分别是颜色附着、深度附着和模板附着。
RBO（Render Buffer Object）即渲染缓冲区对象，是一个由应用程序分配的 2D 图像缓冲区。渲染缓冲区可以用于分配和存储颜色、深度或者模板值，可以用作 FBO 中的颜色、深度或者模板附着。
使用 FBO 作为渲染目标时，首先需要为 FBO 的附着添加连接对象，如颜色附着需要连接纹理或者渲染缓冲区对象的颜色缓冲区。
为什么用 FBO
默认情况下，OpenGL ES 通过绘制到窗口系统提供的帧缓冲区，然后将帧缓冲区的对应区域复制到纹理来实现渲染到纹理，但是此方法只有在纹理尺寸小于或等于帧缓冲区尺寸才有效。
另一种方式是通过使用连接到纹理的 pbuffer 来实现渲染到纹理，但是与上下文和窗口系统提供的可绘制表面切换开销也很大。因此，引入了帧缓冲区对象 FBO 来解决这个问题。
NDK OpenGLES 开发中，一般使用 GLSurfaceView 将绘制结果显示到屏幕上，然而在实际应用中，也有许多场景不需要渲染到屏幕上，如利用 GPU 在后台完成一些图像转换、缩放等耗时操作，这个时候利用 FBO 可以方便实现类似需求。
使用 FBO 可以让渲染操作不用再渲染到屏幕上，而是渲染到离屏 Buffer 中，然后可以使用 glReadPixels 或者 HardwareBuffer 将渲染后的图像数据读出来，从而实现在后台利用 GPU 完成对图像的处理。
怎么用 FBO
创建并初始化 FBO 的步骤：
// 创建一个 2D 纹理用于连接 FBO 的颜色附着
glGenTextures(1, &m_FboTextureId);
glBindTexture(GL_TEXTURE_2D, m_FboTextureId);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glBindTexture(GL_TEXTURE_2D, GL_NONE);
// 创建 FBO
glGenFramebuffers(1, &m_FboId);
// 绑定 FBO
glBindFramebuffer(GL_FRAMEBUFFER, m_FboId);
// 绑定 FBO 纹理
glBindTexture(GL_TEXTURE_2D, m_FboTextureId);
// 将纹理连接到 FBO 附着
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, m_FboTextureId, 0);
// 分配内存大小
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, m_RenderImage.width, m_RenderImage.height, 0, GL_RGBA, GL_UNSIGNED_BYTE, nullptr);
// 检查 FBO 的完整性状态
if (glCheckFramebufferStatus(GL_FRAMEBUFFER)!= GL_FRAMEBUFFER_COMPLETE) {
LOGCATE("FBOSample::CreateFrameBufferObj glCheckFramebufferStatus status != GL_FRAMEBUFFER_COMPLETE");
return false;
}
// 解绑纹理
glBindTexture(GL_TEXTURE_2D, GL_NONE);
// 解绑 FBO
glBindFramebuffer(GL_FRAMEBUFFER, GL_NONE);
使用 FBO 的一般步骤：
// 绑定 FBO
glBindFramebuffer(GL_FRAMEBUFFER, m_FboId);
// 选定离屏渲染的 Program，绑定 VAO 和图像纹理，进行绘制（离屏渲染）
// m_ImageTextureId 为另外一个用于纹理映射的图片纹理
glUseProgram(m_FboProgramObj);
glBindVertexArray(m_VaoIds[1]);
glActiveTexture(GL_TEXTURE0);
// 绑定图像纹理
glBindTexture(GL_TEXTURE_2D, m_ImageTextureId);
glUniform1i(m_FboSamplerLoc, 0);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, (const void *)0);
glBindVertexArray(0);
glBindTexture(GL_TEXTURE_2D, 0);
// 解绑 FBO
glBindFramebuffer(GL_FRAMEBUFFER, 0);
// 完成离屏渲染后，结果图数据便保存在我们之前连接到 FBO 的纹理 m_FboTextureId 。
// 我们再拿 FBO 纹理 m_FboTextureId 做一次普通渲染便可将之前离屏渲染的结果绘制到屏幕上。
// 这里我们编译连接了 2 个 program ,一个用作离屏渲染的 m_FboProgramObj，一个用于普通渲染的 m_ProgramObj
//选定另外一个着色器程序，以 m_FboTextureId 纹理作为输入进行普通渲染
glUseProgram(m_ProgramObj);
glBindVertexArray(m_VaoIds[0]);
glActiveTexture(GL_TEXTURE0);
//绑定 FBO 纹理
glBindTexture(GL_TEXTURE_2D, m_FboTextureId);
glUniform1i(m_SamplerLoc, 0);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, (const void *)0);
glBindTexture(GL_TEXTURE_2D, GL_NONE);
glBindVertexArray(GL_NONE);
示例：
- 创建并初始化 FBO
bool FBOSample::CreateFrameBufferObj()
{
// 创建并初始化 FBO 纹理
glGenTextures(1, &m_FboTextureId);
glBindTexture(GL_TEXTURE_2D, m_FboTextureId);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glBindTexture(GL_TEXTURE_2D, GL_NONE);
// 创建并初始化 FBO
glGenFramebuffers(1, &m_FboId);
glBindFramebuffer(GL_FRAMEBUFFER, m_FboId);
glBindTexture(GL_TEXTURE_2D, m_FboTextureId);
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, m_FboTextureId, 0);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, m_RenderImage.width, m_RenderImage.height, 0, GL_RGBA, GL_UNSIGNED_BYTE, nullptr);
if (glCheckFramebufferStatus(GL_FRAMEBUFFER)!= GL_FRAMEBUFFER_COMPLETE) {
LOGCATE("FBOSample::CreateFrameBufferObj glCheckFramebufferStatus status != GL_FRAMEBUFFER_COMPLETE");
return false;
}
glBindTexture(GL_TEXTURE_2D, GL_NONE);
glBindFramebuffer(GL_FRAMEBUFFER, GL_NONE);
return true;
}
- 编译链接 2 个着色器程序，创建 VAO、VBO 和图像纹理
void FBOSample::Init()
{
//顶点坐标
GLfloat vVertices[] = {
-1.0f, -1.0f, 0.0f,
1.0f, -1.0f, 0.0f,
-1.0f, 1.0f, 0.0f,
1.0f, 1.0f, 0.0f,
};
//正常纹理坐标
GLfloat vTexCoors[] = {
0.0f, 1.0f,
1.0f, 1.0f,
0.0f, 0.0f,
1.0f, 0.0f,
};
//fbo 纹理坐标与正常纹理方向不同，原点位于左下角
GLfloat vFboTexCoors[] = {
0.0f, 0.0f,
1.0f, 0.0f,
0.0f, 1.0f,
1.0f, 1.0f,
};
GLushort indices[] = { 0, 1, 2, 1, 3, 2 };
char vShaderStr[] =
"#version 300 es \n"
"layout(location = 0) in vec4 a_position; \n"
"layout(location = 1) in vec2 a_texCoord; \n"
"out vec2 v_texCoord; \n"
"void main() \n"
"{ \n"
" gl_Position = a_position; \n"
" v_texCoord = a_texCoord; \n"
"} \n";
// 用于普通渲染的片段着色器脚本，简单纹理映射
char fShaderStr[] =
"#version 300 es\n"
"precision mediump float;\n"
"in vec2 v_texCoord;\n"
"layout(location = 0) out vec4 outColor;\n"
"uniform sampler2D s_TextureMap;\n"
"void main()\n"
"{\n"
" outColor = texture(s_TextureMap, v_texCoord);\n"
"}";
// 用于离屏渲染的片段着色器脚本，取每个像素的灰度值
char fFboShaderStr[] =
"#version 300 es\n"
"precision mediump float;\n"
"in vec2 v_texCoord;\n"
"layout(location = 0) out vec4 outColor;\n"
"uniform sampler2D s_TextureMap;\n"
"void main()\n"
"{\n"
" vec4 tempColor = texture(s_TextureMap, v_texCoord);\n"
" float luminance = tempColor.r * 0.299 + tempColor.g * 0.587 + tempColor.b * 0.114;\n"
" outColor = vec4(vec3(luminance), tempColor.a);\n"
"}"; // 输出灰度图
// 编译链接用于普通渲染的着色器程序
m_ProgramObj = GLUtils::CreateProgram(vShaderStr, fShaderStr, m_VertexShader, m_FragmentShader);
// 编译链接用于离屏渲染的着色器程序
m_FboProgramObj = GLUtils::CreateProgram(vShaderStr, fFboShaderStr, m_FboVertexShader, m_FboFragmentShader);
if (m_ProgramObj == GL_NONE || m_FboProgramObj == GL_NONE)
{
LOGCATE("FBOSample::Init m_ProgramObj == GL_NONE");
return;
}
m_SamplerLoc = glGetUniformLocation(m_ProgramObj, "s_TextureMap");
m_FboSamplerLoc = glGetUniformLocation(m_FboProgramObj, "s_TextureMap");
// 生成 VBO ，加载顶点数据和索引数据
// Generate VBO Ids and load the VBOs with data
glGenBuffers(4, m_VboIds);
glBindBuffer(GL_ARRAY_BUFFER, m_VboIds[0]);
glBufferData(GL_ARRAY_BUFFER, sizeof(vVertices), vVertices, GL_STATIC_DRAW);
glBindBuffer(GL_ARRAY_BUFFER, m_VboIds[1]);
glBufferData(GL_ARRAY_BUFFER, sizeof(vTexCoors), vTexCoors, GL_STATIC_DRAW);
glBindBuffer(GL_ARRAY_BUFFER, m_VboIds[2]);
glBufferData(GL_ARRAY_BUFFER, sizeof(vFboTexCoors), vFboTexCoors, GL_STATIC_DRAW);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, m_VboIds[3]);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
GO_CHECK_GL_ERROR();
// 生成 2 个 VAO，一个用于普通渲染，另一个用于离屏渲染
// Generate VAO Ids
glGenVertexArrays(2, m_VaoIds);
// 初始化用于普通渲染的 VAO
// Normal rendering VAO
glBindVertexArray(m_VaoIds[0]);
glBindBuffer(GL_ARRAY_BUFFER, m_VboIds[0]);
glEnableVertexAttribArray(VERTEX_POS_INDX);
glVertexAttribPointer(VERTEX_POS_INDX, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(GLfloat), (const void *)0);
glBindBuffer(GL_ARRAY_BUFFER, GL_NONE);
glBindBuffer(GL_ARRAY_BUFFER, m_VboIds[1]);
glEnableVertexAttribArray(TEXTURE_POS_INDX);
glVertexAttribPointer(TEXTURE_POS_INDX, 2, GL_FLOAT, GL_FALSE, 2 * sizeof(GLfloat), (const void *)0);
glBindBuffer(GL_ARRAY_BUFFER, GL_NONE);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, m_VboIds[3]);
GO_CHECK_GL_ERROR();
glBindVertexArray(GL_NONE);
// 初始化用于离屏渲染的 VAO
// FBO off screen rendering VAO
glBindVertexArray(m_VaoIds[1]);
glBindBuffer(GL_ARRAY_BUFFER, m_VboIds[0]);
glEnableVertexAttribArray(VERTEX_POS_INDX);
glVertexAttribPointer(VERTEX_POS_INDX, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(GLfloat), (const void *)0);
glBindBuffer(GL_ARRAY_BUFFER, GL_NONE);
glBindBuffer(GL_ARRAY_BUFFER, m_VboIds[2]);
glEnableVertexAttribArray(TEXTURE_POS_INDX);
glVertexAttribPointer(TEXTURE_POS_INDX, 2, GL_FLOAT, GL_FALSE, 2 * sizeof(GLfloat), (const void *)0);
glBindBuffer(GL_ARRAY_BUFFER, GL_NONE);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, m_VboIds[3]);
GO_CHECK_GL_ERROR();
glBindVertexArray(GL_NONE);
// 创建并初始化图像纹理
glGenTextures(1, &m_ImageTextureId);
glBindTexture(GL_TEXTURE_2D, m_ImageTextureId);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, m_RenderImage.width, m_RenderImage.height, 0, GL_RGBA, GL_UNSIGNED_BYTE, m_RenderImage.ppPlane[0]);
glBindTexture(GL_TEXTURE_2D, GL_NONE);
GO_CHECK_GL_ERROR();
if (!CreateFrameBufferObj())
{
LOGCATE("FBOSample::Init CreateFrameBufferObj fail");
return;
}
}
- 离屏渲染和普通渲染
void FBOSample::Draw(int screenW, int screenH)
{
// 离屏渲染
glPixelStorei(GL_UNPACK_ALIGNMENT,1);
glViewport(0, 0, m_RenderImage.width, m_RenderImage.height);
// Do FBO off screen rendering
glBindFramebuffer(GL_FRAMEBUFFER, m_FboId);
glUseProgram(m_FboProgramObj);
glBindVertexArray(m_VaoIds[1]);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, m_ImageTextureId);
glUniform1i(m_FboSamplerLoc, 0);
GO_CHECK_GL_ERROR();
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, (const void *)0);
GO_CHECK_GL_ERROR();
glBindVertexArray(0);
glBindTexture(GL_TEXTURE_2D, 0);
glBindFramebuffer(GL_FRAMEBUFFER, 0);
// 普通渲染
// Do normal rendering
glViewport(0, 0, screenW, screenH);
glUseProgram(m_ProgramObj);
GO_CHECK_GL_ERROR();
glBindVertexArray(m_VaoIds[0]);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, m_FboTextureId);
glUniform1i(m_SamplerLoc, 0);
GO_CHECK_GL_ERROR();
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, (const void *)0);
GO_CHECK_GL_ERROR();
glBindTexture(GL_TEXTURE_2D, GL_NONE);
glBindVertexArray(GL_NONE);
}
EGL创建EGLSurface有三个方法：eglCreateWindowSurface()、eglCreatePbufferSurface()和eglCreatePixmapSurface()。
- WindowSurface
顾名思义WindowSurface是和窗口相关的，也就是在屏幕上的一块显示区的封装，渲染后即显示在界面上。
- PbufferSurface
在显存中开辟一个空间，将渲染后的数据(帧)存放在这里。
- PixmapSurface
以位图的形式存放在内存中，据说各平台的支持不是很好。
做离屏渲染我们可以选择PbufferSurface或者PixmapSurface(其实WindowSurface也是可以的)，帧缓存对象FBO是对帧缓存的封装，性能要优于Pbuffer但并非可以完全替代Pbuffer。OpenGL操作的最终目标实际上是帧缓存(Frame Buffer)，后面的各种表现形式则是EGL对Frame Buffer的封装。
新建GLSurface类，对EGLSurface进行封装
GLRenderer添加一个阻塞队列(消息队列)，用于交互和解耦
GLRenderer添加一个Event内部类
GLRenderer中添加生命周期，将渲染之类的具体工作放到实现类中
public class GLSurface {
public static final int TYPE_WINDOW_SURFACE = 0;
public static final int TYPE_PBUFFER_SURFACE = 1;
public static final int TYPE_PIXMAP_SURFACE = 2;
protected final int type;
protected Object surface; // 显示控件(支持SurfaceView、SurfaceHolder、Surface和SurfaceTexture)
protected EGLSurface eglSurface = EGL14.EGL_NO_SURFACE;
protected Viewport viewport = new Viewport();
public GLSurface(int width, int height) {
setViewport(0, 0, width, height);
surface = null;
type = TYPE_PBUFFER_SURFACE;
}
public GLSurface(Surface surface, int width, int height) {
this(surface,0,0,width,height);
}
public GLSurface(Surface surface, int x, int y, int width, int height) {
setViewport(x, y, width, height);
this.surface = surface;
type = TYPE_WINDOW_SURFACE;
}
public void setViewport(int x, int y, int width, int height){
viewport.x = x;
viewport.y = y;
viewport.width = width;
viewport.height = height;
}
public void setViewport(Viewport viewport){
this.viewport = viewport;
}
public Viewport getViewport(){
return viewport;
}
public static class Viewport{
public int x;
public int y;
public int width;
public int height;
}
}
将GLRenderer类改为抽象类，继承于Thread
public abstract class GLRenderer extends Thread {
private static final String TAG = "GLThread";
private EGLConfig eglConfig = null;
private EGLDisplay eglDisplay = EGL14.EGL_NO_DISPLAY;
private EGLContext eglContext = EGL14.EGL_NO_CONTEXT;
private ArrayBlockingQueue<Event> eventQueue;
private final List<GLSurface> outputSurfaces;
private boolean rendering;
private boolean isRelease;
public GLRenderer() {
setName("GLRenderer-" + getId());
outputSurfaces = new ArrayList<>();
rendering = false;
isRelease = false;
eventQueue = new ArrayBlockingQueue<>(100);
}
private boolean makeOutputSurface(GLSurface surface) {
// 创建Surface缓存
try {
switch (surface.type) {
case GLSurface.TYPE_WINDOW_SURFACE: {
final int[] attributes = {EGL14.EGL_NONE};
// 创建失败时返回EGL14.EGL_NO_SURFACE
surface.eglSurface = EGL14.eglCreateWindowSurface(eglDisplay, eglConfig, surface.surface, attributes, 0);
break;
}
case GLSurface.TYPE_PBUFFER_SURFACE: {
final int[] attributes = {
EGL14.EGL_WIDTH, surface.viewport.width,
EGL14.EGL_HEIGHT, surface.viewport.height,
EGL14.EGL_NONE};
// 创建失败时返回EGL14.EGL_NO_SURFACE
surface.eglSurface = EGL14.eglCreatePbufferSurface(eglDisplay, eglConfig, attributes, 0);
break;
}
case GLSurface.TYPE_PIXMAP_SURFACE: {
Log.w(TAG, "nonsupport pixmap surface");
return false;
}
default:
Log.w(TAG, "surface type error " + surface.type);
return false;
}
} catch (Exception e) {
Log.w(TAG, "can't create eglSurface");
surface.eglSurface = EGL_NO_SURFACE;
return false;
}
return true;
}
public void addSurface(@NonNull final GLSurface surface){
Event event = new Event(Event.ADD_SURFACE);
event.param = surface;
if(!eventQueue.offer(event))
Log.e(TAG,"queue full");
}
public void removeSurface(@NonNull final GLSurface surface){
Event event = new Event(Event.REMOVE_SURFACE);
event.param = surface;
if(!eventQueue.offer(event))
Log.e(TAG,"queue full");
}
/**
* 开始渲染
* 启动线程并等待初始化完毕
*/
public void startRender(){
if(!eventQueue.offer(new Event(Event.START_RENDER)))
Log.e(TAG,"queue full");
if(getState()==State.NEW) {
super.start(); // 启动渲染线程
}
}
public void stopRender(){
if(!eventQueue.offer(new Event(Event.STOP_RENDER)))
Log.e(TAG,"queue full");
}
public boolean postRunnable(@NonNull Runnable runnable){
Event event = new Event(Event.RUNNABLE);
event.param = runnable;
if(!eventQueue.offer(event)) {
Log.e(TAG, "queue full");
return false;
}
return true;
}
@Override
public void start() {
Log.w(TAG,"Don't call this function");
}
public void requestRender(){
eventQueue.offer(new Event(Event.REQ_RENDER));
}
/**
* 创建OpenGL环境
*/
private void createGL() {
// 获取显示设备(默认的显示设备)
eglDisplay = EGL14.eglGetDisplay(EGL14.EGL_DEFAULT_DISPLAY);
// 初始化
int[] version = new int[2];
if (!EGL14.eglInitialize(eglDisplay, version, 0, version, 1)) {
throw new RuntimeException("EGL error " + EGL14.eglGetError());
}
// 获取FrameBuffer格式和能力
int[] configAttribs = {
EGL14.EGL_BUFFER_SIZE, 32,
EGL14.EGL_ALPHA_SIZE, 8,
EGL14.EGL_BLUE_SIZE, 8,
EGL14.EGL_GREEN_SIZE, 8,
EGL14.EGL_RED_SIZE, 8,
EGL14.EGL_RENDERABLE_TYPE, EGL14.EGL_OPENGL_ES2_BIT,
EGL14.EGL_SURFACE_TYPE, EGL14.EGL_WINDOW_BIT,
EGL14.EGL_NONE
};
int[] numConfigs = new int[1];
EGLConfig[] configs = new EGLConfig[1];
if (!EGL14.eglChooseConfig(eglDisplay, configAttribs, 0, configs, 0, configs.length, numConfigs, 0)) {
throw new RuntimeException("EGL error " + EGL14.eglGetError());
}
eglConfig = configs[0];
// 创建OpenGL上下文(可以先不设置EGLSurface，但EGLContext必须创建，
// 因为后面调用GLES方法基本都要依赖于EGLContext)
int[] contextAttribs = {
EGL14.EGL_CONTEXT_CLIENT_VERSION, 2,
EGL14.EGL_NONE
};
eglContext = EGL14.eglCreateContext(eglDisplay, eglConfig, EGL14.EGL_NO_CONTEXT, contextAttribs, 0);
if (eglContext == EGL14.EGL_NO_CONTEXT) {
throw new RuntimeException("EGL error " + EGL14.eglGetError());
}
// 设置默认的上下文环境和输出缓冲区(小米4上如果不设置有效的eglSurface后面创建着色器会失败，可以先创建一个默认的eglSurface)
//EGL14.eglMakeCurrent(eglDisplay, surface.eglSurface, surface.eglSurface, eglContext);
EGL14.eglMakeCurrent(eglDisplay, EGL14.EGL_NO_SURFACE, EGL14.EGL_NO_SURFACE, eglContext);
}
/**
* 销毁OpenGL环境
*/
private void destroyGL() {
EGL14.eglDestroyContext(eglDisplay, eglContext);
eglContext = EGL14.EGL_NO_CONTEXT;
eglDisplay = EGL14.EGL_NO_DISPLAY;
}
/**
* 渲染到各个eglSurface
*/
private void render(){
// 渲染(绘制)
for(GLSurface output:outputSurfaces){
if(output.eglSurface== EGL_NO_SURFACE) {
if(!makeOutputSurface(output))
continue;
}
// 设置当前的上下文环境和输出缓冲区
EGL14.eglMakeCurrent(eglDisplay, output.eglSurface, output.eglSurface, eglContext);
// 设置视窗大小及位置
GLES20.glViewport(output.viewport.x, output.viewport.y, output.viewport.width, output.viewport.height);
// 绘制
onDrawFrame(output);
// 交换显存(将surface显存和显示器的显存交换)
EGL14.eglSwapBuffers(eglDisplay, output.eglSurface);
}
}
@Override
public void run() {
Event event;
Log.d(TAG,getName()+": render create");
createGL();
onCreated();
// 渲染
while(!isRelease){
try {
event = eventQueue.take();
switch(event.event){
case Event.ADD_SURFACE: {
// 创建eglSurface
GLSurface surface = (GLSurface)event.param;
Log.d(TAG,"add:"+surface);
makeOutputSurface(surface);
outputSurfaces.add(surface);
break;
}
case Event.REMOVE_SURFACE: {
GLSurface surface = (GLSurface)event.param;
Log.d(TAG,"remove:"+surface);
EGL14.eglDestroySurface(eglDisplay, surface.eglSurface);
outputSurfaces.remove(surface);
break;
}
case Event.START_RENDER:
rendering = true;
break;
case Event.REQ_RENDER: // 渲染
if(rendering) {
onUpdate();
render(); // 如果surface缓存没有释放(被消费)那么这里将卡住
}
break;
case Event.STOP_RENDER:
rendering = false;
break;
case Event.RUNNABLE:
((Runnable)event.param).run();
break;
case Event.RELEASE:
isRelease = true;
break;
default:
Log.e(TAG,"event error: "+event);
break;
}
} catch (InterruptedException e) {
e.printStackTrace();
}
}
// 回调
onDestroy();
// 销毁eglSurface
for(GLSurface outputSurface:outputSurfaces){
EGL14.eglDestroySurface(eglDisplay, outputSurface.eglSurface);
outputSurface.eglSurface = EGL_NO_SURFACE;
}
destroyGL();
eventQueue.clear();
Log.d(TAG,getName()+": render release");
}
/**
* 退出OpenGL渲染并释放资源
* 这里先将渲染器释放(renderer)再退出looper，因为renderer里面可能持有这个looper的handler，
* 先退出looper再释放renderer可能会报一些警告信息(sending message to a Handler on a dead thread)
*/
public void release(){
if(eventQueue.offer(new Event(Event.RELEASE))){
// 等待线程结束，如果不等待，在快速开关的时候可能会导致资源竞争(如竞争摄像头)
// 但这样操作可能会引起界面卡顿，择优取舍
while (isAlive()){
try {
this.join(1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}
/**
* 当创建完基本的OpenGL环境后调用此方法，可以在这里初始化纹理之类的东西
*/
public abstract void onCreated();
/**
* 在渲染之前调用，用于更新纹理数据。渲染一帧调用一次
*/
public abstract void onUpdate();
/**
* 绘制渲染，每次绘制都会调用，一帧数据可能调用多次(不同是输出缓存)
* @param outputSurface 输出缓存位置surface
*/
public abstract void onDrawFrame(GLSurface outputSurface);
/**
* 当渲染器销毁前调用，用户回收释放资源
*/
public abstract void onDestroy();
private static String getEGLErrorString() {
return GLUtils.getEGLErrorString(EGL14.eglGetError());
}
private static class Event {
static final int ADD_SURFACE = 1; // 添加输出的surface
static final int REMOVE_SURFACE = 2; // 移除输出的surface
static final int START_RENDER = 3; // 开始渲染
static final int REQ_RENDER = 4; // 请求渲染
static final int STOP_RENDER = 5; // 结束渲染
static final int RUNNABLE = 6; //
static final int RELEASE = 7; // 释放渲染器
final int event;
Object param;
Event(int event) {
this.event = event;
}
}
}
ShaderUtil类，将着色器创建的代码封装到这个类中
public class ShaderUtil {
/**
* 加载制定shader的方法
* @param shaderType shader的类型 GLES20.GL_VERTEX_SHADER GLES20.GL_FRAGMENT_SHADER
* @param source shader的脚本字符串
* @return 着色器id
*/
private static int loadShader(int shaderType,String source) {
// 创建一个新shader
int shader = GLES20.glCreateShader(shaderType);
// 若创建成功则加载shader
if (shader != 0) {
//加载shader的源代码
GLES20.glShaderSource(shader, source);
//编译shader
GLES20.glCompileShader(shader);
//存放编译成功shader数量的数组
int[] compiled = new int[1];
//获取Shader的编译情况
GLES20.glGetShaderiv(shader, GLES20.GL_COMPILE_STATUS, compiled, 0);
if (compiled[0] == 0) {//若编译失败则显示错误日志并删除此shader
Log.e("ES20_ERROR", "Could not compile shader " + shaderType + ":");
Log.e("ES20_ERROR", GLES20.glGetShaderInfoLog(shader));
GLES20.glDeleteShader(shader);
shader = 0;
}
}
return shader;
}
/**
* 创建shader程序的方法
*/
public static int createProgram(String vertexSource, String fragmentSource) {
//加载顶点着色器
int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexSource);
if (vertexShader == 0) {
return 0;
}
//加载片元着色器
int pixelShader = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentSource);
if (pixelShader == 0) {
return 0;
}
//创建程序
int program = GLES20.glCreateProgram();
//若程序创建成功则向程序中加入顶点着色器与片元着色器
if (program != 0) {
//向程序中加入顶点着色器
GLES20.glAttachShader(program, vertexShader);
checkGlError("glAttachShader");
//向程序中加入片元着色器
GLES20.glAttachShader(program, pixelShader);
checkGlError("glAttachShader");
//链接程序
GLES20.glLinkProgram(program);
//存放链接成功program数量的数组
int[] linkStatus = new int[1];
//获取program的链接情况
GLES20.glGetProgramiv(program, GLES20.GL_LINK_STATUS, linkStatus, 0);
//若链接失败则报错并删除程序
if (linkStatus[0] != GLES20.GL_TRUE) {
Log.e("ES20_ERROR", "Could not link program: ");
Log.e("ES20_ERROR", GLES20.glGetProgramInfoLog(program));
GLES20.glDeleteProgram(program);
program = 0;
}
}
return program;
}
//检查每一步操作是否有错误的方法
public static void checkGlError(String op) {
int error;
while ((error = GLES20.glGetError()) != GLES20.GL_NO_ERROR) {
Log.e("ES20_ERROR", op + ": glError " + error);
throw new RuntimeException(op + ": glError " + error);
}
}
//从sh脚本中加载shader内容的方法
public static String loadFromAssetsFile(String fname, Resources r) {
String result = null;
try {
InputStream in = r.getAssets().open(fname);
int ch = 0;
ByteArrayOutputStream baos = new ByteArrayOutputStream();
while ((ch = in.read()) != -1) {
baos.write(ch);
}
byte[] buff = baos.toByteArray();
baos.close();
in.close();
result = new String(buff, "UTF-8");
result = result.replaceAll("\\r\\n", "\n");
} catch (Exception e) {
e.printStackTrace();
}
return result;
}
}
离屏渲染关键部分就是在makeOutputSurface()方法中的GLSurface.TYPE_PBUFFER_SURFACE这个case里面。
新建TestRenderer继承于GLRenderer，在onCreated()中创建着色器和顶点，在onDrawFrame()中进行绘制。
public class TestRenderer extends GLRenderer {
private static final String TAG = "TestRenderer";
private int program;
private int vPosition;
private int uColor;
private FloatBuffer vertices;
/**
* 获取图形的顶点
* 特别提示：由于不同平台字节顺序不同数据单元不是字节的一定要经过ByteBuffer
* 转换，关键是要通过ByteOrder设置nativeOrder()，否则有可能会出问题
*
* @return 顶点Buffer
*/
private FloatBuffer getVertices() {
float vertices[] = {
0.0f, 0.5f,
-0.5f, -0.5f,
0.5f, -0.5f,
};
// 创建顶点坐标数据缓冲
// vertices.length*4是因为一个float占四个字节
ByteBuffer vbb = ByteBuffer.allocateDirect(vertices.length * 4);
vbb.order(ByteOrder.nativeOrder()); //设置字节顺序
FloatBuffer vertexBuf = vbb.asFloatBuffer(); //转换为Float型缓冲
vertexBuf.put(vertices); //向缓冲区中放入顶点坐标数据
vertexBuf.position(0); //设置缓冲区起始位置
return vertexBuf;
}
@Override
public void onCreated() {
//基于顶点着色器与片元着色器创建程序
program = createProgram(verticesShader, fragmentShader);
// 获取着色器中的属性引用id(传入的字符串就是我们着色器脚本中的属性名)
vPosition = GLES20.glGetAttribLocation(program, "vPosition");
uColor = GLES20.glGetUniformLocation(program, "uColor");
vertices = getVertices();
}
@Override
public void onUpdate() {
}
@Override
public void onDrawFrame(GLSurface surface) {
// 设置clear color颜色RGBA(这里仅仅是设置清屏时GLES20.glClear()用的颜色值而不是执行清屏)
GLES20.glClearColor(1.0f, 0, 0, 1.0f);
// 清除深度缓冲与颜色缓冲(清屏,否则会出现绘制之外的区域花屏)
GLES20.glClear(GLES20.GL_DEPTH_BUFFER_BIT | GLES20.GL_COLOR_BUFFER_BIT);
// 使用某套shader程序
GLES20.glUseProgram(program);
// 为画笔指定顶点位置数据(vPosition)
GLES20.glVertexAttribPointer(vPosition, 2, GLES20.GL_FLOAT, false, 0, vertices);
// 允许顶点位置数据数组
GLES20.glEnableVertexAttribArray(vPosition);
// 设置属性uColor(颜色 索引,R,G,B,A)
GLES20.glUniform4f(uColor, 0.0f, 1.0f, 0.0f, 1.0f);
// 绘制
GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, 3);
}
@Override
public void onDestroy() {
}
// 顶点着色器的脚本
private static final String verticesShader
= "attribute vec2 vPosition; \n" // 顶点位置属性vPosition
+ "void main(){ \n"
+ " gl_Position = vec4(vPosition,0,1);\n" // 确定顶点位置
+ "}";
// 片元着色器的脚本
private static final String fragmentShader
= "precision mediump float; \n" // 声明float类型的精度为中等(精度越高越耗资源)
+ "uniform vec4 uColor; \n" // uniform的属性uColor
+ "void main(){ \n"
+ " gl_FragColor = uColor; \n" // 给此片元的填充色
+ "}";
}
SurfaceView sv = (SurfaceView)findViewById(R.id.sv_main_demo);
imageIv = (ImageView)findViewById(R.id.iv_main_image);
glRenderer = new TestRenderer();
GLSurface glPbufferSurface = new GLSurface(512,512);
glRenderer.addSurface(glPbufferSurface);
glRenderer.startRender();
glRenderer.requestRender();
glRenderer.postRunnable(new Runnable() {
@Override
public void run() {
IntBuffer ib = IntBuffer.allocate(512 * 512);
GLES20.glReadPixels(0, 0, 512, 512, GL10.GL_RGBA, GL10.GL_UNSIGNED_BYTE, ib);
final Bitmap bitmap = frameToBitmap(512, 512, ib);
new Handler(Looper.getMainLooper()).post(new Runnable() {
@Override
public void run() {
imageIv.setImageBitmap(bitmap);
}
});
}
});
sv.getHolder().addCallback(new SurfaceHolder.Callback() {
@Override
public void surfaceCreated(SurfaceHolder surfaceHolder) {
}
@Override
public void surfaceChanged(SurfaceHolder surfaceHolder, int format, int width, int height) {
GLSurface glWindowSurface = new GLSurface(surfaceHolder.getSurface(),width,height);
glRenderer.addSurface(glWindowSurface);
glRenderer.requestRender();
}
@Override
public void surfaceDestroyed(SurfaceHolder surfaceHolder) {
}
});
/**
* 将数据转换成bitmap(OpenGL和Android的Bitmap色彩空间不一致，这里需要做转换)
*
* @param width 图像宽度
* @param height 图像高度
* @param ib 图像数据
* @return bitmap
*/
private static Bitmap frameToBitmap(int width, int height, IntBuffer ib) {
int pixs[] = ib.array();
// 扫描转置(OpenGl:左上->右下 Bitmap:左下->右上)
for (int y = 0; y < height / 2; y++) {
for (int x = 0; x < width; x++) {
int pos1 = y * width + x;
int pos2 = (height - 1 - y) * width + x;
int tmp = pixs[pos1];
pixs[pos1] = (pixs[pos2] & 0xFF00FF00) | ((pixs[pos2] >> 16) & 0xff) | ((pixs[pos2] << 16) & 0x00ff0000); // ABGR->ARGB
pixs[pos2] = (tmp & 0xFF00FF00) | ((tmp >> 16) & 0xff) | ((tmp << 16) & 0x00ff0000);
}
}
if (height % 2 == 1) { // 中间一行
for (int x = 0; x < width; x++) {
int pos = (height / 2 + 1) * width + x;
pixs[pos] = (pixs[pos] & 0xFF00FF00) | ((pixs[pos] >> 16) & 0xff) | ((pixs[pos] << 16) & 0x00ff0000);
}
}
return Bitmap.createBitmap(pixs, width, height, Bitmap.Config.ARGB_8888);
}
运行一下，这里我们就能看到两个三角形了，顶部的小三角形就是在后台渲染的图像了
帧缓冲
Bloom，Blur，SSAO，PSSM，HDR等等都属于后处理渲染效果，它们的实现其实就是应用帧缓冲技术实现的。OpenGL给了我们自己定义帧缓冲的自由，我们可以选择性的定义自己的颜色缓冲、深度和模板缓冲。当你创建了你的窗口的时候默认帧缓冲就被创建和配置好了，通过创建我们自己的帧缓冲我们能够获得一种额外的渲染方式。通过帧缓冲可以将你的场景渲染到一个不同的帧缓冲中，可以使我们能够在场景中创建镜子这样的效果，或者做出一些炫酷的特效。
我们可以使用一个叫做glGenFramebuffers的函数来创建一个帧缓冲对象（简称FBO）：
GLuint fbo;
glGenFramebuffers(1, &fbo);
首先我们要创建一个帧缓冲对象，把它绑定到当前帧缓冲，做一些操作，然后解绑帧缓冲。我们使用glBindFramebuffer来绑定帧缓冲：
glBindFramebuffer(GL_FRAMEBUFFER, fbo);
绑定到GL_FRAMEBUFFER目标后，接下来所有的读、写帧缓冲的操作都会影响到当前绑定的帧缓冲。也可以把帧缓冲分开绑定到读或写目标上，分别使用GL_READ_FRAMEBUFFER或GL_DRAW_FRAMEBUFFER来做这件事。如果绑定到了GL_READ_FRAMEBUFFER，就能执行所有读取操作，像glReadPixels这样的函数使用了，绑定到GL_DRAW_FRAMEBUFFER上，就允许进行渲染、清空和其他的写入操作。
建构一个完整的帧缓冲必须满足以下条件：
- 我们必须往里面加入至少一个附件（颜色、深度、模板缓冲）。
- 其中至少有一个是颜色附件。
- 所有的附件都应该是已经完全做好的（已经存储在内存之中）。
- 每个缓冲都应该有同样数目的样本。
我们需要为帧缓冲创建一些附件(Attachment)，还需要把这些附件附加到帧缓冲上。当我们做完所有上面提到的条件的时候我们就可以用glCheckFramebufferStatus带上GL_FRAMEBUFFER这个参数来检查是否真的成功做到了。然后检查当前绑定的帧缓冲，返回了这些规范中的哪个值。如果返回的是GL_FRAMEBUFFER_COMPLETE就对了：
if(glCheckFramebufferStatus(GL_FRAMEBUFFER) == GL_FRAMEBUFFER_COMPLETE)
// Execute victory dance
后续所有渲染操作将渲染到当前绑定的帧缓冲的附加缓冲中，由于我们的帧缓冲不是默认的帧缓冲，渲染命令对窗口的视频输出不会产生任何影响。出于这个原因，它被称为离屏渲染（off-screen rendering），就是渲染到一个另外的缓冲中。为了让所有的渲染操作对主窗口产生影响我们必须通过绑定为0来使默认帧缓冲被激活：
glBindFramebuffer(GL_FRAMEBUFFER, 0);
当我们做完所有帧缓冲操作，不要忘记删除帧缓冲对象：
glDeleteFramebuffers(1, &fbo);
现在在执行完成检测前，我们需要把一个或更多的附件附加到帧缓冲上。一个附件就是一个内存地址，这个内存地址里面包含一个为帧缓冲准备的缓冲，它可以是个图像。当创建一个附件的时候我们有两种方式可以采用：纹理或渲染缓冲（renderbuffer）对象。
接下来介绍纹理，当把一个纹理附加到帧缓冲上的时候，所有渲染命令会写入到纹理上，就像它是一个普通的颜色/深度或者模板缓冲一样。使用纹理的好处是，所有渲染操作的结果都会被储存为一个纹理图像，这样我们就可以简单的在着色器中使用了。
创建一个帧缓冲的纹理和创建普通纹理差不多：
GLuint texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 800, 600, 0, GL_RGB, GL_UNSIGNED_BYTE, NULL);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
这里主要的区别是我们把纹理的维度设置为屏幕大小（尽管不是必须的），我们还传递NULL作为纹理的data参数。对于这个纹理，我们只分配内存，而不去填充它。纹理填充会在渲染到帧缓冲的时候去做。如果你打算把整个屏幕渲染到一个或大或小的纹理上，你需要用新的纹理的尺寸作为参数再次调用glViewport（要在渲染到你的帧缓冲之前做好），否则只有一小部分纹理或屏幕能够绘制到纹理上。现在我们已经创建了一个纹理，最后一件要做的事情是把它附加到帧缓冲上：
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0,GL_TEXTURE_2D, texture, 0);
glFramebufferTexture2D函数需要传入下列参数：
- target：我们所创建的帧缓冲类型的目标（绘制、读取或两者都有）。
- attachment：我们所附加的附件的类型。现在我们附加的是一个颜色附件。需要注意，最后的那个0是暗示我们可以附加1个以上颜色的附件。
- textarget：你希望附加的纹理类型。
- texture：附加的实际纹理。
- level：Mipmap level。我们设置为0。
除颜色附件以外，我们还可以附加一个深度和一个模板纹理到帧缓冲对象上。为了附加一个深度缓冲，我们可以知道那个GL_DEPTH_ATTACHMENT作为附件类型。记住，这时纹理格式和内部格式类型（internalformat）就成了GL_DEPTH_COMPONENT去反应深度缓冲的存储格式。附加一个模板缓冲，你要使用GL_STENCIL_ATTACHMENT作为第二个参数，把纹理格式指定为GL_STENCIL_INDEX。
也可以同时附加一个深度缓冲和一个模板缓冲为一个单独的纹理，这样纹理的每32位数值就包含了24位的深度信息和8位的模板信息。为了把一个深度和模板缓冲附加到一个单独纹理上，我们使用GL_DEPTH_STENCIL_ATTACHMENT类型配置纹理格式以包含深度值和模板值的结合物。下面是一个附加了深度和模板缓冲为单一纹理的例子：
glTexImage2D( GL_TEXTURE_2D, 0, GL_DEPTH24_STENCIL8, 800, 600, 0, GL_DEPTH_STENCIL, GL_UNSIGNED_INT_24_8, NULL );
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_DEPTH_STENCIL_ATTACHMENT, GL_TEXTURE_2D, texture, 0);
OpenGL引进了渲染缓冲对象(Renderbuffer objects)，所以在过去那些美好时光里纹理是附件的唯一可用的类型。和纹理图像一样，渲染缓冲对象也是一个缓冲，它可以是一堆字节、整数、像素或者其他东西。渲染缓冲对象的一大优点是，它以OpenGL原生渲染格式储存它的数据，因此在离屏渲染到帧缓冲的时候，这些数据就相当于被优化过的了。
渲染缓冲对象将所有渲染数据直接储存到它们的缓冲里，而不会进行针对特定纹理格式的任何转换，这样它们就成了一种快速可写的存储介质了。然而，渲染缓冲对象通常是只写的，不能修改它们（就像获取纹理，不能写入纹理一样）。可以用glReadPixels函数去读取，函数返回一个当前绑定的帧缓冲的特定像素区域，而不是直接返回附件本身。
因为它们的数据已经是原生格式了，在写入或把它们的数据简单地到其他缓冲的时候非常快。当使用渲染缓冲对象时，像切换缓冲这种操作变得异常高速。我们在每个渲染迭代末尾使用的那个glfwSwapBuffers函数，同样以渲染缓冲对象实现：我们简单地写入到一个渲染缓冲图像，最后交换到另一个里。渲染缓冲对象对于这种操作来说很完美。
创建一个渲染缓冲对象和创建帧缓冲代码差不多：
GLuint rbo;
glGenRenderbuffers(1, &rbo);
相似地，我们打算把渲染缓冲对象绑定，这样所有后续渲染缓冲操作都会影响到当前的渲染缓冲对象：
glBindRenderbuffer(GL_RENDERBUFFER, rbo);
由于渲染缓冲对象通常是只写的，它们经常作为深度和模板附件来使用，由于大多数时候，我们不需要从深度和模板缓冲中读取数据，但仍关心深度和模板测试。我们就需要有深度和模板值提供给测试，但不需要对这些值进行采样（sample），所以深度缓冲对象是完全符合的。当我们不去从这些缓冲中采样的时候，渲染缓冲对象通常很合适，因为它们等于是被优化过的。
调用glRenderbufferStorage函数可以创建一个深度和模板渲染缓冲对象：
glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH24_STENCIL8, 800, 600);
创建一个渲染缓冲对象与创建纹理对象相似，不同之处在于这个对象是专门被设计用于图像的，而不是通用目的的数据缓冲，比如纹理。这里我们选择GL_DEPTH24_STENCIL8作为内部格式，它同时代表24位的深度和8位的模板缓冲。
最后一件还要做的事情是把帧缓冲对象附加上：
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_STENCIL_ATTACHMENT, GL_RENDERBUFFER, rbo);
在帧缓冲项目中，渲染缓冲对象可以提供一些优化，但更重要的是知道何时使用渲染缓冲对象，何时使用纹理。通常的规则是，如果你永远都不需要从特定的缓冲中进行采样，渲染缓冲对象对特定缓冲是更明智的选择。如果哪天需要从比如颜色或深度值这样的特定缓冲采样数据的话，你最好还是使用纹理附件。从执行效率角度考虑，它不会对效率有太大影响。
下面通过案例的方式介绍如何使用帧缓存，我们会把场景渲染到一个颜色纹理上，这个纹理附加到一个我们创建的帧缓冲上，然后把纹理绘制到一个简单的四边形上，这个四边形铺满整个屏幕。输出的图像看似和没用帧缓冲一样，但是这次，它其实是直接打印到了一个单独的四边形上面。
第一件要做的事情是创建一个帧缓冲对象，并绑定它，这比较明了：
GLuint framebuffer;
glGenFramebuffers(1, &framebuffer);
glBindFramebuffer(GL_FRAMEBUFFER, framebuffer);
第二件要做的事情是我们创建一个纹理图像，这是我们将要附加到帧缓冲的颜色附件。我们把纹理的尺寸设置为窗口的宽度和高度，并保持数据未初始化：
// Generate texture
GLuint texColorBuffer;
glGenTextures(1, &texColorBuffer);
glBindTexture(GL_TEXTURE_2D, texColorBuffer);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 800, 600, 0, GL_RGB, GL_UNSIGNED_BYTE, NULL);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glBindTexture(GL_TEXTURE_2D, 0);
// Attach it to currently bound framebuffer object
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, texColorBuffer, 0);
我们同样打算要让OpenGL确定可以进行深度测试（模板测试，如果你用的话）所以我们必须还要确保向帧缓冲中添加一个深度（和模板）附件。由于我们只采样颜色缓冲，并不采样其他缓冲，我们可以创建一个渲染缓冲对象来达到这个目的。创建一个渲染缓冲对象不太难。唯一一件要记住的事情是，我们正在创建的是一个渲染缓冲对象的深度和模板附件。我们把它的内部给事设置为GL_DEPTH24_STENCIL8，对于我们的目的来说这个精确度已经足够了。
GLuint rbo;
glGenRenderbuffers(1, &rbo);
glBindRenderbuffer(GL_RENDERBUFFER, rbo);
glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH24_STENCIL8, 800, 600);
glBindRenderbuffer(GL_RENDERBUFFER, 0);
我们为渲染缓冲对象分配了足够的内存空间以后，我们可以解绑渲染缓冲。接着，在做好帧缓冲之前，还有最后一步，我们把渲染缓冲对象附加到帧缓冲的深度和模板附件上：
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_STENCIL_ATTACHMENT, GL_RENDERBUFFER, rbo);
然后我们要检查帧缓冲是否真的做好了，如果没有，我们就打印一个错误消息。
if(glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE)
cout << "ERROR::FRAMEBUFFER:: Framebuffer is not complete!" << endl;
glBindFramebuffer(GL_FRAMEBUFFER, 0);
还要保证解绑帧缓冲，这样我们才不会意外渲染到错误的帧缓冲上。现在帧缓冲做好了，我们要做的全部就是渲染到帧缓冲上，而不是绑定到帧缓冲对象的默认缓冲。余下所有命令会影响到当前绑定的帧缓冲上。所有深度和模板操作同样会从当前绑定的帧缓冲的深度和模板附件中读取，当然，得是在它们可用的情况下。如果你遗漏了比如深度缓冲，所有深度测试就不会工作，因为当前绑定的帧缓冲里没有深度缓冲。
所以，为把场景绘制到一个单独的纹理，我们必须以下面步骤来做：
- 使用新的绑定为激活帧缓冲的帧缓冲，像往常那样渲染场景。
- 绑定到默认帧缓冲。
- 绘制一个四边形，让它平铺到整个屏幕上，用新的帧缓冲的颜色缓冲作为他的纹理。
为了绘制四边形我们将会创建新的着色器。顶点着色器看起来像这样：
#version 330 core
layout (location = 0) in vec2 position;
layout (location = 1) in vec2 texCoords;
out vec2 TexCoords;
void main()
{
gl_Position = vec4(position.x, position.y, 0.0f, 1.0f);
TexCoords = texCoords;
}
片段着色器更简洁，因为我们做的唯一一件事是从纹理采样：
#version 330 core
in vec2 TexCoords;
out vec4 color;
uniform sampler2D screenTexture;
void main()
{
color = texture(screenTexture, TexCoords);
}
接着需要你为屏幕上的四边形创建和配置一个VAO。渲染迭代中帧缓冲处理会有下面的结构：
// First pass
glBindFramebuffer(GL_FRAMEBUFFER, framebuffer);
glClearColor(0.1f, 0.1f, 0.1f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); // We're not using stencil buffer now
glEnable(GL_DEPTH_TEST);
DrawScene();
// Second pass
glBindFramebuffer(GL_FRAMEBUFFER, 0); // back to default
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
screenShader.Use();
glBindVertexArray(quadVAO);
glDisable(GL_DEPTH_TEST);
glBindTexture(GL_TEXTURE_2D, textureColorbuffer);
glDrawArrays(GL_TRIANGLES, 0, 6);
glBindVertexArray(0);
第一，由于我们用的每个帧缓冲都有自己的一系列缓冲，我们打算使用glClear设置的合适的位（bits）来清空这些缓冲。
第二，当渲染四边形的时候，我们关闭深度测试，因为我们不关系深度测试，我们绘制的是一个简单的四边形；当我们绘制普通场景时我们必须再次开启深度测试。
上述案例实现得出的结果是可以自由的获取渲染场景中的任何像素，其实就是把它作为一个纹理图像。接下来利用帧缓冲实现我们游戏中经常使用的后处理效果，比如游戏中颜色的反相处理，就是把颜色值取反。这个在片段着色器中处理即可，在片段着色器里返回这些颜色的反色(Inversion)并不难。我们得到屏幕纹理的颜色，然后用1.0减去它：
void main()
{
color = vec4(vec3(1.0 - texture(screenTexture, TexCoords)), 1.0);
}
以上就是关于帧缓冲的介绍，它主要的作用是可以获取到场景像素，后处理就是对场景像素作渲染处理的，所以该技术广泛的被应用在后处理开发中。
FBO离屏渲染
所谓的FBO就是Frame Buffer Object。FBO可以让我们的渲染不渲染到屏幕上，而是渲染到离屏Buffer中。比如我们需要处理一张图片，在上传时增加时间的水印，这个时候不需要显示出来的。再比如我们需要对摄像头采集的数据，一个彩色原大小的显示出来，一个黑白的长宽各一半录制成视频。
图像直接渲染到屏幕上的步骤：
- 编写Shader。
- 创建GL环境，直接使用GLSurfaceView，GLSurfaceView内部实现了创建GL环境。
- GL环境创建后，编译Shader，创建GL Program。获取可用Texture，设置渲染参数。（onSurfaceCreated中）
- 设置ViewPort。（onSurfaceChanged中）
- 清屏（onDrawFrame中）
- 启用必要的属性，useProgram，绑定纹理，传入参数（顶点坐标、纹理坐标、变换矩阵等）。（onDrawFrame中）
- 绘制。（onDrawFrame中）
- 下一帧数据，requestRender，再一次从第5步开始执行。
FBO离屏渲染我们需要改动的地方为：
- 获取可用的Texture，不再只获取一个，针对我们假设的需求可以获取两个。一个是作为数据源的texture，另外一个是用来作为输出图像的texture，这时候这个texture相当于是一块还没画东西的画布。获取一个可用的FrameBuffer,方法名和获取可用Texture类似，为glGenFrameBuffers。
- 绘制前先绑定FrameBuffer、RenderBuffer、Texture，并将RenderBuffer和Texture挂载到FrameBuffer上。
纹理的使用通常为：在GL线程创建成功后，在GL线程中生成纹理，并设置纹理参数，然后在渲染时启用纹理，绑定纹理，并将纹理传入Shader（告诉Shader，采样器是哪个）。
OpenGL生成纹理，其实是从未被使用的“纹理堆”（姑且这样理解吧）中获取指定个数的纹理，这些纹理不一定是连续的。生成纹理的方法为GLES20.glGenTextures(int size,int[] textures,int start),其C函数为void glGenTextures(GLsizei n,GLuint * textures);。Android版的第一个参数为需要的纹理数，第二个参数为存储获得的纹理ID的数组，第三个参数为数组的起始位置。 gl的命名很有规律，类似于生成纹理的还有生成FrameBuffer的GLES20.glGenFrameBuffers、生成RenderBuffer的GLES20.glGenRenderBuffers等待。
glTexParameteri和glTexParameterf为纹理过滤设置函数，设置纹理参数前需要先绑定纹理，让GPU明白需要设置的是哪个纹理，绑定纹理的方法为GLES20.glBindTexture(int target,int texture)使用示例如下：
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, texture[0]);
//设置缩小过滤为使用纹理中坐标最接近的一个像素的颜色作为需要绘制的像素颜色
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER,GLES20.GL_NEAREST);
//设置放大过滤为使用纹理中坐标最接近的若干个颜色，通过加权平均算法得到需要绘制的像素颜色
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER,GLES20.GL_LINEAR);
//设置环绕方向S，截取纹理坐标到[1/2n,1-1/2n]。将导致永远不会与border融合
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S,GLES20.GL_CLAMP_TO_EDGE);
//设置环绕方向T，截取纹理坐标到[1/2n,1-1/2n]。将导致永远不会与border融合
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T,GLES20.GL_CLAMP_TO_EDGE);
以上为2D纹理GLES20.GL_TEXTURE_2D的绑定和参数设置，如果是相机，我们通常使用的是扩展纹理GLES11Ext.GL_TEXTURE_EXTERNAL_OES。
我们在使用纹理时，一般需要用GLES20.glActiveTexture指明启用的纹理单元，说启用其实也不太合适，GLES20.glActiveTexture并不是激活纹理单元，而是选择当前活跃的纹理单元。默认情况下当前活跃的纹理单元为GLES20.GL_TEXTURE0。使用示例如下：
//激活纹理单元1
GLES20.glActiveTexture(GLES20.GL_TEXTURE1);
//绑定2D纹理
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D,getTextureId());
//将纹理设置给Shader
GLES20.glUniform1i(mHTexture,1);
Frame Buffer和Render Buffer
Frame Buffer Object（FBO）即为帧缓冲对象，用于离屏渲染缓冲。相对于其它同类技术，如数据拷贝或交换缓冲区等，使用FBO技术会更高效并且更容易实现。而且FBO不受窗口大小限制。FBO可以包含许多颜色缓冲区，可以同时从一个片元着色器写入。FBO是一个容器，自身不能用于渲染，需要与一些可渲染的缓冲区绑定在一起，像纹理或者渲染缓冲区。 Render Buffer Object（RBO）即为渲染缓冲对象，分为color buffer(颜色)、depth buffer(深度)、stencil buffer(模板)。 在使用FBO做离屏渲染时，可以只绑定纹理，也可以只绑定Render Buffer，也可以都绑定或者绑定多个，视使用场景而定。如只是对一个图像做变色处理等，只绑定纹理即可。如果需要往一个图像上增加3D的模型和贴纸，则一定还要绑定depth Render Buffer。 同Texture使用一样，FrameBuffer使用也需要调用GLES20.glGenFrameBuffers生成FrameBuffer，然后在需要使用的时候调用GLES20.glBindFrameBuffer。
Frame Buffer只与Texture绑定
FrameBuffer的创建，Texture的创建及参数设置，代码如下：
GLES20.glGenFramebuffers(1, fFrame, 0);
GLES20.glGenTextures(2, textures, start);
for (int i = 0; i < 2; i++) {
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textures[i]);
GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0,gl_format, width, height,
0, gl_format, GLES20.GL_UNSIGNED_BYTE, null);
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER,GLES20.GL_NEAREST);
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER,GLES20.GL_LINEAR);
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S,GLES20.GL_CLAMP_TO_EDGE);
GLES20.glTexParameterf(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T,GLES20.GL_CLAMP_TO_EDGE);
}
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D,0);
创建完毕后，在渲染时使用：
//绑定FrameBuffer
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fFrame[0]);
//为FrameBuffer挂载Texture[1]来存储颜色
GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0,
GLES20.GL_TEXTURE_2D, textures[1], 0);
//绑定FrameBuffer后的绘制会绘制到textures[1]上了
GLES20.glViewport(0,0,w,h);
mFilter.draw();
//解绑FrameBuffer
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER,0);
Frame Buffer与Texture、Render Buffer绑定
有时候只绑定纹理并不能满足我们的要求，当我们需要深度的时候，还需要绑定Render Buffer。在绑定纹理的基础上再绑定RenderBuffer其实也就比较简单了。首先使用前还是先生成RenderBuffer，并为RenderBuffer建立数据存储的格式和渲染对象的尺寸:
//生成Render Buffer
GLES20.glGenRenderbuffers(1,fRender,0);
//绑定Render Buffer
GLES20.glBindRenderbuffer(GLES20.GL_RENDERBUFFER,fRender[0]);
//设置为深度的Render Buffer，并传入大小
GLES20.glRenderbufferStorage(GLES20.GL_RENDERBUFFER,GLES20.GL_DEPTH_COMPONENT16,
width, height);
//为FrameBuffer挂载fRender[0]来存储深度
GLES20.glFramebufferRenderbuffer(GLES20.GL_FRAMEBUFFER, GLES20.GL_DEPTH_ATTACHMENT,
GLES20.GL_RENDERBUFFER, fRender[0]);
//解绑Render Buffer
GLES20.glBindRenderbuffer(GLES20.GL_RENDERBUFFER,0);
然后渲染时，增加深度绑定和解绑：
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, frameBufferId);
GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0,
GLES20.GL_TEXTURE_2D, textureId, 0);
//为FrameBuffer挂载fRender[0]来存储深度
GLES20.glFramebufferRenderbuffer(GLES20.GL_FRAMEBUFFER, GLES20.GL_DEPTH_ATTACHMENT,
GLES20.GL_RENDERBUFFER, fRender[0]);
GLES20.glViewport(0,0,width,height);
mFilter.draw();
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER,0);
//解绑Render Buffer
GLES20.glBindRenderbuffer(GLES20.GL_RENDERBUFFER,0);
不管是FrameBuffer、RenderBuffer还是Texture不再使用时，都应该删除掉，删除的方法类似：
//删除Render Buffer
GLES20.glDeleteRenderbuffers(1, fRender, 0);
//删除Frame Buffer
GLES20.glDeleteFramebuffers(1, fFrame, 0);
//删除纹理
GLES20.glDeleteTextures(1, fTexture, 0);
为什么要用FBO
我们需要对纹理进行多次渲染采样时，而这些渲染采样是不需要展示给用户看的，所以我们就可以用一个单独的缓冲对象（离屏渲染）来存储我们的这几次渲染采样的结果，等处理完后才显示到窗口上。提高渲染效率，避免闪屏，可以很方便的实现纹理共享等。
渲染方式
- 渲染到纹理（Texture）- 图像渲染
- 渲染到缓冲区（Render）- 深度测试和模板测试
FBO纹理的坐标系
渲染到纹理
创建FBO的步骤:
//1. 创建FBO
int[] fbos = new int[1];
GLES20.glGenFramebuffers(1, fbos, 0);
fboId = fbos[0];
//2. 绑定FBO
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fboId);
//3. 创建FBO纹理
fboTextureId = createTexture();
//4. 把纹理绑定到FBO
GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0,GLES20.GL_TEXTURE_2D, fboTextureId, 0);
//5. 设置FBO分配内存大小
GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA,bitmap.getWidth(), bitmap.getHeight(),0, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, null);
//6. 检测是否绑定从成功
if (GLES20.glCheckFramebufferStatus(GLES20.GL_FRAMEBUFFER)!= GLES20.GL_FRAMEBUFFER_COMPLETE) {
Log.e("zzz", "glFramebufferTexture2D error");
}
//7. 解绑纹理和FBO
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
使用FBO的步骤:
//1. 绑定fbo
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fboId);
//2. FBO绘制
GLES20.glUseProgram(program);
//绑定渲染纹理
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, imageTextureId);
//...
//解绑纹理
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
//解绑fbo
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
//3. 根据绑定到fbo上的纹理id，渲染
GLES20.glUseProgram(program);
//绑定渲染纹理
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureId);
示例代码如下:
import android.content.Context;
import android.graphics.BitmapFactory;
import android.opengl.GLES20;
public class TexureRender implements EglSurfaceView.Renderer {
private BitmapFboTexture bitmapFboTexture;
private BitmapRenderTexture bitmapRenderTexture;
public TexureRender(Context context) {
bitmapFboTexture = new BitmapFboTexture(context);
bitmapFboTexture.setBitmap(BitmapFactory.decodeResource(context.getResources(),R.mipmap.bg));
bitmapRenderTexture = new BitmapRenderTexture(context);
}
@Override
public void onSurfaceCreated() {
bitmapFboTexture.onSurfaceCreated();
bitmapRenderTexture.onSurfaceCreated();
}
@Override
public void onSurfaceChanged(int width, int height) {
//宽高
GLES20.glViewport(0, 0, width, height);
bitmapFboTexture.onSurfaceChanged(width, height);
bitmapRenderTexture.onSurfaceChanged(width, height);
}
@Override
public void onDrawFrame() {
//清空颜色
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
//设置背景颜色
GLES20.glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
//FBO处理
bitmapFboTexture.draw();
//通过FBO处理之后，拿到纹理id，然后渲染
bitmapRenderTexture.draw(bitmapFboTexture.getFboTextureId());
}
}
import android.content.Context;
import android.graphics.Bitmap;
import android.opengl.GLES20;
import android.opengl.GLUtils;
import android.util.Log;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
//纹理 根据坐标系映射
public class BitmapFboTexture {
//顶点坐标
static float vertexData[] = { // in counterclockwise order:
-1f, -1f, 0.0f, // bottom left
1f, -1f, 0.0f, // bottom right
-1f, 1f, 0.0f, // top left
1f, 1f, 0.0f, // top right
};
//正常纹理坐标 对应顶点坐标 与之映射
// static float textureData[] = { // in counterclockwise order:
// 0f, 1f, 0.0f, // bottom left
// 1f, 1f, 0.0f, // bottom right
// 0f, 0f, 0.0f, // top left
// 1f, 0f, 0.0f, // top right
// };
//fbo 纹理坐标
static float textureData[] = { // in counterclockwise order:
0f, 0f, 0.0f, // bottom left
1f, 0f, 0.0f, // bottom right
0f, 1f, 0.0f, // top left
1f, 1f, 0.0f, // top right
};
//每一次取点的时候取几个点
static final int COORDS_PER_VERTEX = 3;
private final int vertexCount = vertexData.length / COORDS_PER_VERTEX;
//每一次取的总的点 大小
private final int vertexStride = COORDS_PER_VERTEX * 4; // 4 bytes per vertex
private Context context;
//位置
private FloatBuffer vertexBuffer;
//纹理
private FloatBuffer textureBuffer;
private int program;
private int avPosition;
//纹理位置
private int afPosition;
//需要渲染的纹理id
private int imageTextureId;
//fbo纹理id
private int fboTextureId;
//fbo Id
private int fboId;
private Bitmap bitmap;
public void setBitmap(Bitmap bitmap) {
this.bitmap = bitmap;
}
public BitmapFboTexture(Context context) {
this.context = context;
vertexBuffer = ByteBuffer.allocateDirect(vertexData.length * 4)
.order(ByteOrder.nativeOrder())
.asFloatBuffer()
.put(vertexData);
vertexBuffer.position(0);
textureBuffer = ByteBuffer.allocateDirect(textureData.length * 4)
.order(ByteOrder.nativeOrder())
.asFloatBuffer()
.put(textureData);
textureBuffer.position(0);
}
public void onSurfaceCreated() {
String vertexSource = ShaderUtil.readRawTxt(context, R.raw.vertex_shader);
String fragmentSource = ShaderUtil.readRawTxt(context, R.raw.fragment_shader);
program = ShaderUtil.createProgram(vertexSource, fragmentSource);
if (program > 0) {
//获取顶点坐标字段
avPosition = GLES20.glGetAttribLocation(program, "av_Position");
//获取纹理坐标字段
afPosition = GLES20.glGetAttribLocation(program, "af_Position");
createFBO();
imageTextureId = createImageTexture();
}
}
public void draw() {
//绑定fbo
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fboId);
//使用程序
GLES20.glUseProgram(program);
//绑定渲染纹理
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, imageTextureId);
GLES20.glEnableVertexAttribArray(avPosition);
GLES20.glEnableVertexAttribArray(afPosition);
//设置顶点位置值
GLES20.glVertexAttribPointer(avPosition, COORDS_PER_VERTEX, GLES20.GL_FLOAT, false, vertexStride, vertexBuffer);
//设置纹理位置值
GLES20.glVertexAttribPointer(afPosition, COORDS_PER_VERTEX, GLES20.GL_FLOAT, false, vertexStride, textureBuffer);
//绘制 GLES20.GL_TRIANGLE_STRIP:复用坐标
GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, vertexCount);
GLES20.glDisableVertexAttribArray(avPosition);
GLES20.glDisableVertexAttribArray(afPosition);
//解绑纹理
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
//解绑fbo
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
}
private void createFBO() {
if (bitmap == null) {
throw new IllegalArgumentException("bitmap is null");
}
//1. 创建FBO
int[] fbos = new int[1];
GLES20.glGenFramebuffers(1, fbos, 0);
fboId = fbos[0];
//2. 绑定FBO
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, fboId);
//3. 创建FBO纹理
fboTextureId = createTexture();
//4. 把纹理绑定到FBO
GLES20.glFramebufferTexture2D(GLES20.GL_FRAMEBUFFER, GLES20.GL_COLOR_ATTACHMENT0,
GLES20.GL_TEXTURE_2D, fboTextureId, 0);
//5. 设置FBO分配内存大小
GLES20.glTexImage2D(GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, bitmap.getWidth(), bitmap.getHeight(),
0, GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, null);
//6. 检测是否绑定从成功
if (GLES20.glCheckFramebufferStatus(GLES20.GL_FRAMEBUFFER)
!= GLES20.GL_FRAMEBUFFER_COMPLETE) {
Log.e("zzz", "glFramebufferTexture2D error");
}
//7. 解绑纹理和FBO
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
}
private int createImageTexture() {
int[] textureIds = new int[1];
//创建纹理
GLES20.glGenTextures(1, textureIds, 0);
if (textureIds[0] == 0) {
return 0;
}
//绑定纹理
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureIds[0]);
//环绕（超出纹理坐标范围） （s==x t==y GL_REPEAT 重复）
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_REPEAT);
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_REPEAT);
//过滤（纹理像素映射到坐标点） （缩小、放大：GL_LINEAR线性）
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);
//测试图片
GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);
//解绑纹理
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
return textureIds[0];
}
private int createTexture() {
int[] textureIds = new int[1];
//创建纹理
GLES20.glGenTextures(1, textureIds, 0);
if (textureIds[0] == 0) {
return 0;
}
//绑定纹理
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureIds[0]);
//环绕（超出纹理坐标范围） （s==x t==y GL_REPEAT 重复）
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_REPEAT);
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_REPEAT);
//过滤（纹理像素映射到坐标点） （缩小、放大：GL_LINEAR线性）
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR);
GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR);
return textureIds[0];
}
public int getFboTextureId() {
return fboTextureId;
}
public void onSurfaceChanged(int width, int height) {
}
}
import android.content.Context;
import android.opengl.GLES20;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
//纹理 根据坐标系映射
public class BitmapRenderTexture {
//顶点坐标
static float vertexData[] = { // in counterclockwise order:
-1f, -1f, 0.0f, // bottom left
1f, -1f, 0.0f, // bottom right
-1f, 1f, 0.0f, // top left
1f, 1f, 0.0f, // top right
};
//纹理坐标 对应顶点坐标 与之映射
static float textureData[] = { // in counterclockwise order:
0f, 1f, 0.0f, // bottom left
1f, 1f, 0.0f, // bottom right
0f, 0f, 0.0f, // top left
1f, 0f, 0.0f, // top right
};
//每一次取点的时候取几个点
static final int COORDS_PER_VERTEX = 3;
private final int vertexCount = vertexData.length / COORDS_PER_VERTEX;
//每一次取的总的点 大小
private final int vertexStride = COORDS_PER_VERTEX * 4; // 4 bytes per vertex
private Context context;
//位置
private FloatBuffer vertexBuffer;
//纹理
private FloatBuffer textureBuffer;
private int program;
private int avPosition;
//纹理位置
private int afPosition;
public BitmapRenderTexture(Context context) {
this.context = context;
vertexBuffer = ByteBuffer.allocateDirect(vertexData.length * 4)
.order(ByteOrder.nativeOrder())
.asFloatBuffer()
.put(vertexData);
vertexBuffer.position(0);
textureBuffer = ByteBuffer.allocateDirect(textureData.length * 4)
.order(ByteOrder.nativeOrder())
.asFloatBuffer()
.put(textureData);
textureBuffer.position(0);
}
public void onSurfaceCreated() {
String vertexSource = ShaderUtil.readRawTxt(context, R.raw.vertex_shader);
String fragmentSource = ShaderUtil.readRawTxt(context, R.raw.fragment_shader);
program = ShaderUtil.createProgram(vertexSource, fragmentSource);
if (program > 0) {
//获取顶点坐标字段
avPosition = GLES20.glGetAttribLocation(program, "av_Position");
//获取纹理坐标字段
afPosition = GLES20.glGetAttribLocation(program, "af_Position");
}
}
public void draw(int textureId) {
//使用程序
GLES20.glUseProgram(program);
//绑定渲染纹理
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, textureId);
GLES20.glEnableVertexAttribArray(avPosition);
GLES20.glEnableVertexAttribArray(afPosition);
//设置顶点位置值
GLES20.glVertexAttribPointer(avPosition, COORDS_PER_VERTEX, GLES20.GL_FLOAT, false, vertexStride, vertexBuffer);
//设置纹理位置值
GLES20.glVertexAttribPointer(afPosition, COORDS_PER_VERTEX, GLES20.GL_FLOAT, false, vertexStride, textureBuffer);
//绘制 GLES20.GL_TRIANGLE_STRIP:复用坐标
GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, vertexCount);
GLES20.glDisableVertexAttribArray(avPosition);
GLES20.glDisableVertexAttribArray(afPosition);
//解绑纹理
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, 0);
}
public void onSurfaceChanged(int width, int height) {
GLES20.glViewport(0, 0, width, height);
}
}
着色器代码
顶点着色器如下：
#version 300 es
layout(location=0) in vec4 aPosition;
layout(location=1) in vec4 aTexCoord;
uniform mat4 mMatrix;
out vec2 vTexCoord;
void main() {
vTexCoord = (mMatrix * aTexCoord).xy;
gl_Position = aPosition;
}
片段着色器如下：
#version 300 es
#extension GL_OES_EGL_image_external_essl3 : require
precision highp float;
in highp vec2 vTexCoord;
uniform samplerExternalOES sTexture;
uniform highp vec2 singleStepOffset;
uniform highp vec4 params;
uniform highp float brightness;
const highp vec3 W = vec3(0.299, 0.587, 0.114);
const highp mat3 saturateMatrix = mat3(
1.1102, -0.0598, -0.061,
-0.0774, 1.0826, -0.1186,
-0.0228, -0.0228, 1.1772);
highp vec2 blurCoordinates[24];
highp float hardLight(highp float color) {
if (color <= 0.5)
color = color * color * 2.0;
else
color = 1.0 - ((1.0 - color)*(1.0 - color) * 2.0);
return color;
}
layout(location=0) out vec4 fragColor;
void main() {
highp vec3 centralColor = texture(sTexture, vTexCoord).rgb;
blurCoordinates[0] = vTexCoord.xy + singleStepOffset * vec2(0.0, -10.0);
blurCoordinates[1] = vTexCoord.xy + singleStepOffset * vec2(0.0, 10.0);
blurCoordinates[2] = vTexCoord.xy + singleStepOffset * vec2(-10.0, 0.0);
blurCoordinates[3] = vTexCoord.xy + singleStepOffset * vec2(10.0, 0.0);
blurCoordinates[4] = vTexCoord.xy + singleStepOffset * vec2(5.0, -8.0);
blurCoordinates[5] = vTexCoord.xy + singleStepOffset * vec2(5.0, 8.0);
blurCoordinates[6] = vTexCoord.xy + singleStepOffset * vec2(-5.0, 8.0);
blurCoordinates[7] = vTexCoord.xy + singleStepOffset * vec2(-5.0, -8.0);
blurCoordinates[8] = vTexCoord.xy + singleStepOffset * vec2(8.0, -5.0);
blurCoordinates[9] = vTexCoord.xy + singleStepOffset * vec2(8.0, 5.0);
blurCoordinates[10] = vTexCoord.xy + singleStepOffset * vec2(-8.0, 5.0);
blurCoordinates[11] = vTexCoord.xy + singleStepOffset * vec2(-8.0, -5.0);
blurCoordinates[12] = vTexCoord.xy + singleStepOffset * vec2(0.0, -6.0);
blurCoordinates[13] = vTexCoord.xy + singleStepOffset * vec2(0.0, 6.0);
blurCoordinates[14] = vTexCoord.xy + singleStepOffset * vec2(6.0, 0.0);
blurCoordinates[15] = vTexCoord.xy + singleStepOffset * vec2(-6.0, 0.0);
blurCoordinates[16] = vTexCoord.xy + singleStepOffset * vec2(-4.0, -4.0);
blurCoordinates[17] = vTexCoord.xy + singleStepOffset * vec2(-4.0, 4.0);
blurCoordinates[18] = vTexCoord.xy + singleStepOffset * vec2(4.0, -4.0);
blurCoordinates[19] = vTexCoord.xy + singleStepOffset * vec2(4.0, 4.0);
blurCoordinates[20] = vTexCoord.xy + singleStepOffset * vec2(-2.0, -2.0);
blurCoordinates[21] = vTexCoord.xy + singleStepOffset * vec2(-2.0, 2.0);
blurCoordinates[22] = vTexCoord.xy + singleStepOffset * vec2(2.0, -2.0);
blurCoordinates[23] = vTexCoord.xy + singleStepOffset * vec2(2.0, 2.0);
highp float sampleColor = centralColor.g * 22.0;
sampleColor += texture(sTexture, blurCoordinates[0]).g;
sampleColor += texture(sTexture, blurCoordinates[1]).g;
sampleColor += texture(sTexture, blurCoordinates[2]).g;
sampleColor += texture(sTexture, blurCoordinates[3]).g;
sampleColor += texture(sTexture, blurCoordinates[4]).g;
sampleColor += texture(sTexture, blurCoordinates[5]).g;
sampleColor += texture(sTexture, blurCoordinates[6]).g;
sampleColor += texture(sTexture, blurCoordinates[7]).g;
sampleColor += texture(sTexture, blurCoordinates[8]).g;
sampleColor += texture(sTexture, blurCoordinates[9]).g;
sampleColor += texture(sTexture, blurCoordinates[10]).g;
sampleColor += texture(sTexture, blurCoordinates[11]).g;
sampleColor += texture(sTexture, blurCoordinates[12]).g * 2.0;
sampleColor += texture(sTexture, blurCoordinates[13]).g * 2.0;
sampleColor += texture(sTexture, blurCoordinates[14]).g * 2.0;
sampleColor += texture(sTexture, blurCoordinates[15]).g * 2.0;
sampleColor += texture(sTexture, blurCoordinates[16]).g * 2.0;
sampleColor += texture(sTexture, blurCoordinates[17]).g * 2.0;
sampleColor += texture(sTexture, blurCoordinates[18]).g * 2.0;
sampleColor += texture(sTexture, blurCoordinates[19]).g * 2.0;
sampleColor += texture(sTexture, blurCoordinates[20]).g * 3.0;
sampleColor += texture(sTexture, blurCoordinates[21]).g * 3.0;
sampleColor += texture(sTexture, blurCoordinates[22]).g * 3.0;
sampleColor += texture(sTexture, blurCoordinates[23]).g * 3.0;
sampleColor = sampleColor / 62.0;
highp float highPass = centralColor.g - sampleColor + 0.5;
for (int i = 0; i < 5; i++) {
highPass = hardLight(highPass);
}
highp float lumance = dot(centralColor, W);
highp float alpha = pow(lumance, params.r);
highp vec3 smoothColor = centralColor + (centralColor-vec3(highPass))*alpha*0.1;
smoothColor.r = clamp(pow(smoothColor.r, params.g), 0.0, 1.0);
smoothColor.g = clamp(pow(smoothColor.g, params.g), 0.0, 1.0);
smoothColor.b = clamp(pow(smoothColor.b, params.g), 0.0, 1.0);
highp vec3 lvse = vec3(1.0)-(vec3(1.0)-smoothColor)*(vec3(1.0)-centralColor);
highp vec3 bianliang = max(smoothColor, centralColor);
highp vec3 rouguang = 2.0*centralColor*smoothColor + centralColor*centralColor - 2.0*centralColor*centralColor*smoothColor;
fragColor = vec4(mix(centralColor, lvse, alpha), 1.0);
fragColor.rgb = mix(fragColor.rgb, bianliang, alpha);
fragColor.rgb = mix(fragColor.rgb, rouguang, params.b);
highp vec3 satcolor = fragColor.rgb * saturateMatrix;
fragColor.rgb = mix(fragColor.rgb, satcolor, params.a);
fragColor.rgb = vec3(fragColor.rgb + vec3(brightness));
}
OpenGL 代码
先创建顶点坐标等数据：
const static GLfloat VERTICES[] = {
-1.0f, 1.0f,
1.0f, 1.0f,
-1.0f, -1.0f,
1.0f, -1.0f
};
const static GLfloat TEX_COORDS[] = {
0.0f, 1.0f,
1.0f, 1.0f,
0.0f, 0.0f,
1.0f, 0.0f
};
const static GLushort INDICES[] = {
0, 1, 2,
1, 2, 3
};
const static GLuint ATTRIB_POSITION = 0;
const static GLuint ATTRIB_TEX_COORD = 1;
const static GLuint VERTEX_POS_SIZE = 2;
const static GLuint INDEX_NUMBER = 6;
const static GLuint TEX_COORD_POS_SIZE = 2;
接着加载着色器、使用 VBO 、VAO 缓存顶点数据：
int Beauty::init(AAssetManager *manager, ANativeWindow *window, int width, int height) {
mWindow = window;
resize(width, height);
if (!mEGLCore->buildContext(window)) {
LOGE("buildContext failed");
return -1;
}
std::string *vShader = readShaderFromAsset(manager, "beauty.vert");
std::string *fShader = readShaderFromAsset(manager, "beauty.frag");
mProgram = loadProgram(vShader->c_str(), fShader->c_str());
if (!mProgram) {
LOGE("loadProgram failed!");
return -1;
}
// 设置默认帧缓冲区纹理
glGenTextures(1, &mTexOes);
glBindTexture(GL_TEXTURE_EXTERNAL_OES, mTexOes);
glTexParameterf(GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameterf(GL_TEXTURE_EXTERNAL_OES, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glBindTexture(GL_TEXTURE_EXTERNAL_OES, 0);
initVbo();
initVao();
initPbo();
mMatrixLoc = glGetUniformLocation(mProgram, "mMatrix");
mTexLoc = glGetUniformLocation(mProgram, "sTexture");
mParamsLoc = glGetUniformLocation(mProgram, "params");
mBrightnessLoc = glGetUniformLocation(mProgram, "brightness");
mSingleStepOffsetLoc = glGetUniformLocation(mProgram, "singleStepOffset");
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
delete vShader;
delete fShader;
return mTexOes;
}
void Beauty::initVbo() {
// 缓存顶点坐标、纹理坐标、索引数据到缓冲区中
glGenBuffers(3, mVboIds);
glBindBuffer(GL_ARRAY_BUFFER, mVboIds[0]);
glBufferData(GL_ARRAY_BUFFER, sizeof(VERTICES), VERTICES, GL_STATIC_DRAW);
glBindBuffer(GL_ARRAY_BUFFER, mVboIds[1]);
glBufferData(GL_ARRAY_BUFFER, sizeof(TEX_COORDS), TEX_COORDS, GL_STATIC_DRAW);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, mVboIds[2]);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(INDICES), INDICES, GL_STATIC_DRAW);
}
void Beauty::initVao() {
glGenVertexArrays(1, &mVao);
// 使用缓冲区的数据设置顶点属性，并绑定至 vao
glBindVertexArray(mVao);
glBindBuffer(GL_ARRAY_BUFFER, mVboIds[0]);
glEnableVertexAttribArray(ATTRIB_POSITION);
glVertexAttribPointer(ATTRIB_POSITION, VERTEX_POS_SIZE, GL_FLOAT, GL_FALSE, 0, 0);
glBindBuffer(GL_ARRAY_BUFFER, mVboIds[1]);
glEnableVertexAttribArray(ATTRIB_TEX_COORD);
glVertexAttribPointer(ATTRIB_TEX_COORD, TEX_COORD_POS_SIZE, GL_FLOAT, GL_FALSE, 0, 0);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, mVboIds[2]);
glBindVertexArray(0);
}
void Beauty::initPbo() {
// 生成 pbo
glGenBuffers(2, mPboIds);
glBindBuffer(GL_PIXEL_PACK_BUFFER, mPboIds[0]);
glBufferData(GL_PIXEL_PACK_BUFFER, mWidth * mHeight * 4, nullptr, GL_DYNAMIC_COPY);
glBindBuffer(GL_PIXEL_PACK_BUFFER, mPboIds[1]);
glBufferData(GL_PIXEL_PACK_BUFFER, mWidth * mHeight * 4, nullptr, GL_DYNAMIC_COPY);
}
然后绘制即可：
void
Beauty::draw(GLfloat *matrix, GLfloat beauty, GLfloat saturate, GLfloat bright, bool recording) {
glViewport(0, 0, mWidth, mHeight);
glClear(GL_COLOR_BUFFER_BIT);
glUseProgram(mProgram);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_EXTERNAL_OES, mTexOes);
glUniform1i(mTexLoc, 0);
glUniformMatrix4fv(mMatrixLoc, 1, GL_FALSE, matrix);
glUniform4fv(mParamsLoc, 1, getParams(beauty, saturate));
glUniform1f(mBrightnessLoc, getBright(bright));
glUniform2fv(mSingleStepOffsetLoc, 1, getSingleStepOffset(mWidth, mHeight));
// 从 vao 中读取数据并渲染
glBindVertexArray(mVao);
glDrawElements(GL_TRIANGLES, INDEX_NUMBER, GL_UNSIGNED_SHORT, 0);
glBindVertexArray(0);
// 下面这段代码块是配合 ffmpeg 使用的，用于将美颜后的图像发送到 ffmpeg 中以录制视频，可以忽略
if (recording) {
int rgbSize = mWidth * mHeight * 4;
glReadBuffer(GL_COLOR_ATTACHMENT0);
glBindBuffer(GL_PIXEL_PACK_BUFFER, mPboIds[mPboReadIndex]);
// 从默认帧缓冲区读取数据到 PBO 中，PBO 可以加快数据传输速度
glReadPixels(0, 0, mWidth, mHeight, GL_RGBA, GL_UNSIGNED_BYTE, 0);
if (mPboMapIndex >= 0) {
glBindBuffer(GL_PIXEL_PACK_BUFFER, mPboIds[mPboMapIndex]);
uint8_t *mapData = (uint8_t *) glMapBufferRange(GL_PIXEL_PACK_BUFFER, 0, rgbSize,
GL_MAP_READ_BIT);
uint8_t *rgb = new uint8_t[rgbSize];
memcpy(rgb, mapData, (size_t) rgbSize);
recordImage(rgb, rgbSize, mWidth, mHeight, PIXEL_FORMAT_ABGR); // ffmpeg 视频录制接口
glUnmapBuffer(GL_PIXEL_PACK_BUFFER);
}
mPboMapIndex = mPboReadIndex;
mPboReadIndex = 1 - mPboReadIndex;
glBindBuffer(GL_PIXEL_PACK_BUFFER, 0);
}
glFlush();
mEGLCore->swapBuffer();
}
GLfloat *Beauty::getParams(const GLfloat beauty, const GLfloat saturate) {
GLfloat *value = new GLfloat[4];
value[0] = 1.6f - 1.2f * beauty;
value[1] = 1.3f - 0.6f * beauty;
value[2] = -0.2f + 0.6f * saturate;
value[3] = -0.2f + 0.6f * saturate;
return value;
}
GLfloat Beauty::getBright(const GLfloat bright) {
return 0.6f * (-0.5f + bright);
}
GLfloat *Beauty::getSingleStepOffset(const GLfloat width, const GLfloat height) {
GLfloat *value = new GLfloat[2];
value[0] = 2.0f / width;
value[1] = 2.0f / height;
return value;
}
Java 代码很简单，只需要一个 SurfaceView，把 OpenGL 返回的纹理 ID 设置给 Camera 以开启预览即可，需要注意的是，更新预览图的代码需要和 OpenGL 运行在主线程之外的同一线程中：
private SurfaceTexture initOpenGL(Surface surface, int width, int height)
throws ExecutionException, InterruptedException {
Future<SurfaceTexture> future = mExecutor.submit(() -> {
AssetManager manager = getContext().getAssets();
int textureId = _init(surface, width, height, manager);
if (textureId < 0) {
Log.e(TAG, "surfaceCreated init OpenGL ES failed!");
mIsBeautyOpen = false;
return null;
}
SurfaceTexture surfaceTexture = new SurfaceTexture(textureId);
surfaceTexture.setOnFrameAvailableListener(surfaceTexture1 -> drawOpenGL());
return surfaceTexture;
});
return future.get();
}
private void drawOpenGL() {
mExecutor.execute(() -> {
if (mSurfaceTexture != null) {
mSurfaceTexture.updateTexImage(); // 必须运行在 OpenGL 线程环境中
mSurfaceTexture.getTransformMatrix(mMatrix);
_draw(mMatrix, mBeautyLevel, mSaturateLevel, mBrightLevel, mIsRecording);
}
});
}
private void releaseOpenGL() {
mExecutor.execute(() -> {
if (mSurfaceTexture != null) {
mSurfaceTexture.release();
mSurfaceTexture = null;
}
_stop();
});
}
"_" 开头的是 native 方法，可以通过 native 接口设置磨皮、饱和度等参数：
private static native int _init(Surface surface, int width, int height, AssetManager manager);
private static native void _draw(float[] matrix, float beauty, float saturate, float bright,
boolean recording);
private static native void _stop();
