LUT 濾鏡到底是啥玩意兒

位圖

位圖是一個像素數組。

將一張位圖放大，
能夠看到一個一個小格子，
每一個小格子就是一個像素：

每一個像素都由 8 * 4 bit 的 RBGA 數據組成(帶 alpha 通道)。
把圖片恢復到初始尺寸：

組成這麼一張 512 * 512 px 位圖的像素數據量：

512 * 512 * 4 * 8 = 6291456 bit ≈ 768 kb

在圖片傳輸以前咱們會將位圖進行壓縮，
常見的壓縮格式有 PNG & JPEG，這裏不作深刻。
仍是剛剛的 512 * 512 的 lena 圖，

通過 JPG 100% 質量壓縮以後，大小僅爲 154kb。

事實上，解壓後的圖片大小跟原始文件大小之間沒有任何關係，
只與圖片的像素數量有關。

順帶一提，簡介中的預覽效果，
是自帶的 JPG Decoder 對圖片解壓後的位圖效果，
壓縮文件不通過解壓是沒法預覽的。

濾鏡

濾鏡是對像素數組進行的操做，
大體能夠分爲如下幾類：

• 逐像素操做，包括調整圖片的亮度、對比、飽和度、色調、灰度、分離 RGB 通道等；
• 像素卷積變換，包括邊緣檢測、浮雕化、模糊、銳化等；
• 仿射矩陣變換，包括縮放、旋轉、傾斜、扭曲、液化等；
• 圖像合成；

其中最簡單的濾鏡是進行逐像素操做。
濾鏡設計師常常會調製一個叫作色表的圖片：

在客戶端有相關框架能夠將它應用成濾鏡，
這張色表圖究竟是啥東西呢?

LUT

LUT 全稱 LookUpTable，也稱爲顏色查找表，
它表明輸入的像素數組跟輸出的像素數組的映射關係。
好比一個像素的顏色值分別是 R1 G1 B1,
通過一次 LUT 操做：

LUT(R1) = R2
LUT(G1) = G2
LUT(B1) = B2

複製代碼

這個像素就從一個顏色指定變成了另外一個顏色。

因爲組成像素的 RGB 顏色值範圍始終在 0 ~ 255，
因此能夠預先保存好全部映射關係，
輸入原圖以後按座標匹配，可下降計算成本。

3D LUT

將 RGB 分別做爲一個 XYZ 創建三維座標系，
一個 3D LUT 就至關於將一個座標系映射到
另外一個由 R1G1B1 構建的三維座標系上：

怎麼用最少的數據記錄這層映射關係呢？
有機智的同窗作了兩件事情：

• 去除原生座標系，由座標來表明初始色值；
• 將三維座標記載的顏色數據降維成二維數組；

第一件事比較好理解就是設定顏色默認值，
第二件事，二維數組有沒有很耳熟，
沒錯，位圖就是二維數組。

因而，濾鏡中使用的色表圖就生成了！
其本質是一個記錄 RBG 三維顏色數據的映射表。
在傳輸的時候也能夠打包成 .cube 文件，
同理，位圖的像素數據能夠預覽，設計師能夠很直觀作視覺比較，
.cube 打包的數據文件未經解壓不可預覽，
實際上是一個東西。

應用中使用的色表圖，
實際上是設計師將濾鏡效果應用到原生 RBG 座標系，
三維座標變換後由新的 RBG 數組生成的位圖。

關於 LUT 文件

這個 LUT 文件生成出來了，怎麼使用呢？
這時候有同窗就回答了，
前面說了，客戶端有相關框架能夠應用濾鏡。

iOS 中與圖像處理有關的框架：
CoreImage，Metal，OpenGL-ES，第三方框架 GPUImage 等，
它們均可以實現 LUT 映射。

因此，具體是怎麼作的呢？

細心觀察，
色表圖每行每列各有 8 個小格，共64格。
咱們將 512 * 512 px 的色表圖放大：

每一個小格有 64 * 64 個像素，
每一個像素有一個 RGB 值，總數據量是：

64 * 64 * 64

按照以前說法，一個 RGB 三維座標系攜帶的數據量應該是：

256 * 256 * 256

應該是匹配不了的。
實際上是由於使用原座標軸成本過高，
因此對每 4 個 RGB 進行了一次差值減小數據量。

使用 LUT 文件

對輸入圖片進行濾鏡處理時，
先以顏色 (RGB) 的 B 值進行索引，
找到所屬於的小格，

而後根據 R 和 G 值在對應小格中定位到映射的目標像素，
讀取對應的 RBG 值，應用在對應的目標像素上。

3D LUT Creator

3DLC 是一款專門用來編輯 LUT 文件的強大工具。 -待續-