在2019年伦敦Fullstack大会上,自由软件工程师 Doug Sillars 通过演示如何构建一个虚拟艺术画廊讨论了使用 JavaScript 实现虚拟和增强现实的现状。
无论是虚拟现实(让用户沉浸在完全 3D 生成的世界中)还是增强现实(在现实世界和数字对象之间提供深度集成),它们都是相对较新的技术,目前正在通过 WebXR API 集成到 Web 中。WebXR 中的 X 是指未来可能出现的任何类型的沉浸式技术。
WebXR API 仍在开发当中,只提供有限的浏览器支持和文档。WebXR GitHub代码库包含了 WebXR 核心概念介绍,方便入门 WebXR。
即使没有 WebXR API,仍然可以与 AR/VR 设备交互,并创建简单的跨平台应用程序。像A-Frame这样的库为应用程序开发提供了一个简化的接口,网上可以找到很多有趣的例子和实现。
A-Frame 库基于three.js,three.js 是一个流行的 JavaScript 3D 渲染库。A-Frame 提供了一个简单的类似 HTML 的语法,易于掌握,开发人员可以用最少的 JavaScript 知识创建 VR 和 AR 应用程序。
在使用 A-Frame 时,开发人员可以使用类似 HTML 的标记来描述场景,然后 A-Frame 将这些标记转换为 WebGL 视图。为了将 3D 对象放置在真实空间(AR)中,开发人员目前需要使用特殊物理标签,这些标签可以在A-Frame网站上生成。有了这些标签,A-Frame 就会知道应该在哪里以及放置哪些 3D 对象。
要创建一个简单的 VR 场景只需要一些标签:
另一个值得一提的库是React-360,它允许开发人员使用与 React 类似的语法创建 AR/VR 用户界面。
最初,AR/VR 应用程序需要使用昂贵的专用设备,这限制了它的应用范围。如今,开发者可以使用智能手机来实现类似的体验。虽然在智能手机上使用 AR/VR 应用程序是可能的,但仍然需要使用一些特殊的眼镜,让用户有更强烈的浸入式体验。谷歌首先推出这样的眼镜,叫Cardboard,不过现在有许多可供选择的解决方案。
Doug Sillars 的完整演讲视频“在浏览器中构建艺术画廊”可以在 FullStack 网站上找到(需要免费注册)。
A-Frame 是基于 MIT 许可发布的,它的源代码可以通过A-Frame Github代码库获得。
原文链接:
Building AR/VR Applications in the Browser
评论