devbox
寸_铁
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

用 OpenGL 画一个三角形丨音视频工程示例_使用opengl进行实验:绘制简单的三角形

作者：寸_铁 | 2024-06-22 00:59:28

赞

踩

使用opengl进行实验:绘制简单的三角形

渲染是音视频技术栈相关的一个非常重要的方向，视频图像在设备上的展示、各种流行的视频特效都离不开渲染技术的支持。

在 RenderDemo 这个工程示例系列，我们将为大家展示一些渲染相关的 Demo，来向大家介绍如何在 iOS/Android 平台上手一些渲染相关的开发。

这里是第一篇：用 OpenGL 画一个三角形。我们分别在 iOS 和 Android 实现了用 OpenGL 画一个三角形的 Demo。在本文中，包括如下内容：

  • 1）iOS OpenGL 绘制三角形 Demo；
  • 2）Android OpenGL 绘制三角形 Demo；
  • 3）详尽的代码注释，帮你理解代码逻辑和原理。

 本文福利， 免费领取C++音视频学习资料包、技术视频/代码，内容包括（音视频开发，面试题，FFmpeg ，webRTC ，rtmp ，hls ，rtsp ，ffplay ，编解码，推拉流，srs）↓↓↓↓↓↓见下面↓↓文章底部点击免费领取↓↓

如果我们了解了 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

  1. #import "DMTriangleRenderView.h"
  2. #import <OpenGLES/ES2/gl.h>
  3.  
  4. // 定义顶点的数据结构：包括顶点坐标和颜色维度。
  5. #define PositionDimension 3
  6. #define ColorDimension 4
  7. typedef struct {
  8.     GLfloat position[PositionDimension]; // { x, y, z }
  9.     GLfloat color[ColorDimension]; // {r, g, b, a}
  10. } SceneVertex;
  11.  
  12.  
  13. @interface DMTriangleRenderView ()
  14. @property (nonatomic, assign) GLsizei width;
  15. @property (nonatomic, assign) GLsizei height;
  16.  
  17. @property (nonatomic, strong) CAEAGLLayer *eaglLayer;
  18. @property (nonatomic, strong) EAGLContext *eaglContext;
  19.  
  20. @property (nonatomic, assign) GLuint simpleProgram;
  21.  
  22. @property (nonatomic, assign) GLuint renderBuffer;
  23. @property (nonatomic, assign) GLuint frameBuffer;
  24.  
  25. @end
  26.  
  27. @implementation DMTriangleRenderView
  28.  
  29. #pragma mark - Setup
  30. - (instancetype)initWithFrame:(CGRect)frame {
  31.     self = [super initWithFrame:frame];
  32.     if (self) {
  33.         _width = frame.size.width;
  34.         _height = frame.size.height;
  35.         [self render];
  36.     }
  37.     return self;
  38. }
  39.  
  40. #pragma mark - Action
  41. - (void)render {
  42.     // 1、设定 layer 的类型。
  43.     _eaglLayer = (CAEAGLLayer *) self.layer;
  44.     _eaglLayer.opacity = 1.0;
  45.     _eaglLayer.drawableProperties = @{kEAGLDrawablePropertyRetainedBacking: @(NO),
  46.                                       kEAGLDrawablePropertyColorFormat: kEAGLColorFormatRGBA8};
  47.  
  48.     
  49.     // 2、创建 OpenGL 上下文。
  50.     EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES2; // 使用的 OpenGL API 的版本。
  51.     EAGLContext *context = [[EAGLContext alloc] initWithAPI:api];
  52.     if (!context) {
  53.         NSLog(@"Create context failed!");
  54.         return;
  55.     }
  56.     BOOL r = [EAGLContext setCurrentContext:context];
  57.     if (!r) {
  58.         NSLog(@"setCurrentContext failed!");
  59.         return;
  60.     }
  61.     _eaglContext = context;
  62.  
  63.     
  64.     // 3、申请并绑定渲染缓冲区对象 RBO 用来存储即将绘制到屏幕上的图像数据。
  65.     glGenRenderbuffers(1, &_renderBuffer); // 创建 RBO。
  66.     glBindRenderbuffer(GL_RENDERBUFFER, _renderBuffer); // 绑定 RBO 到 OpenGL 渲染管线。
  67.     [_eaglContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:_eaglLayer]; // 将渲染图层（_eaglLayer）的存储绑定到 RBO。
  68.  
  69.     
  70.     // 4、申请并绑定帧缓冲区对象 FBO。FBO 本身不能用于渲染，只有绑定了纹理（Texture）或者渲染缓冲区（RBO）等作为附件之后才能作为渲染目标。
  71.     glGenFramebuffers(1, &_frameBuffer); // 创建 FBO。
  72.     glBindFramebuffer(GL_FRAMEBUFFER, _frameBuffer); // 绑定 FBO 到 OpenGL 渲染管线。
  73.     // 将 RBO 绑定为 FBO 的一个附件，绑定后，OpenGL 对 FBO 的绘制会同步到 RBO 后再上屏。
  74.     glFramebufferRenderbuffer(GL_FRAMEBUFFER,
  75.                               GL_COLOR_ATTACHMENT0,
  76.                               GL_RENDERBUFFER,
  77.                               _renderBuffer);
  78.  
  79.     
  80.     // 5、清理窗口颜色，并设置渲染窗口。
  81.     glClearColor(0.5, 0.5, 0.5, 1.0); // 设置渲染窗口颜色。这里是灰色。
  82.     glClear(GL_COLOR_BUFFER_BIT); // 清空旧渲染缓存。
  83.     glViewport(0, 0, _width, _height); // 设置渲染窗口区域。
  84.  
  85.  
  86.     // 6、加载和编译 shader，并链接到着色器程序。
  87.     if (_simpleProgram) {
  88.         glDeleteProgram(_simpleProgram);
  89.         _simpleProgram = 0;
  90.     }
  91.     // 加载和编译 shader。
  92.     NSString *simpleVSH = [[NSBundle mainBundle] pathForResource:@"simple" ofType:@"vsh"];
  93.     NSString *simpleFSH = [[NSBundle mainBundle] pathForResource:@"simple" ofType:@"fsh"];
  94.     _simpleProgram = [self loadShaderWithVertexShader:simpleVSH fragmentShader:simpleFSH];
  95.     // 链接 shader program。
  96.     glLinkProgram(_simpleProgram);
  97.     // 打印链接日志。
  98.     GLint linkStatus;
  99.     glGetProgramiv(_simpleProgram, GL_LINK_STATUS, &linkStatus);
  100.     if (linkStatus == GL_FALSE) {
  101.         GLint infoLength;
  102.         glGetProgramiv(_simpleProgram, GL_INFO_LOG_LENGTH, &infoLength);
  103.         if (infoLength > 0) {
  104.             GLchar *infoLog = malloc(sizeof(GLchar) * infoLength);
  105.             glGetProgramInfoLog(_simpleProgram, infoLength, NULL, infoLog);
  106.             NSLog(@"%s", infoLog);
  107.             free(infoLog);
  108.         }
  109.     }
  110.     glUseProgram(_simpleProgram);
  111.     
  112.     
  113.     // 7、根据三角形顶点信息申请顶点缓冲区对象 VBO 和拷贝顶点数据。
  114.     // 设置三角形 3 个顶点数据，包括坐标信息和颜色信息。
  115.     const SceneVertex vertices[] = {
  116.         {{-0.5,  0.5, 0.0}, { 1.0, 0.0, 0.0, 1.000}}, // 左下 // 红色
  117.         {{-0.5, -0.5, 0.0}, { 0.0, 1.0, 0.0, 1.000}}, // 右下 // 绿色
  118.         {{ 0.5, -0.5, 0.0}, { 0.0, 0.0, 1.0, 1.000}}, // 左上 // 蓝色
  119.     };
  120.     // 申请并绑定 VBO。VBO 的作用是在显存中提前开辟好一块内存，用于缓存顶点数据，从而避免每次绘制时的 CPU 与 GPU 之间的内存拷贝，可以提升渲染性能。
  121.     GLuint vertexBufferID;
  122.     glGenBuffers(1, &vertexBufferID); // 创建 VBO。
  123.     glBindBuffer(GL_ARRAY_BUFFER, vertexBufferID); // 绑定 VBO 到 OpenGL 渲染管线。
  124.     // 将顶点数据 (CPU 内存) 拷贝到 VBO（GPU 显存）。
  125.     glBufferData(GL_ARRAY_BUFFER, // 缓存块类型。
  126.                  sizeof(vertices), // 创建的缓存块尺寸。
  127.                  vertices, // 要绑定的顶点数据。
  128.                  GL_STATIC_DRAW); // 缓存块用途。
  129.     
  130.     // 8、绘制三角形。
  131.     // 获取与 Shader 中对应的参数信息：
  132.     GLuint vertexPositionLocation = glGetAttribLocation(_simpleProgram, "v_position");
  133.     GLuint vertexColorLocation = glGetAttribLocation(_simpleProgram, "v_color");
  134.     // 顶点位置属性。
  135.     glEnableVertexAttribArray(vertexPositionLocation); // 启用顶点位置属性通道。
  136.     // 关联顶点位置数据。
  137.     glVertexAttribPointer(vertexPositionLocation, // attribute 变量的下标，范围是 [0, GL_MAX_VERTEX_ATTRIBS - 1]。
  138.                           PositionDimension, // 指顶点数组中，一个 attribute 元素变量的坐标分量是多少（如：position, 程序提供的就是 {x, y, z} 点就是 3 个坐标分量）。
  139.                           GL_FLOAT, // 数据的类型。
  140.                           GL_FALSE, // 是否进行数据类型转换。
  141.                           sizeof(SceneVertex), // 每一个数据在内存中的偏移量，如果填 0 就是每一个数据紧紧相挨着。
  142.                           (const GLvoid*) offsetof(SceneVertex, position)); // 数据的内存首地址。
  143.     // 顶点颜色属性。
  144.     glEnableVertexAttribArray(vertexColorLocation);
  145.     // 关联顶点颜色数据。
  146.     glVertexAttribPointer(vertexColorLocation,
  147.                           ColorDimension,
  148.                           GL_FLOAT,
  149.                           GL_FALSE,
  150.                           sizeof(SceneVertex),
  151.                           (const GLvoid*) offsetof(SceneVertex, color));
  152.     // 绘制所有图元。
  153.     glDrawArrays(GL_TRIANGLES, // 绘制的图元方式。
  154.                  0, // 从第几个顶点下标开始绘制。
  155.                  sizeof(vertices) / sizeof(vertices[0])); // 有多少个顶点下标需要绘制。
  156.     // 把 Renderbuffer 的内容显示到窗口系统 (CAEAGLLayer) 中。
  157.     [_eaglContext presentRenderbuffer:GL_RENDERBUFFER];
  158.     
  159.     
  160.     // 9、清理。
  161.     glDisableVertexAttribArray(vertexColorLocation); // 关闭顶点颜色属性通道。
  162.     glDisableVertexAttribArray(vertexPositionLocation); // 关闭顶点位置属性通道。
  163.     glBindBuffer(GL_ARRAY_BUFFER, 0); // 解绑 VBO。
  164.     glBindFramebuffer(GL_FRAMEBUFFER, 0); // 解绑 FBO。
  165.     glBindRenderbuffer(GL_RENDERBUFFER, 0); // 解绑 RBO。
  166. }
  167.  
  168. #pragma mark - Utility
  169. - (GLuint)loadShaderWithVertexShader:(NSString *)vert fragmentShader:(NSString *)frag {
  170.     GLuint verShader, fragShader;
  171.     GLuint program = glCreateProgram(); // 创建 Shader Program 对象。
  172.     
  173.     [self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
  174.     [self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
  175.     
  176.     // 装载 Vertex Shader 和 Fragment Shader。
  177.     glAttachShader(program, verShader);
  178.     glAttachShader(program, fragShader);
  179.     
  180.     glDeleteShader(verShader);
  181.     glDeleteShader(fragShader);
  182.     
  183.     return program;
  184. }
  185.  
  186. - (void)compileShader:(GLuint *)shader type:(GLenum)type file:(NSString *)file {
  187.     NSString *content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
  188.     const GLchar *source = (GLchar *) [content UTF8String];
  189.     *shader = glCreateShader(type); // 创建一个着色器对象。
  190.     glShaderSource(*shader, 1, &source, NULL); // 关联顶点、片元着色器的代码。
  191.     glCompileShader(*shader); // 编译着色器代码。
  192.     
  193.     // 打印编译日志。
  194.     GLint compileStatus;
  195.     glGetShaderiv(*shader, GL_COMPILE_STATUS, &compileStatus);
  196.     if (compileStatus == GL_FALSE) {
  197.         GLint infoLength;
  198.         glGetShaderiv(*shader, GL_INFO_LOG_LENGTH, &infoLength);
  199.         if (infoLength > 0) {
  200.             GLchar *infoLog = malloc(sizeof(GLchar) * infoLength);
  201.             glGetShaderInfoLog(*shader, infoLength, NULL, infoLog);
  202.             NSLog(@"%s -> %s", (type == GL_VERTEX_SHADER) ? "vertex shader" : "fragment shader", infoLog);
  203.             free(infoLog);
  204.         }
  205.     }
  206. }
  207.  
  208. #pragma mark - Override
  209. + (Class)layerClass {
  210.     return [CAEAGLLayer class];
  211. }
  212.  
  213. @end

上面的代码包括了这些过程：

  • 1）定义顶点的数据结构：包括顶点坐标和颜色维度；
  • 2）设定 layer 的类型；
  • 3）创建 OpenGL 上下文；
  • 4）申请并绑定渲染缓冲区对象 RBO 用来存储即将绘制到屏幕上的图像数据；
  • 5）申请并绑定帧缓冲区对象 FBO；
    • 需要注意，FBO 本身不能用于渲染，只有绑定了纹理（Texture）或者渲染缓冲区（RBO）等作为附件之后才能作为渲染目标。
  • 6）清理窗口颜色，并设置渲染窗口；
  • 7）加载和编译 shader，并链接到着色器程序；
  • 8）根据三角形顶点信息申请顶点缓冲区对象 VBO 和拷贝顶点数据；
    • 这里 VBO 的作用是在显存中提前开辟好一块内存，用于缓存顶点数据，从而避免每次绘制时的 CPU 与 GPU 之间的内存拷贝，可以提升渲染性能。
  • 9）绘制三角形；
  • 10）清理状态机。

更具体细节见上述代码及其注释。

最终我们画出的三角形如下图所示：

2、Android Demo

Android 平台自 2.0 版本之后图形系统的底层渲染均由 OpenGL ES 负责，其 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

  1. // ...省略 import 代码...
  2. public class KFGLContext {
  3.     private Surface mSurface = null;
  4.     private EGLDisplay mEGLDisplay = EGL_NO_DISPLAY; // 实际显示设备的抽象
  5.     private EGLContext mEGLContext = EGL_NO_CONTEXT; // 渲染上下文
  6.     private EGLSurface mEGLSurface = EGL_NO_SURFACE; // 存储图像的内存区域
  7.     private EGLContext mEGLShareContext = EGL_NO_CONTEXT; // 共享渲染上下文
  8.     private EGLConfig mEGLConfig = null; // 渲染表面的配置信息
  9.  
  10.     private EGLContext mLastContext = EGL_NO_CONTEXT; // 存储之前系统上下文
  11.     private EGLDisplay mLastDisplay = EGL_NO_DISPLAY; // 存储之前系统设备
  12.     private EGLSurface mLastSurface = EGL_NO_SURFACE; // 存储之前系统内存区域
  13.     private boolean mIsBind = false;
  14.  
  15.     public KFGLContext(EGLContext shareContext) {
  16.         mEGLShareContext = shareContext;
  17.         // 创建 OpenGL 上下文
  18.         _eglSetup();
  19.     }
  20.  
  21.     public KFGLContext(EGLContext shareContext, Surface surface) {
  22.         mEGLShareContext = shareContext;
  23.         mSurface = surface;
  24.         // 创建 OpenGL 上下文
  25.         _eglSetup();
  26.     }
  27.  
  28.     public void setSurface(Surface surface) {
  29.         if (surface == null || surface == mSurface) {
  30.             return;
  31.         }
  32.  
  33.         // 释放渲染表面 Surface
  34.         if (mEGLDisplay != EGL_NO_DISPLAY && mEGLSurface != EGL_NO_SURFACE) {
  35.             eglDestroySurface(mEGLDisplay, mEGLSurface);
  36.         }
  37.         // 创建 Surface
  38.         int[] surfaceAttribs = {
  39.                 EGL14.EGL_NONE
  40.         };
  41.         mSurface = surface;
  42.         mEGLSurface = eglCreateWindowSurface(mEGLDisplay, mEGLConfig, mSurface, surfaceAttribs, 0);
  43.         if (mEGLSurface == null) {
  44.             throw new RuntimeException("surface was null");
  45.         }
  46.     }
  47.  
  48.     public EGLContext getContext() {
  49.         return mEGLContext;
  50.     }
  51.  
  52.     public Surface getSurface() {
  53.         return mSurface;
  54.     }
  55.  
  56.     public boolean swapBuffers() {
  57.         // 将后台绘制的缓冲显示到前台
  58.         if (mEGLDisplay != EGL_NO_DISPLAY && mEGLSurface != EGL_NO_SURFACE) {
  59.             return eglSwapBuffers(mEGLDisplay, mEGLSurface);
  60.         } else {
  61.             return false;
  62.         }
  63.     }
  64.  
  65.     @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN_MR2)
  66.     public void setPresentationTime(long nsecs) {
  67.         // 设置时间戳
  68.         if (mEGLDisplay != EGL_NO_DISPLAY && mEGLSurface != EGL_NO_SURFACE) {
  69.             eglPresentationTimeANDROID(mEGLDisplay, mEGLSurface, nsecs);
  70.         }
  71.     }
  72.  
  73.     public void bind() {
  74.         // 绑定当前上下文
  75.         mLastSurface = eglGetCurrentSurface(EGL14.EGL_READ);
  76.         mLastContext = eglGetCurrentContext();
  77.         mLastDisplay = eglGetCurrentDisplay();
  78.         if (!eglMakeCurrent(mEGLDisplay, mEGLSurface, mEGLSurface, mEGLContext)) {
  79.             throw new RuntimeException("eglMakeCurrent failed");
  80.         }
  81.         mIsBind = true;
  82.     }
  83.  
  84.     public void unbind() {
  85.         if (!mIsBind) {
  86.             return;
  87.         }
  88.  
  89.         // 绑定回系统之前上下文
  90.         if (mLastSurface != EGL_NO_SURFACE && mLastContext != EGL_NO_CONTEXT  && mLastDisplay != EGL_NO_DISPLAY) {
  91.             eglMakeCurrent(mLastDisplay, mLastSurface, mLastSurface, mLastContext);
  92.             mLastDisplay = EGL_NO_DISPLAY;
  93.             mLastSurface = EGL_NO_SURFACE;
  94.             mLastContext = EGL_NO_CONTEXT;
  95.         } else {
  96.             if (mEGLDisplay != EGL_NO_DISPLAY) {
  97.                 eglMakeCurrent(mEGLDisplay, EGL_NO_SURFACE, EGL_NO_SURFACE, EGL_NO_CONTEXT);
  98.             }
  99.         }
  100.         mIsBind = false;
  101.     }
  102.  
  103.     public void release() {
  104.         unbind();
  105.  
  106.         // 释放设备、Surface
  107.         if (mEGLDisplay != EGL_NO_DISPLAY && mEGLSurface != EGL_NO_SURFACE) {
  108.             eglDestroySurface(mEGLDisplay, mEGLSurface);
  109.         }
  110.  
  111.         if (mEGLDisplay != EGL_NO_DISPLAY && mEGLContext != EGL_NO_CONTEXT) {
  112.             eglDestroyContext(mEGLDisplay, mEGLContext);
  113.         }
  114.  
  115.         if(mEGLDisplay != EGL_NO_DISPLAY){
  116.             eglTerminate(mEGLDisplay);
  117.         }
  118.  
  119.         mSurface = null;
  120.         mEGLShareContext = null;
  121.  
  122.         mEGLDisplay = null;
  123.         mEGLContext = null;
  124.         mEGLSurface = null;
  125.     }
  126.  
  127.     private void _eglSetup() {
  128.         // 创建设备
  129.         mEGLDisplay = eglGetDisplay(EGL14.EGL_DEFAULT_DISPLAY);
  130.         if (mEGLDisplay == EGL_NO_DISPLAY) {
  131.             throw new RuntimeException("unable to get EGL14 display");
  132.         }
  133.  
  134.         int[] version = new int[2];
  135.         // 根据版本初始化设备
  136.         if (!eglInitialize(mEGLDisplay, version, 0, version, 1)) {
  137.             mEGLDisplay = null;
  138.             throw new RuntimeException("unable to initialize EGL14");
  139.         }
  140.  
  141.         // 定义 EGLConfig 属性配置，定义红、绿、蓝、透明度、深度、模板缓冲的位数
  142.         int[] attribList = {
  143.                 EGL14.EGL_BUFFER_SIZE, 32,
  144.                 EGL14.EGL_ALPHA_SIZE, 8, // 颜色缓冲区中透明度用几位来表示
  145.                 EGL14.EGL_BLUE_SIZE, 8,
  146.                 EGL14.EGL_GREEN_SIZE, 8,
  147.                 EGL14.EGL_RED_SIZE, 8,
  148.                 EGL14.EGL_RENDERABLE_TYPE, EGL14.EGL_OPENGL_ES2_BIT,
  149.                 EGL14.EGL_SURFACE_TYPE, EGL14.EGL_WINDOW_BIT,
  150.                 EGL14.EGL_NONE
  151.         };
  152.         EGLConfig[] configs = new EGLConfig[1];
  153.         int[] numConfigs = new int[1];
  154.         // 找到符合要求的 EGLConfig 配置
  155.         if (!eglChooseConfig(mEGLDisplay, attribList, 0, configs, 0, configs.length,
  156.                 numConfigs, 0)) {
  157.             throw new RuntimeException("unable to find RGB888+recordable ES2 EGL config");
  158.         }
  159.         mEGLConfig = configs[0];
  160.  
  161.         // 指定 OpenGL 使用版本
  162.         int[] attrib_list = {
  163.                 EGL14.EGL_CONTEXT_CLIENT_VERSION, 2,
  164.                 EGL14.EGL_NONE
  165.         };
  166.         // 创建 GL 上下文
  167.         mEGLContext = eglCreateContext(mEGLDisplay, mEGLConfig, mEGLShareContext != null ? mEGLShareContext : EGL_NO_CONTEXT, attrib_list, 0);
  168.         if (mEGLContext == null) {
  169.             throw new RuntimeException("null context");
  170.         }
  171.  
  172.         // 创建 Surface 配置信息
  173.         int[] surfaceAttribs = {
  174.                 EGL14.EGL_NONE
  175.         };
  176.  
  177.         // 创建 Surface
  178.         if (mSurface != null) {
  179.             mEGLSurface = eglCreateWindowSurface(mEGLDisplay, mEGLConfig, mSurface,
  180.                     surfaceAttribs, 0);
  181.         } else {
  182.             mEGLSurface = eglCreatePbufferSurface(mEGLDisplay, configs[0], surfaceAttribs, 0);
  183.         }
  184.  
  185.         if (mEGLSurface == null) {
  186.             throw new RuntimeException("surface was null");
  187.         }
  188.     }
  189. }

KFGLProgram.java

  1. // ...省略 import 代码...
  2. public class KFGLProgram {
  3.     private static final String TAG = "KFGLProgram";
  4.     private int mProgram = 0; // 着色器程序容器
  5.     private int mVertexShader = 0; // 顶点着色器
  6.     private int mFragmentShader = 0; // 片元着色器
  7.  
  8.     public KFGLProgram(String vertexShader, String fragmentShader) {
  9.         _createProgram(vertexShader,fragmentShader);
  10.     }
  11.  
  12.     public void release() {
  13.         // 释放顶点、片元着色器、着色器容器
  14.         if (mVertexShader != 0) {
  15.             glDeleteShader(mVertexShader);
  16.             mVertexShader = 0;
  17.         }
  18.  
  19.         if (mFragmentShader != 0) {
  20.             glDeleteShader(mFragmentShader);
  21.             mFragmentShader = 0;
  22.         }
  23.  
  24.         if (mProgram != 0) {
  25.             glDeleteProgram(mProgram);
  26.             mProgram = 0;
  27.         }
  28.     }
  29.  
  30.     public void use() {
  31.         // 使用当前的着色器
  32.         if (mProgram != 0) {
  33.             glUseProgram(mProgram);
  34.         }
  35.     }
  36.  
  37.     public int getUniformLocation(String uniformName) {
  38.         // 获取着色器 uniform 对应下标
  39.         return glGetUniformLocation(mProgram, uniformName);
  40.     }
  41.  
  42.     public int getAttribLocation(String uniformName) {
  43.         // 获取着色器 attribute 变量对应下标
  44.         return glGetAttribLocation(mProgram, uniformName);
  45.     }
  46.  
  47.     private void  _createProgram(String vertexSource, String fragmentSource) {
  48.         // 创建着色器容器
  49.         // 创建顶点、片元着色器
  50.         mVertexShader = _loadShader(GLES20.GL_VERTEX_SHADER,   vertexSource);
  51.         mFragmentShader = _loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentSource);
  52.  
  53.         //
  54.         if(mVertexShader != 0 && mFragmentShader != 0){
  55.             // 创建一个空的着色器容器
  56.             mProgram = GLES20.glCreateProgram();
  57.             // 将顶点、片元着色器添加至着色器容器
  58.             glAttachShader(mProgram, mVertexShader);
  59.             glAttachShader(mProgram, mFragmentShader);
  60.  
  61.             // 链接着色器容器
  62.             glLinkProgram(mProgram);
  63.             int[] linkStatus = new int[1];
  64.             glGetProgramiv(mProgram, GLES20.GL_LINK_STATUS, linkStatus, 0);
  65.             // 获取链接状态
  66.             if (linkStatus[0] != GLES20.GL_TRUE) {
  67.                 Log.e(TAG, "Could not link program:");
  68.                 Log.e(TAG, glGetProgramInfoLog(mProgram));
  69.                 glDeleteProgram(mProgram);
  70.                 mProgram = 0;
  71.             }
  72.         }
  73.     }
  74.  
  75.     private int _loadShader(int shaderType, String source) {
  76.         // 根据类型创建顶点、片元着色器
  77.         int shader = glCreateShader(shaderType);
  78.         // 设置着色器中的源代码
  79.         glShaderSource(shader, source);
  80.         // 编译着色器
  81.         glCompileShader(shader);
  82.  
  83.         int[] compiled = new int[1];
  84.         glGetShaderiv(shader, GLES20.GL_COMPILE_STATUS, compiled, 0);
  85.         // 获取编译后状态
  86.         if (compiled[0] != GLES20.GL_TRUE) {
  87.             Log.e(TAG, "Could not compile shader(TYPE=" + shaderType + "):");
  88.             Log.e(TAG, glGetShaderInfoLog(shader));
  89.             glDeleteShader(shader);
  90.             shader = 0;
  91.         }
  92.  
  93.         return shader;
  94.     }
  95. }

KFSurfaceView.java

  1. // ...省略 import 代码...
  2. public class KFSurfaceView extends SurfaceView implements SurfaceHolder.Callback {
  3.     private KFRenderListener mListener = null; // 回调
  4.     private SurfaceHolder mHolder = null; // Surface 的抽象接口
  5.  
  6.     public KFSurfaceView(Context context, KFRenderListener listener) {
  7.         super(context);
  8.         mListener = listener;
  9.         getHolder().addCallback(this);
  10.     }
  11.  
  12.     @Override
  13.     public void surfaceCreated(@NonNull SurfaceHolder surfaceHolder) {
  14.         // Surface 创建
  15.         mHolder = surfaceHolder;
  16.         // 根据 SurfaceHolder 创建 Surface
  17.         if(mListener != null){
  18.             mListener.surfaceCreate(surfaceHolder.getSurface());
  19.         }
  20.     }
  21.  
  22.     @Override
  23.     public void surfaceChanged(@NonNull SurfaceHolder surfaceHolder, int format, int width, int height) {
  24.         // Surface 分辨率变更
  25.         if(mListener != null){
  26.             mListener.surfaceChanged(surfaceHolder.getSurface(),width,height);
  27.         }
  28.     }
  29.  
  30.     @Override
  31.     public void surfaceDestroyed(@NonNull SurfaceHolder surfaceHolder) {
  32.         // Surface 销毁
  33.         if (mListener != null) {
  34.             mListener.surfaceDestroy(surfaceHolder.getSurface());
  35.         }
  36.     }
  37. }

KFTextureView.java

  1. // ...省略 import 代码...
  2. public class KFTextureView extends TextureView implements TextureView.SurfaceTextureListener{
  3.     private KFRenderListener mListener = null; // 回调
  4.     private Surface mSurface = null; // 渲染缓存
  5.     private SurfaceTexture mSurfaceTexture = null; // 纹理缓存
  6.  
  7.     public KFTextureView(Context context, KFRenderListener listener) {
  8.         super(context);
  9.         this.setSurfaceTextureListener(this);
  10.         mListener = listener;
  11.     }
  12.  
  13.     @Override
  14.     public void onSurfaceTextureAvailable(@NonNull SurfaceTexture surfaceTexture, int width, int height) {
  15.         // 纹理缓存创建
  16.         mSurfaceTexture = surfaceTexture;
  17.         // 根据 SurfaceTexture 创建 Surface
  18.         mSurface = new Surface(surfaceTexture);
  19.         if (mListener != null) {
  20.             // 创建时候回调一次分辨率变更，对应 SurfaceView 接口
  21.             mListener.surfaceCreate(mSurface);
  22.             mListener.surfaceChanged(mSurface,width,height);
  23.         }
  24.     }
  25.  
  26.     @Override
  27.     public void onSurfaceTextureSizeChanged(@NonNull SurfaceTexture surfaceTexture, int width, int height) {
  28.         // 纹理缓存变更分辨率
  29.         if (mListener != null) {
  30.             mListener.surfaceChanged(mSurface,width,height);
  31.         }
  32.     }
  33.  
  34.     @Override
  35.     public void onSurfaceTextureUpdated(@NonNull SurfaceTexture surfaceTexture) {
  36.  
  37.     }
  38.  
  39.     @Override
  40.     public boolean onSurfaceTextureDestroyed(@NonNull SurfaceTexture surfaceTexture) {
  41.         // 纹理缓存销毁
  42.         if (mListener != null) {
  43.             mListener.surfaceDestroy(mSurface);
  44.         }
  45.         if (mSurface != null) {
  46.             mSurface.release();
  47.             mSurface = null;
  48.         }
  49.         return false;
  50.     }
  51. }

KFRenderView.java

  1. // ...省略 import 代码...
  2. public class KFRenderView extends ViewGroup {
  3.     // 顶点着色器
  4.     public static String customVertexShader =
  5.                     "attribute vec4 v_position;\n" +
  6.                     "attribute vec4 v_color;\n" +
  7.                     "varying mediump vec4 f_color;\n" +
  8.                     "void main() {\n" +
  9.                     "  f_color = v_color;\n" +
  10.                     "  gl_Position = v_position;\n" +
  11.                     "}\n";
  12.  
  13.     // 片元着色器
  14.     public static String customFragmentShader =
  15.                     "varying mediump vec4 f_color;\n" +
  16.                     "void main() {\n" +
  17.                     "  gl_FragColor = f_color;\n" +
  18.                     "}\n";
  19.  
  20.     private KFGLContext mEGLContext = null; // OpenGL 上下文
  21.     private EGLContext mShareContext = null; // 共享上下文
  22.     private View mRenderView = null; // 渲染视图基类
  23.     private int mSurfaceWidth = 0; // 渲染缓存宽
  24.     private int mSurfaceHeight = 0; // 渲染缓存高
  25.     private boolean mSurfaceChanged = false; // 渲染缓存是否变更
  26.     private KFGLProgram mProgram;
  27.     private FloatBuffer mVerticesBuffer = null; // 顶点 buffer
  28.     private int mPositionAttribute = -1; // 顶点坐标
  29.     private int mColorAttribute = -1; // 顶点颜色
  30.  
  31.     public KFRenderView(Context context, EGLContext eglContext) {
  32.         super(context);
  33.         mShareContext = eglContext; // 共享上下文
  34.  
  35.         // 1、选择实际的渲染视图
  36.         boolean isSurfaceView  = false; // TextureView 与 SurfaceView 开关
  37.         if (isSurfaceView) {
  38.             mRenderView = new KFSurfaceView(context, mListener);
  39.         } else {
  40.             mRenderView = new KFTextureView(context, mListener);
  41.         }
  42.  
  43.         this.addView(mRenderView); // 添加视图到父视图
  44.     }
  45.  
  46.     public void release() {
  47.         // 释放 OpenGL 上下文、特效
  48.         if (mEGLContext != null) {
  49.             mEGLContext.bind();
  50.             mEGLContext.unbind();
  51.  
  52.             mEGLContext.release();
  53.             mEGLContext = null;
  54.         }
  55.     }
  56.  
  57.     public void render() {
  58.         mProgram.use();
  59.  
  60.         // 设置帧缓存背景色
  61.         glClearColor(0.5f,0.5f,0.5f,1);
  62.         // 清空帧缓存颜色
  63.         glClear(GLES20.GL_COLOR_BUFFER_BIT);
  64.         // 设置渲染窗口区域
  65.         GLES20.glViewport(0, 0, mSurfaceWidth, mSurfaceHeight);
  66.  
  67.         // 启用顶点着色器顶点坐标属性
  68.         glEnableVertexAttribArray(mPositionAttribute);
  69.         mVerticesBuffer.position(0); // 定位到第一个位置分量
  70.         glVertexAttribPointer(
  71.                 mPositionAttribute,
  72.                 3, // x, y, z 有 3 个分量
  73.                 GLES20.GL_FLOAT,
  74.                 false,
  75.                 7 * 4, // 每个顶点有 xyzrgba 7 个分量，每个分量是 4 字节，所以步进为 7 * 4 字节
  76.                 mVerticesBuffer);
  77.  
  78.         // 启用顶点着色器顶点颜色属性
  79.         glEnableVertexAttribArray(mColorAttribute);
  80.         mVerticesBuffer.position(3); // 定位到第一个颜色分量
  81.         glVertexAttribPointer(
  82.                 mColorAttribute,
  83.                 4, // r, g, b, a 有 4 个分量
  84.                 GLES20.GL_FLOAT,
  85.                 false,
  86.                 7 * 4, // 每个顶点有 xyzrgba 7 个分量，每个分量是 4 字节，所以步进为 7 * 4 字节
  87.                 mVerticesBuffer);
  88.  
  89.         // 绘制三角形
  90.         glDrawArrays(GLES20.GL_TRIANGLES, 0, 3);
  91.  
  92.         // 关闭顶点着色器顶点坐标属性
  93.         glDisableVertexAttribArray(mPositionAttribute);
  94.  
  95.         // 关闭顶点着色器顶点颜色属性
  96.         glDisableVertexAttribArray(mColorAttribute);
  97.  
  98.         mEGLContext.swapBuffers();
  99.     }
  100.  
  101.     private KFRenderListener mListener = new KFRenderListener() {
  102.         @Override
  103.         // 渲染缓存创建
  104.         public void surfaceCreate(@NonNull Surface surface) {
  105.             // 2、创建 OpenGL 上下文
  106.             mEGLContext = new KFGLContext(mShareContext, surface);
  107.             mEGLContext.bind();
  108.             // 3、初始化 GL 相关环境：加载和编译 shader、链接到着色器程序、设置顶点数据
  109.             _setupGL();
  110.             mEGLContext.unbind();
  111.         }
  112.  
  113.         @Override
  114.         // 渲染缓存变更
  115.         public void surfaceChanged(@NonNull Surface surface, int width, int height) {
  116.             mSurfaceWidth = width;
  117.             mSurfaceHeight = height;
  118.             mSurfaceChanged = true;
  119.             mEGLContext.bind();
  120.             // 4、设置 OpenGL 上下文 Surface
  121.             mEGLContext.setSurface(surface);
  122.             // 5、绘制三角形
  123.             render();
  124.             mEGLContext.unbind();
  125.         }
  126.  
  127.         @Override
  128.         public void surfaceDestroy(@NonNull Surface surface) {
  129.  
  130.         }
  131.     };
  132.  
  133.     private void _setupGL() {
  134.         // 加载和编译 shader，并链接到着色器程序
  135.         mProgram = new KFGLProgram(customVertexShader, customFragmentShader);
  136.  
  137.         // 获取与 shader 中对应的属性信息
  138.         mPositionAttribute = mProgram.getAttribLocation("v_position");
  139.         mColorAttribute = mProgram.getAttribLocation("v_color");
  140.  
  141.         // 3 个顶点，每个顶点有 7 个分量：x, y, z, r, g, b, a
  142.         final float vertices[] = {
  143.                 -0.5f,  0.5f, 0.0f,  1.0f, 0.0f, 0.0f, 1.0f, // 左下 // 红色
  144.                 -0.5f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f, 1.0f, // 右下 // 绿色
  145.                  0.5f, -0.5f, 0.0f,  0.0f, 0.0f, 1.0f, 1.0f, // 左上 // 蓝色
  146.         };
  147.         ByteBuffer verticesByteBuffer = ByteBuffer.allocateDirect(4 * vertices.length);
  148.         verticesByteBuffer.order(ByteOrder.nativeOrder());
  149.         mVerticesBuffer = verticesByteBuffer.asFloatBuffer();
  150.         mVerticesBuffer.put(vertices);
  151.         mVerticesBuffer.position(0);
  152.     }
  153.  
  154.     @Override
  155.     protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
  156.         // 视图变更 Size
  157.         this.mRenderView.layout(left, top, right, bottom);
  158.     }
  159. }

KFRenderListener.java

  1. // ...省略 import 代码...
  2. public interface KFRenderListener {
  3.     void surfaceCreate(@NonNull Surface surface); // 渲染缓存创建
  4.     void surfaceChanged(@NonNull Surface surface, int width, int height); // 渲染缓存变更分辨率
  5.     void surfaceDestroy(@NonNull Surface surface); // 渲染缓存销毁
  6. }

其中绘制三角形的代码实现在 KFRenderView.java 中，包括这些过程：

  • 1）选择实际的渲染视图；
  • 2）创建 OpenGL 上下文；
  • 3）初始化 GL 相关环境：加载和编译 shader、链接到着色器程序、设置顶点数据；
  • 4）设置 OpenGL 上下文 Surface；
  • 5）绘制三角形。

具体细节见上述代码及其注释。

最终我们画出的三角形如下图所示：

 本文福利， 免费领取C++音视频学习资料包、技术视频/代码，内容包括（音视频开发，面试题，FFmpeg ，webRTC ，rtmp ，hls ，rtsp ，ffplay ，编解码，推拉流，srs）↓↓↓↓↓↓见下面↓↓文章底部点击免费领取↓↓

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/744813
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号