Visual LabINTERACTIVE LEARNING
阶段 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,因此色度平面宽高通常都是亮度平面的一半。

最小例子javascript
const ySamples = width * height;
const cbSamples = (width / 2) * (height / 2);
const crSamples = cbSamples;
const bytes8Bit420 = ySamples + cbSamples + crSamples;
  1. 亮度全分辨率 Y 平面保留每个像素的明暗细节。
  2. 色度宽高减半 Cb 与 Cr 各只有四分之一像素数量。
  3. 合计一点五倍 8-bit 4:2:0 每像素平均约 1.5 字节。

相比 8-bit RGB 的每像素 3 字节,4:2:0 原始帧已把数据量减半。

本课概念
OPTIONAL · 按需查阅完整术语表与概念边界

遇到陌生术语时再展开,不打断主线实验。

展开⌄
LIVE EXPERIMENT · 先获得反馈

边改边运行

浏览器加载后会激活代码编辑器、独立运行环境与实时输出。

本课挑战

实现一个 RGB ↔ YCbCr 转换,并可视化 limited range 与 full range。

DEEP DIVE · 实验之后

回到原理,解释刚才发生了什么

先用结果建立反馈,再按运行流程、核心原理和知识关系逐层深入。

CORE IDEA

核心讲解

01

空间和时间共同决定视频

分辨率决定每帧像素数,帧率决定每秒有多少帧。两者相乘后再乘像素位数,得到未经压缩的吞吐量。

02

亮度与色度分开保存

视频编码通常使用 YCbCr。4:2:0 对每个 2×2 亮度块只保存一组色度样本,在视觉损失较小的情况下显著减少数据。

OPTIONAL · 迁移时查阅Web 与原生实现对照

主线实验完成后,再用完整映射处理跨平台或跨 API 迁移。

展开⌄
API COMPARISON

Web 与原生最终都要把解码后的像素帧送往合成器,但可见的像素格式层级不同。

WebGL

解码器常直接输出 NV12、I420、P010 等表面,再交给 GPU Shader 或系统渲染器。

WebGPU

video 元素隐藏 YUV 表面;Canvas、VideoFrame 和 WebGPU 可在不同层级接收帧。

跨模块传视频帧时,除了宽高,必须同时携带 pixel format、color space、range 和 stride。