第一个版本发布于2019年，当时定位为开源智能音箱解决方案，我作为应用框架的核心维护者，为开发者提供了内置的语音应用框架。

随着时间的推移，智能音箱逐渐淡出了人们的关注，似乎语音助手领域的场景和 Web 生态并不是那么契合，带屏幕的音箱也将解决方案带回了 AOSP（）生态。

四年过去了，我又回到了起点。我仍然希望找到一些对 Web 开发者来说有趣的东西，能够支撑工程师的下一个成长曲线。于是今天的 JSAR - 诞生了。

几年的时间，它从原来的智能音箱操作系统（基于）升级为后者，是一款面向空间计算（AR/MR/XR）场景的操作系统，技术基础也从原来变成了AOSP，而JSAR则是在这个系统上构建的面向Web开发者的应用框架。可以说JSAR是前者的延续，从原来开发一个语音技能应用升级为开发空间小程序。

前不久，我被邀请去上海参加一个小型的分享会：

2023上海研讨会

本文将结合本次研讨会分享的内容，制作成文字版本，希望能让读者了解JSAR的全貌和背后的思考逻辑。

空间与空间计算

作为背景补充，我们先来了解一下什么是空间。

在增强现实（AR）场景中，空间是指现实世界中的一块区域，可以是平面，也可以是三维物体。用户使用空间小程序可以获取空间的信息，例如空间的大小、空间的位置、空间的旋转角度等。在一般的AR应用开发中，我们使用场景来承载空间。

从技术文档来看

如上图，从技术文档来看，其描述了一种空间上的浏览器设计。可以看到，以往浏览器中的标签现在变成了围绕在用户周围的一系列虚拟屏幕（网页），这样用户只需要转动头部就可以切换要浏览的网页或应用，而功能菜单则位于虚拟屏幕的上方和下方，可以通过手柄或手势进行交互。

From-系统真机记录

系统也采用了同样的设计，用户可以在系统中打开不同的窗口，每个窗口对应一个网页或者应用，用户通过手势或者射线与窗口、功能菜单进行交互。

从技术文档来看

用户空间可以如上图所示进行描述：用户位于空间中央，被一个圆柱面包围，用户可以使用表面的一部分作为虚拟屏幕来显示网页或者应用程序，用户通过转动头部来切换要使用的应用程序。

太空小程序

读者所熟悉的小程序一般都是微信小程序，通过开发小程序，开发者可以在用户无需下载微信的情况下使用一些微信中现成的功能，比如订外卖、订酒店、网约车等。

那么小程序到底是什么呢？我们先来看一段演示视频：

/web-//-jsar-demo.mp4 (视频在此)

您可以看到，除了上一节中看到的屏幕外，空间中还有一些可交互的 3D 对象。这是空间小程序。

因此，空间小程序在原有的空间中增加了一些屏幕外可交互的3D物体，每个可交互物体独立运行。这就要求空间小程序具备以下功能：

从空间小程序的技术实现来看，不一定要选择Web，也可以用Lua或者其他脚本语言来实现。这次除了自己对Web的热爱，还需要一些特殊的技术优势。

自1993年HTML 1.0发布以来，Web技术从最初的文档共享到信息站点再到现在的Web应用，我们可以总结出人们愿意使用的Web技术的特点就是安全性和便捷性，两者相辅相成、相互成就。

因此JSAR希望设计一个基于安全性和便捷性的空间应用框架，让开发者和用户除了可以制作独立的空间应用之外，还可以制作一些简单、有趣、便捷的“空间小程序”，并可以方便地进行共享（安全当然是前提）和传播。

新三剑客

在空间计算时代，JSAR为Web提供了新的解决方案，即新的三件套——XSML、SCSS和。

扩展语义语言

它对应的是HTML，全称是可扩展标记语言。

XSML 代码示例

上面是一个 XSML 代码示例，熟悉 HTML 的开发者应该很熟悉，它和现在的 HTML 几乎一模一样，唯一不同的是一些标签，比如：

以下是 JSAR 添加的一些新标签：

上图中的狮子是通过XSML描述生成的：

有关完整的 XSML 描述，请访问：

南加州大学

它对应的是CSS，全称是 。SCSS的语法完全继承自CSS，使用方式也一样：

通过选择器选择相应元素

设置样式

例如：

@material red { diffuse-color: #ff2200;}
#box { rotation: 0 0 180; position: 0 1 0; material: "red";}

可以看到设置的不再是原来的CSS样式，而是针对3D空间设计的旋转、位置和材质，SCSS可以轻松自然地布局空间样式，比脚本方式更加直观。

有关 SCSS 的完整描述，请访问：

在 Deno、Bun 等服务端运行时默认支持的情况下，JSAR 也被选为原生支持语言，运行时内置编译器，在解释时会预处理代码并在 v8 中执行。

入选理由主要有以下几点：

通过 JSAR 的脚本系统，您可以使用 .js API 和 Web API。

.js 是一个开源的 3D 渲染引擎，支持多种后端（、、服务器和），提供了一系列游戏场景 API，可用于开发 3D 游戏和应用。

例如：

const scene = spatialDocument.scene as BABYLON.Scene;

JSAR提供了一个全局对象，类似于浏览器中的对象，通过该对象可以访问当前的3D场景。

JSAR 建立在 .js 框架之上，因此您可以直接访问 .js 的其他功能。您可以在此处获取 .js 的支持状态。

此外，JSAR 还支持一些 Web API，未来还会继续支持更多的 Web API。以下是我们目前认为可能在空间计算设备上继续发挥作用的 Web API：

您可以访问我们的 Web API 的支持页面。

技术细节

本节介绍实现 JSAR 所使用的一些技术。

一体化

首先我们需要回答一个问题——为什么需要集成？

无论是Pro还是，开发者可以选择的3D应用开发框架目前几乎是唯一的选择。比如对于桌面应用来说，它就是一个应用程序。那么要实现上面提到的空间小程序可以放在一个应用程序的空间里，那么就需要和它一起实现才能完成这个工作。

因此这也意味着将来开发者可以使用JSAR集成到任何应用程序中并发布到其他平台。

让我们看一下 JSAR 是如何集成到运行时的。

一体化

上图中，左边是相关部分，右边是应用相关部分，JSAR 插件包连接了两端，应用程序通过添加插件来获得 JSAR 的运行时能力，其大致工作流程如下：

应用程序通过C#调用JSAR插件接口

插件执行 Node.js API 启动 Node.js 示例（非主线程）

请求小程序URL在Node.js中支持并解析XSML、SCSS和

使用解析结果创建一个.js文件并获取场景数据

通过C++中的通信通道将场景数据发送到C#

通过C#提供的3D对象（）动态创建API将.js场景创建进场景中

运行过程中，相关数据同步到

通过上面的过程，JSAR 就可以完成在空间小程序中渲染代码的效果了，而且由于最终生成的是物体，所以也可以很方便地通过交互来实现对物体的移动、旋转和缩放。

程序隔离

上图是JSAR的架构图，通过这张图我们可以很容易的看出它是如何保证程序隔离性的：

基于以上设计，可以保证所有小程序都在同一个Node.js线程中，实际渲染是隔离的，互相不影响。

中间协议的设计

JSAR 中很重要的一个部分就是 Node.js 端的中间数据的设计，下图是我们在定义数据层次时的入口点示意图。

可以看出，里面包含了所有场景的三维坐标信息（包括基于坐标的其他数据）、着色器程序和变换矩阵。所以要将物体渲染到场景中，其实可以通过实现，而且这种方式更加通用，也更加规范。不过 JSAR 之所以坚持从场景管理入手，是因为我们希望做的不仅仅是输出渲染，而是能更好地与框架融合，让用户真正地与场景中的空间小程序中的物体进行交互。这就需要我们把物体描述信息抽取出来做同步，而不是更底层的顶点数据和着色器。

为了解决场景数据不标准的问题，我们也希望将中间部分的数据格式开放为新的Web标准草案。

多端合一

JSAR希望为开发者提供一致的开发体验，因此多端性能一致性也是我们期待的重要特性。

一、JSAR支持的渲染端包括：

为了和，通过保护。

至于后两者，本质上都是 Web 平台，一开始有两个选择，一个是通过 .js，一个是通过编译，最后选择了后者，理由如下：

得益于在多端渲染方面的良好表现，JSAR取得了以下成果：

JSAR的多端一致性

终于

我们希望帮助Node.js社区完成端到端的开发格局，让我们能够用这门熟悉的语言回到熟悉的“端”开发。

上面这句话是对应用框架的期许，现在依然如此，希望 JSAR 能在空间计算时代给迷茫的前端开发者带来更多可能！关于 JSAR 的开源，它最终会以开源的方式运作，但它的首要任务还是支撑空间应用开发者的需求，壮大社区。当社区达到一定规模时，JSAR 一定会以开源的方式运作。

最后，对 JSAR 感兴趣的读者可以参与开发者支持计划，点击阅读原文即可申请一个 AR 原型，启动你的第一个空间小程序。

关于作者

刘亚忠，前 Node.js 开发者，曾就职于阿里巴巴、淘宝技术部门，负责多个开源项目开发。一直致力于 Web 等领域的跨应用，例如 Node.js 的 IoT 设备运行时、Node.js 和跨语言调用库 Boa 等。目前负责空间小程序框架 JSAR 的设计、开发和推广。

活动推荐

年终盛会QCon全球软件开发大会上海将于12月28-29日在上海万豪酒店举办，大会规划LLM应用、AI、Code、业务安全、金融科技、ICT软件集成开发环境技术、LLM+质量与效率、高性能网关等方向。

本次会议主题为“扬帆起航·AIGC软件工程转型”，会议议题正在征集中，点击“阅读原文”查看详情。现在购票可享受3折优惠，优惠价2040元。购票咨询请联系票务经理（微信及手机号）。