天天看點

手機端創新體驗——手把手教你搭建VR&AR架構電商和創新BUY+尋找狂歡貓(AR)總結

12月6日-7日,由阿裡巴巴集團、阿裡巴巴技術發展部、阿裡雲雲栖社群聯合主辦,以“2016雙11技術創新”為主題的阿裡巴巴技術論壇(alibaba

technology forum,atf)成功線上舉辦。在本次論壇中阿裡移動平台虛拟&互動實驗室負責人,gm lab技術負責人袁嶽峰分享了手機端的創新體驗——vr&ar。他主要通過buy+和尋找狂歡貓兩個案例分别介紹了雙11手機端的vr、ar的創新技術和實作過程。

今年的雙11,在手機上有很多新的互動的玩法和新的業務的嘗試,希望能夠把最新的技術和現有的業務結合起來。比如,通過buy+在未來購物體驗的探索做一款能夠用于購物的vr應用,通過“尋找狂歡貓”的活動完成線上線下的雙重連結。

手機端創新體驗——手把手教你搭建VR&AR架構電商和創新BUY+尋找狂歡貓(AR)總結

上圖是buy+的技術架構。最底層是system,用到了兩項核心的技術,即opengl、mediaplayer。全景視訊是目前最優的一個解決方案,是以需要用到mediaplayer。由于需要在全景視訊上繪制一些3d的ui,是以需要用到opengl。基于底層,實作了vr播放器和整個vr ui體系(ui動畫系統、點選事件系統)。最上層建構了整個世界,整個業務邏輯其實就是一個個場景的切換,是以需要有一個場景切換器來更好的管理場景的變化。在上層做業務的時候,給自己提了三個要求:場景可移動,希望使用者在一個vr購物的場景裡面是有一定的自由移動性;商品有互動,使用者一定程度上可以和商品産生互動;交易能閉環,能完成一個完整的商業流程。

手機端創新體驗——手把手教你搭建VR&AR架構電商和創新BUY+尋找狂歡貓(AR)總結

視訊中每一幀都是可以看周圍風景的vr圖檔。基于有限的互動方式,選擇了有限的讓使用者在場景中移動,并且準備了比較直線的場景,現有的互動能力不支援轉彎。在反向播放的時候,可能出現正向視訊和反向視訊不能很好的銜接,這是由于安卓是通過關鍵幀來播放的,停留的時候不一定能準确停留在關鍵幀上。

手機端創新體驗——手把手教你搭建VR&AR架構電商和創新BUY+尋找狂歡貓(AR)總結

需要解決兩個問題:我們需要在場景中、亞場景中标定出可購買的商品;希望在使用者看到這個商品的時候能夠和商品産生一定程度的互動。如果用圖像識别來标定,識别率将是很大的障礙。即使在拍攝的時候就标注相應的mark,這些mark也不會在所有的幀都工作。如果使用軌道車進行拍攝,所有的拍攝都是勻速的,仍然很難基于數軸計算所有mark的東西。最終選擇的方案是半自動的方式進行标注,在pc端播放視訊,同時用滑鼠來跟蹤商品,對于現有的場景來說是一個比較高效的解決方案。做完這些之後還有做一些壓縮工作來進行優化。面臨的問題是:怎樣完美的還原商品?利用了一些綠幕視訊的方案降低整個圖檔的制作門檻。

手機端創新體驗——手把手教你搭建VR&AR架構電商和創新BUY+尋找狂歡貓(AR)總結

整個交易鍊是非常複雜和冗長的,這樣的過程中需要做大量的互動。是以需要減少使用者自有的操作,讓使用者進入buy+的時候就強行登入,并且判斷是否設定了預設收貨位址,這樣保證了使用者在vr世界有限的互動條件下不用再輸入完整的内容。提升研發效率,通過ios或者android的ui view完成ui的繪制,通過統一的方案放置在vr世界裡面完成了2d轉3d的效果。

手機端創新體驗——手把手教你搭建VR&AR架構電商和創新BUY+尋找狂歡貓(AR)總結

很多基于lbs的ar互動是可以給使用者帶來不一樣的感受,可以驅使使用者做一些線下移動的事情,這也是這個業務嘗試的初衷。這個互動是一個線上線下的雙重連接配接,雖然是奔着lbs的ar,但是也充分利用了線上的流量。

手機端創新體驗——手把手教你搭建VR&AR架構電商和創新BUY+尋找狂歡貓(AR)總結

主要由兩部分組成,包括正常互動的支撐技術(wlp快速的生成獎池讓使用者完成抽獎;aplatform服務端的開發平台能夠快速完成活動業務的研發和部署上線;mt配置管理能夠幫助營運友善操作),創新技術賦能業務(lbs-ar通過lbs計算現有的物體和我們相應的距離和方向,通過ar的形式固定在現有真實世界中的某個地方;t3d是能夠在手機淘寶端運作的3d引擎;web

3d在3d地圖上完成3d建築物的繪制)。

手機端創新體驗——手把手教你搭建VR&AR架構電商和創新BUY+尋找狂歡貓(AR)總結

怎麼用現有的手機傳感器完成空間位置的計算?根據重力加速的方向大緻預估手機的基礎姿态,利用磁力計進行手機朝向的判斷。使用低通濾波進行防抖的修正。有沒有更好的辦法?陀螺儀擷取手機6個方向旋轉的資訊,結合前面的傳感器資訊進行卡爾曼濾波完成更為精準的手機姿态資訊的收集。遇到的問題:有些手機沒有陀螺儀或者陀螺儀精度不高。

手機端創新體驗——手把手教你搭建VR&AR架構電商和創新BUY+尋找狂歡貓(AR)總結

比較核心技術的包括:骨骼蒙皮動畫,粒子系統,多mesh part渲染,相機旋轉插值。

手機端創新體驗——手把手教你搭建VR&AR架構電商和創新BUY+尋找狂歡貓(AR)總結

為什麼和t3d選擇不同的方案呢?因為抓貓需要更好的渲染效果,需要更好的在ar的場景上去體驗。3d地圖則需要更好的相容性,并不需要複雜的渲染效果。選擇用canvas 3d來做,主要是因為webgl并不是所有機器都支援。主要解決的問題是建築物的生成,先把建築物的模型建好,然後将貼圖貼在建築物上,再加入一些光照的效果。然後通過六邊形投影算法,把lbs資訊轉化為遊戲場景坐标。首先,需要把地球通過運算邏輯投影到整個平面,然後把地球坐标轉化為自有坐标。在3d地圖上并沒有用到lbs-ar傳遞過來的所有資訊,因為3d地圖在移動的時候僅僅需要考慮平移,是以僅僅留下單軸移動的資訊。

這裡有兩個問題:

<b>如何建構出一個自洽的線上線下商業邏輯?</b>如何讓商家長線的投入成本來獲得更高的收益,隻有雙赢的狀态才能讓商家端和消費者端願意持續用這樣的互動方式。

<b>如何避免使用者對互動的新鮮感喪失?</b>

手機端創新體驗——手把手教你搭建VR&amp;AR架構電商和創新BUY+尋找狂歡貓(AR)總結

我們需要建構一個有創新能力的技術體系。今年在雙11的時候其實做了很多正常的互動、創新的互動。這些都用到了在以前體系之外的新的技術,也是整個團隊在整個一年積累的一個比較好的呈現。正常的基礎能力的搭建、新的技術的儲備一起支撐起了整個體系。是以,持續的将技術體系搭建完畢,才能更好的、更快速的完成一些創新的互動。

大會系列整理文章:

阿裡雙11背後的網絡自動化技術——張銘(阿裡巴巴研究員)

阿裡大規模資料計算與處理平台——林偉(阿裡巴巴資深技術專家)

線上ai技術在搜尋與推薦場景的應用——徐盈輝(阿裡巴巴研究員)

揭秘阿裡虛拟互動實驗室——袁嶽峰(阿裡巴巴進階技術專家)

阿裡超大規模docker化之路——林昊(阿裡巴巴研究員)

雙11媒體大屏背後的資料技術和産品——羅金鵬(阿裡巴巴進階技術專家)

資料賦能商家背後的ai技術——魏虎(阿裡巴巴資深技術專家)

面對雙11的前端“極限挑戰”——舒文亮(阿裡巴巴進階技術專家)

繼續閱讀