您的位置:首頁>科技>正文

掃福得福背後,支付寶AR紅包的技術創新與故事

作者|何強

編輯|尾尾

春節期間, 支付寶的「掃福得福」活動火爆異常。 AR是一種新的對話模式, 與傳統行銷方式相比, 可以使使用者更深入地參與互動,

給用戶帶來新體驗。 而支付寶紅包, 寄託著用戶對未來的期盼, 因此其團隊就考慮將AR與紅包相結合, 探索一種新的玩法。 在AR領域走在前面的支付寶, 其AR紅包的技術選型、技術架構及其背後的技術故事都有哪些?

寫在前面

2004年12月12日, 我加入雅虎中國, 也加入了互聯網大軍。 至今, 我還依稀記得, 當時心中那種對互聯網的敬畏之情。 2009年, 在雅虎的四年外企生活一晃而過, 我有幸加入支付寶團隊, 並參與支付寶無線支付。 從那之後, 我每天都要接受無線浪潮的洗禮, 人生軌跡從此也發生了巨變。

今天是我到阿裡的第4096天, 談起“紅包”, 讓我回憶起了, 2015年參加第一次支付寶春節口令紅包項目, 團隊獲得螞蟻金服CEO大獎;2016年負責識別猴子,

開始具有了AR雛形, 後續又提出了兒童時代“集卡片”玩法, 可謂集五福前身;2016年開始建造支付寶AR系統, 全面支撐了2017年AR實景紅包、AR掃福等一系列活動……

提到AR紅包, 這是我們團隊的一次大膽創新, 現在就來和大家分享一下支付寶AR紅包背後的技術和故事。

支付寶AR紅包背景

AR的發展和舊玩法

AR是增強現實技術的簡稱, 其歷史可以追溯到1968年——哈佛大學電氣工程副教授薩瑟蘭, 發明了名為“達摩克利斯之劍”的頭戴式顯示裝置。

1998年, 在當時的體育轉播圖文包裝和運動資料追蹤領域領先的公司Sportvision, 在橄欖球賽的電視轉播上使用了AR技術, 將得分線疊加到了螢幕中的球場上。 此後, AR技術開始被用於天氣預報——將電腦圖像疊加到現實圖像和地圖上面,

從那時起, AR才真正地開始了其爆炸式的發展。

1999年, 增強現實開發工具ARToolKit便問世了, 很多開發者加入這個行業, 推動領域向前發展。 目前Microsoft、Google、Apple等公司都在AR領域進行了大規模投入, 旨在推動下一代視窗交互系統的變革。

為什麼要做支付寶AR紅包

AR是一趟賓士的列車, 從個人到團隊, 從團隊到公司, 都希望搭上這趟列車, 但是如何搭上, 用何種技術搭上都是新的挑戰。

AR是一種新的對話模式, 與傳統行銷方式相比, 可以使使用者更深入地參與互動, 給用戶帶來新體驗。 而支付寶紅包, 寄託著用戶對未來的期盼, 因此團隊就考慮將AR與紅包相結合, 探索一種新的玩法。

AR新玩法

2015年, 我們開始關注AR這個領域, 當時為2016年制定的一個新春紅包方案就是用手機識別猴子。

這個方案讓大家有了AR的感覺, 項目組也想做一些AR的創新玩法。 但是, 由於當時相關技術儲備不足, 就放棄了。

方案雖然放棄了, 但探索AR的新玩法這件事, 深深地烙在了我們的心裡。 2016年一開春, 我們創新組就開始儲備相關技術知識:識別跟蹤算, OpenGL、3D渲染引擎, 建模能力, AR體系架構, 等等。 這些相關技術也陸續在小視頻美顏、人臉貼圖等社交場景進行了實踐, 為後續AR相關技術快速成型提供了保障。

如何推進AR的新玩法呢?當時, 我們團隊定下了兩個目標, 一是找一個小場景落地AR概念, 二是在春節紅包上使用AR技術, 後者是我們的年度終極目標。

2016年的“中秋節掃月亮”, 算是支付寶在AR領域的第一次嘗鮮,

體驗和反響還不錯。 邁出這第一步之後, 各種業務需求也接踵而來, AR新玩法也越來越多——雙12線下商圈“掃雙12集四寶”的活動, 2017年春節AR實景紅包, 掃可口可樂福娃領紅, 掃福集福……

支付寶AR紅包帶來的挑戰

新玩法自然會帶來新挑戰, 不說別的, 單單用怎麼樣一種方式呈現AR紅包, 就是非常大的挑戰。

大多數AR的玩法都是針對預設的2D圖片, 離線訓練好識別模型, 然後在此基礎上實現識別互動。 由於是2D圖片並且預先驗證過, 因此能較好的保證識別的效果。

支付寶AR實景紅包算是業界的一次大膽嘗試。 用戶自由選擇真實3D場景, 拍攝一張圖片作為線索圖, 其他人根據線索圖到指定位置拍攝圖片進行比對。 而這種方式呈現AR紅包, 自然也對圖像匹配的演算法性能提出了新的挑戰, 主要涉及如下方面。

演算法魯棒性:由於針對真實的3D場景拍照,匹配演算法需要容忍一定的遮擋和角度、距離、光線、圖片品質等的變化;

計算複雜度:由於在終端上進行即時匹配,演算法的複雜度不能太高,否則會導致用戶尋找紅包時間變長,手機功耗消耗過大等問題;

手機流量:移動端應用需要考慮使用者的流量問題,需要在資料大小和識別率之間做好平衡;

手機相容性:對擁有億級用戶的支付寶而言,機型特別是Andriod機型分佈很廣。對於我們3D模型渲染帶來了很大的挑戰,需要制定完善的相容性方案,確保AR功能的正常使用。

AR實景紅包的技術選型

AR紅包的初期方案也和很多已有的產品類似,僅依靠LBS和手機陀螺儀來進行互動:用戶在某個位置發一個紅包,其他人到達這個地點後打開攝像頭,朝著某個方向拍攝就能看到別人發的紅包。這個方案由於僅依賴LBS和手機陀螺儀,方案比較成熟,但主要存在兩個問題:

定位精度:產品初期的定位是讓附近的人領取紅包(比如附近幾十米的人或者同一層樓的人),這對近距離定位要求就很高。內部也討論了很多潛在的方案,比如結合WiFi定位、室內定位等等,但都不是很通用或者不成熟,沒有很好的解決方案;

主觀體驗:由於GPS和陀螺儀的資料本身就存在較大的誤差,位置定位和用戶動作都無法精確度量,用戶體驗不太好,沒有真實的藏↔找的體驗。

因此在AR紅包中,我們希望能夠重新設計對話模式,提出了圖片匹配方案。在發紅包時,用戶對著場景拍攝一張圖;其他人想要領取紅包,必須到達該位置並且對著同一場景拍攝,只有位置和圖片匹配才能領取,大大增加了精確度和用戶趣味性。最終該方案被採納,誕生出了AR實景紅包。

AR實景紅包最終的技術架構

AR實景紅包

整個AR實景紅包由兩個場景組成:一是藏紅包,用戶對著某場景拍一張圖,將紅包藏在這個場景裡面;二是找紅包,用戶在地圖頁選擇一個紅包,通過線索圖走到對應地點,打開攝像頭拍攝進行圖片比對,匹配成功後領取紅包。

藏紅包

並不是所有的場景都適合藏紅包,比如白牆到處可見,會造成線索圖不唯一的情況。因此在藏紅包時,我們會校驗當前場景是否滿足預設要求。藏成功後,拍攝的圖片會傳到服務端處理:一是將圖片轉成特徵碼用於圖片匹配,二是生成一張線索圖用於找紅包。

找紅包

根據使用者當前的位置,服務端會下發附近的紅包資訊。用戶通過紅包列表可以選擇領取某一個紅包,此時用戶端會到服務端拉取該紅包的特徵碼和線索圖。線索圖在本地展示,提示用戶紅包的樣子。特徵碼用於用戶端本地即時比對。使用者找紅包時,將攝像頭採集的圖像轉換成特徵碼,與服務端下發的紅包特徵碼進行比對,如果本地匹配成功,則把圖片資訊傳到服務端做二次校驗來防止作弊。服務端校驗通過後,紅包就可以領取了。

掃福得福

在掃福字得福卡的活動中,為了解決高併發的問題,採用了用戶端+服務端並行處理的架構體系,可支援兩種識別方式:

所有圖片都傳至服務端做處理,這樣識別精度更高,但是伺服器端能處理的數量有限;二是先走用戶端檢測,用戶端無法識別的再上傳服務端。用戶端檢測能力稍弱,但將計算能力分散到各終端,能極大緩解服務端的壓力。

活動開啟後,由於用戶的積極參與,我們在活動早期就打開了用戶端識別,使得系統順利支撐了14萬次/秒的福字識別峰值,確保了整個活動的順利進行。但是用戶端的識別精度有限也導致了不是福字被是被為福字的問題,這個也是我們後續的優化方向。

如何防冒領

正常用戶要成功領取紅包,需要按照線索圖的提示找到紅包隱藏地點並完成實景拍攝,也就是說位置+圖像匹配兩個條件都需要滿足,才可以領紅包。

AR實景紅包上線之初,為了讓用戶有較好的體驗,線索圖做的比較簡潔美觀。第一版線索圖是通過添加均勻的橫條紋蒙版(類似百葉窗效果)來對原圖進行遮擋,同時確保用戶能簡單的識別出圖片。

但是,由於該方案比較簡單,部分使用者通過PS線索圖來補全被遮擋部分,後續甚至出現了自動化的PS工具。我們隨後進行了升級,每個紅包的線索圖都是動態選擇一個蒙版,蒙版還會隨機的動態旋轉/偏移等。新的線索圖方案,大大增加了自動化PS的難度,基本解決了PS的問題。

除了對付圖片的攻擊外、對於LBS篡改等其他作弊手段,螞蟻安全團隊也做了大量的防控技術手段,通過對使用者的行為資料來分析潛在的作弊用戶,也有效地攔截了大部分作弊用戶。

AR的未來

AR是一種新穎的交互形式,雖然該領域已經有了很多年的發展歷程,但技術成熟度和用戶普及度都不是很高。目前市面上的AR應用場景還是比較窄的,仍然有很多挖掘的空間,特別是結合各行業自身的特點去思考,肯定會產出很多好的創意玩法。

AR紅包正式上線時,那幾天地圖頁都是滿滿的紅包,我們也很興奮,說明大家對這個新鮮事物都很感興趣並且能夠接受。除了個人紅包玩法,很多商家對這種新型互動方式更加感興趣,也主動聯繫我們。商家希望用戶通過拍攝自己的品牌Logo來加深用戶對品牌的認知,認為這是一種新穎的行銷方式,未來還會有更多的成長空間。

後續我們會朝著AR開放平臺的方向發展,提供一個開放的AR平臺讓更多商家和用戶都參與進來。同時,結合線下支付場景,圍繞用戶體驗,打造更多的創新產品。

寫在最後

第一版Windows Mobile錢包的誕生讓我完成向移動轉型,接著,我帶領團隊經歷了Symbian從鼎盛到衰退,然後又經歷了WP專案的糾結,經歷了Android從開發版到現在的家喻戶曉,經歷了iOS從奇怪的語法到後來輕車熟路……

技術在發展,而我們在不斷地創新。2013年開啟了支付寶聲波支付,2014年銀行卡識別和身份證識別用於錢包業務……同時,團隊相關演算法技術、工程能力和創新思維在這個過程中也得到很大的沉澱,為連續三年參與紅包專案奠定了基礎,為今年AR紅包的新玩法奠定了基礎。能力越大,責任也就越大,既然承擔起了這份責任,我相信我們的努力定會不負使命。

作者介紹

何強(花名:何武),2001年畢業于北京工商大學,2004.12.12加入中國雅虎,參與雅虎通等用戶端研發工作。2009年轉戰支付寶無線事業部,參與支付寶第一版用戶端研發,先後負責過Symbian團隊、WP團隊、開放平臺團隊、創新團隊等。在阿裡期間,參與過無線的每次變革,引領過相關新技術用於錢包應用,如:聲波用於支付、識別銀行卡用於綁卡、OCR用於實名認證、音訊處理用語音降噪、影像處理用於美顏貼圖、AR綜合技術用於紅包等,所帶團隊連續三年承擔紅包重要角色,擅于與兄弟團隊合作,融合相關產品和技術,促進新技術落地。目前就職于支付寶多媒體創新團隊,協助主管朝山推動多媒體向前發展,探索更多新領域。

今日薦號

前端之巔

今日薦文

點擊下方圖片即可閱讀

沒想到,你是這樣的女程式師

主要涉及如下方面。

演算法魯棒性:由於針對真實的3D場景拍照,匹配演算法需要容忍一定的遮擋和角度、距離、光線、圖片品質等的變化;

計算複雜度:由於在終端上進行即時匹配,演算法的複雜度不能太高,否則會導致用戶尋找紅包時間變長,手機功耗消耗過大等問題;

手機流量:移動端應用需要考慮使用者的流量問題,需要在資料大小和識別率之間做好平衡;

手機相容性:對擁有億級用戶的支付寶而言,機型特別是Andriod機型分佈很廣。對於我們3D模型渲染帶來了很大的挑戰,需要制定完善的相容性方案,確保AR功能的正常使用。

AR實景紅包的技術選型

AR紅包的初期方案也和很多已有的產品類似,僅依靠LBS和手機陀螺儀來進行互動:用戶在某個位置發一個紅包,其他人到達這個地點後打開攝像頭,朝著某個方向拍攝就能看到別人發的紅包。這個方案由於僅依賴LBS和手機陀螺儀,方案比較成熟,但主要存在兩個問題:

定位精度:產品初期的定位是讓附近的人領取紅包(比如附近幾十米的人或者同一層樓的人),這對近距離定位要求就很高。內部也討論了很多潛在的方案,比如結合WiFi定位、室內定位等等,但都不是很通用或者不成熟,沒有很好的解決方案;

主觀體驗:由於GPS和陀螺儀的資料本身就存在較大的誤差,位置定位和用戶動作都無法精確度量,用戶體驗不太好,沒有真實的藏↔找的體驗。

因此在AR紅包中,我們希望能夠重新設計對話模式,提出了圖片匹配方案。在發紅包時,用戶對著場景拍攝一張圖;其他人想要領取紅包,必須到達該位置並且對著同一場景拍攝,只有位置和圖片匹配才能領取,大大增加了精確度和用戶趣味性。最終該方案被採納,誕生出了AR實景紅包。

AR實景紅包最終的技術架構

AR實景紅包

整個AR實景紅包由兩個場景組成:一是藏紅包,用戶對著某場景拍一張圖,將紅包藏在這個場景裡面;二是找紅包,用戶在地圖頁選擇一個紅包,通過線索圖走到對應地點,打開攝像頭拍攝進行圖片比對,匹配成功後領取紅包。

藏紅包

並不是所有的場景都適合藏紅包,比如白牆到處可見,會造成線索圖不唯一的情況。因此在藏紅包時,我們會校驗當前場景是否滿足預設要求。藏成功後,拍攝的圖片會傳到服務端處理:一是將圖片轉成特徵碼用於圖片匹配,二是生成一張線索圖用於找紅包。

找紅包

根據使用者當前的位置,服務端會下發附近的紅包資訊。用戶通過紅包列表可以選擇領取某一個紅包,此時用戶端會到服務端拉取該紅包的特徵碼和線索圖。線索圖在本地展示,提示用戶紅包的樣子。特徵碼用於用戶端本地即時比對。使用者找紅包時,將攝像頭採集的圖像轉換成特徵碼,與服務端下發的紅包特徵碼進行比對,如果本地匹配成功,則把圖片資訊傳到服務端做二次校驗來防止作弊。服務端校驗通過後,紅包就可以領取了。

掃福得福

在掃福字得福卡的活動中,為了解決高併發的問題,採用了用戶端+服務端並行處理的架構體系,可支援兩種識別方式:

所有圖片都傳至服務端做處理,這樣識別精度更高,但是伺服器端能處理的數量有限;二是先走用戶端檢測,用戶端無法識別的再上傳服務端。用戶端檢測能力稍弱,但將計算能力分散到各終端,能極大緩解服務端的壓力。

活動開啟後,由於用戶的積極參與,我們在活動早期就打開了用戶端識別,使得系統順利支撐了14萬次/秒的福字識別峰值,確保了整個活動的順利進行。但是用戶端的識別精度有限也導致了不是福字被是被為福字的問題,這個也是我們後續的優化方向。

如何防冒領

正常用戶要成功領取紅包,需要按照線索圖的提示找到紅包隱藏地點並完成實景拍攝,也就是說位置+圖像匹配兩個條件都需要滿足,才可以領紅包。

AR實景紅包上線之初,為了讓用戶有較好的體驗,線索圖做的比較簡潔美觀。第一版線索圖是通過添加均勻的橫條紋蒙版(類似百葉窗效果)來對原圖進行遮擋,同時確保用戶能簡單的識別出圖片。

但是,由於該方案比較簡單,部分使用者通過PS線索圖來補全被遮擋部分,後續甚至出現了自動化的PS工具。我們隨後進行了升級,每個紅包的線索圖都是動態選擇一個蒙版,蒙版還會隨機的動態旋轉/偏移等。新的線索圖方案,大大增加了自動化PS的難度,基本解決了PS的問題。

除了對付圖片的攻擊外、對於LBS篡改等其他作弊手段,螞蟻安全團隊也做了大量的防控技術手段,通過對使用者的行為資料來分析潛在的作弊用戶,也有效地攔截了大部分作弊用戶。

AR的未來

AR是一種新穎的交互形式,雖然該領域已經有了很多年的發展歷程,但技術成熟度和用戶普及度都不是很高。目前市面上的AR應用場景還是比較窄的,仍然有很多挖掘的空間,特別是結合各行業自身的特點去思考,肯定會產出很多好的創意玩法。

AR紅包正式上線時,那幾天地圖頁都是滿滿的紅包,我們也很興奮,說明大家對這個新鮮事物都很感興趣並且能夠接受。除了個人紅包玩法,很多商家對這種新型互動方式更加感興趣,也主動聯繫我們。商家希望用戶通過拍攝自己的品牌Logo來加深用戶對品牌的認知,認為這是一種新穎的行銷方式,未來還會有更多的成長空間。

後續我們會朝著AR開放平臺的方向發展,提供一個開放的AR平臺讓更多商家和用戶都參與進來。同時,結合線下支付場景,圍繞用戶體驗,打造更多的創新產品。

寫在最後

第一版Windows Mobile錢包的誕生讓我完成向移動轉型,接著,我帶領團隊經歷了Symbian從鼎盛到衰退,然後又經歷了WP專案的糾結,經歷了Android從開發版到現在的家喻戶曉,經歷了iOS從奇怪的語法到後來輕車熟路……

技術在發展,而我們在不斷地創新。2013年開啟了支付寶聲波支付,2014年銀行卡識別和身份證識別用於錢包業務……同時,團隊相關演算法技術、工程能力和創新思維在這個過程中也得到很大的沉澱,為連續三年參與紅包專案奠定了基礎,為今年AR紅包的新玩法奠定了基礎。能力越大,責任也就越大,既然承擔起了這份責任,我相信我們的努力定會不負使命。

作者介紹

何強(花名:何武),2001年畢業于北京工商大學,2004.12.12加入中國雅虎,參與雅虎通等用戶端研發工作。2009年轉戰支付寶無線事業部,參與支付寶第一版用戶端研發,先後負責過Symbian團隊、WP團隊、開放平臺團隊、創新團隊等。在阿裡期間,參與過無線的每次變革,引領過相關新技術用於錢包應用,如:聲波用於支付、識別銀行卡用於綁卡、OCR用於實名認證、音訊處理用語音降噪、影像處理用於美顏貼圖、AR綜合技術用於紅包等,所帶團隊連續三年承擔紅包重要角色,擅于與兄弟團隊合作,融合相關產品和技術,促進新技術落地。目前就職于支付寶多媒體創新團隊,協助主管朝山推動多媒體向前發展,探索更多新領域。

今日薦號

前端之巔

今日薦文

點擊下方圖片即可閱讀

沒想到,你是這樣的女程式師

Next Article
喜欢就按个赞吧!!!
点击关闭提示