主页 > 养生保健 >Google Chrome 增添 AR 效果,详解 Web AR 实现技术 >

Google Chrome 增添 AR 效果,详解 Web AR 实现技术


2020-06-07


Google Chrome 增添 AR 效果,详解 Web AR 实现技术

Google 一直很重视 Web 端的 VR / AR 体验,靠着 Daydream VR 平台,Google 在 Chrome 浏览器上支援 VR 效果。经过一段时间的开发和探索,Google 正式展示 Chrome 的 AR 效果。

Google 部落格文章表示:「接下来几个月,会有上亿的 Android 和 iOS 装置支援 AR 体验,透过手机,你可以把虚拟物体放在现实世界。为了使更多人能体验这个产品,我们一直在探索如何在网页端实现虚拟实境效果,之后所有人透过浏览器就能获得神奇的 AR 体验。

文中 Google 展示了 3D 原型检视器 Article,以及如何在浏览器使用 AR,详细阐述了技术实现的细节,以下不改变原意编译,来看看 Web AR 如何实现的吧。

原型工作原理

Article 是可执行于所有浏览器的 3D 模型检视器。在桌面端,用户可在检视 3D 模型时,拖曳模型旋转,也可以捲动缩放大小。手机端体验类似,用户可点击或拖拉来旋转模型,或以两根手指放大缩小。

Google Chrome 增添 AR 效果,详解 Web AR 实现技术

 桌面端模型展示效果。

为了显示模型不是静态影像,而是 3D 并可互动,当用户翻动页面时,模型会轻微旋转。

Google Chrome 增添 AR 效果,详解 Web AR 实现技术

透过 AR,模型更栩栩如生。AR 的独特力量在于可将虚拟和现实融合。所以我们浏览网页时,找到一个模型,并把它放在房间中体验实际大小,且可以绕其走一圈。

当 Article 加载至支援 AR 的装置和浏览器时,浏览器底部会出现一个 AR 按钮。按下 AR 按钮会触发装置镜头,并会在用户面前的地上显示标线。当用户点击萤幕,3D 模型会出现在标线上,以实际大小呈现。用户可围绕物体运动一圈,获得图像和影片无法给予的体积感和直接感。

Google Chrome 增添 AR 效果,详解 Web AR 实现技术

 AR 装置使用 Article 浏览效果。

用户还可以点击─拖拉来重新放置模型。一些细微的特徵,如阴影和光照可帮助模型融入环境。

从用户测试可了解,清晰的介面互动线索是帮助用户理解 AR 如何执行的关键。例如,当用户等待系统辨识一个可放置模型的表面时,地上会出现一个圆圈,根据用户的运动会倾斜。这可帮助介绍 AR 互动──虚拟物体和物理环境之间的互动。

底层技术细节

Google 用 Three.js 来创造自适应模型检视器 Article。Three.js 使开发者更容易接触 Web GL 的底层技术,并 Three.js 有大量案例、档案和解答来降低开发者的学习成本。

为了确保流畅的互动和动态效果,Google 最佳化了这些有助于效果的因素:

为了加速更新时间,更建立了一个桌面 AR 模拟器,可允许侦测 UX 变化。这使预览变更可同时发生。模拟器之前,不管是多幺微小的变化都必须重新加载到手机装置,每个建立─推送─加载週期都得花超过 10 秒。有了模拟器,可在桌面预览调整,完成后再推送到手机装置。

模拟器建立在桌面 AR polyfill 和 Three.js。如果有一行程式码在 index.js 档案中未被注释,它将呈现灰色的网格环境,并添加键盘和滑鼠控制项来代替现实世界的物理行动。模拟器包含在 Article 的项目资料库里。

Google Chrome 增添 AR 效果,详解 Web AR 实现技术

太空服模型来源于 Poly(Google 的 3D 模型资料库)。Poly 许多模型透过 Creative Commons Attribution 授权,这可让用户複製或重新设计,只要建立者授权。

Article 的 2D 部分是透过现成资料库和 Web 工具。为了适应布局和排版以及整体主题,使用了 Bootstrap(可使开发者轻鬆建立回应不同装置萤幕大小的优秀网站)。为了致敬维基百科和 Medium,Google 採用 Bootswatch 的 Paper 主题。为了管理从属关係、类和构建步骤,使用了 NPM、ES6、Babel 和 Webpack。

展望未来

网页 AR 有巨大潜力,可用于购物、教育和娱乐等。Article 只是一系列原型工具的其中一个,还有更多值得探索:如何利用光照估计来融合虚拟 3D 物体与真实世界、如何添加叙事性 UI 注解放置在模型的正确位置。Web 上的手机 AR 目前十分有趣,因为还有很多值得探索的东西。如果想更了解 Google 实验性浏览器,并开始建立自己的模型,可前往 Google 的开发者页面。



上一篇:


下一篇: