理解|理解 RGB & YUV 颜色编码

OpenGL + OpenGL ES +Metal 系列文章汇总
RGB 和 YUV 都是色彩空间模型,下面来分别介绍下
RGB 颜色编码 RGB颜色编码格式,是指每种颜色都可以用(红,绿,蓝)三种原色来表示,将RGB分别取不同的值,会展示不同的颜色。
用RGB表示的图像中,每个像素点都有红、绿、蓝三个原色,每种颜色都占用8 bit,即一个字节,所以一个像素点占用24bit,即3个字节,如下图所示

理解|理解 RGB & YUV 颜色编码
文章图片
RGB颜色编码像素点
当有一张 1280 * 720 大小的图片时,该图片中有 1280 * 720个像素点,其中每个像素点都采用RGB编码格式,那么这张图片就会占用1280 * 720 * 3 / 1024 / 1024 = 2.63MB的存储空间。
YUV 颜色编码 YUV 颜色编码采用的是明亮度色度来指定像素的颜色,其中Y表示明亮度(Luminance Luma),UV表示色度(Chrominance chroma),而色度,又定义了颜色的色调饱和度
YUV颜色编码格式在默认情况下是图像和视频压缩的标准,如下图所示,和RGB类似,每个像素先都包含Y、U、V3个分量,但是其中Y和UV是可以分离的,没有UV信息,也是可以显示图片的,只不过的黑白的。

理解|理解 RGB & YUV 颜色编码
文章图片
YUV颜色编码像素点
为什么使用YUV
从RGB颜色编码计算的图片存储空间,一张1280*720就要占用2.63MB,如果在视频渲染中也采样RBG颜色编码格式,其中视频也是由一帧一帧的图片组成,可想而知,占用的内存有多大。而使用YUV编码格式则可以极大的节省内存,节约带宽
使用YUV的优势
  • 降低占用的存储空间
  • 节省带宽
对于YUV图像来说,并不是每个像素点都需要包含Y、U、V三个分量,我们可以根据不同的采样格式,有以下几种采样格式
  • YUV4:4:4:每个Y分量对应自己的UV分量
  • YUV4:2:2:两个Y分量共用一套UV分量
  • YUV4:2:0:4个Y分量共用一套UV分量
其中最常用的YUV格式则是YUV4:2:0
YUV采样格式 - YUV4:4:4 YUV4:4:4 采样格式,表示其中的Y、U、V三个分量的采样比例是相同的,所以每个像素点的分量信息都是完整的,每个分量占用8bit,一个像素点占用1个字节。与RGB颜色编码相比,并没有节省带宽,占用的存储空间也没有减少
可以简单理解为:原始像素原样输出,没有任何压缩,如下图所示

理解|理解 RGB & YUV 颜色编码
文章图片
YUV4:4:4采样格式图示
  • 假设原始图像的像素为(一对[]表示一个像素点):
    [Y0, U0, V0]; [Y1, U1, V1]; [Y2, U2, V2]; [Y3, U3, V3];
  • 将原始图像像素按照YUV4:4:4采样的码流为(相对原始像素是原样输出):
    Y0, U0, V0, Y1, U1, V1, Y2, U2, V2, Y3, U3, V3
  • 最后映射还原的像素点 = 原始图像的像素,为:
    [Y0, U0, V0]; [Y1, U1, V1]; [Y2, U2, V2]; [Y3, U3, V3];
其中映射过程如下图所示

理解|理解 RGB & YUV 颜色编码
文章图片
YUV4:4:4采样映射过程 YUV采样格式 - YUV4:2:2 YUV4:2:2采样格式,是指其中Y分量的采样是UV分量的2倍,即Y分量与UV分量是按照2:1的比例采样。举例说明:如果水平方向有10个像素点,通过这种采样格式,最终采样了10个Y分量,5个UV分量
可以通俗的理解为:每采样一个像素点,都会采样Y分量,而U、V分量则会间隔一个采集一个,如图所示

理解|理解 RGB & YUV 颜色编码
文章图片
YUV4:2:2采样格式图示
  • 假设原始图像的像素为(一对[]表示一个像素点):
    [Y0, U0, V0]; [Y1, U1, V1]; [Y2, U2, V2]; [Y3, U3, V3];
  • 将原始图像像素按照YUV4:2:2采样的码流为:
    Y0, U0, Y1, V1, Y2, U2, Y3, V3
  • 最后映射还原的像素点为:
    [Y0, U0, V1]; [Y1, U0, V1]; [Y2, U2, V3]; [Y3, U2, V3];
其映射过程如图所示

理解|理解 RGB & YUV 颜色编码
文章图片
YUV4:2:2采样格式映射过程 YUV采样格式 - YUV4:2:0 YUV4:2:0采样格式,并不是只采样U分量,而不采样V分量,而是在每一行扫描时,只扫描一种U/V其中一种色度分量,而Y按照2:1的方式采样。
举例说明:
  • 当第一行扫描时,YU按照2:1的方式采样
  • 当第二行扫描时,YV按照2:1的方式采样
对于每个色度分量来说,在水平方向和竖直方向的采样 和 Y分享相比都是2:1
可以简单的理解为:在田字格的4个像素点中,4个Y分量共用了一套UV分量,如图所示

理解|理解 RGB & YUV 颜色编码
文章图片
YUV4:2:0采样格式图示
  • 假设原始图像的像素为(一对[]表示一个像素点):
    [Y0, U0, V0]; [Y1, U1, V1]; [Y2, U2, V2]; [Y3, U3, V3];
    [Y5, U5, V5]; [Y6, U6, V6]; [Y7, U7, V7]; [Y8, U8, V8];
  • 将原始图像像素按照YUV4:2:0采样的码流为:
    Y0, U0, Y1, Y2, U2, Y3,
    Y5, V5, Y6, Y7, V7, Y8,
  • 最后映射还原的像素点为:
    [Y0, U0, V5]; [Y1, U0, V5]; [Y2, U2, V7]; [Y3, U2, V7];
    [Y5, U0, V5]; [Y6, U0, V5]; [Y7, U2, V7]; [Y8, U2, V7];
其映射过程如图所示

理解|理解 RGB & YUV 颜色编码
文章图片
YUV4:2:0采样映射过程 总结
  • YUV4:4:4中Y、U、V分量的采样比例相同,既可以理解为原始图像像素点原样输出,存储空间没有任何变化
  • YUV4:2:2采样格式,是指每采样一个像素点,都会采样Y分量,而U、V分量则会间隔一个采集一个,本质是通过左右相邻像素点共用U/V分量。相比RGB颜色编码格式,节省了 1/3的存储空间,同时节约了在传输时的带宽
  • YUV4:2:0采样格式,是实际开发中最常用的颜色编码格式,相比YUV4:2:2采样格式,更能节省空间。是指在2*2的田字格中有4个像素点,其中4个Y分量共用一套UV分量,其本质是通过田字格的上下左右像素点共用U/V分量
RGB 与 YUV 颜色编码转换
  • 对于图像显示器(即屏幕)来说,是通过RGB模型来展示图像的
  • 传输时的图像数据使用的是YUV模型,主要是因为YUV可以节省带宽
所以在图像采集时需要将RGB模型转换到YUV模型显示时将YUV模型转换到RGB模型
【理解|理解 RGB & YUV 颜色编码】RGB 到 YUV的转换,其实就是将图像所有像素点的R、G、B分量 转换到 Y、U、V分量,其对应的转换公式如下(这个并不需要死记硬背):
//YUV和RGB的转换: 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 + 128R = Y + 1.402 (V-128) G= Y - 0.34414 (U-128) - 0.71414 (V-128) B= Y + 1.772 (U-128)

    推荐阅读