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 模型时，拖曳模型旋转，也可以卷动缩放大小。手机端体验类似，用户可点击或拖拉来旋转模型，或以两根手指放大缩小。
▲ 桌面端模型展示效果。
为了显示模型不是静态影像，而是 3D 并可互动，当用户翻动页面时，模型会轻微旋转。
透过 AR，模型更栩栩如生。AR 的独特力量在于可将虚拟和现实融合。所以我们浏览网页时，找到一个模型，并把它放在房间中体验实际大小，且可以绕其走一圈。
当 Article 加载至支援 AR 的装置和浏览器时，浏览器底部会出现一个 AR 按钮。按下 AR 按钮会触发装置镜头，并会在用户面前的地上显示标线。当用户点击屏幕，3D 模型会出现在标线上，以实际大小呈现。用户可围绕物体运动一圈，获得图像和影片无法给予的体积感和直接感。
▲ AR 装置使用 Article 浏览效果。
用户还可以点击─拖拉来重新放置模型。一些细微的特征，如阴影和光照可帮助模型融入环境。
从用户测试可了解，清晰的界面互动线索是帮助用户理解 AR 如何执行的关键。例如，当用户等待系统辨识一个可放置模型的表面时，地上会出现一个圆圈，根据用户的运动会倾斜。这可帮助介绍 AR 互动──虚拟物体和物理环境之间的互动。
底层技术细节
Google 用 Three.js 来创造自适应模型检视器 Article。Three.js 使开发者更容易接触 Web GL 的底层技术，并 Three.js 有大量案例、档案和解答来降低开发者的学习成本。
为了确保流畅的互动和动态效果，Google 最佳化了这些有助于效果的因素：
- 采用低多边形数位／类比型。
- 仔细控制场景中的照明数量。
- 手机端减少阴影效果。
- 渲染模拟器 UI 时，透过应用指向距离函数的着色器，高效率地以无限制分析度渲染效果。
为了加速更新时间，更建立了一个桌面 AR 模拟器，可允许侦测 UX 变化。这使预览变更可同时发生。模拟器之前，不管是多么微小的变化都必须重新加载到手机装置，每个建立─推送─加载周期都得花超过 10 秒。有了模拟器，可在桌面预览调整，完成后再推送到手机装置。
模拟器建立在桌面 AR polyfill 和 Three.js。如果有一行程式码在 index.js 档案中未被注释，它将呈现灰色的网格环境，并添加键盘和鼠标控件来代替现实世界的物理行动。模拟器包含在 Article 的项目数据库里。
太空服模型来源于 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 的开发者页面。
- Augmented reality on the web, for everyone
（本文由 雷锋网 授权转载；首图来源：Google）
延伸阅读：
- 放弃 Tango 之后，Google 全力押宝 ARCore
- Google、苹果都看好！AR 应用将迎来黄金发展期
- Google 发表 Android AR 工具：与苹果的 ARKit 有什么不同？
