经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 软件/图像 » OpenGL » 查看文章
Opengl ES之YUV数据渲染
来源：cnblogs　　作者：思想觉悟　　时间：2022/11/23 18:51:36　　对本文有异议

YUV回顾

记得在音视频基础知识介绍中，笔者专门介绍过YUV的相关知识，可以参考：
《音视频基础知识-YUV图像》

YUV数据量相比RGB较小，因此YUV适用于传输，但是YUV图不能直接用于显示，需要转换为RGB格式才能显示，因而YUV数据渲染实际上就是使用Opengl ES将YUV数据转换程RGB数据，然后显示出来的过程。

也就是说Opengl ES之所以能渲染YUV数据其实就是使用了Opengl强大的并行计算能力，快速地将YUV数据转换程了RGB数据。

本文首发于微信公总号号：思想觉悟

更多关于音视频、FFmpeg、Opengl、C++的原创文章请关注微信公众号：思想觉悟

YUV的格式比较多，我们今天就以YUV420SP为例，而YUV420SP又分为NV12和NV21两种，因此今天我们的主题就是如何使用Opengl ES对NV12和NV21数据进行渲染显示。

在着色器中使用texture2D对YUV数据进行归一化处理后Y数据的映射范围是0到1，而U和V的数据映射范围是-0.5到0.5。

因为YUV格式图像 UV 分量的默认值分别是 127 ，Y 分量默认值是 0 ，8 个 bit 位的取值范围是 0 ~ 255，由于在 shader 中纹理采样值需要进行归一化，所以 UV 分量的采样值需要分别减去 0.5 ，确保 YUV 到 RGB 正确转换。

YUV数据准备

首先我们可以使用ffmpeg命令行将一张png图片转换成YUV格式的图片：

  1. ffmpeg -i 图片名称.png -s 图片宽x图片高 -pix_fmt nv12或者nv21 输出名称.yuv)

通过上面这个命令行我们就可以将一张图片转换成yuv格式的图片，此时我们可以使用软件YUVViewer看下你转换的图片对不对，如果本身转换出来的图片就是错的，那么后面的程序就白搭了...

注意：转换图片的宽高最好是2的幂次方，笔者测试了下发现如果宽高不是2的幂次方的话虽然能正常转换，但是查看的时候要么有色差，要么有缺陷，也有可能正常。

又或者你可以极客一点，直接使用ffmpeg代码解码视频的方式获得YUV数据并保存，这个可以参考笔者之前的文章：

《FFmpeg连载3-视频解码》

同时在上面的文章中笔者也介绍了通过ffplay命令行的方式查看YUV数据的方法。

YUV数据渲染

YUV 渲染步骤：

  • 生成 2 个纹理，分别用于承载Y数据和UV数据，编译链接着色器程序；

NV21和NV12格式的YUV数据是只有两个平面的，它们的排列顺序是YYYY UVUV或者YYYY VUVU因此我们的片元着色器需要两个纹理采样。

  • 确定纹理坐标及对应的顶点坐标；
  • 分别加载 NV21 的两个 Plane 数据到 2 个纹理，加载纹理坐标和顶点坐标数据到着色器程序；
  • 绘制。

YUV与RGB的转换格式图：

YUV与RGB的转换公式

在OpenGLES的内置矩阵实际上是一列一列地构建的，比如YUV和RGB的转换矩阵的构建是：

  1. // 标准转换，舍弃了部分小数精度
  2. mat3 convertMat = mat3(1.0, 1.0, 1.0,      //第一列
  3.                        0.0，-0.338，1.732， //第二列
  4.                        1.371，-0.698， 0.0);//第三列

OpenGLES 实现 YUV 渲染需要用到 GL_LUMINANCE 和 GL_LUMINANCE_ALPHA 格式的纹理，其中 GL_LUMINANCE 纹理用来加载 NV21 Y Plane 的数据，GL_LUMINANCE_ALPHA 纹理用来加载 UV Plane 的数据。

废话少说，show me the code

YUVRenderOpengl.h

  1. #ifndef NDK_OPENGLES_LEARN_YUVRENDEROPENGL_H
  2. #define NDK_OPENGLES_LEARN_YUVRENDEROPENGL_H
  3. #include "BaseOpengl.h"
  5. class YUVRenderOpengl: public BaseOpengl{
  7. public:
  8.     YUVRenderOpengl();
  10.     virtual ~YUVRenderOpengl();
  12.     virtual void onDraw() override;
  14.     // 设置yuv数据
  15.     virtual void setYUVData(void *y_data,void *uv_data, int width, int height, int yuvType);
  17. private:
  18.     GLint positionHandle{-1};
  19.     GLint textureHandle{-1};
  20.     GLint y_textureSampler{-1};
  21.     GLint uv_textureSampler{-1};
  22.     GLuint y_textureId{0};
  23.     GLuint uv_textureId{0};
  24. };
  26. #endif //NDK_OPENGLES_LEARN_YUVRENDEROPENGL_H

YUVRenderOpengl.cpp

  2. #include "YUVRenderOpengl.h"
  4. #include "../utils/Log.h"
  6. // 顶点着色器
  7. static const char *ver = "#version 300 es\n"
  8.                          "in vec4 aPosition;\n"
  9.                          "in vec2 aTexCoord;\n"
  10.                          "out vec2 TexCoord;\n"
  11.                          "void main() {\n"
  12.                          "  TexCoord = aTexCoord;\n"
  13.                          "  gl_Position = aPosition;\n"
  14.                          "}";
  16. // 片元着色器 nv12
  17. //static const char *fragment = "#version 300 es\n"
  18. //                              "precision mediump float;\n"
  19. //                              "out vec4 FragColor;\n"
  20. //                              "in vec2 TexCoord;\n"
  21. //                              "uniform sampler2D y_texture; \n"
  22. //                              "uniform sampler2D uv_texture;\n"
  23. //                              "void main()\n"
  24. //                              "{\n"
  25. //                              "vec3 yuv;\n"
  26. //                              "yuv.x = texture(y_texture, TexCoord).r;\n"
  27. //                              "yuv.y = texture(uv_texture, TexCoord).r-0.5;\n"
  28. //                              "yuv.z = texture(uv_texture, TexCoord).a-0.5;\n"
  29. //                              "vec3 rgb =mat3( 1.0,1.0,1.0,\n"
  30. //                              "0.0,-0.344,1.770,1.403,-0.714,0.0) * yuv;\n"
  31. //                              "FragColor = vec4(rgb, 1);\n"
  32. //                              "}";
  34. /**
  35.  *  仅仅是以下两句不同而已
  36.  *  "yuv.y = texture(uv_texture, TexCoord).r-0.5;\n"
  37.  *  "yuv.z = texture(uv_texture, TexCoord).a-0.5;\n"
  38.  */
  39. // 片元着色器nv21 仅仅是
  40. static const char *fragment = "#version 300 es\n"
  41.                               "precision mediump float;\n"
  42.                               "out vec4 FragColor;\n"
  43.                               "in vec2 TexCoord;\n"
  44.                               "uniform sampler2D y_texture; \n"
  45.                               "uniform sampler2D uv_texture;\n"
  46.                               "void main()\n"
  47.                               "{\n"
  48.                               "vec3 yuv;\n"
  49.                               "yuv.x = texture(y_texture, TexCoord).r;\n"
  50.                               "yuv.y = texture(uv_texture, TexCoord).a-0.5;\n"
  51.                               "yuv.z = texture(uv_texture, TexCoord).r-0.5;\n"
  52.                               "vec3 rgb =mat3( 1.0,1.0,1.0,\n"
  53.                               "0.0,-0.344,1.770,1.403,-0.714,0.0) * yuv;\n"
  54.                               "FragColor = vec4(rgb, 1);\n"
  55.                               "}";
  57. // 使用绘制两个三角形组成一个矩形的形式(三角形带)
  58. // 第一第二第三个点组成一个三角形，第二第三第四个点组成一个三角形
  59. const static GLfloat VERTICES[] = {
  60.         0.5f,-0.5f, // 右下
  61.         0.5f,0.5f, // 右上
  62.         -0.5f,-0.5f, // 左下
  63.         -0.5f,0.5f // 左上
  64. };
  66. // 贴图纹理坐标（参考手机屏幕坐标系统，原点在左上角）
  67. //由于对一个OpenGL纹理来说，它没有内在的方向性，因此我们可以使用不同的坐标把它定向到任何我们喜欢的方向上，然而大多数计算机图像都有一个默认的方向，它们通常被规定为y轴向下，X轴向右
  68. const static GLfloat TEXTURE_COORD[] = {
  69.         1.0f,1.0f, // 右下
  70.         1.0f,0.0f, // 右上
  71.         0.0f,1.0f, // 左下
  72.         0.0f,0.0f // 左上
  73. };
  75. YUVRenderOpengl::YUVRenderOpengl() {
  76.     initGlProgram(ver,fragment);
  77.     positionHandle = glGetAttribLocation(program,"aPosition");
  78.     textureHandle = glGetAttribLocation(program,"aTexCoord");
  79.     y_textureSampler = glGetUniformLocation(program,"y_texture");
  80.     uv_textureSampler = glGetUniformLocation(program,"uv_texture");
  81.     LOGD("program:%d",program);
  82.     LOGD("positionHandle:%d",positionHandle);
  83.     LOGD("textureHandle:%d",textureHandle);
  84.     LOGD("y_textureSampler:%d",y_textureSampler);
  85.     LOGD("uv_textureSampler:%d",uv_textureSampler);
  86. }
  88. YUVRenderOpengl::~YUVRenderOpengl() {
  90. }
  92. void YUVRenderOpengl::setYUVData(void *y_data, void *uv_data, int width, int height, int yuvType) {
  94.     // 准备y数据纹理
  95.     glGenTextures(1, &y_textureId);
  96.     glActiveTexture(GL_TEXTURE2);
  97.     glUniform1i(y_textureSampler, 2);
  99.     // 绑定纹理
  100.     glBindTexture(GL_TEXTURE_2D, y_textureId);
  101.     // 为当前绑定的纹理对象设置环绕、过滤方式
  102.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
  103.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
  104.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
  105.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
  107.     glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE, width, height, 0, GL_LUMINANCE, GL_UNSIGNED_BYTE, y_data);
  108.     // 生成mip贴图
  109.     glGenerateMipmap(GL_TEXTURE_2D);
  111.     glBindTexture(GL_TEXTURE_2D, y_textureId);
  112.     // 解绑定
  113.     glBindTexture(GL_TEXTURE_2D, 0);
  115.     // 准备uv数据纹理
  116.     glGenTextures(1, &uv_textureId);
  117.     glActiveTexture(GL_TEXTURE3);
  118.     glUniform1i(uv_textureSampler, 3);
  120.     // 绑定纹理
  121.     glBindTexture(GL_TEXTURE_2D, uv_textureId);
  122.     // 为当前绑定的纹理对象设置环绕、过滤方式
  123.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
  124.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
  125.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
  126.     glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
  127.     // 注意宽高
  128.     // 注意要使用 GL_LUMINANCE_ALPHA
  129.     glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE_ALPHA, width/2, height/2, 0, GL_LUMINANCE_ALPHA, GL_UNSIGNED_BYTE, uv_data);
  130.     // 生成mip贴图
  131.     glGenerateMipmap(GL_TEXTURE_2D);
  132.     glBindTexture(GL_TEXTURE_2D, uv_textureId);
  133.     // 解绑定
  134.     glBindTexture(GL_TEXTURE_2D, 0);
  135. }
  137. void YUVRenderOpengl::onDraw() {
  139.     glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
  140.     glClear(GL_COLOR_BUFFER_BIT);
  141.     glUseProgram(program);
  143.     // 激活纹理
  144.     glActiveTexture(GL_TEXTURE2);
  145.     // 绑定纹理
  146.     glBindTexture(GL_TEXTURE_2D, y_textureId);
  147.     glUniform1i(y_textureSampler, 2);
  149.     // 激活纹理
  150.     glActiveTexture(GL_TEXTURE3);
  151.     // 绑定纹理
  152.     glBindTexture(GL_TEXTURE_2D, uv_textureId);
  153.     glUniform1i(uv_textureSampler, 3);
  155.     /**
  156.      * size 几个数字表示一个点，显示是两个数字表示一个点
  157.      * normalized 是否需要归一化，不用，这里已经归一化了
  158.      * stride 步长，连续顶点之间的间隔，如果顶点直接是连续的，也可填0
  159.      */
  160.     // 启用顶点数据
  161.     glEnableVertexAttribArray(positionHandle);
  162.     glVertexAttribPointer(positionHandle,2,GL_FLOAT,GL_FALSE,0,VERTICES);
  164.     // 纹理坐标
  165.     glEnableVertexAttribArray(textureHandle);
  166.     glVertexAttribPointer(textureHandle,2,GL_FLOAT,GL_FALSE,0,TEXTURE_COORD);
  168.     // 4个顶点绘制两个三角形组成矩形
  169.     glDrawArrays(GL_TRIANGLE_STRIP,0,4);
  171.     glUseProgram(0);
  173.     // 禁用顶点
  174.     glDisableVertexAttribArray(positionHandle);
  175.     if(nullptr != eglHelper){
  176.         eglHelper->swapBuffers();
  177.     }
  179.     glBindTexture(GL_TEXTURE_2D, 0);
  180. }

注意看着色器代码的注释，NV12和NV21的渲染仅仅是着色器代码有细小差别而已。

YUVRenderActivity.java

  1. public class YUVRenderActivity extends BaseGlActivity {
  3.     // 注意改成你自己图片的宽高
  4.     private int yuvWidth = 640;
  5.     private int yuvHeight = 428;
  7.     private String nv21Path;
  8.     private String nv12Path;
  9.     private Handler handler = new Handler(Looper.getMainLooper());
  11.     @Override
  12.     protected void onCreate(@Nullable Bundle savedInstanceState) {
  13.         super.onCreate(savedInstanceState);
  14.         // 注意申请磁盘写权限
  15.         // 拷贝资源
  16.         nv21Path = getFilesDir().getAbsolutePath() + "/nv21.yuv";
  17.         FileUtils.copyAssertToDest(this,"nv21.yuv",nv21Path);
  19.         nv12Path = getFilesDir().getAbsolutePath() + "/nv12.yuv";
  20.         FileUtils.copyAssertToDest(this,"nv12.yuv",nv12Path);
  21.     }
  23.     @Override
  24.     public BaseOpengl createOpengl() {
  25.         YUVRenderOpengl yuvRenderOpengl = new YUVRenderOpengl();
  26.         return yuvRenderOpengl;
  27.     }
  29.     @Override
  30.     protected void onResume() {
  31.         super.onResume();
  32.         handler.postDelayed(new Runnable() {
  33.             @Override
  34.             public void run() {
  35.                 // 注意nv12和nv21的偏远着色器有点不一样的，需要手动改下调试  YUVRenderOpengl.cpp
  36. //                if(!TextUtils.isEmpty(nv12Path)){
  37. //                    loadYuv(nv12Path,BaseOpengl.YUV_DATA_TYPE_NV12);
  38. //                }
  40.                 if(!TextUtils.isEmpty(nv21Path)){
  41.                     loadYuv(nv21Path,BaseOpengl.YUV_DATA_TYPE_NV21);
  42.                 }
  43.             }
  44.         },200);
  45.     }
  47.     @Override
  48.     protected void onStop() {
  49.         handler.removeCallbacksAndMessages(null);
  50.         super.onStop();
  51.     }
  53.     private void loadYuv(String path,int yuvType){
  54.         try {
  55.             InputStream inputStream = new FileInputStream(new File(path));
  56.             Log.v("fly_learn_opengl","---length:" + inputStream.available());
  57.             byte[] yData = new byte[yuvWidth * yuvHeight];
  58.             inputStream.read(yData,0,yData.length);
  59.             byte[] uvData = new byte[yuvWidth * yuvHeight / 2];
  60.             inputStream.read(uvData,0,uvData.length);
  61.             Log.v("fly_learn_opengl","---read:" + (yData.length + uvData.length) + "available:" + inputStream.available());
  62.             myGLSurfaceView.setYuvData(yData,uvData,yuvWidth,yuvHeight);
  63.         } catch (Exception e) {
  64.             e.printStackTrace();
  65.         }
  66.     }
  67. }

这个主要看懂loadYuv方法，对于YUV数据的读取即可。

思考

都说YUV的格式较多，本文我们介绍了如何使用Opengl ES渲染YUV420SP数据，那么对于YUV420P数据，使用Opengl ES如何渲染呢？欢迎关注评论解答交流。

专栏系列

Opengl ES之EGL环境搭建
Opengl ES之着色器
Opengl ES之三角形绘制
Opengl ES之四边形绘制
Opengl ES之纹理贴图
Opengl ES之VBO和VAO
Opengl ES之EBO
Opengl ES之FBO
Opengl ES之PBO

关注我，一起进步，人生不止coding！！！
微信扫码关注

原文链接：https://www.cnblogs.com/goFlyer/p/16917665.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

OpenGL热门文章

  • OpenGL实例：纹理映射
  • WebGL或OpenGL关于模型视图投影变换的技巧
  • QT OpenGLWidget的surfaceFormat
  • 在Visual Studio 2017上配置并使用OpenGL
  • Mac CLion下OpenGL环境配置
  • QT OpenGLWidget高分屏适配时出现的问题
  • Opengl ES之YUV数据渲染
  • LearnOpenGL学习笔记（一）画个三角形
  • LearnOpenGL学习笔记（二）纹理
  • OpenGL笔记（4）纹理

    • OpenGL推荐文章

  • Avalonia 跨平台框架中如何以正确的姿势使用 OpenGL ES 渲染。
  • 解密视频魔法：将ExternalOES纹理转化为TEXTURE_2D纹理
  • Opengl ES之YUV数据渲染
  • 使用 Silk.NET 创建 OpenGL 空窗口项目例子
  • OpenGL笔记（4）纹理
  • LearnOpenGL学习笔记（一）画个三角形
  • LearnOpenGL笔记（2）三角形
  • OpenGL光照2：材质和光照贴图
  • OpenGL入门3：渲染管线简介，三角形
  • OpenGl入门2：第一个窗口

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号