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