作者|鄭行濤(軒怒)
出品|阿里巴巴新零售淘系技術部

讀者受益：
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]