WebAR开发简介

WebAR 开发使企业能够以独特且高度有趣的方式向客户和员工提供信息。 它提供增强现实 (AR) 内容，人们在智能手机上将其视为视觉叠加。 然而，WebAR 可在手机的普通网络浏览器上运行，无需下载任何应用程序。

WebAR 的多种用途包括帮助零售和在线购物者、培训学生和工人、帮助旅行者导航以及为维护人员和其他员工提供实时帮助。 所有这些和其他应用程序都补充了 WebAR 更常见的娱乐用途，例如视频游戏。

与需要时间和精力下载的传统增强现实应用程序相比，WebAR 的用户采用率更高。 WebAR 相对无缝的特性以及网络更广泛的影响反过来又提高了投资回报率，因为更多人可以享受到相同的体验。 此外，WebAR 体验的开发速度更快、成本更低。 而且可以自动更新它们，无需任何用户操作，这与需要用户下载新版本的传统 AR 应用程序不同。

AR 已经受到消费者的欢迎，这为企业利用 WebAR 技术的众多优势铺平了道路。 事实上，许多企业已经在这个快速增长的领域迈出了第一步。

1、WebAR 支持的浏览器和设备

WebAR 的主要优势在于它得到了广泛的支持。 这项技术几乎可以在任何智能手机上运行。 也就是说，哪些功能在哪些浏览器和设备上运行得最好，存在细微的差异。

在浏览器中，WebAR 适用于所有主要软件包，包括 Chrome、Safari、Firefox、Opera、Edge 等。 就设备而言，WebAR 几乎可以在任何最新的硬件上运行，只要它具有互联网接入和摄像头即可。 然而，AR 的某些特定方面在更新、功能更强大的设备上运行得更好。 屏幕尺寸也会影响用户的体验，因为复杂的功能在更大的屏幕上更容易使用。

WebAR 开发的一个值得注意的好处是，相同的体验可以在各种浏览器和设备上运行。 编写一次，随处运行。 这与为你想要支持的每个平台开发自定义移动应用程序形成鲜明对比。 例如，必须为 iPhone 用户和 Android 用户维护不同的应用程序。

大型科技公司目前支持两种更流行的增强现实引擎：谷歌的 ARCore 和苹果的 ARKit。 后者与其他 Apple 产品线密切相关，包括 iPhone、iPad 和 iPod。 相比之下，ARCore通过通用软件开发工具包（SDK）支持多个不同供应商的移动设备。 数十亿人使用的品牌都可以运行 Google 的 ARCore，例如 LG、华为、摩托罗拉和三星。

谷歌、苹果和其他制造商正在大力投资硬件和软件，以使 AR 无处不在。 市场上的大多数手机都支持 WebAR，这是一种基于网络的增强现实方法，比基于移动应用程序的方法更为广泛。 这使得 WebAR 成为一种有吸引力的方式，可以吸引尽可能广泛的受众，这些受众希望将数字创作与常规环境相融合。

2、最流行的 WebAR 框架

框架使 WebAR 开发过程变得更加容易，为开发人员构建应用程序提供了坚实的基础。 有许多框架可供选择，它们的功能和受欢迎程度各不相同。 他们经常使用 JavaScript 语言，大多数网络浏览器都包含该语言。

流行的开源 WebAR 框架包括 AR.js、JSARToolKit 和 Three.ar.js。 最后提到的是广泛使用的 Three.js 框架的库，使开发人员能够构建利用 Google 和 Apple 功能的基于 Web 的增强现实程序。 AR.js 被认为是一个轻量级且简单的框架，它使用 Vuforia 进行标记和图像跟踪。 它可以与 Three.js 或 A-Frame 库一起使用。

另一个重要的 WebAR 框架称为 X3DOM。 该平台使 Web 开发人员能够将增强现实内容直接合并到 HTML 本身的网页中。 这消除了对任何外部插件或库的需要，因为场景现在是页面的一个组成部分。 正如你已经可以包含带有 HTML 标签的段落或图像一样，X3DOM 允许你包含带有 HTML 标签的 3D 元素。

这些开源 WebAR 框架通常都有一个 GitHub 页面，任何人都可以在其中访问源代码。 这些存储库包含有关如何安装和使用框架的文档。 如果在开发过程中，您对框架本身进行任何修改，你也可以将这些修改贡献给项目。

借助 WebAR 框架，你可以启动全新的增强现实项目，并将 AR 内容添加到现有的 Web 应用程序中。 这是使用这些 Web 框架的一个关键优势：它们为你提供强大的 AR 功能以及 Web 脚本的适应性。

3、顶级 WebAR 工具

WebAR 工具与框架的不同之处在于，它不仅具有组装增强现实产品的基本基础设施，而且还具有多个附加功能来支持整个 WebAR 开发过程。 此类工具的示例包括用于跟踪和修改人的面部或身体的功能，或者用于跟踪对象和图像以及环境的其他方面的功能。 这些工具还可以协助完成开发前后的任务，包括分发。

一个典型的例子是 8th Wall，这是一个流行的 WebAR 平台，它驱动了 RPR 制作的一些特殊的增强现实内容。 借助 8th Wall，开发人员可以利用丰富的资源来制作交互式体验，甚至可以满足最复杂的需求。 许多垂直领域的大型企业都使用这个 WebAR 框架，它使企业能够与一流的合作伙伴合作并取得惊人的效果。

8th Wall 的云编辑器包含代码编辑器、调试器和模板等开发功能。 该产品还支持协作和发布。 使用该框架进行开发时，可以轻松管理代码和资产，同时查看你的创作进展。 此外，该工具与 Three.js、A-Frame 和 PlayCanvas 等通用 3D 框架具有良好的互操作性。

其他 WebAR 工具包括专门专注于增强人脸的 Banuba Face AR，以及 Blippar 和 Zappar。 Blippar 提供开发人员工具包以及自己的开发服务。 与 8th Wall 一样，它可以与 A-Frame 和 PlayCanvas 等 3D 框架进行互操作。 Zappar 还提供了与 8th Wall 类似的工具集，具有面部和图像跟踪以及 WebAR 发布等功能。

开发人员现在可以使用广泛的 WebAR 工具包来简化生产。 你应该使用哪个框架或工具？ 这取决于项目的复杂性和开发人员的技能。

4、创造创意资产和环境

开发 WebAR 内容不仅涉及代码，还涉及 3D 内容本身。 因此，有许多技术可以帮助制作创意资产和环境，从而创造引人入胜的体验。

制作增强现实内容涉及向底层场景添加 3D 图形。 从根本上来说，Web 浏览器通过使用称为 WebGL 的 Web 3D 标准来实现此目的。 然而，对于开发人员来说，有更高级别的库可用。 我们已经讨论了其中一些库，因为它们受到 8th Wall 等 WebAR 工具的支持。 例如，Three.js、A-Frame 和 PlayCanvas 都可以与 8th Wall 配合使用。

使用 3D 库增加了另一层技术，同时减少了开发人员的工作量。 如果没有这些库，开发人员将被迫创建更复杂的低级代码。

• Three.js 和 A-Frame

Three.js 包含添加和修改对象的工具，从而可以使用 JavaScript 生成交互式场景。 A-Frame 通过添加基于 HTML 的结构来补充 Three.js，使生成 3D 内容变得更加简单。

A-Frame 的另一个出色功能是视觉检查器，它允许开发人员查看场景中的任何元素来分析数据。 A-Frame 配备了各种设施：灯光和阴影、可以放置在场景中的音频以及几何形状和材料。 它甚至提供高级功能，例如粒子和其他基于物理的系统。

• PlayCanvas

PlayCanvas 还使用 WebGL 来生成 3D 图形。 然而，该平台将自己呈现为网页游戏引擎。 它包括一个类似于著名游戏引擎Unity的编辑器。 团队参与者可以在基于浏览器的编辑器中工作时互相聊天。 该技术可实现令人印象深刻的视觉效果和高速交互性。

• WebGL

WebGL 代表“网络图形库”，它取代了早期的几次尝试，使丰富的体验在互联网上变得可行。 它随后成为网络浏览器的黄金标准，使其成为促进 WebAR 资产开发的理想选择。

WebGL 对较低级别的 OpenGL 进行了扩展，可生成交互式 3D 图形。 通过JavaScript，它能够连接用于开发增强现实场景的框架和工具。