谷歌详解Web AR实现技术

谷歌一直很重视Web端的VR/ AR 体验，依靠Daydream VR平台，谷歌在Chrome浏览器上支持VR效果。现在，经过一段时间的开发和探索，谷歌开始正式展示Chrome上的 AR 效果。

谷歌在其博客上表示：”在接下来几个月，会有上亿的设备安卓和iOS设备支持 AR 体验，也就是说，通过手机，你可以把虚拟物体放置在现实世界中。为了使尽可能多的人能够体验这个产品，我们一直在探索如何在网页端实现虚拟现实效果，此后所有人通过浏览器就能获得神奇的AR体验。“

在博文中，谷歌展示了其3D原型查看器Article，以及如何在浏览器中使用AR，详细阐述了技术实现的细节，干货较多。对其原文做了不改变愿意的编辑，一起来看看Web AR是如何实现的吧。

原型工作原理

Article是一个可以运行于所有浏览器的3D模型查看器。在桌面端，用户可以在查看3D模型时，可以拖动模型实现旋转也可以滚动来缩放大小。在手机端，体验是类似的，用户可以点击或者拖拉来旋转模型，或者以两只手指来放大缩小。

（桌面端模型展示效果）

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

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

当Article加载至支持AR的设备和浏览器时，浏览器底部会出现一个AR按钮。按下AR按钮会激活设备的摄像头，并且会在用户面前的地面上显示标线。当用户点击屏幕，3D模型会出现在标线上，以实际大小呈现在地面上。用户可以围绕物体运动一周，来获得图像和视频无法给予的体积感和直接感。

（在AR设备中使用Article浏览效果）

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

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

底层技术细节

我们用Three.js来创造了自适应模型查看器Article。Three.js使开发者更容易接触到Web GL的底层技术，并且Three.js有大量的案例，文档和大量解答来降低开发者的学习成本。

为了确保流畅的交互和动态效果，我们优化了这些有助于效果的因素：

• 采用了低多边形数模型；
• 仔细地控制了场景中的照明数量；
• 在手机端减少了阴影效果；
• 渲染模拟器UI时，通过应用指向距离函数的着色器来高效率地以无限制分辨率渲染效果。

为了加速迭代时间，我们创建了一个桌面AR模拟器，其可以允许我们检测UX变化。这使得预览更改可以同时发生。在模拟器之前，不管是多么微小的变化都必须重新加载到手机设备，每个创建-推送-加载周期都得花超过10秒的时间。有了模拟器，我们可以在桌面上预览调整，完成后再推送到手机设备。

模拟器建立在桌面AR polyfill和Three.js上。如果有一行代码在index.js文件中未被注释，它将会呈现出一个灰色的网格环境，并添加键盘和鼠标控件来替代现实世界中物理移动。模拟器包含在Article的项目库中。

太空服模型来源于 Poly（谷歌的3D模型库） 。Poly中许多模型通过Creative Commons Attribution被授权，这可以使得用户可以复制或者重新设计它们，只要创建者授权。

Article的2D部分是通过现成库和Web工具。为了适应布局和排版，以及整体的主题，我们使用了Bootstrap(其可以使得开发者可以轻松创建能够响应不同设备屏幕大小的优秀网站）。为了致敬维基百科和Medium，我们采用了Bootswatch的Paper主题。为了管理从属关系、类和构建步骤，我们使用了NPM，ES6，Babel和Webpack。

展望未来

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

via：leiphone