作者|鄭行濤(軒怒)
出品|阿裡巴巴新零售淘系技術部
讀者受益：
1、鹿班PICASSO實時合圖引擎因何而生
2、實時合圖引擎如何支撐每秒千萬圖像通路
3、實時合圖引擎應用場景介紹
緣起
在個性化的公域觸達和人貨場的私域營運中，圖檔作為一個資訊表達的載體，在過去一直是先生産，後消費。在這個生産-消費的過程中，存在兩個循環:
商家與設計師的圖檔制作生産循環；
使用者與商品的圖檔投放消費循環；
在生産側，優秀的設計創意可以對使用者注意力帶來顯著的提升，但由于缺乏标準化的生産機制，難以形成規模化的供給，更多的依靠作為個體的設計師的經驗知識來優化生産供給。
在消費需求側，相比于了解結構化的商品資訊而言，機器去了解非結構化圖檔資料，在當下仍然有諸多的限定與不确定，同時由于無法幹預生産，進而很難建構出一套正回報機制，隻能以量取勝。
我們希望能夠利用新硬體與新軟體的紅利，建構生産與消費之間的資料新閉環，形成生産-消費雙循環關聯與共振。
基于以上出發點，我們在集團圖檔下行核心鍊路上建構起實時圖像渲染服務，将原先面向存儲的圖檔基礎設施增加上面向了解生成的能力。
存儲效率與設計能效雙提升
營銷圖檔的“千人千面”帶來使用者轉化提升的與流量宏利的同時，給圖檔的存儲成本與設計的生産能效上也帶來了巨大的挑戰。
在智能個性化算法大規模應用的今天，相同的商品在不同的“人貨場”中有不同的展現需求。因“千人千面”普及而産生的大量設計脈絡上大緻相同僅局部元素不同的備援圖檔，帶來了存儲成本與設計成本的爆炸性上漲。
如上圖所示，同一套設計在不同年齡與性别的使用者群體中展現的是配色與文案利益點的不同，而在不同尺寸的容器元件上又展現出圖像分辨率的不同。
由此看來設計與個性化算法做笛卡爾積帶來的圖檔數量的指數級别增加，若按照傳統存儲方式儲存，财務成本是不可接受的；按照傳統用人做圖的生産模式，設計成本也非常高昂。
随着實時圖像渲染服務的誕生，以上兩個問題都迎刃而解。對于個性化算法産生的爆炸性的圖檔資料，僅需存儲最原始的一份結構化設計，而實際展示的圖檔在通路時實時渲染生成，用高性能計算換取存儲成本。
另一方面，實時渲染所存儲的圖像結構化的資料相較于二進制流資料更易于被設計端所了解。圖像分元素控制更能感覺使用者對設計元素級的敏感性，進而更高效反哺智能化生産。
在大規模個性化算法應用下，實時圖像渲染成為了精準控制圖像元素級展現的必要條件，而隻有做到了圖像元素級的控制才能更好感覺“人貨場”的資料輸入進行智能化表達，進而提升使用者轉換。
挑戰
為完成面向了解圖像基礎設施的全新更新和進一步提升存儲與設計效率的目标，我們做出了在集團圖像下行核心鍊路上搭建個性化實時渲染服務的決定。
該服務的主要職責為每次使用者通路圖像資源時，将結構化的設計資料與個性化需求相比對，實時渲染出圖像傳回給使用者。實時圖像渲染服務作為圖檔中心的基礎設施服務，既要有設計增量效果又要滿足高吞吐、高可用與低延遲(處理<100ms)，這些都給我們系統設計帶來了巨大挑戰。
▐ 高吞吐低延時
按照傳統做法，用普通 CPU 機器渲染首焦的 banner 圖檔，至少需要 300ms 的延時，單機吞吐無法超過100QPS，這樣的性能隻能做到圖檔離線生産，無法支撐實時渲染。
為了滿足高吞吐低延遲時間的需求，我們引入了 FPGA 異構計算的架構，将圖像編解碼與圖像融合燒寫進 FPGA 闆卡中，極大化的利用 PCIE 帶寬及異構的優勢，增加單機吞吐，降低機關延時。
目前在88Cores 2.5GHz / 340GB RAM雙闆卡4 VU9P FPGA 的異構機器上，用鹿班模版庫曆史資料作為壓測标準（輸出手淘上應用最廣的 heic 格式的圖像，平均7個圖層，平均大小在800*800）最終能單機吞吐穩定到3000QPS，耗時控制在100ms内，相比普通 CPU 機器性能提升超30倍。
▐ 設計效果全支援
設計效果的豐富度與精細化程度很大程度上影響了圖檔的表達能力，進而影響圖檔的轉化率。
為了完美還原漸變、描邊、陰影、旋轉等渲染效果，解決多語言、多字型帶來的設計效果上的飛越，我們引入了 skia 渲染引擎，以上為渲染的示例圖。skia 渲染引擎能在不影響硬體性能的情況下生成華麗的設計效果，滿足視覺設計上的大部分需求。
▐ 縮放&品質&壓縮字尾全支援
在手機淘寶與網頁淘寶中，通路的所有圖檔連結都并不是圖檔的原始格式，而是經過對應字尾進行壓縮的或更高壓縮率編碼的圖檔。
其中應用最廣的高壓縮率編碼格式 HEIF ，編碼的計算複雜度是 JPEG 編碼的10倍以上，用普通的 CPU 機器來輸出這種格式圖檔效率極低。
根據統計，每一份原圖對應的不同字尾輸出格式有 2400+ 種，TOP6 格式覆寫率 46%，TOP15 格式覆寫率僅達到 64%。可以看出在實際的圖檔應用場景中，所有通路都是帶有字尾請求的。
我們支援了集團圖檔中心的所有縮放參數與格式參數（包括heic&webp輸出）。由于在 FPGA 中操作，傳回縮放與高壓縮編碼處理過的圖檔不增加耗時，保證生成的連結在全集團的端與頁面上無差别适配。
▐ 異地多活與全球部署
在個性化場景下進行實時渲染，CDN 命中率不會很高，是以保證源站的穩定性就成了重中之重。如何避免因單地網絡或存儲叢集不可用進而影響業務整體可用性，如何降低網絡流量在垮地域中對穿都是亟須解決的問題。
為了響應集團國際化的需求，我們的服務必須在全球都有部署。實時渲染服務必須讓存儲和計算在一個機房内完成閉環，但又要考慮到資料垮地域複制的安全性。
實作細節
實時渲染服務架設在 CDN 與底層 OSS 存儲之間，是一個重計算、低延時、高吞吐的分布式系統。
使用者首次通路個性化圖檔會回源到實時渲染服務源站取圖，此時我們會将渲染好的圖檔經過高壓縮碼率後吐還給 CDN；之後相同通路請求在更貼近使用者的 CDN邊緣節點上就能得到傳回。
為滿足國際化需求，實時渲染服務在全球多地均有部署，保證全球時延無差别。各地服務的存儲資料都在本機房内流轉，避免跨機房通路資料。每個地域服務的子產品劃分在下面大圖中能夠展現：
每個地域的流量服務入口都來自于 CDN 的回源請求，按照調用順序依次經過個性化場景引擎、圖檔協定服務、資源管理服、渲染引擎、FPGA 圖像處理引擎這五大子產品。接下來會依次講解關鍵技術。
▐ 基于 FPGA 的高吞吐低延時實時融合方案
基于智能算法，商品在不同“人貨場”的個性化呈現，實質上是将不同的标簽元素處理後生成不同的圖檔。以圖層為單元定義合圖結構，實作上采用圖層依次處理的方案，如下圖所示，即循環執行解碼、預處理、合圖，待合圖完成後，再進行使用者請求參數（包括分辨率、目标編碼格式）的比對。
圖檔處理方案實作
技術挑戰與選型
傳統的離線生産邏輯将圖像合成後以圖像格式存儲在 OSS，下載下傳端從 OSS 拉圖後進行縮放、轉碼，而在新的實時圖像渲染系統中，合圖及目标格式的适配在同一個流程中完成，做到使用者請求實時處理，支撐“人貨場”的個性化表達。
複雜功能的實作帶來的是計算量的增加，合圖相比于傳統的圖像處理，單次請求單次合圖請求輸入圖層數量多（線上平均6-7個圖層），資料量大，在單次請求内完成多圖層的處理，不論從資源占用，還是處理耗時，對服務端來說都存在很大的挑戰。
進行9個圖層的合成，使用軟體方案處理，輸出為850x850，吞吐及 RT 情況如下，對于 JPG 輸出，從火焰圖可以看到，CPU 主要消耗在解碼、渲染等重計算處理上，如果使用軟體方案來處理，要支撐30w QPS 的目标處理請求，需要 3750 台機器，成本無法接受，這種重計算邏輯的硬體化加速顯得十分必要。
FPGA 由于其硬體并行加速能力和可程式設計特性，在傳統通信領域和 IC 設計領域大放異彩，基于 line buffer 的實作，非常适用于滑窗插值、塊比對、MEMC 等圖像處理算法的并行及流水線加速，借鑒圖檔中心在下行鍊路使用 FPGA 進行轉碼的經驗與阿裡雲 AIS 合作，基于異構 FPGA 機器，将重計算的邏輯 offload 至 FPGA 來解決編解碼及複雜圖像處理問題。
FPGA 實作合圖與編解碼全流程
合圖的輸入流主要包括 PNG、JPG 及 bitmap 資料，對于 PNG 和 JPG 資料，需要先進行解碼，針對不同的圖層類型自适應選擇解碼器解碼，對于JPG格式資料，FPGA 高性能解碼方案在2019年雙11時我們已經上線，對于 850x850 的圖像，2ms即可完成解碼，而軟體 SIMD 加速版本 turbojpeg 需要10ms 左右。
由于 PNG 帶有透明通道，可提升模闆元素的呈現效果，設計上對 PNG 情有獨鐘，在解碼端 PNG 的處理量也是最大的。
PNG 的壓縮過程是完全無損的，壓縮過的檔案可以準确的還原出原圖，可封裝RGBA8888帶透明的真彩色資料，并且是一種可擴充的封裝格式，PNG 檔案格式裡面包含不同的區塊(chunks)，各個區塊帶有不同類型的資料。典型的PNG資料包括四部分，而在此基礎上，增加acTL（動畫控制塊）、fcTL（幀控制塊）、fdAT（幀資料塊）即為 APNG 動圖格式。
IDAT 的壓縮過程主要包括 Filter 和 deflate 兩部分，Filter 即對像素做過濾，PNG 編碼使用差分對原始像素資料進行 Filter ，該過程無任何壓縮損失，并且完全可逆。
PNG 中的 Deflate 與 gzip、zlib 中的 deflate 原理一樣，進行像素資料的無損壓縮。最終我們與 AIS 合作将解壓縮和 Filter 在 FPGA 中實作，大大加速的解碼流程，提升吞吐并降低延時。
為支援豐富的圖層表達，在圖層預進行中實作多種圖層縮放、裁剪、旋轉、坐标适配邏輯，大大拓展圖層元素的效果表現力。
合圖本質為 alpha blending，即根據像素級透明度進行前後景的疊加，有大量像素級的乘加和操作，對于9個圖層的疊加，最初直接采用像素操作方案，耗時40ms，後續使用 SIMD 加速，一個指令周期可進行64個像素點的操作，大大提升 CPU 的處理效率，最終在服務端，加速後9個圖層的耗時控制在1個ms。
為支撐不同分辨率、不同品質、不同細節清晰度的請求，我們在服務端實作了大量的圖像處理邏輯，包括各種各樣的縮放操作（長邊等比縮放、短邊等比縮放、縮放裁剪、縮放不裁剪）、品質調整、銳化，最終輸出調整後的結果。
手淘上目前常用的圖檔格式為 HEIC/WEBP，而 PC 上常用的格式為 JPG/WEBP ，為支撐淘系業務，需做到支援不同編碼格式的輸出。從壓縮收益來看，HEIC>WEBP>JPG，高的壓縮收益帶來的是複雜度的提升，相比于 JPEG 編碼隻需要做中心化、DCT 變換、量化、熵編碼，HEVC 幀内編碼複雜度非常高（infra pred包括35個預測方向），是同等大小的 JPEG 編碼複雜度的10倍以上。最終我們在硬體上支援 HEVC/JPG 編碼，将軟體 1000ms 耗時的處理降低到2-3ms。
經過 FPGA 硬體化加速，我們 HEIC/JPG 輸對外連結路達到了3000 QPS 的吞吐，全流程的融合處理 RT 控制在40ms内，不加文字渲染合圖結果如下，依次進行圖層疊加，直至圖層合并完成，再進行編碼輸出。
從優化後的火焰圖可以看到，編解碼等重計算邏輯基本都已 offload ，目前 FPGA 的資源平均使用率不到 30%，而 CPU 主要消耗在 Render 上，未來性能進一步的優化，主要在于 render（filter處理重計算）的解除安裝，這部分處理加速後，整機吞吐将會大大提升。
▐ 基于 skia 的 GPU 渲染
文字渲染業務上功能點主要考慮兩個方面：排版、效果，排版指文字的水準/垂直排版、字号自适應縮放的計算，效果則圍繞文字漸變、描邊、陰影等常用的效果還原。
在技術上文本渲染不僅要支援高并發&低延遲，還要滿足不同 os 端的跨平台特性，實時圖像渲染支援 android、ios 下的文本渲染的內建，以解決端側文字效果短闆。
為什麼選擇 skia ？文字渲染有很多開源技術如 Skia、Cairo、Rusttype 等，以下是對部分文本渲染技術的分析：
從業務和技術出發點，skia/cario 都可以滿足需求，考慮到鹿班目前渲染技術&編輯器基于 puppeteer，而 puppeteer 圖形繪制是基于 skia，并且 skia 可內建 webassembly 利用 CanvasKit 在 web 端的渲染能力使得在技術架構上確定前後端的同構。基于 skia 的文字渲染流程如下：
字型比對
實時圖像渲染服務作為公私域全場景的圖像基礎設施，文字渲染最基本的要求不能出現下圖(左一)的tofu問題，面對國際化多語言、不同 os 的字型引擎差别等問題，文字比對在加載指定協定字型時會校驗字元是否存在，不存在的字元會走統一的兜底接口，不同 os 端實作各自字型的管理邏輯。
布局計算
在圖檔設計中，文本的排版影響着整體布局的美觀度，從簡單的單行文字排版到多行文案排版、從水準排版到垂直排版、非 cjk 文字90°旋轉垂直排版、字号縮放、自動換行等，在 html 中借助 css 布局樣式可以很友善地實作以上布局排版，基于 skia 之上實作了自己的文本布局管理器。
上述文本布局單從文本角度上看，解決了文字元素域的布局問題，在業務中我們常遇見一些廣告 banner 拓版需求，其本質也是對圖檔元素(位圖、文本)進行重新布局排版問題，于是我們在此之上實作了拓版的布局自适應引擎。
拓版并不是簡單的圖檔縮放，因為拓版的尺寸通常是非等比的(相對于原尺寸)，圖檔縮放隻是處理位圖尺寸等比縮放的一種方式，拓版強調的是位圖元素等比、文本元素彈性的尺寸&坐标調整。
cpu/gpu文本繪制
skia 預設使用 cpu backend，我們分别在 cpu 和 gpu 場景下做了對比測試，在簡單文本(無效果加持)圖層渲染時，cpu 和 gpu 在性能上沒有太大差别，甚至 cpu 還具有一定優勢，雖然 gpu 在純紋理繪制時具有很大優勢，但在 readPixels 時 gpu 顯存到 cpu 主存下的 io 處理很耗時，是以 gpu 加速用在複雜紋理(陰影、blur)處理或者批量圖層渲染時優勢才足夠明顯。
效果還原
效果還原其中效果指的是描邊、漸變、陰影三種常見的文本設計效果，還原則對比的是設計師在 ps 的設計效果。skia 支援 stroke/gradient/shadow 底層 api 能力，但在表達 ps 效果上有些吃力更多地是見招拆招，如文字描邊ps支援内描邊、居中描邊、外描邊，skia 描邊是沒有類型區分的。
描邊，skia 對描邊的效果的支援需要繪制2層紋理疊加而成，疊加的順序決定了描邊的效果
漸變，文字漸變效果支援線性、徑向兩種，徑向漸變較簡單不在此贅述，這裡簡要說下線性漸變角度變化對于 start/end 兩點坐标計算，參考示意圖如下
陰影，文字陰影主要了解三個變量：dx/dy 陰影的偏移量，blur 陰影模糊半徑，注：文字陰影效果對于cpu 繪制下的性能有很大影響
性能優化
在初期過程中，skia文本繪制區域是整個畫布尺寸而一個文本圖層區域相對于畫布來講小得多，全畫布繪制使得記憶體開銷更大資料傳輸也變得更加低效，在經過調整輸出最小文本區域時性能提升不少。文字渲染預設傳回png圖檔資料，火焰圖中看出編碼占用了5%cpu資源。将輸出改為BGRA格式後性能有了30%的收益。通過增加字型緩存的方法，文字渲染性能同樣獲得了收益。
▐ 高可用架構和國際化部署
高可用架構
實時渲染作為直接面向 C 端的鍊路，對加載時長和穩定性的要求非常高，為降低加載時長、保證使用者體驗，采用 CDN 緩存 + 實時渲染源站 的二級分層架構：
在滿足業務實時變化的訴求下，通過 CDN 緩存降低計算量，同時利用其分發網絡來降低網絡時延；
如果未命中 CDN 緩存，則直接請求源站并實時傳回處理結果。
在個性化場景下，CDN 緩存命中率有限，是以，源站高可用成為整個鍊路的重中之重。因源站對網絡、存儲的強依賴，為避免單地網絡或存儲叢集不可用影響業務整體可用性，實時圖像渲染叢集采用三地部署、異地多活模式：
渲染的原始資料在三地存儲叢集間異步複制，計算叢集從本地存儲叢集讀取所需資料；
當某地出現問題時，通過調整CDN回源政策實作異地容災逃逸（秒級生效）；
考慮到存儲叢集作為一個有狀态服務，單機不可用會造成請求成功率下跌，是以，針對單個請求使用跨地域容災來保障整體成功率。
國際化部署
實時渲染作為基礎服務，考慮到賦能 AE、Lazada 業務，進行了國際化部署；在國際化部署中，因實時圖像渲染對加載時長、網絡的要求較高，是以，必須讓存儲和計算在一個機房内完成閉環，整體架構如下圖：
考慮到模闆在電商業務中的複用性及其讀多寫少的業務特性，我們将設計師模闆做了全球同步：3個分組、5個 Region；考慮到存儲和複制成本，用于合圖的商家資料 Native 化：隻做分組内容災、不做分組間同步。
▐ 基于設計領域知識的個性場景化引擎
相比文字，圖檔更容易吸引使用者的注意力。但不同的人對圖檔的偏好是不一樣的，如上右圖所示，單就牛皮癬而言，不同年齡段、不同消費能力的使用者會呈現明顯的喜好差異。
此外，不同的導購鍊路和場景，使用者對圖檔的注意力也可能産生差異。在主搜和首猜兩大場景，我們通過深度測圖産品，發現很多典型的 case ，同樣的商品圖檔，僅有細微的設計差異，但在大資料的驗證下，持續展現了完全不同的轉化效率。由此可見，研究使用者在圖檔上的注意力個性化，一定會給業務帶來巨大的增量。
我們經過長期的業務積累，沉澱了一套基于設計領域知識的個性化引擎，結合專家知識+資料驅動，通過感覺場景、人群、商品的特征，給出最合适的圖檔内容，實作圖檔效率的最優。
應用場景
▐ 手淘首焦
在手淘首焦商品個性化基礎之上進行圖檔實時個性化投放，基于設計資料+使用者注意力偏好建構圖檔優化生産模型，提高 banner 轉化率。
▐ 主圖打标
對商品主圖增加官方的個性化模闆，用智能算法填寫符合使用者畫像的文案利益點，達到統一管控主圖氛圍的目的。做到公私域展現統一打通，首猜、搜尋與詳情展示圖檔實時渲染。
主圖打标業務上要求在大促時候需要對圖檔進行指定氛圍管控，利用實時圖像渲染+CDN 緩存批量重新整理，做到了雙十一零點千萬圖檔在同一時刻的氛圍變化。
▐ 店鋪
通過動态實時渲染技術與個性化推薦算法結合，支援了“千人千面”的店鋪頁設計，服務了近百萬商家，日均曝光超千萬次。
在于店鋪的合作中開拓出長條形模版分片渲染的能力，适配手機上的記憶體淘汰政策，将長條形模版切分成多快渲染，使端上體驗如絲般順滑。
▐ lazada&AE 國際化輸出
在與 Lazada、Ali Express 等國際站點的合作過程中，實時圖像渲染服務不僅完成了全球化部署，還支援了全世界各地的多種語言以及不同國家的設計風格。
We are hiring
淘系技術部依托淘系豐富的業務形态和海量的使用者，我們持續以技術驅動産品和商業創新，不斷探索和衍生颠覆型網際網路新技術，以更加智能、友好、普惠的科技深度重塑産業和使用者體驗，打造新商業。我們不斷吸引使用者增長、機器學習、視覺算法、音視訊通信、數字媒體、移動技術、端側智能等領域全球頂尖專業人才加入，讓科技引領面向未來的商業創新和進步。
請投遞履歷至郵箱：[email protected]