|
||||
|
||||
 |
VR電商app開發通過虛擬即現實技術讓用戶可以感受到全新的購物體驗，讓其可以更加暢快的買買買。10年前電子商務改變了人們的購物習慣，而10年后的VR則可為用戶提供更真實的購物體驗，讓其在家便可享受逛商場的福利。只需一款VR頭盔便可輕松逛遍世界所有名店。
VR電商app有哪些玩法？
1、隨意穿梭
通過VR電商app，用戶可以輕松的在世界各大名店穿梭，上一秒可能還在香港shopping，下一秒便可去到大洋彼岸。同時用戶再也不用為在網上挑選不了合適的家居而煩惱了。只需戴上頭盔，便可將家居搬到自己家，尺寸顏色是否合適，一目了然。
2、可觸摸
VR電商app還可以讓用戶有切身的感受，通過第五感模擬技術，用戶可以直接觸摸衣服的材質，是棉還是尼龍，一摸便知。解決了網上購物不知道材質的問題。
3、VR付款
通過VR頭盔用戶便可以直接付款，讓購物變得更加方便，實現真正的閉環。
VR電商是怎樣用技術實現的？
以Mobile BUY+ 為例 剖析VR電商技術
2016年11月1日，Mobile BUY+正式在手機淘寶客戶端發布。這個項目目的是在雙11全球化的背景下，打造移動端VR購物體驗。我們希望做到在購物場景內有限移動，可以對商品進行一定程度的交互，同時完成下單支付這樣的基礎購物鏈路。這對我們的技術選型和內容制作都提出了巨大的挑戰，下面我們就從這兩個方面詳細剖析Mobile BUY+。
1、技術選型
技術選型最難的就是VR業界發展的階段還屬于早期，有太多的問題需要解決，有太多的平衡需要選擇。
首先，我們選擇了Mobile以及Cardboard類的頭顯，為了讓更多的消費者體驗到VR，我們放棄了PC，也放棄了GearVR這樣的獨占平臺。這個選擇帶來了規模的提升，但同時帶來了大量中低端機型性能不足的問題。
接著，我們選擇了全景視頻作為場景方案，全景視頻的正反播放作為場景中的移動方案。之所以沒有選擇3D建模，是因為考慮到高精模的建模成本，以及現階段Mobile的性能問題。Mobile的交互手段少的客觀現狀，也很大程度上降低了全景視頻方案對于自由度的傷害。更重要的是，全景視頻也符合未來云端渲染的技術路徑。
最后，我們為了集成進入手機淘寶，放棄了成熟的3D引擎。在手機淘寶引入體積龐大的3D引擎無法接受，為了讓更多用戶不需要下載新的APP也能體驗到BUY+，我們不得不擁抱OpenGL去完成所有功能。
以上的選擇給場景可移動，商品有交互，鏈路能閉環的要求帶來了極大的挑戰。移動端沒有空間定位方案，缺少商品交互手段，VR的購物鏈路沒有人做過。下面介紹一下在這樣的選擇下我們是怎么實現技術上的3個要求的。
2、空間移動
這次我們完成了兩個方向的全自由移動，原理是把一個視頻拍完以后，再制作一個倒播的視頻，只需要在正向走動的時候播正向的視頻，逆向走動的時候播放倒播視頻。視頻播放調用了系統原生的播放器，由于涉及到硬件解碼，使得很多品牌的手機表現不一致，導致我們做了大量的適配。我們還碰到的一個問題是正播和倒播的視頻切換的時候會出現微微的畫面跳格，這個是因為android的Seek是基于關鍵幀的，如果將要Seek到的畫面不在關鍵幀上就會出現畫面跳格，我們通過添加關鍵幀緩解了這個問題。另外這里有一個有意思的結論，在我們做了大量的試驗后，前進后退箭頭的位置低于水平視線15°的位置時，用戶感到最舒適。
3、商品交互
商品有交互，首先我們要標定出那些商品是可以做交互的。
BUY+的“人工智能”商品標定
如果在純3D的場景模型里標定工作是非常簡單的，但對于一個視頻而言，要每時每刻都要標定商品，就非常有難度。假設視頻長度60秒，每秒有24幀，每幀10個商品，如果用手工逐一標定商品位置，需要標定14400個點，另外在真實情況下每幀出現的商品是不同的，這個工作量肯定是接受不了的。我們分析了下面的方案，最終確認了標定方案：
（1）圖片識別
在視頻第一幀對目標物進行標定，并將之作為模板，之后對視頻逐幀進行模板匹配，依次標記出商品位置。
但是這個方案經過討論很快就被否定，因為走到每個位置時看到的物品的面都不一樣，這給圖像識別帶來很大難度。而且很多商品在場景中看上去并不大，對圖像識別的要求實在太高，目前的技術儲備無法實現。
（2）顏色識別
該方案需要將整個全景視頻拍兩遍，第一遍正常拍攝，第二遍在有商品的位置擺放一個有特殊顏色的物品，然后用顏色的識別來取出商品相應的位置。這里有兩個難點，首先兩次拍攝的速度必須是一樣的，另外需要把場景中特殊顏色的位置全部用圖像算法摳出來。我們真實嘗試時發現了兩個問題：一是如果代替物很小，在整個圖片中的像素區域是不夠的；二是很容易被其它顏色干擾，比如燈光，而且環境中可能會有與物體顏色一樣的東西。經過多次嘗試后，發現這個方案也是不可行的，因為現場環境是難以預料的。
（3）慣性標定
拍攝初始階段，以攝像頭作為原點建立參考系，分別測量出商品的坐標，并且標定視頻的第一幀的數據。然后基于這些初始值以及攝像頭的勻速運動計算商品每一幀的坐標。這個方案理論上可行，但實際操作的時候也遇到很大技術困難，首先是勻速運動的問題，雖然可以用軌道車可以解決，但同時也限定了內容的拍攝方案。其次是坐標系轉化的問題，測量時一個很小的誤差會導致坐標系轉化產生很大的誤差。最后是每個攝像頭的參數不一樣的問題，這導致使用不同設備，參數都要重新通過數據去訓練。比如，我們嘗試去訓練完美幻境的一個設備，拿到的參數在其它設備上完全不可用。到此我們的第三種方案也基本可以認為是不可行的。
（4）半自動標定
該方案是最終我們采納的方案。在PC上打開視頻用鼠標去跟蹤每一個商品，記錄鼠標的坐標，然后把二維坐標轉化成3維坐標，這樣每個場景的商品標定可以在10分鐘內完成。但是如果每幀畫面的坐標都記錄的話，標定的數據會變的非常的大，我們最后決定100ms取一次標定數據，用戶在這個100ms內停下，都會用這個標定數據，成功地把標定數據的大小壓縮了6倍。
3D商品的制作方案則是針對商品環拍一圈，每隔一定度數取一張照片，將其壓縮為一個文件。當直接使用該文件展示商品時，經常遇到內存溢出問題，因此我們換用了類似視頻解碼的方案去展示商品，最終把內存控制在合理的范圍內。另外如果要求商品和背景融合完美的話，必須把商品背景扣成透明。我們做了150個商品，每個商品60張圖片，一共9000張圖片，工作量非常大。我們通過綠幕的手段，結合一些圖片提取的方法讓效率變得很高。
4、鏈路閉環
一個完整的交易鏈路意味著從用戶瀏覽詳情開始，進行下單，到最終完成支付的整個流程，其中包含諸如瀏覽商品模型、選擇收貨地址、輸入密碼、選擇銀行卡等等操作以及各種異常流的提示，手淘一個下單步驟就有上千的測試用例，窺一斑而知全豹，足以見整個交易鏈路情況之多，交互之繁重。
要在VR中做到交易閉環，就必須建立一個強大的GUI系統去撐住上述繁重的交互。而業界并未對GUI形成標準，整個VR行業都在探索中，因此沒有太多可借鑒的資源，研發這樣的GUI系統可以說是很大的挑戰。結合Buy+項目的實際情況，我們認為一個VR中的GUI系統必須具備以下特征：
（1）豐富的表現力以及低廉的學習成本
一個具有豐富表現力的UI系統意味著可以向用戶傳達更多語義，這個對比一更多語義，這個對比一下傳統GUI與CUI的區別，感受就非常明顯了。一個GUI系統的用戶首先是API客戶，最后才是普通用戶，所以必須考慮到API客戶對該GUI框架API的接受程度以及學習成本。所以我們最終采取了將Android的View和IOS的UIView轉為紋理然后在VR中渲染的方案。這是個魚與熊掌兼得的方案，一方面它成功地繼承了系統UI本身具備的豐富表現力，另一方面使得API客戶在Android與IOS平臺的開發知識仍然可用。
（2）足夠的“VR Style”
第一點有一個弊病，如果嚴格地按照它的指導去設計該GUI框架必然造成3D空間2D交互的結果。所以必須把平面的UI打散，用3D的方式組裝起來，也就是說需要把一個平面的Layout變為一個立體Layout，只有這樣做，該GUI框架才具備了“VR Style”化的基因。
（3）一個普適性的輸入事件框架
一個GUI系統的核心功能，無非是輸出與輸入，輸出的是用戶看到的各種界面以及動畫效果等，而輸入則是用戶通過不同外設進行的輸入。而這塊VR上面臨的最大問題是輸入設備沒有統一標準，雖然Daydream試圖改變這一局面，然而由于該規范在今年才提出，目前尚未形成工業事實上的標準，所以導致我們處在一個很尷尬的時期——未來可能出現主流輸入設備，但卻不得不面對現在身處VR輸入設備的亂世。因此要讓該GUI框架在這一塊上具備足夠的前瞻性以及防御性，那么必須設計一個普適性的輸入事件框架去兼容Gaze，CardBoard-Trigger，Daydream Controller，Gear-like，甚至是VR gloves這樣的輸入。當然了，鑒于設計這個框架的難度以及Buy+項目的節奏，我們在雙11只是完成了對點擊、Gaze，CardBoard-Trigger的支持，后續將會把提到的設備做一個兼容。
（4）高性能
對于任何系統，這都是個老生常談的問題，但在VR中性能優化的重要性尤為突出。太低的幀率會導致用戶產生明顯的暈動癥，因此我們在GUI這塊也做了大量優化，比如像視錐體剪裁，Node共享內存機制這樣的深度優化，以及前文所提到的對360度圖片的優化。
（5）必要的開發工具鏈
由于該GUI框架采用了復用系統UI但將其打散重組為3D結構的方案，導致這種3D的Layout復雜度驟然增加，所以必須要有一個在運行時實時調節這種Layout的工具來減輕開發過程中的復雜度去提高效率。作為一個工具，必須具有便捷性，因此我們借鑒了Chrome Inspector的遠程調試協議在H5上完成了該工具。
5、內容制作
為了保障店鋪和商品的全球化及真實感，我們選了3個國家7家最有特色的店鋪現場實拍。為了讓用戶感受虛擬世界穿越的過程，我們也拍攝了乘坐標志性交通工具前往店鋪的過程。這些內容拍攝任務重時間緊，所以我們在程序還沒有開發完成的情況下就開始了內容的拍攝。
拍攝團隊基本上把能用的開發和市場人員全部用上了，在10天左右的時間里面完成。不僅拍攝過程辛苦，而且還需要等到拍攝和后期完成才能體驗到實際效果，更是巨大的風險。拍攝過程中甚至遇到店鋪里面的商品太小看不清楚，而不得不臨時調整產品方案的情況。
經過了前期的鋪墊，以及最后兩個月的全員努力，雙11的BUY+完成了。它成為了第一個在線的VR購物應用，也是第一個百萬人參與的大型VR體驗。這中間我們收集了大量的數據和用戶反饋，幫助我們更好的前進。比如視覺熱點數據的分析，可以反向指導實體店鋪商品的擺放，分析用戶的興趣點。
隨著VR行業的發展，未來的BUY+也會有更多的想象空間。但BUY+只是一種購物的形態，它的發展依賴整個淘寶的3D化進程。
（來源：亞洲戶外）
