这个公众号会路线图式的遍历分享音视频技术：音视频基础 → 音视频工具 → 音视频工程示例 → 音视频工业实战。关注一下成本不高，错过干货损失不小 ↓↓↓
渲染是音视频技术栈相关的一个非常重要的方向，视频图像在设备上的展示、各种流行的视频特效都离不开渲染技术的支持。
在 RenderDemo 这个工程示例系列，我们将为大家展示一些渲染相关的 Demo，来向大家介绍如何在 iOS/Android 平台上手一些渲染相关的开发。
这里是第一篇：用 OpenGL 画一个三角形。我们分别在 iOS 和 Android 实现了用 OpenGL 画一个三角形的 Demo。在本文中，包括如下内容：
- 1）iOS OpenGL 绘制三角形 Demo；
- 2）Android OpenGL 绘制三角形 Demo；
- 3）详尽的代码注释，帮你理解代码逻辑和原理。
如果你想要获得我们所有 Demo 的工程源码，可以在关注本公众号后，在公众号发送消息『AVDemo』来咨询。
在继续阅读下文前，你可能需要对 OpenGL 的基础知识有一些了解，你可以看看这篇文章：OpenGL 基础知识。
如果我们了解了 OpenGL ES 就会知道，虽然它定义了一套移动设备的图像渲染 API，但是并没有定义窗口系统。为了让 GLES 能够适配各种平台，GLES 需要与知道如何通过操作系统创建和访问窗口的库结合使用，这就有了 EGL，EGL 是 OpenGL ES 渲染 API 和本地窗口系统之间的一个中间接口层，它主要由系统制造商实现。EGL 提供如下机制：
- 与设备的原生窗口系统通信；
- 查询绘图表面的可用类型和配置；
- 创建绘图表面；
- 在 OpenGL ES 和其他图形渲染 API 之间同步渲染；
- 管理纹理贴图等渲染资源。
EGL 是 OpenGL ES 与设备的桥梁，以实现让 OpenGL ES 能够在当前设备上进行绘制。
1、iOS Demo
iOS 平台对 EGL 的实现是 EAGL（Embedded Apple Graphics Library），其中 CAEAGLLayer 就是一种可以支持 OpenGL ES 绘制的图层类型，我们的 Demo 里会用它作为绘制三角形的图层。
代码比较简单，我们直接上代码：
DMTriangleRenderView.m
#import "DMTriangleRenderView.h"
#import <OpenGLES/ES2/gl.h>
// 定义顶点的数据结构：包括顶点坐标和颜色维度。
#define PositionDimension 3
#define ColorDimension 4
typedef struct {
GLfloat position[PositionDimension]; // { x, y, z }
GLfloat color[ColorDimension]; // {r, g, b, a}
} SceneVertex;
@interface DMTriangleRenderView ()
@property (nonatomic, assign) GLsizei width;
@property (nonatomic, assign) GLsizei height;
@property (nonatomic, strong) CAEAGLLayer *eaglLayer;
@property (nonatomic, strong) EAGLContext *eaglContext;
@property (nonatomic, assign) GLuint simpleProgram;
@property (nonatomic, assign) GLuint renderBuffer;
@property (nonatomic, assign) GLuint frameBuffer;
@end
@implementation DMTriangleRenderView
#pragma mark - Setup
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
_width = frame.size.width;
_height = frame.size.height;
[self render];
}
return self;
}
#pragma mark - Action
- (void)render {
// 1、设定 layer 的类型。
_eaglLayer = (CAEAGLLayer *) self.layer;
_eaglLayer.opacity = 1.0;
_eaglLayer.drawableProperties = @{kEAGLDrawablePropertyRetainedBacking: @(NO),
kEAGLDrawablePropertyColorFormat: kEAGLColorFormatRGBA8};
// 2、创建 OpenGL 上下文。
EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES2; // 使用的 OpenGL API 的版本。
EAGLContext *context = [[EAGLContext alloc] initWithAPI:api];
if (!context) {
NSLog(@"Create context failed!");
return;
}
BOOL r = [EAGLContext setCurrentContext:context];
if (!r) {
NSLog(@"setCurrentContext failed!");
return;
}
_eaglContext = context;
// 3、申请并绑定渲染缓冲区对象 RBO 用来存储即将绘制到屏幕上的图像数据。
glGenRenderbuffers(1, &_renderBuffer); // 创建 RBO。
glBindRenderbuffer(GL_RENDERBUFFER, _renderBuffer); // 绑定 RBO 到 OpenGL 渲染管线。
[_eaglContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:_eaglLayer]; // 将渲染图层（_eaglLayer）的存储绑定到 RBO。
// 4、申请并绑定帧缓冲区对象 FBO。FBO 本身不能用于渲染，只有绑定了纹理（Texture）或者渲染缓冲区（RBO）等作为附件之后才能作为渲染目标。
glGenFramebuffers(1, &_frameBuffer); // 创建 FBO。
glBindFramebuffer(GL_FRAMEBUFFER, _frameBuffer); // 绑定 FBO 到 OpenGL 渲染管线。
// 将 RBO 绑定为 FBO 的一个附件，绑定后，OpenGL 对 FBO 的绘制会同步到 RBO 后再上屏。
glFramebufferRenderbuffer(GL_FRAMEBUFFER,
GL_COLOR_ATTACHMENT0,
GL_RENDERBUFFER,
_renderBuffer);
// 5、清理窗口颜色，并设置渲染窗口。
glClearColor(0.5, 0.5, 0.5, 1.0); // 设置渲染窗口颜色。这里是灰色。
glClear(GL_COLOR_BUFFER_BIT); // 清空旧渲染缓存。
glViewport(0, 0, _width, _height); // 设置渲染窗口区域。
// 6、加载和编译 shader，并链接到着色器程序。
if (_simpleProgram) {
glDeleteProgram(_simpleProgram);
_simpleProgram = 0;
}
// 加载和编译 shader。
NSString *simpleVSH = [[NSBundle mainBundle] pathForResource:@"simple" ofType:@"vsh"];
NSString *simpleFSH = [[NSBundle mainBundle] pathForResource:@"simple" ofType:@"fsh"];
_simpleProgram = [self loadShaderWithVertexShader:simpleVSH fragmentShader:simpleFSH];
// 链接 shader program。
glLinkProgram(_simpleProgram);
// 打印链接日志。
GLint linkStatus;
glGetProgramiv(_simpleProgram, GL_LINK_STATUS, &linkStatus);
if (linkStatus == GL_FALSE) {
GLint infoLength;
glGetProgramiv(_simpleProgram, GL_INFO_LOG_LENGTH, &infoLength);
if (infoLength > 0) {
GLchar *infoLog = malloc(sizeof(GLchar) * infoLength);
glGetProgramInfoLog(_simpleProgram, infoLength, NULL, infoLog);
NSLog(@"%s", infoLog);
free(infoLog);
}
}
glUseProgram(_simpleProgram);
// 7、根据三角形顶点信息申请顶点缓冲区对象 VBO 和拷贝顶点数据。
// 设置三角形 3 个顶点数据，包括坐标信息和颜色信息。
const SceneVertex vertices[] = {
{{-0.5, 0.5, 0.0}, { 1.0, 0.0, 0.0, 1.000}}, // 左下 // 红色
{{-0.5, -0.5, 0.0}, { 0.0, 1.0, 0.0, 1.000}}, // 右下 // 绿色
{{ 0.5, -0.5, 0.0}, { 0.0, 0.0, 1.0, 1.000}}, // 左上 // 蓝色
};
// 申请并绑定 VBO。VBO 的作用是在显存中提前开辟好一块内存，用于缓存顶点数据，从而避免每次绘制时的 CPU 与 GPU 之间的内存拷贝，可以提升渲染性能。
GLuint vertexBufferID;
glGenBuffers(1, &vertexBufferID); // 创建 VBO。
glBindBuffer(GL_ARRAY_BUFFER, vertexBufferID); // 绑定 VBO 到 OpenGL 渲染管线。
// 将顶点数据 (CPU 内存) 拷贝到 VBO（GPU 显存）。
glBufferData(GL_ARRAY_BUFFER, // 缓存块类型。
sizeof(vertices), // 创建的缓存块尺寸。
vertices, // 要绑定的顶点数据。
GL_STATIC_DRAW); // 缓存块用途。
// 8、绘制三角形。
// 获取与 Shader 中对应的参数信息：
GLuint vertexPositionLocation = glGetAttribLocation(_simpleProgram, "v_position");
GLuint vertexColorLocation = glGetAttribLocation(_simpleProgram, "v_color");
// 顶点位置属性。
glEnableVertexAttribArray(vertexPositionLocation); // 启用顶点位置属性通道。
// 关联顶点位置数据。
glVertexAttribPointer(vertexPositionLocation, // attribute 变量的下标，范围是 [0, GL_MAX_VERTEX_ATTRIBS - 1]。
PositionDimension, // 指顶点数组中，一个 attribute 元素变量的坐标分量是多少（如：position, 程序提供的就是 {x, y, z} 点就是 3 个坐标分量）。
GL_FLOAT, // 数据的类型。
GL_FALSE, // 是否进行数据类型转换。
sizeof(SceneVertex), // 每一个数据在内存中的偏移量，如果填 0 就是每一个数据紧紧相挨着。
(const GLvoid*) offsetof(SceneVertex, position)); // 数据的内存首地址。
// 顶点颜色属性。
glEnableVertexAttribArray(vertexColorLocation);
// 关联顶点颜色数据。
glVertexAttribPointer(vertexColorLocation,
ColorDimension,
GL_FLOAT,
GL_FALSE,
sizeof(SceneVertex),
(const GLvoid*) offsetof(SceneVertex, color));
// 绘制所有图元。
glDrawArrays(GL_TRIANGLES, // 绘制的图元方式。
0, // 从第几个顶点下标开始绘制。
sizeof(vertices) / sizeof(vertices[0])); // 有多少个顶点下标需要绘制。
// 把 Renderbuffer 的内容显示到窗口系统 (CAEAGLLayer) 中。
[_eaglContext presentRenderbuffer:GL_RENDERBUFFER];
// 9、清理。
glDisableVertexAttribArray(vertexColorLocation); // 关闭顶点颜色属性通道。
glDisableVertexAttribArray(vertexPositionLocation); // 关闭顶点位置属性通道。
glBindBuffer(GL_ARRAY_BUFFER, 0); // 解绑 VBO。
glBindFramebuffer(GL_FRAMEBUFFER, 0); // 解绑 FBO。
glBindRenderbuffer(GL_RENDERBUFFER, 0); // 解绑 RBO。
}
#pragma mark - Utility
- (GLuint)loadShaderWithVertexShader:(NSString *)vert fragmentShader:(NSString *)frag {
GLuint verShader, fragShader;
GLuint program = glCreateProgram(); // 创建 Shader Program 对象。
[self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
[self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
// 装载 Vertex Shader 和 Fragment Shader。
glAttachShader(program, verShader);
glAttachShader(program, fragShader);
glDeleteShader(verShader);
glDeleteShader(fragShader);
return program;
}
- (void)compileShader:(GLuint *)shader type:(GLenum)type file:(NSString *)file {
NSString *content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
const GLchar *source = (GLchar *) [content UTF8String];
*shader = glCreateShader(type); // 创建一个着色器对象。
glShaderSource(*shader, 1, &source, NULL); // 关联顶点、片元着色器的代码。
glCompileShader(*shader); // 编译着色器代码。
// 打印编译日志。
GLint compileStatus;
glGetShaderiv(*shader, GL_COMPILE_STATUS, &compileStatus);
if (compileStatus == GL_FALSE) {
GLint infoLength;
glGetShaderiv(*shader, GL_INFO_LOG_LENGTH, &infoLength);
if (infoLength > 0) {
GLchar *infoLog = malloc(sizeof(GLchar) * infoLength);
glGetShaderInfoLog(*shader, infoLength, NULL, infoLog);
NSLog(@"%s -> %s", (type == GL_VERTEX_SHADER) ? "vertex shader" : "fragment shader", infoLog);
free(infoLog);
}
}
}
#pragma mark - Override
(Class)layerClass {
return [CAEAGLLayer class];
}
@end
上面的代码包括了这些过程：
- 1）定义顶点的数据结构：包括顶点坐标和颜色维度；
- 2）设定 layer 的类型；
- 3）创建 OpenGL 上下文；
- 4）申请并绑定渲染缓冲区对象 RBO 用来存储即将绘制到屏幕上的图像数据；
- 5）申请并绑定帧缓冲区对象 FBO；
- 需要注意，FBO 本身不能用于渲染，只有绑定了纹理（Texture）或者渲染缓冲区（RBO）等作为附件之后才能作为渲染目标。
- 6）清理窗口颜色，并设置渲染窗口；
- 7）加载和编译 shader，并链接到着色器程序；
- 8）根据三角形顶点信息申请顶点缓冲区对象 VBO 和拷贝顶点数据；
- 这里 VBO 的作用是在显存中提前开辟好一块内存，用于缓存顶点数据，从而避免每次绘制时的 CPU 与 GPU 之间的内存拷贝，可以提升渲染性能。
- 9）绘制三角形；
- 10）清理状态机。
更具体细节见上述代码及其注释。
最终我们画出的三角形如下图所示：
OpenGL 绘制三角形（iOS）
2、Android Demo
Android 平台自 2.0 版本之后图形系统的底层渲染均由 OpenGL ES 负责，其 EGL 架构实现如下图所示：
Android EGL 架构
- Display 是对实际显示设备的抽象。在 Android 上的实现类是
EGLDisplay。 - Surface 是对用来存储图像的内存区域 FrameBuffer 的抽象，包括 Color Buffer、Stencil Buffer、Depth Buffer。在 Android 上的实现类是
EGLSurface。 - Context 存储 OpenGL ES 绘图的一些状态信息。在 Android 上的实现类是
EGLContext。
Android Demo 的代码由于平台 EGL 实现的原因以及对模块略作了封装，所以看起来对稍微复杂一些，包括了如下几个文件：
KFGLContext.java，KFGLContext 负责管理和组装 EGLDisplay、EGLSurface、EGLContext。KFGLProgram.java，KFGLProgram 负责加载和编译着色器，创建着色器程序容器。KFSurfaceView.java，KFSurfaceView 继承自 SurfaceView 来实现渲染。KFTextureView.java，KFTextureView 继承自 TextureView 来实现渲染。KFRenderView.java，KFRenderView 是一个容器，可以选择使用 KFSurfaceView 或 KFTextureView 作为实际的渲染视图。KFRenderListener.java，KFRenderListener 是 KFRenderView 用来监听渲染视图的事件回调。
代码如下：
KFGLContext.java
// ...省略 import 代码...
public class KFGLContext {
private Surface mSurface = null;
private EGLDisplay mEGLDisplay = EGL_NO_DISPLAY; // 实际显示设备的抽象
private EGLContext mEGLContext = EGL_NO_CONTEXT; // 渲染上下文
private EGLSurface mEGLSurface = EGL_NO_SURFACE; // 存储图像的内存区域
private EGLContext mEGLShareContext = EGL_NO_CONTEXT; // 共享渲染上下文
private EGLConfig mEGLConfig = null; // 渲染表面的配置信息
private EGLContext mLastContext = EGL_NO_CONTEXT; // 存储之前系统上下文
private EGLDisplay mLastDisplay = EGL_NO_DISPLAY; // 存储之前系统设备
private EGLSurface mLastSurface = EGL_NO_SURFACE; // 存储之前系统内存区域
private boolean mIsBind = false;
public KFGLContext(EGLContext shareContext) {
mEGLShareContext = shareContext;
// 创建 OpenGL 上下文
_eglSetup();
}
public KFGLContext(EGLContext shareContext, Surface surface) {
mEGLShareContext = shareContext;
mSurface = surface;
// 创建 OpenGL 上下文
_eglSetup();
}
public void setSurface(Surface surface) {
if (surface == null || surface == mSurface) {
return;
}
// 释放渲染表面 Surface
if (mEGLDisplay != EGL_NO_DISPLAY && mEGLSurface != EGL_NO_SURFACE) {
eglDestroySurface(mEGLDisplay, mEGLSurface);
}
// 创建 Surface
int[] surfaceAttribs = {
EGL14.EGL_NONE
};
mSurface = surface;
mEGLSurface = eglCreateWindowSurface(mEGLDisplay, mEGLConfig, mSurface, surfaceAttribs, 0);
if (mEGLSurface == null) {
throw new RuntimeException("surface was null");
}
}
public EGLContext getContext() {
return mEGLContext;
}
public Surface getSurface() {
return mSurface;
}
public boolean swapBuffers() {
// 将后台绘制的缓冲显示到前台
if (mEGLDisplay != EGL_NO_DISPLAY && mEGLSurface != EGL_NO_SURFACE) {
return eglSwapBuffers(mEGLDisplay, mEGLSurface);
} else {
return false;
}
}
@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN_MR2)
public void setPresentationTime(long nsecs) {
// 设置时间戳
if (mEGLDisplay != EGL_NO_DISPLAY && mEGLSurface != EGL_NO_SURFACE) {
eglPresentationTimeANDROID(mEGLDisplay, mEGLSurface, nsecs);
}
}
public void bind() {
// 绑定当前上下文
mLastSurface = eglGetCurrentSurface(EGL14.EGL_READ);
mLastContext = eglGetCurrentContext();
mLastDisplay = eglGetCurrentDisplay();
if (!eglMakeCurrent(mEGLDisplay, mEGLSurface, mEGLSurface, mEGLContext)) {
throw new RuntimeException("eglMakeCurrent failed");
}
mIsBind = true;
}
public void unbind() {
if (!mIsBind) {
return;
}
// 绑定回系统之前上下文
if (mLastSurface != EGL_NO_SURFACE && mLastContext != EGL_NO_CONTEXT && mLastDisplay != EGL_NO_DISPLAY) {
eglMakeCurrent(mLastDisplay, mLastSurface, mLastSurface, mLastContext);
mLastDisplay = EGL_NO_DISPLAY;
mLastSurface = EGL_NO_SURFACE;
mLastContext = EGL_NO_CONTEXT;
} else {
if (mEGLDisplay != EGL_NO_DISPLAY) {
eglMakeCurrent(mEGLDisplay, EGL_NO_SURFACE, EGL_NO_SURFACE, EGL_NO_CONTEXT);
}
}
mIsBind = false;
}
public void release() {
unbind();
// 释放设备、Surface
if (mEGLDisplay != EGL_NO_DISPLAY && mEGLSurface != EGL_NO_SURFACE) {
eglDestroySurface(mEGLDisplay, mEGLSurface);
}
if (mEGLDisplay != EGL_NO_DISPLAY && mEGLContext != EGL_NO_CONTEXT) {
eglDestroyContext(mEGLDisplay, mEGLContext);
}
if(mEGLDisplay != EGL_NO_DISPLAY){
eglTerminate(mEGLDisplay);
}
mSurface = null;
mEGLShareContext = null;
mEGLDisplay = null;
mEGLContext = null;
mEGLSurface = null;
}
private void _eglSetup() {
// 创建设备
mEGLDisplay = eglGetDisplay(EGL14.EGL_DEFAULT_DISPLAY);
if (mEGLDisplay == EGL_NO_DISPLAY) {
throw new RuntimeException("unable to get EGL14 display");
}
int[] version = new int[2];
// 根据版本初始化设备
if (!eglInitialize(mEGLDisplay, version, 0, version, 1)) {
mEGLDisplay = null;
throw new RuntimeException("unable to initialize EGL14");
}
// 定义 EGLConfig 属性配置，定义红、绿、蓝、透明度、深度、模板缓冲的位数
int[] attribList = {
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
};
EGLConfig[] configs = new EGLConfig[1];
int[] numConfigs = new int[1];
// 找到符合要求的 EGLConfig 配置
if (!eglChooseConfig(mEGLDisplay, attribList, 0, configs, 0, configs.length,
numConfigs, 0)) {
throw new RuntimeException("unable to find RGB888 recordable ES2 EGL config");
}
mEGLConfig = configs[0];
// 指定 OpenGL 使用版本
int[] attrib_list = {
EGL14.EGL_CONTEXT_CLIENT_VERSION, 2,
EGL14.EGL_NONE
};
// 创建 GL 上下文
mEGLContext = eglCreateContext(mEGLDisplay, mEGLConfig, mEGLShareContext != null ? mEGLShareContext : EGL_NO_CONTEXT, attrib_list, 0);
if (mEGLContext == null) {
throw new RuntimeException("null context");
}
// 创建 Surface 配置信息
int[] surfaceAttribs = {
EGL14.EGL_NONE
};
// 创建 Surface
if (mSurface != null) {
mEGLSurface = eglCreateWindowSurface(mEGLDisplay, mEGLConfig, mSurface,
surfaceAttribs, 0);
} else {
mEGLSurface = eglCreatePbufferSurface(mEGLDisplay, configs[0], surfaceAttribs, 0);
}
if (mEGLSurface == null) {
throw new RuntimeException("surface was null");
}
}
}
KFGLProgram.java
// ...省略 import 代码...
public class KFGLProgram {
private static final String TAG = "KFGLProgram";
private int mProgram = 0; // 着色器程序容器
private int mVertexShader = 0; // 顶点着色器
private int mFragmentShader = 0; // 片元着色器
public KFGLProgram(String vertexShader, String fragmentShader) {
_createProgram(vertexShader,fragmentShader);
}
public void release() {
// 释放顶点、片元着色器、着色器容器
if (mVertexShader != 0) {
glDeleteShader(mVertexShader);
mVertexShader = 0;
}
if (mFragmentShader != 0) {
glDeleteShader(mFragmentShader);
mFragmentShader = 0;
}
if (mProgram != 0) {
glDeleteProgram(mProgram);
mProgram = 0;
}
}
public void use() {
// 使用当前的着色器
if (mProgram != 0) {
glUseProgram(mProgram);
}
}
public int getUniformLocation(String uniformName) {
// 获取着色器 uniform 对应下标
return glGetUniformLocation(mProgram, uniformName);
}
public int getAttribLocation(String uniformName) {
// 获取着色器 attribute 变量对应下标
return glGetAttribLocation(mProgram, uniformName);
}
private void _createProgram(String vertexSource, String fragmentSource) {
// 创建着色器容器
// 创建顶点、片元着色器
mVertexShader = _loadShader(GLES20.GL_VERTEX_SHADER, vertexSource);
mFragmentShader = _loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentSource);
//
if(mVertexShader != 0 && mFragmentShader != 0){
// 创建一个空的着色器容器
mProgram = GLES20.glCreateProgram();
// 将顶点、片元着色器添加至着色器容器
glAttachShader(mProgram, mVertexShader);
glAttachShader(mProgram, mFragmentShader);
// 链接着色器容器
glLinkProgram(mProgram);
int[] linkStatus = new int[1];
glGetProgramiv(mProgram, GLES20.GL_LINK_STATUS, linkStatus, 0);
// 获取链接状态
if (linkStatus[0] != GLES20.GL_TRUE) {
Log.e(TAG, "Could not link program:");
Log.e(TAG, glGetProgramInfoLog(mProgram));
glDeleteProgram(mProgram);
mProgram = 0;
}
}
}
private int _loadShader(int shaderType, String source) {
// 根据类型创建顶点、片元着色器
int shader = glCreateShader(shaderType);
// 设置着色器中的源代码
glShaderSource(shader, source);
// 编译着色器
glCompileShader(shader);
int[] compiled = new int[1];
glGetShaderiv(shader, GLES20.GL_COMPILE_STATUS, compiled, 0);
// 获取编译后状态
if (compiled[0] != GLES20.GL_TRUE) {
Log.e(TAG, "Could not compile shader(TYPE=" shaderType "):");
Log.e(TAG, glGetShaderInfoLog(shader));
glDeleteShader(shader);
shader = 0;
}
return shader;
}
}
KFSurfaceView.java
// ...省略 import 代码...
public class KFSurfaceView extends SurfaceView implements SurfaceHolder.Callback {
private KFRenderListener mListener = null; // 回调
private SurfaceHolder mHolder = null; // Surface 的抽象接口
public KFSurfaceView(Context context, KFRenderListener listener) {
super(context);
mListener = listener;
getHolder().addCallback(this);
}
@Override
public void surfaceCreated(@NonNull SurfaceHolder surfaceHolder) {
// Surface 创建
mHolder = surfaceHolder;
// 根据 SurfaceHolder 创建 Surface
if(mListener != null){
mListener.surfaceCreate(surfaceHolder.getSurface());
}
}
@Override
public void surfaceChanged(@NonNull SurfaceHolder surfaceHolder, int format, int width, int height) {
// Surface 分辨率变更
if(mListener != null){
mListener.surfaceChanged(surfaceHolder.getSurface(),width,height);
}
}
@Override
public void surfaceDestroyed(@NonNull SurfaceHolder surfaceHolder) {
// Surface 销毁
if (mListener != null) {
mListener.surfaceDestroy(surfaceHolder.getSurface());
}
}
}
KFTextureView.java
// ...省略 import 代码...
public class KFTextureView extends TextureView implements TextureView.SurfaceTextureListener{
private KFRenderListener mListener = null; // 回调
private Surface mSurface = null; // 渲染缓存
private SurfaceTexture mSurfaceTexture = null; // 纹理缓存
public KFTextureView(Context context, KFRenderListener listener) {
super(context);
this.setSurfaceTextureListener(this);
mListener = listener;
}
@Override
public void onSurfaceTextureAvailable(@NonNull SurfaceTexture surfaceTexture, int width, int height) {
// 纹理缓存创建
mSurfaceTexture = surfaceTexture;
// 根据 SurfaceTexture 创建 Surface
mSurface = new Surface(surfaceTexture);
if (mListener != null) {
// 创建时候回调一次分辨率变更，对应 SurfaceView 接口
mListener.surfaceCreate(mSurface);
mListener.surfaceChanged(mSurface,width,height);
}
}
@Override
public void onSurfaceTextureSizeChanged(@NonNull SurfaceTexture surfaceTexture, int width, int height) {
// 纹理缓存变更分辨率
if (mListener != null) {
mListener.surfaceChanged(mSurface,width,height);
}
}
@Override
public void onSurfaceTextureUpdated(@NonNull SurfaceTexture surfaceTexture) {
}
@Override
public boolean onSurfaceTextureDestroyed(@NonNull SurfaceTexture surfaceTexture) {
// 纹理缓存销毁
if (mListener != null) {
mListener.surfaceDestroy(mSurface);
}
if (mSurface != null) {
mSurface.release();
mSurface = null;
}
return false;
}
}
KFRenderView.java
// ...省略 import 代码...
public class KFRenderView extends ViewGroup {
// 顶点着色器
public static String customVertexShader =
"attribute vec4 v_position;n"
"attribute vec4 v_color;n"
"varying mediump vec4 f_color;n"
"void main() {n"
" f_color = v_color;n"
" gl_Position = v_position;n"
"}n";
// 片元着色器
public static String customFragmentShader =
"varying mediump vec4 f_color;n"
"void main() {n"
" gl_FragColor = f_color;n"
"}n";
private KFGLContext mEGLContext = null; // OpenGL 上下文
private EGLContext mShareContext = null; // 共享上下文
private View mRenderView = null; // 渲染视图基类
private int mSurfaceWidth = 0; // 渲染缓存宽
private int mSurfaceHeight = 0; // 渲染缓存高
private boolean mSurfaceChanged = false; // 渲染缓存是否变更
private KFGLProgram mProgram;
private FloatBuffer mVerticesBuffer = null; // 顶点 buffer
private int mPositionAttribute = -1; // 顶点坐标
private int mColorAttribute = -1; // 顶点颜色
public KFRenderView(Context context, EGLContext eglContext) {
super(context);
mShareContext = eglContext; // 共享上下文
// 1、选择实际的渲染视图
boolean isSurfaceView = false; // TextureView 与 SurfaceView 开关
if (isSurfaceView) {
mRenderView = new KFSurfaceView(context, mListener);
} else {
mRenderView = new KFTextureView(context, mListener);
}
this.addView(mRenderView); // 添加视图到父视图
}
public void release() {
// 释放 OpenGL 上下文、特效
if (mEGLContext != null) {
mEGLContext.bind();
mEGLContext.unbind();
mEGLContext.release();
mEGLContext = null;
}
}
public void render() {
mProgram.use();
// 设置帧缓存背景色
glClearColor(0.5f,0.5f,0.5f,1);
// 清空帧缓存颜色
glClear(GLES20.GL_COLOR_BUFFER_BIT);
// 设置渲染窗口区域
GLES20.glViewport(0, 0, mSurfaceWidth, mSurfaceHeight);
// 启用顶点着色器顶点坐标属性
glEnableVertexAttribArray(mPositionAttribute);
mVerticesBuffer.position(0); // 定位到第一个位置分量
glVertexAttribPointer(
mPositionAttribute,
3, // x, y, z 有 3 个分量
GLES20.GL_FLOAT,
false,
7 * 4, // 每个顶点有 xyzrgba 7 个分量，每个分量是 4 字节，所以步进为 7 * 4 字节
mVerticesBuffer);
// 启用顶点着色器顶点颜色属性
glEnableVertexAttribArray(mColorAttribute);
mVerticesBuffer.position(3); // 定位到第一个颜色分量
glVertexAttribPointer(
mColorAttribute,
4, // r, g, b, a 有 4 个分量
GLES20.GL_FLOAT,
false,
7 * 4, // 每个顶点有 xyzrgba 7 个分量，每个分量是 4 字节，所以步进为 7 * 4 字节
mVerticesBuffer);
// 绘制三角形
glDrawArrays(GLES20.GL_TRIANGLES, 0, 3);
// 关闭顶点着色器顶点坐标属性
glDisableVertexAttribArray(mPositionAttribute);
// 关闭顶点着色器顶点颜色属性
glDisableVertexAttribArray(mColorAttribute);
mEGLContext.swapBuffers();
}
private KFRenderListener mListener = new KFRenderListener() {
@Override
// 渲染缓存创建
public void surfaceCreate(@NonNull Surface surface) {
// 2、创建 OpenGL 上下文
mEGLContext = new KFGLContext(mShareContext, surface);
mEGLContext.bind();
// 3、初始化 GL 相关环境：加载和编译 shader、链接到着色器程序、设置顶点数据
_setupGL();
mEGLContext.unbind();
}
@Override
// 渲染缓存变更
public void surfaceChanged(@NonNull Surface surface, int width, int height) {
mSurfaceWidth = width;
mSurfaceHeight = height;
mSurfaceChanged = true;
mEGLContext.bind();
// 4、设置 OpenGL 上下文 Surface
mEGLContext.setSurface(surface);
// 5、绘制三角形
render();
mEGLContext.unbind();
}
@Override
public void surfaceDestroy(@NonNull Surface surface) {
}
};
private void _setupGL() {
// 加载和编译 shader，并链接到着色器程序
mProgram = new KFGLProgram(customVertexShader, customFragmentShader);
// 获取与 shader 中对应的属性信息
mPositionAttribute = mProgram.getAttribLocation("v_position");
mColorAttribute = mProgram.getAttribLocation("v_color");
// 3 个顶点，每个顶点有 7 个分量：x, y, z, r, g, b, a
final float vertices[] = {
-0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f, 1.0f, // 左下 // 红色
-0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f, 1.0f, // 右下 // 绿色
0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 1.0f, 1.0f, // 左上 // 蓝色
};
ByteBuffer verticesByteBuffer = ByteBuffer.allocateDirect(4 * vertices.length);
verticesByteBuffer.order(ByteOrder.nativeOrder());
mVerticesBuffer = verticesByteBuffer.asFloatBuffer();
mVerticesBuffer.put(vertices);
mVerticesBuffer.position(0);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
// 视图变更 Size
this.mRenderView.layout(left, top, right, bottom);
}
}
KFRenderListener.java
// ...省略 import 代码...
public interface KFRenderListener {
void surfaceCreate(@NonNull Surface surface); // 渲染缓存创建
void surfaceChanged(@NonNull Surface surface, int width, int height); // 渲染缓存变更分辨率
void surfaceDestroy(@NonNull Surface surface); // 渲染缓存销毁
}
其中绘制三角形的代码实现在 KFRenderView.java 中，包括这些过程：
- 1）选择实际的渲染视图；
- 2）创建 OpenGL 上下文；
- 3）初始化 GL 相关环境：加载和编译 shader、链接到着色器程序、设置顶点数据；
- 4）设置 OpenGL 上下文 Surface；
- 5）绘制三角形。
具体细节见上述代码及其注释。
最终我们画出的三角形如下图所示：
OpenGL 绘制三角形（Android）
