基于WebXR的跨境电商产品展示探究*

龚赤兵

(广东水利电力职业技术学院电力工程学院,广东广州 510925)

0 引言

跨境电商是推动我国传统国际贸易转型升级的一条重要路径。2019年,中国的跨境电商交易额达到11万亿元,占进出口总额36%,用户数超1亿人,跨境电商交易额增长率近19%。近九年的相关数据显示,我国的跨境电商交易额年均增速超过27%[1]。因此,基于互联网的跨境电商市场空间巨大。

近年来,有关跨境电商的研究,主要集中在以下四个方面[2]。一是如何通过跨境电商实现传统的国际贸易转型升级;二是如何在“一带一路”中发展跨境电商;三是有关物流在跨境电商的研究;四是关于跨境电商的政策和监管等方面的研究。

本文从跨境电商的技术支撑层面,来探讨跨境电商的产品展示。基于WebXR技术实现跨境电商产品的展示,让消费者可以查看3D产品,为用户带来沉浸式的或者增强现实的交互购物体验,增强消费者的购买欲望,扩大跨境电商的贸易额。

1 WebXR概述

随着虚拟现实(Virtual Reality,简称VR)、增强现实(Augment Reality,简称AR)的快速发展,在实际应用中,存在如下4个方面的难点:

1.1 设备选型难

目前的VR、AR设备品种较为繁杂,国内外众多的公司参与其中,如华为的VR眼镜、三星的Gear VR、HTC的Vive产品、微软公司的头盔以及Occulus公司的Occlus Quest等,不管对于普通用户,还是专业的从业人员来说,很难决策选择恰当的设备。

1.2 内容开发难

开发人员需要熟悉多种VR、AR设备,开发成本高,从而导致VR、AR内容的开发难度加大,影响了VR、AR内容的丰富。

1.3 内容分发难

需要针对特定的设备,单独发布这些内容。这对于跨境电商的VR、AR应用等,内容的分发也变得困难。

1.4 内容维护难

在这些应用的后期维护和更新期间,内容的维护和更新也十分困难。

由于存在上述的设备选型难、内容开发难、内容分发难以及内容维护难,严重影响了VR、AR整个产业的快速发展和壮大。

早在2014年,业界就开始推广WebVR标准,通过浏览器可以访问多种VR设备,实现VR内容的渲染和分发。随着近几年VR、AR的不断发展,W3C在WebVR标准的基础上,提出了新的WebXR标准。新的WebXR标准不仅适用于VR,还适用于AR。WebXR 1.0标准已经于2020年7月正式发布,原有的WebVR标准已经被弃用。

WebXR是一套全新的、开放的、标准化的Javascript API,VR、AR的应用和内容主要部署在云端服务器上,采用https加密传输方式到各种VR、AR设备中,可以有效规避内容和隐私被泄露的风险。人们只需在这些VR、AR设备上,安装兼容WebXR标准的跨平台浏览器,即可通过浏览器体验VR、AR应用。

WebXR通过技术标准,为所有VR、AR设备创建一个简单,统一的框架,开发人员能够创建可在所有VR、AR设备上运行的内容,大大降低VR、AR应用开发的难度,大力推动VR、AR应用跨平台、跨终端访问,随着这些VR、AR内容的不断丰富,基于WebXR的各种VR、AR应用将会在不久的将来不断涌现。

2 基于WebXR的跨境电商产品展示框架

基于WebXR的跨境电商产品展示框架,如图1所示。跨境电商产品的展示框架,由三个层次所组成:分别是软件、硬件和功能。在软件层次中,运行界面是支持WebXR的浏览器,用户只需要在浏览器中输入相关地址,即可通过浏览器运行跨境电商产品的展示。而实现这些跨境电商产品的展示功能,开发者则是通过PlayCanvas开源平台,调用方便、易用的Javascript API,在共享3D产品模型资源的情况下,实现不同的交互,实现在浏览器中展示3D产品的3项功能:基于WebGL渲染3D产品的展示,基于WebXR实现VR和AR场景中展示3D产品。

图1 跨境电商产品展示框架Fig.1 Display Framework for Cross-border E-commerce Products

图2 WebXR模拟调试器Fig.2 WebXR Analog debugger

3 开发环境配置

配置WebXR的开发环境,需要完成以下5个方面的工作[3]。

3.1 安装代码编辑器

使用Javascript语言,本项目选用简单、易用、轻便的Visual Studio Code editor代码编辑器。

该代码编辑器的下载地址为:

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

3.2 安装本机Web服务器

本项目选择在Visual Studio Code editor代码编辑器中,添加插件(Live Server VS Extension by Ritwick Dey)的方式,集成支持HTTPS的Web服务器。

该服务器插件的下载地址为:

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

3.3 安装支持WebXR的浏览器

本项目在Windows 10的桌面电脑上,安装了Google Chrome浏览器,版本号为:87.0.4280.88。

3.4 安装PlayCanvas引擎

为方便书写支持WebGL和基于WebXR的Javascript代码,本项目使用了PlayCanvas开源Javascript库。

PlayCanvas引擎的下载地址为:

https://github.com/playcanvas/engine

3.5 安装WebXR的模拟调试器

在开发基于WebXR的应用时,最好使用相关的硬件设备来调试。本项目选择了WebXR模拟调试器的方式。

请在chrome网上应用店中,搜索WebXR API Emulator,下载并安装WebXR模拟调试器。

在Google Chrome浏览器中,单击设置——更多工具——开发者工具——>>,选择WebXR插件,打开如图2所示的运行界面。

图3 3D产品展示的运行界面Fig.3 3D product presentation interface

表1 3D产品展示的主要代码的名称和功能描述Tab.1 3D the name and functional description of the main code displayed by the product

表2 VR场景3D产品展示的主要代码的名称和功能描述Tab.2 VR Scenario 3 D Name and functional description of the main code displayed by the product

表3 AR场景3D产品展示的主要代码的名称和功能描述Tab.3 AR Scenario 3 D Name and functional description of the main code displayed by the product

图4 进入VR场景的初始界面Fig.4 Enter the initial interface of the VR scene

图5 VR场景3D产品展示的运行界面Fig.5 VR Scenario 3 D the running interface of the product presentation

图6 进入AR场景的初始界面Fig.6 Enter the initial interface of the AR scene

图7 AR场景3D产品展示的运行界面Fig.7 AR Scenario 3 D the running interface of the product presentation

在图2中,可以在设备选择列表中设置VR或者AR设备,图中选择的是Oculus Quest类型的VR设备,单击该头盔或者手柄,可以实现旋转、平移等操作,并在右边显示数字化的结果,从而在浏览器界面调试VR的运行界面。

4 基于WebXR的跨境电商产品展示开发

在WebXR的跨境电商产品展示中,针对不同的硬件,集成开发了3项主要功能,分别是在Web页面上的3D产品展示、VR场景中的3D产品展示和AR场景中的3D产品展示。

4.1 3D产品展示

只要上载产品的3D模型,就可以实现在Web页面中,展示3D产品,可以实现对产品的旋转、平移、放大或缩小操作。

由于目前的常用硬件设备包括桌面电脑、平板电脑和手机,因此需要实现不同的交互操作,通过桌面电脑的键盘、鼠标操作,以及通过平板电脑和手机的手势操作。所开发的主要代码的名称和功能描述,见表1。

3D产品展示的运行界面,如图3所示。

4.2 VR场景3D产品展示

在展示3D产品的Web页面中,如果浏览器支持WebXR,并且运行该浏览器的VR头盔也支持WebXR,那么在页面的左上方显示一个VR按钮,用手柄单击该按钮,即可进入VR场景,在VR场景中展示3D产品,旋转该产品,放大或缩小该产品等。所开发主要代码的名称和功能描述,见表2。

进入VR场景的初始界面,如图4所示。

在图4中,单击VR按钮,就进入VR场景中展示3D产品的运行界面,如图5所示。

4.3 AR场景3D产品展示

在展示3D产品的Web页面中,如果浏览器支持WebXR,并且运行该浏览器的AR手机也支持WebXR,那么在页面的左上方显示一个AR按钮,用手柄单击该按钮,即可进入AR场景,在AR场景中摆放3D产品。所开发主要代码的名称和功能描述,见表3。

进入AR场景的初始界面,如图6所示。

在图6中,单击AR按钮,就进入AR场景中展示3D产品的运行界面,如图7所示。

在图7中,旋转或移动手机到相关位置,然后鼠标右键就可以将3D产品摆放在相关位置。

5 结语

利用本项目所开发的3D、AR和VR产品展示功能模块,只要上传相关产品的3D模型,即可通过浏览器查看3D产品;选择兼容WebXR标准的AR、VR设备,通过支持WebXR标准的浏览器来快速分发、浏览、维护和更新这些AR、VR跨境电商产品展示,基本解决当前VR、AR所存在的4个痛点,具有很好的市场应用前景。