理解 RGB & YUV 颜色编码

OpenGL + OpenGL ES +Metal 系列文章汇总

RGB 和 YUV 都是色彩空间模型，下面来分别介绍下

RGB 颜色编码

RGB颜色编码格式，是指每种颜色都可以用（红，绿，蓝）三种原色来表示，将RGB分别取不同的值，会展示不同的颜色。

用RGB表示的图像中，每个像素点都有红、绿、蓝三个原色，每种颜色都占用8 bit，即一个字节，所以一个像素点占用24bit，即3个字节，如下图所示

RGB颜色编码像素点

当有一张 1280 * 720 大小的图片时，该图片中有 1280 * 720个像素点，其中每个像素点都采用RGB编码格式，那么这张图片就会占用1280 * 720 * 3 / 1024 / 1024 = 2.63MB的存储空间。

YUV 颜色编码

YUV 颜色编码采用的是明亮度和色度来指定像素的颜色，其中Y表示明亮度（Luminance Luma），U和V表示色度（Chrominance chroma），而色度，又定义了颜色的色调和饱和度。

YUV颜色编码格式在默认情况下是图像和视频压缩的标准，如下图所示，和RGB类似，每个像素先都包含Y、U、V3个分量，但是其中Y和UV是可以分离的，没有UV信息，也是可以显示图片的，只不过的黑白的。

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颜色编码相比，并没有节省带宽，占用的存储空间也没有减少

可以简单理解为：原始像素原样输出，没有任何压缩，如下图所示

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];

其中映射过程如下图所示

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分量则会间隔一个采集一个，如图所示

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];

其映射过程如图所示

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分量，如图所示

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];

其映射过程如图所示

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的转换，其实就是将图像所有像素点的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 + 128

R = Y + 1.402 (V-128)
G= Y - 0.34414 (U-128) - 0.71414 (V-128)
B= Y + 1.772 (U-128)