1. 背景
移動網際網路是随着移動通信技術的疊代和發展的，每一次疊代都會給人們生活帶來巨大的改變。
1G網絡，讓人們用上了手機；
2G網絡，讓人們能夠通過手機上網；
3G網絡，促使移動網際網路飛速發展；
4G網絡，直播和短視訊出現爆發式增長。
短視訊的出現不僅是内容展示形式的變化，創作者通過剪輯和特效使内容更豐富、生動，給閱聽人提供了更優質的使用者體驗。
閑魚是C2C場景，普通使用者釋出視訊寶貝比例不高。如何内容視訊化，提升浏覽體驗，閑魚給出了解決方案。
2. 閑魚不是短視訊
将圖檔合成短視訊，是我們最先想到的方案。思考後，發現其中存在一些問題：
- 引導使用者視訊合成，會影響釋出成功率
弱引導，起不到作用，達不到預期。強引導，會打斷釋出鍊路，影響釋出成功率。
閑魚之是以能夠成為行業的No.1，是因為閑魚有一個龐大的商品池，新發商品數量是閑魚生态的基石。閑魚一直提倡輕釋出，小白使用者可以在閑魚上輕松釋出商品。我們的目标是：把簡單留給使用者，把複雜交給自己。
- 雲端異步生成視訊
使用者商品釋出成功後，在雲端生成視訊，然後給使用者推一個Push消息，詢問使用者是否應用該視訊。問題是，使用者可能收不到Push消息，可能不采用生成的視訊，白白浪費了服務資源。
- 存量商品問題
因為無法解決存量商品問題，是我不采用合成視訊的主要原因。閑魚的新發商品對比整個商品池，占比畢竟很小。隻處理新發商品，無法解決大量商品的問題。
圖檔合成視訊有如上諸多問題。我們給出的方案是“基于動效模闆的圖檔動态展示方案”。
3. Chaplin項目
電影是從無聲電影開始的，無聲電影以 Charlie Chaplin（查理·卓别林）最為代表。他不但推動了電影曆史的發展，更代表了一個時代。希望通過Chaplin項目推動閑魚整體内容視訊化的發展。
Chaplin項目，啟發源于視訊編輯器。在視訊編輯階段，可以通過各種特效使内容更豐富、生動。我們将素材與特效進行分離，最終将整個編輯過程抽象成模闆。展示時，再将不同的素材與模闆進行合并，實作視訊播放的效果。
示範
GIF
視訊：
http://wantu-xm4-xianyu-video-hz.oss-cn-hangzhou.aliyuncs.com/aus/xianyu_post/1188921868/3_1626333212.571707設計
Chaplin項目業務落地方案：
- 模闆創作
模闆編輯器主要參考通用視訊編輯器，為設計師提供一個可視化的創作工具。特效庫是可擴充的，酷炫特效主要是開發同學通過編寫OpenGL Shader實作的。因為OpenGL是标準庫，是以可以實作編輯器和用戶端的一緻性。
資源管理平台主要依托于集團的縱橫平台（素材管理中心），實作音樂庫、特效庫、模闆庫的管理。其中，模闆支援特征打标和播放控制。因為模闆是要下發到用戶端的，是以必須有完整的線上釋出流程，線上要與預發隔離。
- 用戶端
模闆擷取是增量同步的，需要實作本地模闆庫管理，以及Shader和素材資源管理。
模闆推薦引擎基于業務場景，通過對商品和内容的了解，以及對圖檔主體和色域的分析，實作對使用者的個性化推薦。并且通過疲勞度和曝光量配置，實作模闆打散展示。
動态展示（播放），首現需要将素材與模闆進行合成，合成後的播放源是基于時間線的非線性播放序列。播放過程是按時間線實時合成和渲染的。視覺的合成，雙端都是基于OpenGL。iOS的音頻合成是基于AVMutableAudioMix（AVFoundation）；Android沒有音頻合成過程，是混音播放。
循環模闆
在業務落地的過程中，播放素材的個數是不确定的，是以設計了循環模闆。
循環模闆的收益還是比較明顯的：
（1）大大減少了模闆檔案個數，一樣的視覺不需要設計多個模闆；
（2）大大降低了模闆檔案大小，使模闆檔案下載下傳更快。
設計之初，有2套循環模闆方案：
（1）素材與模闆合成時處理；
（2）讓播放器支援循環配置。
考慮到子子產品獨立、純粹性，降低子產品耦合度，是以抽象了素材與模闆的合成子產品。
循環模闆的設計是為了解決業務中的不确定性，是以設計上不但要考慮協定的擴充性，還需要對不确定性進行抽象：
- 播放協定
- 以圖檔開始；
- 以圖檔結尾；
- 兩個圖檔之間必須有轉場節點，轉場時間可以為零。
- 循環模闆的頭尾設計
- 必須以圖檔節點開始；
- 可以是圖檔結尾；
- 可以是轉場結尾。
- 循環部分與非循環部分的定義
- 所有節點支援once（隻執行一次），第二次執行将跳過該節點；
- 跳過節點後，如果出現相鄰同類型節點，将再次跳過節點。
播放線程
整個播放過程還是比較複雜的，事件和資料會在不同線程之間傳遞。本來也不想搞這麼多線程，可是如果不異步處理就會出現堵塞和卡頓問題。
- 播放控制操作隊列
播放器是強依賴狀态機的，鎖操作會有卡頓（Stop操作會釋放線程等其它資源），是以選擇了異步操作隊列。
- GL渲染線程
因為是多軌播放，是以需要實時渲染合成，合成後再上屏。
- 資源加載線程
資源加載是I/O操作，會比較耗時（特别是字型和大的圖檔）。圖檔是先通過資源加載線程加載到記憶體的，然後在GL渲染線程把圖檔轉成紋理，再渲染。
- UI重新整理線程
目前設定的重新整理率是30FPS，也就是所有加載合成操作要在30ms内完成，否則會出現卡頓的現象。
多軌播放
多軌播放（也叫非線性播放），需要将多軌的内容實時合成并渲染上屏。
PS：加載資源或者合成慢了就會出現播放卡頓，是以做了資源預加載，紋理預處理等操作。
模闆協定
OpenGL 頂點坐标範圍是[-1.0，1.0]，紋理坐标範圍是[0.0，1.0]。為了開發友善做了坐标統一，協定中所有坐标範圍均是[0.0，1.0]，會在底層做轉換。
所有特效均是雲端實作。遵循shader節點協定，包括：vertexURL、fragmentURL、uniforms。其中
舉例：
- 素材（圖檔）
{
"name":"放大",
"type":"image",
"duration":2.0,
"shader":{
"vertexURL":"https://xianyu-chaplin-bucket.oss-cn-beijing.aliyuncs.com/ShaderV2/ImageEffect_Move2_V2/ImageEffect_Move2_V2.vert",
"fragmentURL":"https://xianyu-chaplin-bucket.oss-cn-beijing.aliyuncs.com/ShaderV2/ImageEffect_Move2_V2/ImageEffect_Move2_V2.frag",
"uniforms":{
"u_FirstScaleBegin":1.00,
"u_FirstScaleRange":0.04,
"u_FirstMoveBeginX":0.00,
"u_FirstMoveRangeX":0.00,
"u_FirstMoveBeginY":0.00,
"u_FirstMoveRangeY":0.00
}
}
} - 轉場
{
"name":"溶解",
"type":"transition",
"duration":0.5,
"shader":{
"vertexURL":"https://xianyu-chaplin-bucket.oss-cn-beijing.aliyuncs.com/ShaderV2/TransitionEffect_Mix2_V2/TransitionEffect_Mix2_V2.vert",
"fragmentURL":"https://xianyu-chaplin-bucket.oss-cn-beijing.aliyuncs.com/ShaderV2/TransitionEffect_Mix2_V2/TransitionEffect_Mix2_V2.frag",
"uniforms":{
"u_FirstScaleBegin":1.04,
"u_FirstScaleRange":0.01,
"u_SecondScaleBegin":1.00,
"u_SecondScaleRange":0.01,
"u_FirstMoveBeginX":0.00,
"u_FirstMoveRangeX":0.00,
"u_FirstMoveBeginY":0.00,
"u_FirstMoveRangeY":0.00,
"u_SecondMoveBeginX":0.00,
"u_SecondMoveRangeX":0.00,
"u_SecondMoveBeginY":0.00,
"u_SecondMoveRangeY":0.00
}
}
} - 貼紙
"tracks":[
{
"type":"ShaderTrack",
"list":[
{
"type":"PopImage",
"position":0,
"duration":3600,
"data":{
},
"shader":{
"vertexURL":"https://xianyu-chaplin-bucket.oss-cn-beijing.aliyuncs.com/ShaderV3/PopImage/PopImageV3.vert",
"fragmentURL":"https://xianyu-chaplin-bucket.oss-cn-beijing.aliyuncs.com/ShaderV3/PopImage/PopImageV3.frag",
"vertexCoordinatesName":"a_Position",
"vertexCoordinatesValue":{
"x":0,
"y":0,
"width":1,
"height":1,
"rect":{
"top":"8dp",
"right":"8dp",
"width":"60dp",
"height":"24dp"
}
},
"images":[
{
"textureCoordinatesName":"a_FirstTexCoord",
"textureCoordinatesValue":{
"x":0,
"y":0,
"width":1,
"height":1
},
"textureName":"u_FirstTexture",
"imageURL":"https://gw.alicdn.com/tfs/TB1QOt3nIVl614jSZKPXXaGjpXa-120-48.png"
}
],
"uniforms":{
"u_MoveX":0,
"u_MoveY":0,
"u_VertexScaleBegin":1,
"u_VertexScaleRange":0
}
}
}
]
}
] 總結與展望
随着短視訊的流行，如何推動内容視訊化，閑魚給出了新的解決方案。本文也說明了為什麼不采用圖檔合成視訊的原因。具體介紹了如何通過動效模闆實作圖檔内容的播放展示，打破了圖檔合成視訊的局限性。
雖然方案已經上線運作，但還有些想法沒有實作。
- 智能建立模闆
單一的模闆會讓使用者産生疲勞，是以模闆生産要有持續性。目前模闆生産依賴設計師創作、開發寫特效，成本較高。業界也有一些智能創作方案，後面會考慮如何結合。
- 智能識别與特效的結合
實時識别主體區域，并針對主體區域做特效處理。比如目前有一個逐漸放大的轉場特效，理想應該是以主體區域為中心放大，而不是圖檔中心點放大。目前素材是順序播放的，可以加入智能排序。
- 場景擴充
目前方案還主要應用在展示場景，後面會考慮應用到UGC生産場景。