音視訊開發進階|第六講:色彩和色彩空間·上篇

語言: CN / TW / HK

前言

在前面幾篇文章中,我們完成了音訊相關基礎知識的學習,從今天開始,我們要暫別音訊,繼續學習視訊相關基礎內容。

雖說聲音在我們日常的生活、工作、娛樂過程中,發揮著不可替代的作用,但人們常說,百聞不如一見、耳聽為虛眼見為實。我們對於世界的認識、對於溝通和互動的需求從未滿足於 “聲音” 這一個途徑,在如今這個 “看臉” 的時代, 我們很多時候還追求 “看見”、“面對面”,而這就是視訊存在的意義

相對於純音訊,音視訊能傳遞更直觀、更豐富的資訊,很多時候,視訊的加入賦予了音訊血肉,也給予了我們更多的選擇。所有 基於純音訊的場景,都可以通過加入視訊元素而演變出新的玩法 ,比如音訊語聊升級為視訊通話、電臺直播轉變為秀場直播、語音課堂升級為視訊課堂等等。當然,視訊元素也並不侷限於 “攝像頭”,螢幕採集、版權影視資源都可以作為視訊資料來源,滿足了遊戲直播、一起看電影等場景。

既然 “視訊” 有這麼多價值,作為一個音視訊應用開發者,我們自然要來好好地瞭解一下它。

視訊的本質 —— 影象

在前幾次和聲音打交道的過程中,我們瞭解到聲音的本質是物體振動產生的波,我們對於聲音的感知,其實是通過耳膜感知了聲波的振動,所以對於聲音的學習是從聲波的採集以及數字化開始的。現在,我們開始和視訊打交道,自然要從視訊的本質、以及我們對視訊的感知方式聊起。

那麼,視訊是如何產生的呢?

大家一定有接觸過 “翻頁連環畫”,這種連環畫的每一頁都是靜態的圖片,常態下平平無奇,但如果我們快速地撥動翻頁,讓每一頁圖片快速、連貫地進行展示,原本 “靜態” 的圖片,在視覺上居然變成了 “動態” 的畫面(如下圖)。

這裡 “靜態圖片” 之所以會轉變為 “動態畫面” ,是基於人眼的 “視覺暫留 “特性:我們觀看物體時,物體首先成像於視網膜、並由視神經傳入大腦,大腦才感知到物體的像。而當物體從視線中移去時,視神經對物體的印象不會立即消失,會延續幾百毫秒。當舊影象消失、新影象替換出現的頻率足夠快時,前後影象在視覺上就產生了 “連貫”,形成了 “動態畫面”。而 “動態畫面” 也就是我們所說的 “視訊”。

從 “翻頁連環畫” 的現象看, 視訊的本質其實是一幀幀連續展示的影象 。而我們對視訊內容的感知方式,就是通 過眼睛捕獲到一幀幀影象上的 “色彩” 。無論是最簡單的黑白默劇,還是最豐富的炫彩影視,都需要由色彩組成血肉和骨骼。

所以,我們對於視訊知識的學習,還需要從認識 “色彩” 開始。

影象的血肉和骨骼 —— 色彩

大家都知道,眼睛之所以能看到物體,是因為接收了物體反射的光波。而色彩,則是大腦對光的一種 “感覺”。相較於聲音的 “只可言傳,不可意會”,色彩對於我們來說,是 “只可眼觀,不可言傳” 的。為了方便對色彩進行統一描述,也為了讓數位電路能識別、處理色彩資料,我們需要 利用數字化的手段對色彩進行定義

說到色彩的定義方式,最為大家所熟知的是 “光的三原色模型” 。光進入人眼後,視覺細胞會產生多個訊號,其中有 三種單色光訊號:紅(Red)、綠(Green)、藍(Blue) ,這三種單色光按不同比例組合,形成了不同的色彩,我們也稱其為 RGB 模型。參考 RGB 模型,我們選定了三種色彩分量,再對每種單色分量進行量化,也就完成了對色彩的數字化處理。

這種處理方式所使用的 “色彩模型” 的概念,很容易和 “多維空間、多維座標系” 聯絡起來。比如 RGB 模型的三個分量,可以分別視為三維空間的 X、Y、Z 座標,確定了具體的 RGB 分量值,相當於確定了一個(X,Y,Z)座標點,每個不同的點即代表不同的色彩。如果我們計算出每個分量的取值範圍(座標範圍),那麼該範圍內的所有分量的取值組合,就確定了一個色彩空間(Color Space),該空間中包含了該色彩模型可表示的所有顏色。

對於人眼來說,能識別的色彩數量有限,兼顧考慮技術瓶頸,實際應用中需要展示、能夠展示的色彩也是有限的,我們往往不需要一個色彩模型的所有顏色, 不同場景下一般只需要選用某個色彩 “子空間”,作為其標準的色彩空間(也稱為 “色域”) 。而不同軟硬體平臺,只要約定好支援相同的色彩空間,只使用該色彩空間內的顏色,就能實現相容互通,否則,它們對同一種色彩的展示就可能會出現差異。

在不同領域制定的眾多色彩空間中,有一個比較特殊的空間: CIE 色彩空間,它囊括了人眼所能感知的所有色彩 。CIE 色彩空間常常被當作標準的參考系,用於不同色彩空間之間的比較。如果我們將 CIE 色彩空間中的所有色彩,通過數學模型對映到一個二維平面中,將得到一個如下的 色域馬蹄圖 ,封閉區域即為 CIE 色彩空間所能表示的所有顏色。

CIE 色彩空間:人眼的可視色彩範圍

當然,除了基於光的三原色的 RGB 模型,色彩模型 / 色彩空間還有很多種,常見的比如 YUV、CMYK、HSV、HSI 等等。而在 RTC 應用中,主要使用的是 RGB 和 YUV ,我們後面會重點了解這兩種色彩空間。

而在瞭解具體的色彩空間之前,我們還有一個疑問需要解答: 色彩,是如何組成影象的呢?

雖說視訊的本質是影象,但影象並非不可分割,它仍然有更小的組成單位 – “畫素”(Pixel)。關於影象和畫素的關係,大家可以先觀察如下兩張圖片:

在上面的圖片中,左圖為正常尺寸的圖片全貌,右圖為放大一定倍數之後的區域性截圖(企鵝的頭部)。

我們可以看到,原本細膩的圖片,在放大之後出現了一個個小方塊,這些或色彩各異、或色彩相近的小方塊按一定規則排列組合,最終呈現了 “企鵝” 的形象。這裡的小方塊,就是所謂的 “畫素”。

一個畫素,是影象的一個最基本單元,是構成影象的一個色點,我們也可以稱其為畫素點。每個畫素點上記錄了某種色彩空間的每個分量值(比如 R、G、B),不同的分量值組合決定了這個畫素點所表示的顏色, 多個表示特定顏色的畫素點,按某種規則排列組合,就形成了完整的影象 。可以說,“畫素們” 承擔了圖片色彩構成的重任。

好了,關於畫素、以及畫素與影象色彩的構成關係,大家就先了解到這,後面我們還會和它們有進一步接觸。現在,讓我們回到色彩空間的話題上,來具體瞭解一下,RTC 應用中最常使用的色彩空間:RGB 和 YUV 。

1、RGB

首先,我們來認識一下 RGB 色彩空間。

我們前面已初步瞭解,RGB 色彩模型基於光的三原色原理建立,其三個分量為:紅(Red)、綠(Green)、藍(Blue)。在 RGB 模型下,影象的每一個畫素點都會儲存 R、G、B 三個分量(如下圖),每個分量取不同的數值( 0 ~ 255 ),該畫素點就能綜合呈現出不同的色彩。基於此,如果按(R,G,B)的方式記錄,那麼(255,0,0)、(0,255,0)、(0,0,255)分別表示的就是最純粹的 紅、綠、藍 。而比較特殊的,若 RGB 三個分量值均為 0,綜合得到黑色;反之,若三個分量取最大值 255,綜合得到白色。

RGB 可表示的色彩數量可達 1677 萬,這遠遠超過了人眼的感知範圍(約 1000 萬種),正因如此,RGB 被廣泛應用於各種顯示領域。而不同領域、不同應用場景,根據其所需的顏色範圍,又建立了基於 RGB 模型的、不同的色彩子空間,最常見的有 sRGB 和 Adobe RGB。

  • sRGB 和 Adobe RGB

sRGB 色彩空間由 Microsoft 在 1997 年主導制定,被廣泛應用於顯示器、數碼相機、掃描器、投影儀等裝置。大家選購顯示器時,肯定有在產品特性介紹中看到過諸如 “99% sRGB、100% sRGB” 之類的指標,其含義即為該顯示器對 sRGB 色彩空間的覆蓋程度,數值越高,意味著該顯示裝置所支援的色彩越豐富。而 Adobe RGB 比 sRGB 晚問世一年,由 Adobe 在 1998 年提出,它在 sRGB 的基礎上增加了 CMYK 色彩空間(一種專用於印刷業的色彩空間,模型分量為青(Cyan),洋紅(Magenta),黃(Yellow),黑(Black)),Adobe RGB 跟隨著 Adobe 設計軟體全家桶被廣泛應用於平面設計行業。

  • sRGB 和 Adobe RGB 的對比

關於 sRGB 和 Adobe RGB 的比較,我們可以藉助 CIE 色彩空間馬蹄圖 作為參考。

如下圖,我們將 CIE、sRGB 和 Adobe RGB 的色彩範圍換算到同一個平面上。最外圍的色彩區域為 CIE 色彩空間,三角形部分為 sRGB 和 Adobe RGB。可以看到,sRGB 和 Adobe RGB 的色彩範圍均小余 CIE,但是 Adobe RGB 的覆蓋範圍比 sRGB 更廣,尤其是在綠色區域覆蓋得更多(sRGB 大約能覆蓋 35% 的 CIE,Adobe RGB 則為 50%),這使得 Adobe RGB 在攝像、影象處理、保真方面更遊刃有餘。

sRGB 和 Adobe RGB 的比較

不過,即便 Adobe RGB 相較 sRGB 更出色,在應用範圍上依舊是 sRGB 更廣。作為 “前輩”,抱著 Windows 的大腿,sRGB 憑藉 Windows 雄厚的使用者基礎得到了廣泛的普及。如今,網際網路上絕大多數內容,比如視訊網站的影視劇、比如這篇文章中的圖片,基本都是以 100% sRGB 的色彩標準進行顯示的。一張 Adobe RGB 標準的圖片如果放在網頁上觀看,其顏色可能會變淡(相對於原始色彩),這是因為 Adobe RGB 圖片的色彩超過了網頁的顯色標準,部分色彩資訊出現了丟失。但即便如此,對於大部分使用者來說,日常場景使用 sRGB 已然足夠,當需要更廣的色域以達到更優質的色彩效果時(比如專業平面設計 / 攝影場景),才有必要考慮 Adobe RGB。

從 RGB 兩種子色彩空間的應用場景看,不得不承認 RGB 和大家的日常生活已是息息相關。但是,即便在採集、顯示等用途上 RGB “一家獨大”,當聚焦到視訊處理領域時,它卻有些施展不開手腳。

RGB 在表示顏色時有一個特點,那就是其三個通道分量是相關的,缺一不可。也即每個畫素點必須同時儲存 R、G、B 三個分量值才能正確表示顏色,這導致它不便於做編碼壓縮,如果用於儲存或傳輸,會佔用大量的空間和頻寬(關於空間和頻寬的重要性,我們在 音訊必知必會 - 音訊編解碼中已有過討論)。空間和頻寬問題,在一幀影象上或許可以勉強忍受,但在視訊資源上,就非常嚴峻了(時長 1s 的視訊資源,一般包含數十幀的影象,空間和頻寬佔用將呈數十倍增長)。

因此,我們還需要其他的色彩空間,來替代 RGB 用於視訊處理領域,而這就是接下來要和大家介紹的,YUV 色彩空間。

2、YUV

既然 RGB 三個分量的相關性,制約了其在視訊領域的應用,作為其上位選擇的 YUV 自然不能重蹈覆轍。YUV 色彩空間也有三個分量 Y、U、V,但和 RGB 不同的是,其三個分量並非都參與顏色的表示。

YUV 的三個分量中, Y 分量用於表示明亮度(Luminance),決定一個畫素是明、或暗(可以理解為是黑、或白)以及其明暗的程度。我們僅記錄明暗不同的 Y 分量,就能表示出影象的總體輪廓( 如下圖中的 【Y】)。而 U、V 分量表示色度(Chrominance),用於定義色彩和飽和度( 如下圖中的 【U】【V】)。一個記錄了 Y 分量的畫素,再新增上 U、V 分量,影象輪廓中就填充了 “黑白、明暗” 之外的其他色彩。

YUV 和 其三個分量

不難發現,即使沒有 U、V 分量,僅憑 Y 分量我們也能 “識別” 出一幅影象的基本內容,只不過此時呈現的是一張黑白影象。而 U、V 分量為這些基本內容賦予了色彩,黑白影象演變為了彩色影象。這聽起來是否有些似曾相識呢?這其實也是黑白電視和彩色電視之間的關係。

YUV 是在黑白、彩色電視的過渡時期應運而生的,它這種既可以完整記錄彩色訊號,又能通過僅記錄 Y 通道訊號來表示黑白畫面的特性,很好地解決了黑白電視與彩色電視的相容互通問題。並且,由於人眼對於亮度(Y)相較於色度(U、V)更高、更敏感,我們對於不同明亮度的識別能力,遠遠超過對不同色度的識別能力。這意味著,我們可以在保留 Y 分量資訊的情況下,儘可能地減少 U、V 兩個分量的取樣,以實現最大限度地減少資料量,同時還能保證人眼視覺失真度最小,這對於視訊資料的儲存和傳輸是有極大裨益的。這也是為什麼,YUV 相較於 RGB 更適合於視訊處理領域。

3、YUV 和 RGB 的轉換

在瞭解了 RGB 和 YUV 的基礎知識和應用場景後,你可能會有一些疑惑。既然在影象採集、顯示方面,我們主要使用 RGB,但是在影象儲存、處理、傳輸方面,我們又要選擇 YUV。而在一個完整的應用場景中,視訊的採集、儲存、處理、 傳輸、顯示等環節,卻是相互關聯、缺一不可的,這裡是否會存在衝突呢?

是的,這裡的確存在兩種色彩空間的使用衝突,我們解決衝突的方式是 “色彩空間轉換”。

RGB 與 YUV 的相互轉換,存在於視訊處理鏈路的各個必要環節。

視訊採集裝置一般輸出的是 RGB 資料,我們需要將其轉換為 YUV 資料再進行後續的處理、編碼和傳輸;同樣的,顯示裝置通過傳輸、解碼環節獲取到 YUV 資料後,也需要將其轉換為 RGB 資料,再進行消費展示。

關於這兩種色彩空間轉換的細節,大家暫不需要深究,但需要了解到: 色彩空間轉換是一個基於 “標準” 來執行的過程,只有在明確標準的基礎上,才能通過一定的數學運算完成二者的相互轉換 。而 “標準” 有很多種,比如 BT.601、BT.709 等等,不同的標準會有不同的轉換公式,有興趣的同學可以去查閱相關的資料做進一步瞭解。

關於 YUV 和 RGB ,除了要了解它們的基本原理,我們還需要關注它們的 “取樣方式” 和 “儲存格式”。“取樣方式” 和 “儲存格式” 相關的內容,非常重要卻也比較複雜,我們將在下一篇文章中,再詳細地和大家探討。

總結

本篇文章我們重點講述影象與色彩基礎知識的第一部分,在今天的學習過程中,大家可以瞭解到視訊、影象、畫素和色彩之間的關係,也初步認識了兩種重要的色彩空間:RGB 和 YUV,以及它們的基本原理、差異和聯絡。

接下來,我們還是通過一個思維導圖,整理一下所有的內容:

當然,以上的內容還只是開胃小菜,在下一篇文章中,我們會繼續和 RGB、YUV 打交道,看看它們身上還有哪些 “未解之謎”。期待和大家的下一次見面。

問:本期思考題

RGB 顏色空間也能表示黑白色和彩色,為什麼還需要 YUV 來解決黑白電視和彩色電視之間的相容互通問題呢?

( 下期揭祕)

上期思考題揭祕 :arrow_down:

問:作為取樣率、位寬、聲道數的綜合指標,音視訊編解碼位元速率對音質會有顯著的響應,那對於位元速率的選擇,是否越高越好呢?

答:理論上,對於有失真壓縮的音訊編碼,位元速率越高意味著壓縮越少,音質保真度越高。但是,對於位元速率的選擇,不僅僅需要考慮其對音質的影響,還需要關注實際使用場景的需求、限制。

1、對於音樂電臺等場景,為了保證音質,會選用比較高的音訊位元速率(>64kbps),根據不同的取樣率、位深和聲道數可以適當調整。但在相同的取樣率、位深和聲道數下,位元速率提高到一定程度後,對音質的提升已不再明顯,繼續提高收益不大。需要找到一個音質和壓縮率最契合的 “甜點” 位元速率。比如,AAC-LC 的甜點位元速率在 96kbps,相當於 MP3 的 128kbps,已經達到了 CD 音質;

2、對於語聊房等場景,多人同時上麥,如果位元速率太高勢必會對頻寬產生壓力,如果有出海需求,因各國家地區的網路基建參差不齊,更要謹慎把控位元速率。按基本需求,16kbps 就能保證語音溝通的質量;

3、位元速率是可以靈活設定的,同一個 APP 的不同場景,同一個場景下的不同角色,都可以按需設定;

4、ZEGO SDK 支援開發者根據實際需求,自定義音訊位元速率。同時也提供了不同音質標準的預設配置,供開發者直接選用:基礎音質 (16 kbps, 單聲道)、標準音質 (48 kbps, 單聲道;56 kbps, 雙聲道)、高音質 (128 kbps, 單聲道;192 kbps, 雙聲道)。