作者|白小康（少塵 ）
出品|阿裡巴巴新零售淘系技術部
傳統内容增強通過濾鏡、标簽、貼紙等手段豐富和提升内容的表現力，在抖音快手短視訊大行其道的資訊快速消費時代，如何通過有趣的玩法，好玩的特效降低使用者的創作成本，提高内容表現形态和張力，是目前内容社群可以借鑒和思考的方向之一。
什麼是可互動内容
在千篇一律的社群内容Feed流裡，Timeline上的一切都是機械的呈現，通過互動創新的玩法來實作内容卡片的個性化、場景化，給使用者更多新鮮和趣味的互動方式。對使用者來說，内容不是死的，是沉浸式的，可互動的，可把玩的，以給使用者新穎的體驗。
可互動玩法是一種視覺強化的方式，通過互動創新進行内容重建，賦予靜态内容更多的空間表現力。主要手段有：
1、提升次元：深度圖，次元重建；裸眼3D，次元突破。
2、視角變換：視覺圖，視角轉換；形變圖，平面變換。
3、整體相關性形變，包括人物，年齡，妝容等。
4、局部相關性形變，局部晃動，局部流動。
5、其他變換，實體變換，粒子變換，天氣變換。
6、場景合成，場景增強等。可以在圖檔場景，相冊場景，視訊場景結合具體案例進行玩法創新。
具體案例介紹
▐ 深度圖
人物，靜物，風景，通過對二維圖檔進行深度資訊提取，再根據陀螺儀進行深度視角變換，産生一種僞 3D 互動效果，經典案例如 facebook 的 3D 圖檔。
玩法解析：
1、先根據原圖提取深度資訊圖，iOS的雙目可以拍出帶深度資訊的圖檔，也可以使用深度學習技術直接從原始圖檔中提取深度資訊。
2、使用陀螺儀輸出的位姿角attitude表征使用者視角的變化，根據對應的深度圖，以及由pitch和roll兩個位姿角确定的視角變化值。
核心實作：根據深度圖資訊，結合焦點和深度，随着陀螺儀産生像素偏移變化視角的效果。
vec4 dep = texture2D(depthMap, vTextCoord);
vec2 disCords = vTextCoord + offset * (dep.r * -1.0 + params.x) * params.y;
gl_FragColor = texture2D(colorMap, disCords); 效果展示：
玩法意義：
深度圖其實是一種僞 3D 特效(2D-plus-depth)，根據陀螺儀輕微旋轉視角，給浏覽者一種身臨其境的感覺，讓千篇一律的靜态圖檔内容中出現一些充滿驚喜的互動，讓圖檔不僅僅是滑動浏覽消費，視角變換帶來的感官讓浏覽者身臨其境，富有控制欲，可以反複把玩每一個有趣的細節。
▐ 晃動玩法
根據局部圈選的可晃動區域，讓内容部分在feed流中跟随手勢産生抖動效果的互動，咖啡、蛋糕、布丁、煎蛋、臉蛋，寵物，還有各種新奇有趣的創意玩法。
1、通過控制點生成的貝塞爾曲線圈選可晃動區域。
2、根據每個點到中心的位置随着陀螺儀運動而産生像素偏移。
3、随着與中心點距離的增加，位移呈非線形遞減，偏移幅度随時間逐漸衰減。
核心實作：根據點到偏移中心的位置，結合陀螺儀的晃動産生周期性像素偏移：
vec2 offset = getOffset(sketch.PointLT, sketch.PointRT, sketch.PointRB, sketch.PointLB, sketch.Center, sketch.Time, TextureCoordsVarying, sketch.Direction, sketch.Amplitude);
vec4 mask = texture2D(Texture, TextureCoordsVarying + offset);
gl_FragColor = vec4(mask.rgb, 1.0); 通過對局部内容的形象化加工，在浏覽消費時産生更加真實有趣體感，能夠比标簽濾鏡更能展現出素材内容的核心表達力。通過手勢晃動引起内容晃動，讓使用者對内容細節更加有體感。
▐ 流動玩法
藍天白雲，海邊天空，頭發毛絨、水流、沙灘、衣服裙擺、煙霧等材質都通過動态化的流動，讓内容更加生動和具有表現力。
1、通過觸摸手勢采集流體方向，這些是變換過程中比對的動點。
2、對圖檔内容中靜止不動的部分進行固定錨點，防止非流體部分參與運動變換。
3、通過三角刨分和仿射變換不斷更新進度，使整個圖檔運動起來。
核心實作：通過三角刨分一一對應的特征點進行仿射變換
//1、根據輸入的特征點進行三角刨分
Rect rect(0, 0, size.width, size.height);
Subdiv2D subdiv(rect);
for (vector<Point2f>::iterator it = points.begin(); it != points.end(); it++)
subdiv.insert(*it);
std::vector<Vec6f> triangleList;
subdiv.getTriangleList(triangleList);
//2、通過仿射變換對邊界框内所有像素點進行仿射投影，最後根據進度權重求的最終這個三角形的像素值
applyAffineTransform(warpImage1, img1Rect, t1Rect, tRect);
applyAffineTransform(warpImage2, img2Rect, t2Rect, tRect);
Mat imgRect = (1.0 - alpha) * warpImage1 + alpha * warpImage2;
multiply(imgRect, mask, imgRect);
multiply(img(r), Scalar(1.0, 1.0, 1.0, 1.0) - mask, img(r));
img(r) = img(r) + imgRect; 
動态圖能夠更生動地展示圖檔隐含的内容資訊，讓視覺更加立體和飽滿。
▐ 視角圖
一種全新的使用者互動方式，比單張圖檔更豐富，比短視訊更簡單，使用者主動掌控視角，釋放想象力，包括時光輪，長曝光，小動畫，3D 展示，全景預覽等等特效。
這種扭動手機以看到不同照片的互動，能讓浏覽者産生一種微妙的感覺。他們會想：‘我能控制這個！’或者‘我可以看我想看的任何一張圖檔！‘ 把控制的主動權交給使用者是件很簡單的事情，提高圖檔把玩性，增加内容的消費形式。
1、拍一個6S短視訊，每1s截取4幀，250ms擷取一張圖，跟拍照類似，轉一圈自動拍攝；或者獨立拍攝24張圖，這些照片可以是關聯的，也可以是相對獨立的，也不必是在同一時間拍攝的。使用者若想營造出一種時光飛逝或者場景的流轉裝飾過程的感覺，完全可以将老照片及新照片放在一起進行展示。
2、根據手機陀螺儀的角度變換更換不同視角的照片。
**玩法意義：
**
跟靜圖相比：細節表達，内容更豐富，更立體，故事性、趣味性、互動性；
跟視訊相比：内容表達，更輕量級，互動更有趣，沒有時長的概念可以反複把玩；
跟動圖相比 ：心情表達，輕量級，可互動，趣味性得到延伸，能夠承載更大的場景而不是表情動态圖，可以慢慢仔細觀察每個視角的細節，讓圖檔更場景化，具有上下文和故事性。比如，時光輪：比如動态展示房屋的裝修前/裝飾後的布局過程，室内燈光冷到暖的變化過程。3D展示：對室内台燈裝飾挂件等 3D 展示效果，任意角度觀看細節。場景預覽：全景圖預覽模式，可以轉動手機看到整間屋子裡的格局布局，任意角度暫停觀察。
▐ 場景增強
不同于實時視訊流裡的 VR 增強現實，場景增強是作為一種在靜态内容中通過場景合成，營造更多的與場景融合的元素，以增強整個畫面的動态感和微妙氛圍。水氣、水珠、蠟燭、閃光燈、火粒子，煙霧、花草樹木等場景增強，還可以與内容和活動結合出可互動的節日氛圍和場景玩法以及其他樂趣性的場景化玩法，例如煙花、聖誕、雪花等氛圍，吸引使用者互動。
1、通過視訊檔案對合成場景進行加工，包含原場景和其透明通道的遮罩層。
2、通過預處理将原圖通過遮罩層與真實場景根據編輯的位置進行融合。
核心實作：通過将預處理将遮罩層渲染到FBO預處理，再根據透明度做場景合成。
if(uTextureType==0){//僅輸出上半部分到FBO
vec2 topTexCoord=vec2(vTexCoord.x,vTexCoord.y*0.5);
gl_FragColor=texture2D(sTexture, topTexCoord);
}else if(uTextureType==1){ //僅輸出下半部分FBO
vec2 botTexCoord=vec2(vTexCoord.x,1.0-mod(1.0-vTexCoord.y*0.5,0.5));
gl_FragColor=texture2D(sTexture, botTexCoord);
}else if(uTextureType==2){//根據遮罩層合并FBO到主屏
vec4 bgColor=texture2D(samplerBg,vTexCoord);
vec4 topColor=texture2D(samplerTop,vTexCoord);
vec4 btmColor=texture2D(samplerBtm,vTexCoord);
gl_FragColor=bgColor * (1.0-btmColor.r) + topColor * btmColor.r;
} 通過場景合成的方式，可以擴充出成千上萬的有趣玩法，讓内容的額外表現力更加豐富。
▐ 天氣仿真
霧氣，陽光、白雲、雪花、水滴地面、水霧玻璃、水紋、彩虹、氣泡，星空等仿真天氣特效。
通過純 shader 實作仿真天氣效果，和原内容進行混合。
通過原生glsl實作各種高幀率仿真天氣特效，成本低，易于線上驗證和釋出。部分天氣效果配合陀螺儀還可以産生有趣的互動玩法。
▐ 特效玩法
轉場玩法：圖檔切換，視訊轉場特效
抖音特效：故障、閃爍、靈魂出竅等抖音特效
粒子系統：雪花、彩帶、光圈等标準plist粒子檔案
通過轉場變換特效和粒子系統，将抖音裡的特效玩法遷移到内容社群中。
将短視訊裡常見的特效玩法，放到内容社群，動與靜的靈感碰撞，創造出更多有趣的玩法。
▐ 人物相關：
抖音大火的人臉特效包括變老變年輕，人臉變換，寶寶特效，也可以在内容社群通過合理玩法結合起來。
★ 人臉變換
多張不同時期的圖檔人臉變換産生時光流逝的效果。
通過人臉關鍵點進行三角刨分，再多圖間進行仿射變換，産生抖音的人臉變換的玩法。
相比單獨的多張自拍，更有趣味性和可玩性。脫離抖音的視訊環境，人物圖集的變換玩法也可以搞點有趣的事情,可以跟陀螺儀結合或者圖集自動播放：人臉或者寵物圖集的動态轉場效果，例如作為嘗鮮功能讓使用者解鎖，降級時還是正常圖檔 Gallery。
★ 眨眼互動
當圖檔收到點贊之後，和圖檔内的人物會有互動，比如眨眼的 BulingBuling 特效，豐富點贊的情感和互動。從互動細節上增強使用者體感，給使用者更多的正回報。
通過人臉識别關鍵點求出人眼位置，再通過局部紋理擠壓變形實作眨眼效果。
通過小細節互動，産生額外的互動行為，給使用者互動行為更多的正向回報，增加好感度和互動趣味性，促使和鼓勵使用者進行更多的互動互動行為探索。
▐ 其他探索
裸眼 3D：splitDepth 的兩種經典形式：
圖檔重建，場景重建等
技術沉澱&總結展望
通過在互動玩法方向上的探索學習，沉澱了一套基于 OpenGL 的互動元件庫，為什麼是 OpenGL ，而不是用原生native來實作這些效果？
1、高性能，充分利用GPU的運算渲染能力。
2、動态化，封裝标準輸入輸出，腳本動态下發。
通過不斷的建設和完善，對外整體提供一套可擴充的互動元件庫和産品資料分析能力。
内容社交隻是形式，曬才是使用者的核心需求，通過互動創新，希望能夠幫助内容社群擴充内容玩法和多元化，提升内容的表現力和趣味性，從互動細節打動使用者，建立口碑；從互動玩法打造爆點，擴大影響(打造标志性互動:比如微信的搖一搖、探探的左劃右劃、QQ 的拖動消除氣泡等)。讓有品質有溫度的内容帶來更多的互動和留存， 希望能夠有更多有價值的落地場景。
We are hiring
我們團隊是手機淘寶内容消費與移動創作平台，主要業務是微淘、短視訊以及社群内容釋出。歡迎 Android/iOS 以及後端人才加入我們團隊，一起創造更有趣的技術價值。
請投遞履歷至郵箱：[email protected]