Mozilla Hacks

真实虚拟：使用 Web 技术将真实事物连接到虚拟现实

头像照片 作者：Fabien Benetou，Philippe Coval

发布于 2019 年 3 月 7 日 分类于 特色文章

这是我们在欧洲最大的自由和开源软件活动 FOSDEM 上幸运相遇的故事。我们两位开发者专注于不同的领域，但看到了一个机会，可以通过构建一个概念验证来继续我们的技术交流。Fabien Benetou 是一位专注于虚拟现实和增强现实的开发者。Phillipe Coval 从事物联网工作。创建原型为我们两人提供了一种探索我们在会议上分享的一些想法的方式。

WebXR 遇见 Web of Things

今天，我们将报告我们在 FOSDEM 幸运相遇后半天内构建的概念验证。我们的原型应用 3D 可视化来为物联网接口提供动力。它展示了开放、易访问的 Web 技术如何能够将来自不同领域的软件结合起来，创造出引人入胜的新型交互体验。

我们的概念验证（如下面的视频所示）展示了如何将连接到互联网的传感器将数据从现实世界带到虚拟世界。光传感器读取纸板卡片的颜色并更改虚拟现实中实体的颜色。

第二个演示展示了虚拟世界中的动作如何影响现实世界。在下一个视频中，我们打开与虚拟现实对应物颜色匹配的 LED。

我们将向您展示如何自己进行类似的实验

  • 构建一个从 IoT 到 WoT 的演示，展示将事物连接到 Web 的价值。
  • 连接你的第一件东西并将其上线。
  • 在 Web of Things 和 WebXR 之间建立连接。一旦你的事物连接起来，你就可以显示它，并在 VR 和 AR 中与它交互。

以下是更多背景信息：Fabien Benetou 组织了 FOSDEM 上的 JavaScript devroom 轨道，并介绍了 使用 JavaScript 的高端增强现实。Philippe Coval 来自 三星开源小组 与他的同事 Ziran Sun 一起在同一轨道上介绍了 将 JavaScript 引入物联网。

Philippe 演示了一个远程“盒装智能家居”，使用实时网络摄像头流。这是他在前一天在 Mozilla devroom 中分享的演示，在一个与 Mozilla 技术演讲者 Dipesh Monga 联合进行的 演示文稿 中。

该演示展示了各种传感器的交互，包括来自 OpenSenseMap 项目的远程传感器，这是一个社区网站，允许贡献者上传实时传感器数据。

FOSDEM 的后续行动

在法国西北部布列塔尼地区的雷恩市，Ambassad’Air 项目 正在使用超廉价微控制器上的 luftdaten 软件进行社区空气质量跟踪。Fabien 已经计划在下周访问雷恩（呼吸新鲜空气并享受当地的烘焙美食，例如美味的 kouign amann）。

因此，我们决定再次在 雷恩 会面，并让当地社区参与进来。我们提议举办一个使用 FLOSS 连接“Web of Things”和“XR”的公开研讨会。非常感谢 Gulliver，当地 GNU/Linux 用户组，他们为我们提供了举办 最后一刻的黑客马拉松 的机会。也感谢雷恩的参与者的好奇心和宝贵意见。

在接下来的部分中，我们将概述我们项目中融合的不同概念。

从 IoT 到 Web of Things

物联网的概念在其获得名称之前就已存在。一些基本的物联网概念与当今 Web 的工作方式有很多共同之处。顾名思义，Web of Things 提供了一种有效的方式将任何物理对象连接到万维网。

让我们从一个灯泡💡开始。通常，我们使用物理开关来打开或关闭灯泡。现在想象一下，如果你的灯泡💡可以拥有自己的网页。

如果你的灯泡或任何智能设备对 Web 友好，它就可以通过以下 URL 访问：https://mylamp.example.local。灯泡供应商可以在设备中实现一个 Web 服务器，以及一个供用户使用的欢迎页面。制造商可以为机器可读的状态提供另一个端点，该端点指示“开”或“关”。更好的是，可以使用 HTTP GET 查询读取该端点，或使用带有“开”或“关”的 HTTP POST 操作设置该端点。

所有这些仅仅是一个管理布尔值的 API，可以将移动浏览器用作灯泡的遥控器。

虽然此模型有效，但它并不是最佳方法。标准化的 API 应遵循 REST 原则并使用通用语义来 描述事物 (TD)。W3C 正在推动标准化——一种流畅的互操作 Web 语言，可以由任何项目实现，例如 Mozilla 的 Project Things。

新手可以从虚拟适配器开始，并使用模拟事物进行操作。这些事物出现在仪表板上，但实际上并不存在。可以使用任何语言的 Web 事物库来实现执行器或传感器。有用的提示：在使用真实硬件和深入研究硬件数据手册之前，在模拟器上练习要简单得多。

对于好奇的读者，请查看 Philippe 在 GitHub 上的 webthings-iotjs 指南 中的 IoT.js 代码，并探索已发布到 NPM 作为 color-sensor-js 的颜色传感器代码。

连接你的第一件东西

如何创建一个对 Web 友好的智能家居？你可以从设置一个基本的本地物联网网络开始。以下是步骤：

  1. 你需要一台带有网络接口的计算机用作网关。
  2. 将设备添加到你的网络并定义一个协议以将其连接到中央网关。
  3. 构建一个用户界面，允许用户从网关控制所有连接的设备。
  4. 稍后，你还可以开发自定义 Web 应用程序，这些应用程序也可以连接到网关。

为了避免重复造轮子，请查看现有的免费软件。这就是 Mozilla 的 Things Gateway 的用武之地。你无需网络工程或电子专业知识即可入门。

你可以依靠低成本、低功耗的单板计算机（例如 Raspberry Pi）来安装 Mozilla 提供的操作系统镜像。然后，你可以创建虚拟事物（如灯泡），或将真实硬件（如 传感器）连接到网关本身。你将能够通过“事物云”提供的隧道服务从 Web 控制你的设备。你的数据在你的本地网络上可访问，并且永远不会发送到云中的第三方。

为了使流程高效且安全，网关通过生成令牌来处理身份验证。网关还可以生成多种语言（包括 JavaScript）中的直接代码片段，这些片段可用于 其他应用程序

你可以构建在现有代码之上，这些代码在复制/粘贴到你的应用程序中时应该可以正常工作。开发人员可以专注于探索该技术的全新应用程序和用例。

下一步，我们建议测试最简单的示例：列出连接到网关的所有事物。在我们的示例中，我们使用了一个灯泡💡，它由多个属性组成。确保网关 Web 界面上显示的事物与现实世界中的事物匹配。使用提供的代码片段与浏览器的控制台一起检查行为是否与设备匹配。

了解你的 Things Gateway

一旦运行起来，乐趣就开始了。由于你可以使用代码访问网关，因此你可以：

  • 列出所有事物，包括模式，以了解其功能（属性、值、可用操作）。
  • 读取属性值（例如，传感器的当前温度）。
  • 更改属性（例如，控制执行器或设置灯泡颜色）。
  • 获取二维平面图上事物的坐标。
  • 以及更多！

使用 curl 命令，你可以查询整个树以识别网关注册的所有事物


gateway=”https://sosg.mozilla-iot.org<
token=”B4DC0DE..."

curl \
-H "Authorization: Bearer $token" \
-H 'Accept: application/json' \
https://sosg.mozilla-iot.org/things \
| jq -M .

结果是所有事物的 JSON 结构。每个事物都有一个不同的端点，例如

{
"name": "ColorSensor",
...
"properties": { "color": {
"type": "string",
"@type": "ColorProperty", "readOnly": true,    "links": [ {...
"href": "/things/http---localhost-58888-/properties/color"
...

用户设备是私有的，不会公开到万维网上，因此其他人无法访问或控制你的灯泡。以下是使这成为可能的 REST 架构的快速概述

Static slide with code describing the RESTful architecture of the gateway

从 WoT 到 WebXR

介绍用于 WebVR 的 A-Frame

一旦我们能够使用单个 HTTP GET 请求以编程方式获取属性值，我们就可以使用这些值来更新视觉场景，例如更改立方体的几何形状或颜色。使用像 A-Frame 这样的框架可以更容易地做到这一点，它允许你使用 HTML 描述简单的 3D 场景。

例如，要定义 A-Frame 中的立方体，我们使用<a-box></a-box>标签。然后，我们通过添加 color 属性来更改其颜色。

<a-box color="#00ff00">

a screenshot from A-Frame showing pink parallelogram, green cube, and yellow cylinder

声明式代码背后的美妙之处在于，这些 3D 对象或实体被清晰地描述，但它们的形状和行为可以通过组件轻松扩展。A-Frame 拥有一个活跃的贡献者社区。这些库是开源的，并且构建在 three.js 之上，这是 Web 上最流行的 3D 框架之一。因此，从简单形状开始的场景可以发展成美丽、复杂的场景。

这种灵活性允许开发人员在他们感到舒适的堆栈级别工作，从 HTML 到使用 JavaScript 编写组件，再到编写复杂的 3D 着色器。通过保持在 A-Frame 核心的范围内，你可能甚至永远不必编写 JavaScript。如果你想编写 JavaScript，则有文档可用于执行诸如 操作底层的 three.js 对象 等操作。

A-Frame 本身是框架不可知的。如果你是一名 React 开发人员，则可以依靠 React。更喜欢 Vue.js？没问题。纯 HTML 和 JS 是你的首选？这些都可以。想要在数据可视化中使用 VR？你可以让 D3 处理数据绑定。

使用像 A-Frame 这样的面向 WebXR 的框架意味着你的<a-box>将在所有能够访问支持 WebXR 的浏览器的 VR 和 AR 设备上工作，从你口袋里的智能手机到高端 VR 和专业 AR 头显。

将 Web of Things 连接到虚拟现实

在我们的下一步中，我们将 3D 对象上的颜色值更改为事物的实际值，该值源自其物理颜色传感器。瞧！这将现实世界连接到虚拟世界。以下是我们编写的可以应用于任何 A-Frame 实体的 A-Frame 组件。

var token = 'Bearer SOME_CODE_FOR_AUTH'

// The token is used to manage access, granted only to selected users

var baseURL = 'https://sosg.mozilla-iot.org/'
var debug = false // used to display content in the console

AFRAME.registerComponent('iot-periodic-read-values', {

// Registering an A-Frame component later used in VR/AR entities
init: function () {
this.tick = AFRAME.utils.throttleTick(this.tick, 500, this);

// check for new value every 500ms
},
tick: function(t, dt){
fetch(baseURL + 'things/http---localhost-58888-/properties/color', {
headers: {
Accept: 'application/json',
Authorization: token
}
}).then(res => {
return res.json();
}).then(property => {
this.el.setAttribute("color", property.color);

// the request went through
// update the color of the VR/AR entity
});
}
})

https://youtu.be/sPaSd1eRTGE

上面的短视频展示了现实世界中的色卡如何导致虚拟显示器中的颜色发生变化。以下是我们代码中所做工作的简要描述。

  1. 我们生成一个安全令牌（JWT）以访问我们的 Things 网关。
  2. 接下来，我们注册一个可以在 VR 或 AR 中的 A-Frame 中使用的组件，用于更改 3D 实体的显示。
  3. 然后，我们获取 Thing 的属性值并在当前实体上显示它。

与使用 HTTP GET 请求获取信息的方式相同，我们可以使用 HTTP PUT 请求发送命令。我们使用 A-Frame 的 <a-cursor> 来允许在 VR 中进行交互。当我们看向一个实体（例如另一个立方体）时，光标可以发送一个事件。当捕获该事件时，就会向 Things 网关发出一个命令。在我们的示例中，当我们将目标对准绿色球体（或通过 VR 头显“观看”）时，我们会切换绿色 LED、红色球体（红色 LED）和蓝色球体（蓝色 LED）。

https://youtu.be/-kSUS4yeJBk

从虚拟现实到增强现实

我们演示的目的是双重的：将现实世界的数据引入虚拟世界，并从虚拟世界对现实世界进行操作。我们能够在 VR 中显示实时传感器数据，例如温度和光强度。此外，我们还能够从 VR 环境中打开和关闭 LED。这验证了我们的概念证明。

遗憾的是，一天很快结束，我们没有足够的时间尝试在使用 Magic Leap 设备的增强现实 (AR) 中进行概念验证。幸运的是，一天的结束并没有结束我们的项目。Fabien 能够连接到 Philippe 的演示网关，该网关注册在mozilla-iot.org子域下，并像在本地网络上一样访问它，使用 Mozilla 的远程访问功能。

项目取得了成功！我们将现实世界连接到 AR 以及 VR。

增强现实的实现证明非常简单。除了删除 <a-sky&gt 以使其不覆盖我们的视野外，我们无需更改代码。我们使用 exokit（一种专门针对空间设备的新开源浏览器，如 Fabien 在 FOSDEM 演讲中所述）在 MagicLeap ML1 上打开了我们现有的网页。它完美地运行了！

正如您在视频中看到的，我们简要地复制了网关的 Web 界面。我们有一些后续步骤的想法。通过使这些球体具有交互性，我们可以激活每个 Thing 或获取有关它们的更多信息。想象一下，使用网关平面图将 Thing 的空间信息与公寓的物理布局相匹配。有一些 A-Frame 组件可以轻松地生成简化的建筑部件，如墙壁和门。

https://youtu.be/5XaD6eS6OUE#webthing-ar

您无需 Magic Leap 设备即可使用万维网体验 AR。运行 iPhone 上的 Mozilla XR 查看器 或使用 Chromium 的实验版本 的 Android 智能手机将与传统的 RGB 摄像头配合使用。

从虚拟到沉浸式网络

从 VR/AR 到 XR 的过渡需要两个步骤。第一步是技术方面，这正是依赖 A-Frame 的地方。尽管 Web 上的 VR 和 AR 规范仍在 W3C 的“沉浸式网络”标准化流程 中进行完善，但我们今天可以针对 XR 设备。

通过使用高级框架，我们可以在规范仍在完善的过程中开始开发，因为规范包含由浏览器供应商和整个社区维护的 polyfill。对于所有 VR 和 AR 头显使用一个代码库的前景是 WebXR 最令人兴奋的方面之一。使用 A-Frame，我们可以从今天开始，为明天做好准备。

第二步涉及您，作为读者和用户。您希望看到什么？您是否有创建 VR 和 AR 交互式空间内容的用例想法？

结论

雷恩的编程马拉松非常精彩。我们能够轻松地从现实世界获取实时数据并在虚拟世界中与之交互。这为许多可能性打开了大门：从我们简单的原型到挑战我们对现实感知的艺术项目。我们还预见到一些务实的用例，例如在充斥着传感器和现代仪器的医院和实验室中（IIoT 或工业物联网）。

本次研讨会以及由此产生的视频和代码是简单的起点。如果您开始着手类似的项目，请务必与我们联系（@utopiah 和 @rzr@social.samsunginter.net/@RzrFreeFr）。我们将尽力提供帮助！

此外，我们还在开发一个 从 Web 应用到 A-Frame 的项目。想参与测试或代码审查吗？欢迎您 帮助设计或提出您自己的想法。

您将为虚拟世界带来哪些 Thing？我们迫不及待地想收到您的来信。

资源

关于 Fabien Benetou

Fabien Benetou 的更多文章……

关于 Philippe Coval

Philippe Coval 的更多文章……