作者：Matvii Kovtun翻译：疯狂的技术宅
原文：https://perfectial.com/blog/w...
未经允许严禁转载
增强现实技术在开发人员和智能手机用户中越来越受欢迎，但它还是没有在无所不在的技术中占据一席之地。要体验 AR，用户必须安装专用的程序，但经常会在用过几次后就将其删除，甚至根本去下载它。 WebAR 将成为用户不愿意通过下载应用程序体验的解决方案，并且有相当多的证据表明它会成功。
什么是WebAR？
WebAR 是一种增强现实体验，可通过 Web 浏览器而不是应用程序进行访问。它通过使用诸如 WebGL、WebRTC、WebVR 和 API 之类的技术来提供基于 Web 的 AR 体验。简而言之，你只需要一部智能手机即可访问它。
WebAR 使智能手机用户可以通过 web 以最简单的方式发现 AR 技术，没有安装的负担。它简单地打破了障碍，并创建了可以通过 QR 码或链接访问的交互式 3D 模型。目前与基于应用程序的 AR 相比，WebAR 提供了有限的功能，但它已经有了简单的动画、视频和一定程度的交互性功能。此外 WebAR 支持图像目标检测。
WebAR 背后的技术
WebAR 是沉浸式网络的一部分，尽管它不需要应用程序，但仍然有一些技术要求。首先，你的智能手机必须具有陀螺仪、加速度计和 RGB 摄像头等传感器（大多数现代智能手机都配备了此类传感器）才能运行 WebAR 页面。此外你的浏览器应支持 WebXR，该 API 可让用户无需安装额外的插件或软件即可查看 AR/VR 内容，并且已安装了 AR Core（适用于 Android 设备）。
对于 iOS 设备用户，Apple 开发了 AR Quick Look，该扩展使用户可以在 Web 上使用 ARKit。这样可以通过 Web 快速轻松地访问 AR —— AR Quick Look 使用 USDZ 格式的模型。然后在屏幕上显示 AR 图像后，只需轻按一下即可获得AR体验。它可以在 Safari 浏览器和邮件、便笺和消息等内置应用中运行，并允许你查看高质量的 3D 对象。
USDZ 格式是由 Apple 与 Pixar Animation Studio 共同创建的，并允许开发人员为 AR 创建3D模型。这是 USD 格式的扩展，它结合了多个对象（例如图像和文本），并将它们渲染为一个。 USDZ 本身是未加密的 zip 文件，可以通过 Apple 的基于 Python 的工具创建。它还包括一个转换器，可将其他文件格式（如 .fbx，.abc，.gltf，.obj）转换为 USDZ。
还有许多其他工具和框架可帮助开发人员使用 WebAR 扩展沉浸式网络。例如，AR.js 是 Web 上增强现实的开放源代码库，用于改善智能手机上的 WebAR 性能，其中包括基于标记的技术（简化的 QR 码）和基于位置的 AR。它可以轻松执行到 60FPS，并且很容易构建 WebAR 体验。总而言之，为了使现代浏览器能够识别并显示 3D 内容，而不仅仅是像素，“ 3D 内容必须是可组合的，可互操作的且可标准化的”以推动这项技术的发展。
WebAR 如何工作
通常 WebAR 可以作为 AR 真正能够为其用户提供的惊人体验，但是在开发过程中需要考虑很多方面。为了发挥功能和用户友好性，WebAR 应该以以下方式工作。
首先，应该定义设备在 3D 空间中的什么地方——其位置和方向。需要执行此步骤才能在真实世界上同步 3D 图像。有时可以将此过程称为六个自由度，这意味着可以跟踪三个位置轴和三个方向轴。其次，需要暴露摄像机流，其视野和摄像机的透视图。虚拟世界和现实世界的同步也需要此功能。第三，要在无缺陷的 Web 版本中运行 AR，应包括场景理解功能，这意味着设备能够找到放置 3D 对象的表面并具有估算环境中的光线的能力。
与 Facebook 和 Snapchat 一样，基于应用程序的 AR 使用了基于云的 CMS，并基于某种触发、链接、标记甚至用户脸部的 AR 体验。触发器向后端系统发出请求，以发送资源和代码来启动 AR 体验。要快速下载并正常工作，AR 文件大小（4mb）有一定限制。 WebAR 还可以通过触发器（QR 代码或链接）激活，但是它使用 Web 优化来下载内容，但是其大小仍然有限。此外，最好使 QR 码图像保持平整，放在非反射材料上并具有特定尺寸。但是，如果移动设备的计算机视觉 AI 可以检测到图像的某些特征点，则代码最终仍将起作用。
目前 WebAR 功能的限制
尽管为智能手机用户提供了更多可能性，但 WebAR 的功能相当有限； AR 的性能在应用程序上更好。显示 AR 图像的网页对内存的限制是提高 WebAR 性能的障碍之一，因为它直接影响动画的质量。
更重要的是，与基于应用程序的 AR 相比，WebAR 的功能也受到更多限制。例如将物体放在墙上或进行真实世界的测量将是有问题的。与基于应用程序的 AR 开发流程相比，在创建 WebAR 体验期间，开发人员无法访问为其构建设备的所有功能。因此它们只能使用基本功能。
互联网的速度是另一个可能阻碍 WebAR 的因素：它必须具有最高的速度，并且必须不间断地工作，因为 WebAR 需要持续连接到互联网。但是显然随着 5G 的到来，这个问题将不再重要。
如果你想体验 WebAR 的高级功能，可以在 Chrome Canary 上试用，这是给 Chrome 开发人员的实验版，可让你了解新技术的未来。例如，你可以测试 Chacmool demo —— 教育性的 AR 体验，以帮助用户探索古老的 Chacmool 雕塑。
WebAR 的市场意义
常规的基于应用程序的 AR 已被广泛使用，并可供所有人使用。诸如 Snapchat 或 Instagram 之类的应用程序具有“masks”，这已成为一种趋势。宜家和乐高也已经成功实施了这项技术。但是所有这些 AR 应用程序都缺少一样东西——自治。因此 WebAR 很有可能像基于应用程序的应用一样流行，甚至替代它。让我们看一下在商业、营销或日常生活中可能的 WebAR 应用。
第一个也是最令人兴奋的 WebAR 应用可能是搜索查询。 谷歌已经宣布了一个计划，这将使 AR 进入网络搜索。例如，当你查找有关鲨鱼的信息时，可以将动物的动画版本放在真实的背景上；或者你可以尝试一双鞋，看看它们在现实中的样子。后一个功能为在线购物开辟了全新的可能，因为如果客户能够在购买之前先通过与产品的 3D 模型进行交互进行尝试，他们将会对购买更有信心。
可以使用 WebAR 的行业：
- 电子商务和广告。 WebAR 可以将电子商务体验提升到另一个层次。就营销而言，它将为广告活动提供一个新平台，因为人们只需扫描 QR 码或点击链接即可得到他们喜欢的更具吸引力和互动性的广告。
- 教育。 WebAR 在教育中的应用可能是一种使学生参与课堂活动，并使整个教育过程更加互动和令人兴奋的好方法。此外它还可以帮助学生在校园内导航。
- 娱乐。将 WebAR 用于娱乐可能是最明显的，因为交互本身确实很有趣。它可以用于游戏甚至电影宣传。Sony Pictures 实际上是使用 WebAR 来宣传《勇敢者的游戏》的，他们通过语音交互提供了真正引人入胜的体验，从而进行激动人心的 3D 冒险。
- 商业。 WebAR 最有趣的实现之一是 3D AR 名片。当你扫描 QR 码时，手机屏幕上会出现一个交互式卡片。你可以从那里浏览用户的社交媒体、电子邮件等。你的 WebAR 名片还可以让你跟踪分析使用 QR 码的人数。
WebAR 的未来
WebAR 将很快成为主流，并且可能会被营销人员更多地使用。关于 WebAR 最好的事情是，它可以用一种非常简单的方法来访问信息。只需要一次 QR 码扫描或一次点击，就可以在周围任何地方集成、创建一个无需搜索即可获得数据的空间。通过交互式地图将视觉方向叠加在真实背景上，你将轻松找到自己的路。或者当你在汽车站时，可以使用手机扫描空旷的道路，来查看公交车是否会如期到达。
根据 Google 的前 UX 工程师 Jordan Santell 的观点，最可能的发展结果是 AR 更好地适应了 Web 格式，这意味着能更好地了解场景，并为共享的 WebAR 体验创建云空间。WebAR 的进一步发展也可以通过头戴式设备的广泛认可而加速，这可以为整个 AR 提供其他层次的体验。这意味着，当人的真实背景发生变化时，当上下文相关的内容出现时，便可以立即访问信息。
但是在现实中，这种情况不太可能发生，因为 Google 的增强现实头戴式设备并未普及，并且还涉及许多问题，例如个人隐私问题、数据安全性和过度消费等。因此必须通过适当的立法，世界必须学习如何明智地使用这项技术，以使它对所有人都有好处。
总结一下
使 AR 进入 web 可能是这项技术未来的最佳选择。智能手机用户不必安装大量应用程序，WebAR 可以使增强现实更容易访问，并且对业务更有利。使用 WebAR 进行产品数字化，将会把客户关系开创一个新纪元，并极大地丰富了品牌的业务战略。也许在不久的将来，能够通过专用 VR 头盔进行交互的 WebAR 仍将在日常生活中得到广泛使用，但出于商业目的，它的积极应用正在发生。
本文首发微信公众号：前端先锋
欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章
欢迎继续阅读本专栏其它高赞文章：
- 深入理解Shadow DOM v1
- 一步步教你用 WebVR 实现虚拟现实游戏
- 13个帮你提高开发效率的现代CSS框架
- 快速上手BootstrapVue
- JavaScript引擎是如何工作的？从调用栈到Promise你需要知道的一切
- WebSocket实战：在 Node 和 React 之间进行实时通信
- 关于 Git 的 20 个面试题
- 深入解析 Node.js 的 console.log
- Node.js 究竟是什么？
- 30分钟用Node.js构建一个API服务器
- Javascript的对象拷贝
- 程序员30岁前月薪达不到30K，该何去何从
- 14个最好的 JavaScript 数据可视化库
- 8 个给前端的顶级 VS Code 扩展插件
- Node.js 多线程完全指南
- 把HTML转成PDF的4个方案及实现
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。