OpenGL ES 3.0 开发（三）：YUV 渲染

最新推荐文章于 2025-02-25 14:51:34 发布

字节流动

最新推荐文章于 2025-02-25 14:51:34 发布

阅读量4.4w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： OpenGL ES 3.0 文章标签： YUV 渲染 OpenGLES NV21 Android NDK

本文链接：https://blog.youkuaiyun.com/Kennethdroid/article/details/97153407

OpenGL ES 3.0 专栏收录该内容

84 篇文章 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

本文探讨了如何使用OpenGL ES 3.0进行YUV渲染，重点在于利用GPU加速YUV到RGB的转换。介绍了YUV与RGB的转换公式，并详细讲解了在OpenGLES中实现YUV渲染的步骤，包括生成纹理、编译着色器、加载数据到纹理以及绘制过程。同时提供了片段着色器的脚本示例和Java及Native层的数据加载方法。

该原创文章首发于微信公众号：字节流动

YUV 渲染原理

前面文章一文掌握 YUV 图像的基本处理介绍了 YUV 常用的基本格式，本文以实现 NV21/NV12 的渲染为例。

前文提到，YUV 图不能直接用于显示，需要转换为 RGB 格式，而 YUV 转 RGB 是一个逐像素处理的耗时操作，在 CPU 端进行转换效率过低，这时正好可以利用 GPU 强大的并行处理能力来实现 YUV 到 RGB 的转换。

YUV 与 RGB 之间的转换公式。

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

mat3 convertMat = mat3(1.0

了解本专栏

超级会员免费看

9 条评论

weixin_38020340 2023.07.21
这个我试过了，可以用来播放视频，适合用来对解码后的数据做中间处理的情况

洋葱先生007 2023.02.28
博主你好，有一处笔误在此指出。OpenGL ES常用纹理的格式类型解释时，后半部分中应该是GL_LUMINANCE_ALPHA

csliudh 2022.03.02
glTexImage2D(GL_TEXTURE_2D, 0, GL_LUMINANCE_ALPHA, m_RenderImage.width >> 1, m_RenderImage.height >> 1, 0, GL_LUMINANCE_ALPHA, GL_UNSIGNED_BYTE, m_RenderImage.ppPlane[1]); 您好，请问这里为什么UV部分的宽和高要少一半呢，OpenGL可以自动根据宽高的尺寸来识别是 YUV420还是YUV444吗？到了 glsl 中根据 texture(uv_texture, v_texCoord) 取纹理图像的值时是怎么对上的啊？
- 字节流动回复csliudh 2022.03.02
  UV 的高本身是 NV21 图像高的一半，至于宽为什么要变成一半？因为在横向是一个单位存一对 UV。如有疑问，可以加文章末尾的微信 Byte-Flow 私聊

chenxingping 2020.10.02
"yuv.x = texture(y_texture, v_texCoord).r; \n" "yuv.y = texture(uv_texture, v_texCoord).a -0.5; \n" "yuv.z = texture(uv_texture, v_texCoord).r - 0.5; 这里减少0.5含义是什么的
- 字节卷动回复chenxingping 2021.12.01
  [code=csharp] // YUV 图不能直接用于显示，需要转换为 RGB 格式，而 YUV 转 RGB 是一个逐像素处理的耗时操作， // 在 CPU 端进行转换效率过低，这时正好可以利用 GPU 强大的并行处理能力来实现 YUV 到 RGB 的转换。 // 只赋值x 则会出现黑白照片效果 yuv.x = texture(y_texture, v_texCoord).r; // 因为YUV转RGB用的是Y、U-128和V-128，texture函数返回向量值的范围是0-1.0，128表示0.5, 所以要减去0.5 yuv.y = texture(uv_texture, v_texCoord).a-0.5; yuv.z = texture(uv_texture, v_texCoord).r-0.5; // RGB转YUV: // Y = 0.299 R + 0.587 G + 0.114 B // U = - 0.1687 R - 0.3313 G + 0.5 B + 128 // V = 0.5 R - 0.4187 G - 0.0813 B + 128 // YUV转RGB // R = Y + 1.402 (V - 128) // G = Y - 0.34414 (U - 128) - 0.71414 (V - 128) // B = Y + 1.772 (U - 128) // YUV 和 RGB 的转换矩阵 highp vec3 rgb = mat3( 1.0, 1.0, 1.0, //第一列 0.0, -0.34414, 1.772, //第二列 1.403, -0.71414, 0.0 //第三列 ) * yuv; [/code]
- 顽石33回复程序员LF 2021.06.02
  一个byte是256对应的是1.0，所以128是对应的0.5。
- 程序员LF回复chenxingping 2021.05.20
  因为YUV转RGB用的是Y、U-128和V-128，texture函数返回向量值的范围是0-1.0，128表示0.5, 所以要减去0.5
- 字节流动回复chenxingping 2020.10.09
  有疑问，可以加文章末尾的微信 Byte-Flow 私聊