这里有最全的开发和UX/UI资源,WebXR应用开发指北

青亭网( ID:qingtinwang )--链接科技前沿,服务商业创新

前不久,英国AR独角兽公司Blippar在经历破产风波后再次“营业”,这回他们带来的新产品不是基于计算机视觉的AR定位应用,不是AR购物应用,更不是Windows手机、或Google Glass应用,而是支持WebAR的AR开发平台Blippbuilder。为什么这一次Blippar选择了WebAR呢?

1_VNZLQTe3kRXit4g7p_XxQA

其创始人Ambarish Mitra表示:网页目前依然是一个主流平台,我们看好网页端AR打开市场的能力,同时,发展WebAR也有望推动未来AR技术的发展。

blippar-bounces-back-with-web-based-ar-platform.1280x600

Blippbuilder

不管是WebAR、WebXR还是WebVR,顾名思义,指的是基于Web互联网用于VR和AR体验的方案,其包括VR头显,移动AR等,不受设备限制,通用性更强。据悉WebXR的API和WebGL可匹配,可将一个URL链接作为VR/AR体验的入口,就像现在浏览网页那般简单。

WebAR虽然在行业内略显低调,而且它的API仍然不稳定,但在进一步优化改进后,很有可能成为新时代W3C标准。不可否认的是,网页端AR/VR/XR的应用开始越来越多,市面上也出现了越来越多的相关开发平台。

之所以WebXR(包含WebAR和WebVR)的人气逐渐攀升,是因为对于刚入门XR的开发者来讲,选择WebXR是一个比较保靠的决定,因为它成本低、开发相对简单,而且网页/浏览器拥有大量用户,使得WebXR非常适合用作一款营销工具。

8th-wall-spins-up-new-spider-man-into-spider-verse-augmented-reality-experience-for-blu-ray-dvd-release.1280x600

《蜘蛛侠:平行宇宙》AR

比如,为了宣传电影《蜘蛛侠:平行宇宙》,索尼影业就曾推出用8th Wall AR开发平台制作的两款Web AR体验,通过扫描二维码,粉丝们便可在网页中激活动态的蜘蛛侠AR滤镜,无需下载应用就能与心爱的超级英雄合影。

toyota-rolls-out-web-based-ar-advertising-campaign-via-8th-wall.1280x600

丰田AR广告

前不久,丰田汽车与广告公司Conill合作,也用8th Wall的开发平台制作了一款安卓浏览器横幅广告,在手机中点开广告后,屏幕中就会弹出2020年卡罗拉的AR模型,消费者可通过手机摄像头将AR叠加在周围环境中,除了动态查看汽车的动力天窗、LED前灯、合金轮毂外,还能以360°的方式查看汽车内部。

此外,通过WebXR接口,开发者还可以在浏览器分发游戏、影片等XR内容。这些内容不仅可以在PC端查看,也可以在Google Daydream、Oculus Rift/Quest、三星Gear VR、HTC Vive、WMR等VR设备的浏览器中运行。

1_wJs1jxIu0QfpqwlIPBf8og

Firefox Reality

目前,VR/AR头显端有多个浏览器支持WebXR,比如Oculus浏览器、Firefox Reality、Samsung Internet、Supermedium、Chrome等。

Magic Leap One微信截图_20180808203741

Magic Leap Helio

此外,本月初Magic Leap也宣布其浏览器Helio将支持WebXR,并与3D模型平台Sketchfab合作,今后开发者只需将3D作品上传到Sketchfab平台,即可通过Magic Leap进行体验。

1_RCFsUD_AMh1fwdzQUmMhXg

Supermedium

在移动端,也有专门支持WebXR的浏览器应用,比如iOS WebXR Viewer、WebARonARKit(iOS)、WebARonARCore(安卓)。

null-3

Moon Rider

而一些公司也证明了在WebXR上也能开发有趣的游戏,比如Supermedium就推出了一款网页版VR节奏打击游戏:《Moon Rider》,与《Beat Saber》玩法相似,游戏支持四种模式,除了“光剑”玩法,还有用拳头击打音符模块的玩法。不过效果方面,偶尔会出现延迟、音频不同步等问题。

总之,WebXR的应用场景不少,客户端足够多,不管用户有没有XR硬件,都能观看AR/VR内容,也不需要下载,在未来这种形式的XR真的有望成为打开市场的利器。

WebXR开发的参考建议

那么要开发优质的WebXR内容,应该有哪几点考量呢?

首先,考虑到WebXR不需要用户下载应用,那么开发者就应该注意XR内容的大小,如果太大,可能就会需要很久时间缓冲,影响体验感。

其次,有些360°交互式VR视频需要安装Google Spotlight Stories应用能运行,安装额外的应用也会增加WebXR内容的复杂性。

另外,应该针对不同硬件平台进行内容的优化,比如,可在高端VR头显中运行的内容有时候并不适用于其他平台。而且,不同的VR设备分辨率、FOV、DoF、传感器和手柄都会有不同,而同意的API则可被用作通用的开发工具,开发针对全部平台的内容。

针对网页端、头显端也可以对WebXR内容进行优化,比如:为360°交互式网页内容加入对鼠标、触屏输入方式的支持;优化VR头显用户的体验,并加入对VR手柄的支持。

关于WebXR未来

就目前来讲,开发者只需要关心如何开发优质的WebXR内容,不过在未来,相信网页端XR内容与正式的XR应用之间的差距将缩小,这是因为:

  • 越来越多VR/AR设备的浏览器提供对WebXR的原生支持;
  • 移动端硬件对3D图像的渲染能力越来越强;
  • WebXR应用增多;
  • AR滤镜/摄像头也对WebXR提供支持,比如Facebook Save to WebVR、Facebook 3D posts、Mozilla Hubs和Spoke、Adobe沉浸式平台、亚马逊Sumerian、Unity Mobile AR广告、谷歌AR搜索、Adobe Project Aero、Google和Mapbox的AR地图等;
  • USDZ、glTF等新3D格式逐渐普及后,3D控件的开发流程也更加成熟;
  • 5G网络和云计算对于VR/AR的提升。

关于WebXR开发框架与平台

1_8NSNjuNwt9hx4fhQeJAFpA

那么开发者们,如果想开发WebXR内容,该从何开始呢?目前,两个最受欢迎的VR开发框架分别为A-Frame和React 360,二者均使用three.js 3D资源库,开发者还可以使用babylon.js资源库。此外,开发者们还可使用Sumerian、Vizor、Hologram或PlayCanvas工具,可用于编辑视觉内容。

更方便点的,开发者可以在8th Wall、awe、NextTech AR等AR平台上直接开发AR内容,或者也可以利用JS 3D资源库来编写代码。

方便使用的资源

UX/UI资源

社区

更多精彩内容,关注青亭网微信号(ID:qingtinwang),或者来微博@青亭网与我们互动!转载请注明版权和原文链接!
青亭网

微信扫码关注青亭网

青亭网

青亭 | 前沿科技交流群01

责任编辑:小新
分享到QQ 分享到微信
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册