阶段 1 · 信号数字化基础22 分钟
数字视频:像素、帧率与 YUV 色彩
Resolution、FPS、RGB、YCbCr 与 Chroma Subsampling
从一张像素网格扩展到连续帧,理解 RGB 与 YUV/YCbCr 表示,以及 4:4:4、4:2:2、4:2:0 如何减少色度数据。
LEARNING GOALS
先明确本课目标
1
区分分辨率与帧率
2
解释 RGB 到 YUV 的动机
3
读懂 4:4:4、4:2:2、4:2:0
MENTAL MODEL · 再建立心智模型
视频是一叠按时间翻动的图像;Y 保存人眼最敏感的明暗细节,Cb/Cr 保存可适度降采样的颜色差异。
MINIMAL EXAMPLE
4:2:0 到底省掉了哪些样本?
在典型 4:2:0 中,每个像素保存一个 Y,而每个 2×2 像素块共享一组 Cb 和 Cr,因此色度平面宽高通常都是亮度平面的一半。
javascriptconst ySamples = width * height;
const cbSamples = (width / 2) * (height / 2);
const crSamples = cbSamples;
const bytes8Bit420 = ySamples + cbSamples + crSamples;- 亮度全分辨率 Y 平面保留每个像素的明暗细节。
- 色度宽高减半 Cb 与 Cr 各只有四分之一像素数量。
- 合计一点五倍 8-bit 4:2:0 每像素平均约 1.5 字节。
相比 8-bit RGB 的每像素 3 字节,4:2:0 原始帧已把数据量减半。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开,不打断主线实验。
展开⌄
音视频原理Pixel Format视频帧像素分量的类型、位深、排列与子采样方式,例如 RGBA、I420、NV12。音视频原理YCbCr把亮度 Y 与蓝色/红色色差 Cb/Cr 分开表示的数字视频颜色模型。音视频原理Chroma Subsampling降低色度平面空间采样率以减少数据的方式,常见 4:2:0、4:2:2、4:4:4。音视频基础Video Frame带尺寸、时间戳和颜色信息的一张视频画面,可来自解码器、视频元素、Canvas 或 WebCodecs。音视频原理Frame Rate视频每秒呈现或采集的帧数,常以 FPS 表示;它描述时间采样密度,不等同于显示器刷新率。音视频原理PixelPixel(picture element,图像元素)是二维图像网格中的一个采样位置,保存的颜色分量由 Pixel Format 决定。音视频原理Resolution图像或视频帧在宽、高方向包含的像素数量,例如 1920×1080;它描述采样网格大小,不直接等同于清晰度。音视频原理RGB以 Red、Green、Blue(红、绿、蓝)三个颜色分量表示像素的加色模型,常用于显示与图形渲染。音视频原理YUV Plane视频帧中分别保存亮度 Y 与色度 U/V(或数字视频中的 Cb/Cr)分量的二维数据平面;各平面尺寸和步长可能不同。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
实现一个 RGB ↔ YCbCr 转换,并可视化 limited range 与 full range。
回到原理,解释刚才发生了什么
先用结果建立反馈,再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
空间和时间共同决定视频
分辨率决定每帧像素数,帧率决定每秒有多少帧。两者相乘后再乘像素位数,得到未经压缩的吞吐量。
亮度与色度分开保存
视频编码通常使用 YCbCr。4:2:0 对每个 2×2 亮度块只保存一组色度样本,在视觉损失较小的情况下显著减少数据。
OPTIONAL · 迁移时查阅Web 与原生实现对照主线实验完成后,再用完整映射处理跨平台或跨 API 迁移。
展开⌄
Web 与原生最终都要把解码后的像素帧送往合成器,但可见的像素格式层级不同。
WebGL
解码器常直接输出 NV12、I420、P010 等表面,再交给 GPU Shader 或系统渲染器。
WebGPU
video 元素隐藏 YUV 表面;Canvas、VideoFrame 和 WebGPU 可在不同层级接收帧。
跨模块传视频帧时,除了宽高,必须同时携带 pixel format、color space、range 和 stride。