基于WebXR的跨境電商產(chǎn)品展示探究*

龔赤兵

(廣東水利電力職業(yè)技術(shù)學(xué)院電力工程學(xué)院,廣東廣州 510925)

0 引言

跨境電商是推動(dòng)我國(guó)傳統(tǒng)國(guó)際貿(mào)易轉(zhuǎn)型升級(jí)的一條重要路徑。2019年,中國(guó)的跨境電商交易額達(dá)到11萬億元,占進(jìn)出口總額36%,用戶數(shù)超1億人,跨境電商交易額增長(zhǎng)率近19%。近九年的相關(guān)數(shù)據(jù)顯示,我國(guó)的跨境電商交易額年均增速超過27%[1]。因此,基于互聯(lián)網(wǎng)的跨境電商市場(chǎng)空間巨大。

近年來,有關(guān)跨境電商的研究,主要集中在以下四個(gè)方面[2]。一是如何通過跨境電商實(shí)現(xiàn)傳統(tǒng)的國(guó)際貿(mào)易轉(zhuǎn)型升級(jí);二是如何在“一帶一路”中發(fā)展跨境電商;三是有關(guān)物流在跨境電商的研究;四是關(guān)于跨境電商的政策和監(jiān)管等方面的研究。

本文從跨境電商的技術(shù)支撐層面,來探討跨境電商的產(chǎn)品展示。基于WebXR技術(shù)實(shí)現(xiàn)跨境電商產(chǎn)品的展示,讓消費(fèi)者可以查看3D產(chǎn)品,為用戶帶來沉浸式的或者增強(qiáng)現(xiàn)實(shí)的交互購(gòu)物體驗(yàn),增強(qiáng)消費(fèi)者的購(gòu)買欲望,擴(kuò)大跨境電商的貿(mào)易額。

1 WebXR概述

隨著虛擬現(xiàn)實(shí)(Virtual Reality,簡(jiǎn)稱VR)、增強(qiáng)現(xiàn)實(shí)(Augment Reality,簡(jiǎn)稱AR)的快速發(fā)展,在實(shí)際應(yīng)用中,存在如下4個(gè)方面的難點(diǎn):

1.1 設(shè)備選型難

目前的VR、AR設(shè)備品種較為繁雜,國(guó)內(nèi)外眾多的公司參與其中,如華為的VR眼鏡、三星的Gear VR、HTC的Vive產(chǎn)品、微軟公司的頭盔以及Occulus公司的Occlus Quest等,不管對(duì)于普通用戶,還是專業(yè)的從業(yè)人員來說,很難決策選擇恰當(dāng)?shù)脑O(shè)備。

1.2 內(nèi)容開發(fā)難

開發(fā)人員需要熟悉多種VR、AR設(shè)備,開發(fā)成本高,從而導(dǎo)致VR、AR內(nèi)容的開發(fā)難度加大,影響了VR、AR內(nèi)容的豐富。

1.3 內(nèi)容分發(fā)難

需要針對(duì)特定的設(shè)備,單獨(dú)發(fā)布這些內(nèi)容。這對(duì)于跨境電商的VR、AR應(yīng)用等,內(nèi)容的分發(fā)也變得困難。

1.4 內(nèi)容維護(hù)難

在這些應(yīng)用的后期維護(hù)和更新期間,內(nèi)容的維護(hù)和更新也十分困難。

由于存在上述的設(shè)備選型難、內(nèi)容開發(fā)難、內(nèi)容分發(fā)難以及內(nèi)容維護(hù)難,嚴(yán)重影響了VR、AR整個(gè)產(chǎn)業(yè)的快速發(fā)展和壯大。

早在2014年,業(yè)界就開始推廣WebVR標(biāo)準(zhǔn),通過瀏覽器可以訪問多種VR設(shè)備,實(shí)現(xiàn)VR內(nèi)容的渲染和分發(fā)。隨著近幾年VR、AR的不斷發(fā)展,W3C在WebVR標(biāo)準(zhǔn)的基礎(chǔ)上,提出了新的WebXR標(biāo)準(zhǔn)。新的WebXR標(biāo)準(zhǔn)不僅適用于VR,還適用于AR。WebXR 1.0標(biāo)準(zhǔn)已經(jīng)于2020年7月正式發(fā)布,原有的WebVR標(biāo)準(zhǔn)已經(jīng)被棄用。

WebXR是一套全新的、開放的、標(biāo)準(zhǔn)化的Javascript API,VR、AR的應(yīng)用和內(nèi)容主要部署在云端服務(wù)器上,采用https加密傳輸方式到各種VR、AR設(shè)備中,可以有效規(guī)避內(nèi)容和隱私被泄露的風(fēng)險(xiǎn)。人們只需在這些VR、AR設(shè)備上,安裝兼容WebXR標(biāo)準(zhǔn)的跨平臺(tái)瀏覽器,即可通過瀏覽器體驗(yàn)VR、AR應(yīng)用。

WebXR通過技術(shù)標(biāo)準(zhǔn),為所有VR、AR設(shè)備創(chuàng)建一個(gè)簡(jiǎn)單,統(tǒng)一的框架,開發(fā)人員能夠創(chuàng)建可在所有VR、AR設(shè)備上運(yùn)行的內(nèi)容,大大降低VR、AR應(yīng)用開發(fā)的難度,大力推動(dòng)VR、AR應(yīng)用跨平臺(tái)、跨終端訪問,隨著這些VR、AR內(nèi)容的不斷豐富,基于WebXR的各種VR、AR應(yīng)用將會(huì)在不久的將來不斷涌現(xiàn)。

2 基于WebXR的跨境電商產(chǎn)品展示框架

基于WebXR的跨境電商產(chǎn)品展示框架,如圖1所示。跨境電商產(chǎn)品的展示框架,由三個(gè)層次所組成:分別是軟件、硬件和功能。在軟件層次中,運(yùn)行界面是支持WebXR的瀏覽器,用戶只需要在瀏覽器中輸入相關(guān)地址,即可通過瀏覽器運(yùn)行跨境電商產(chǎn)品的展示。而實(shí)現(xiàn)這些跨境電商產(chǎn)品的展示功能,開發(fā)者則是通過PlayCanvas開源平臺(tái),調(diào)用方便、易用的Javascript API,在共享3D產(chǎn)品模型資源的情況下,實(shí)現(xiàn)不同的交互,實(shí)現(xiàn)在瀏覽器中展示3D產(chǎn)品的3項(xiàng)功能:基于WebGL渲染3D產(chǎn)品的展示,基于WebXR實(shí)現(xiàn)VR和AR場(chǎng)景中展示3D產(chǎn)品。

圖1 跨境電商產(chǎn)品展示框架Fig.1 Display Framework for Cross-border E-commerce Products

圖2 WebXR模擬調(diào)試器Fig.2 WebXR Analog debugger

3 開發(fā)環(huán)境配置

配置WebXR的開發(fā)環(huán)境,需要完成以下5個(gè)方面的工作[3]。

3.1 安裝代碼編輯器

使用Javascript語言,本項(xiàng)目選用簡(jiǎn)單、易用、輕便的Visual Studio Code editor代碼編輯器。

該代碼編輯器的下載地址為:

https://code.visualstudio.com/docs/setup/windows,下載的安裝文件只有60M。

3.2 安裝本機(jī)Web服務(wù)器

本項(xiàng)目選擇在Visual Studio Code editor代碼編輯器中,添加插件(Live Server VS Extension by Ritwick Dey)的方式,集成支持HTTPS的Web服務(wù)器。

該服務(wù)器插件的下載地址為:

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServers

3.3 安裝支持WebXR的瀏覽器

本項(xiàng)目在Windows 10的桌面電腦上,安裝了Google Chrome瀏覽器,版本號(hào)為:87.0.4280.88。

3.4 安裝PlayCanvas引擎

為方便書寫支持WebGL和基于WebXR的Javascript代碼,本項(xiàng)目使用了PlayCanvas開源Javascript庫。

PlayCanvas引擎的下載地址為:

https://github.com/playcanvas/engine

3.5 安裝WebXR的模擬調(diào)試器

在開發(fā)基于WebXR的應(yīng)用時(shí),最好使用相關(guān)的硬件設(shè)備來調(diào)試。本項(xiàng)目選擇了WebXR模擬調(diào)試器的方式。

請(qǐng)?jiān)赾hrome網(wǎng)上應(yīng)用店中,搜索WebXR API Emulator,下載并安裝WebXR模擬調(diào)試器。

在Google Chrome瀏覽器中,單擊設(shè)置——更多工具——開發(fā)者工具——>>,選擇WebXR插件,打開如圖2所示的運(yùn)行界面。

圖3 3D產(chǎn)品展示的運(yùn)行界面Fig.3 3D product presentation interface

表1 3D產(chǎn)品展示的主要代碼的名稱和功能描述Tab.1 3D the name and functional description of the main code displayed by the product

表2 VR場(chǎng)景3D產(chǎn)品展示的主要代碼的名稱和功能描述Tab.2 VR Scenario 3 D Name and functional description of the main code displayed by the product

表3 AR場(chǎng)景3D產(chǎn)品展示的主要代碼的名稱和功能描述Tab.3 AR Scenario 3 D Name and functional description of the main code displayed by the product

圖4 進(jìn)入VR場(chǎng)景的初始界面Fig.4 Enter the initial interface of the VR scene

圖5 VR場(chǎng)景3D產(chǎn)品展示的運(yùn)行界面Fig.5 VR Scenario 3 D the running interface of the product presentation

圖6 進(jìn)入AR場(chǎng)景的初始界面Fig.6 Enter the initial interface of the AR scene

圖7 AR場(chǎng)景3D產(chǎn)品展示的運(yùn)行界面Fig.7 AR Scenario 3 D the running interface of the product presentation

在圖2中,可以在設(shè)備選擇列表中設(shè)置VR或者AR設(shè)備,圖中選擇的是Oculus Quest類型的VR設(shè)備,單擊該頭盔或者手柄,可以實(shí)現(xiàn)旋轉(zhuǎn)、平移等操作,并在右邊顯示數(shù)字化的結(jié)果,從而在瀏覽器界面調(diào)試VR的運(yùn)行界面。

4 基于WebXR的跨境電商產(chǎn)品展示開發(fā)

在WebXR的跨境電商產(chǎn)品展示中,針對(duì)不同的硬件,集成開發(fā)了3項(xiàng)主要功能,分別是在Web頁面上的3D產(chǎn)品展示、VR場(chǎng)景中的3D產(chǎn)品展示和AR場(chǎng)景中的3D產(chǎn)品展示。

4.1 3D產(chǎn)品展示

只要上載產(chǎn)品的3D模型,就可以實(shí)現(xiàn)在Web頁面中,展示3D產(chǎn)品,可以實(shí)現(xiàn)對(duì)產(chǎn)品的旋轉(zhuǎn)、平移、放大或縮小操作。

由于目前的常用硬件設(shè)備包括桌面電腦、平板電腦和手機(jī),因此需要實(shí)現(xiàn)不同的交互操作,通過桌面電腦的鍵盤、鼠標(biāo)操作,以及通過平板電腦和手機(jī)的手勢(shì)操作。所開發(fā)的主要代碼的名稱和功能描述,見表1。

3D產(chǎn)品展示的運(yùn)行界面,如圖3所示。

4.2 VR場(chǎng)景3D產(chǎn)品展示

在展示3D產(chǎn)品的Web頁面中,如果瀏覽器支持WebXR,并且運(yùn)行該瀏覽器的VR頭盔也支持WebXR,那么在頁面的左上方顯示一個(gè)VR按鈕,用手柄單擊該按鈕,即可進(jìn)入VR場(chǎng)景,在VR場(chǎng)景中展示3D產(chǎn)品,旋轉(zhuǎn)該產(chǎn)品,放大或縮小該產(chǎn)品等。所開發(fā)主要代碼的名稱和功能描述,見表2。

進(jìn)入VR場(chǎng)景的初始界面,如圖4所示。

在圖4中,單擊VR按鈕,就進(jìn)入VR場(chǎng)景中展示3D產(chǎn)品的運(yùn)行界面,如圖5所示。

4.3 AR場(chǎng)景3D產(chǎn)品展示

在展示3D產(chǎn)品的Web頁面中,如果瀏覽器支持WebXR,并且運(yùn)行該瀏覽器的AR手機(jī)也支持WebXR,那么在頁面的左上方顯示一個(gè)AR按鈕,用手柄單擊該按鈕,即可進(jìn)入AR場(chǎng)景,在AR場(chǎng)景中擺放3D產(chǎn)品。所開發(fā)主要代碼的名稱和功能描述,見表3。

進(jìn)入AR場(chǎng)景的初始界面,如圖6所示。

在圖6中,單擊AR按鈕,就進(jìn)入AR場(chǎng)景中展示3D產(chǎn)品的運(yùn)行界面,如圖7所示。

在圖7中,旋轉(zhuǎn)或移動(dòng)手機(jī)到相關(guān)位置,然后鼠標(biāo)右鍵就可以將3D產(chǎn)品擺放在相關(guān)位置。

5 結(jié)語

利用本項(xiàng)目所開發(fā)的3D、AR和VR產(chǎn)品展示功能模塊,只要上傳相關(guān)產(chǎn)品的3D模型,即可通過瀏覽器查看3D產(chǎn)品;選擇兼容WebXR標(biāo)準(zhǔn)的AR、VR設(shè)備,通過支持WebXR標(biāo)準(zhǔn)的瀏覽器來快速分發(fā)、瀏覽、維護(hù)和更新這些AR、VR跨境電商產(chǎn)品展示,基本解決當(dāng)前VR、AR所存在的4個(gè)痛點(diǎn),具有很好的市場(chǎng)應(yīng)用前景。