2024 前端技术规划该包含什么？
欢迎大家在 2024 年的前端技术规划中包含我的新坑 —— 空间小程序（JSAR）。
2023年，由 JSAR 开发者渚薰老师在 FEDAY 和 D2 都分享过空间小程序的使用感受和未来畅想，他提出了 2D x 3D = HTML6 的想法，同时这也是 JSAR 的愿景，我们希望在 2024 随着 VisionPro 的发售，能诞生为空间而生的 Web “浏览器”。
为了方便大家快速阅读，这次采用问答方式，大家可以快速查看自己感兴趣的问题以及对应的解答，也欢迎评论区提出你的问题，我有时间都会更新并回复。
首先，要回答一个问题，要玩空间小程序，是不是必须得有 XR 设备呢？
不需要，但有更好。在渚薰老师的建议下，我已经将 JSAR 所有应用层的 Web & DOM API 定义抽象为 JSAR-DOM 并开源：GitHub - M-CreativeLab/jsar-dom: The 3D-first designed DOM implementation for XR applications，它可以直接运行在浏览器中，这意味着只要有浏览器就可以开发 JSAR 小程序。
一句话介绍空间小程序？
一个跨平台、跨语言、跨运行时、跨（手机、Pad、电脑、VR/MR 头显以及 AR 眼镜等）设备的数字产品的应用开发框架，API 基于并兼容 DOM & Web 标准而设计。
空间小程序和 Unity、UnrealEngine 这些游戏引擎有什么区别？
理论上，JSAR 可以将应用潜入到任何 3D 引擎中，包括 Unity、UnrealEngine、Godot 等，对于开发对象来说，游戏引擎并不限制你开发的对象，但最终打包的是一个或多个场景，而对于 JSAR 应用来说，它只定义了单个数字物体（产品）的外观和交互，它并不定义场景信息。
这也是为什么 JSAR 应用可以无缝运行在任何设备端，因为它就像我们日常的物体一样，可以放到任何地方，在不同的场景下发挥不同的作用，或者跨场景使用，比如每天你会带着电脑穿梭于工位和家之间。
怎么进行小程序开发？
基于 JSAR-DOM 我开发了对应的 VSCode 拓展，可以边写边看，同时支持了简单的元素查看器。同时该拓展已开源：GitHub - M-CreativeLab/jsar-devtools: The DevTools for JSAR（大家暂时需要自行构建 vsix 包）
上图是一张安装了 JSAR DevTools 的截图，其中中间红色部分就是 3D 场景视图，右边的就是 XSML 代码，“蓝色” 方框是元素层级视图，类似于 Chrome DevTools 的元素（Elements），而“绿色”部分则是选中某一个 Element 的具体信息。
JSAR-DOM 内置了一个 Chrome DevTools Protocol 的 Server 实现，因此上面说的这些都是基于 CDP 协议实现，如果你希望集成在其他 CDP 客户端调试也随时可以，唯一不足的就是目前 Server 端实现的功能有限。
开发空间小程序一定要懂 3D 吗？
不需要，空间小程序的范围很广，可以开发一个物体，比如 3D 魔方、3D 宠物等，但你也可以使用 JSAR 写纯 GUI 的小程序，不同的是你现在可以在空间中布局你的 UI。
开发者可以像上图一样，用熟悉的 HTML 标签开发一个或多个空间中的面板（但是在同一个空间文档中），这完全不需要了解什么 WebGL、Mesh、Material 等。
JSAR 是如何运行在 Web 浏览器（包括手机）的？
JSAR-DOM 基于 jsdom 项目进行了重写和改进，同时支持了浏览器环境和 Node.js 环境的运行，在不同的环境使用不同的底层渲染实现，在浏览器通过 Babylon.js 进行渲染。
可在线访问 JSAR-DOM on Babylon.js 在 URL 的 query 添加 XSML 地址（后面会有问题介绍）
JSAR 是如何运行在 XR 设备的？
JSAR 有两种方式运行，一种是在支持 WebXR 的设备，通过 Web 浏览器使用，而另一种是通过 JSAR 灵活的架构，将 JSAR-DOM 的渲染后端集成在 Unity、UnrealEngine 或者 Apple Realitykit 中实现，比如在 Rokid 的空间计算套装中，我自己就实现了 Unity 的 JSAR 应用加载器。
JSAR 的设计理念是什么
正如 JSAR-DOM 的 README 中写的那样：
Web-standards APIs notably including WHATWG DOM, CSSOM, WebXR and XSML.ECMAScript Modules with TypeScript, WebAssembly and non-script assets supports.No Build At All to get started for application developers.
支持 Web API 标准，ESM 和应用0构建部署是 JSAR 一以贯之的三个标准。
什么是 XSML
每次分享我都会说一遍，XSML 就是 HTML 的空间计算版本，也是 JSAR 小程序的入口文件，用它来定义空间中的初始内容。
<xsml> <head> <title>Example</title> <script type="module"> console.log('hello world', new URL('https://example.com')); </script> </head> <space> </space></xsml>上面的文档就是一个空文档，然后在 console 中打印了 Hello World。
XSML 和 X3D 的区别是什么？
X3D 算是 JSAR 的前辈了，不过主要有两点不同：JSAR 兼容 Web API 以及面向物体开发，X3D 只是基于 XML，以及面向场景。
如何用 XSML 导入3D模型？
<xsml> <head> <title>External Mesh Example(Glb)</title> <link id="my" rel="mesh" href="model/rokid-jungle.glb" /> <style> space { rotation: 0 180 0; } </style> </head> <space> <mesh ref="my" /> </space></xsml>通过 link 加载资源，通过 mesh 实例化即可。
XSML 除了导入模型还能干啥？
如上图，XSML 中自定义了很多3D基础几何体，右边的小狮子便是通过这些几何体拼装的，就和我们写页面一样，而左侧是最终渲染时的 Spatial DOM 树。
什么是 Spatial CSS？
和 XSML 的提出一样，Spatial CSS 用来描述空间样式，通过它，你可以定义 3D 物体的位置、旋转、缩放等、也可以定义材质，同时最近我在做的是 3D 的布局，即将 flexbox 引入 depth 轴，用于 3D 空间中的物体布局。
Spatial CSS 目前支持了哪些属性呢？
目前为止，支持了共 38 个空间样式属性：https://github.com/M-CreativeLab/jsar-dom/tree/main/src/living/cssom/spatial-properties。
Spatial CSS 和 Unity 中的布局或样式的区别是什么？它除了亲和 Web 开发者之外，真的有价值吗？
可以先从 2D GUI 的角度来说，CSS 为什么会有一席之地呢？我觉得主要亮点：1个是简化的布局方式，如果开发过 Android、iOS 或者 Unity 的 2D 布局，那么一定会不适应，因为这些平台为了高度可定制，让布局框架变得十分灵活，与此同时就变得愈加复杂，这就让 CSS 的布局变得更容易让一部分人接受，第二是在 CSS 中内置了大量的预设样式，比如圆角、文本阴影、边框等，而在 Unity 的 GUI 系统中，这些都需要开发者自己写 Script 和 Shader，异常麻烦。
其实可以看到 CSS 之所以受欢迎，就是因为简化和能力预设，这使得开发者可以快速完成应用的开发。
这是最近完成的一个特性，网格系统的内置材质（Material），对于开发者来说只需要通过 material-type 设置为 grid 即可，同时也可以通过 material-grid-* 下面的诸多参数来配置网格的具体样式，这使得要实现一个网格容器，变得十分简单。
同样，通过引入 3D 布局系统，也可以大量的简化在空间中通过一个个物体设置 Position 的繁琐，同时对于要实现一个轨道系统，像渚薰老师提出的这种方法就可完成：
目前 JSAR 的 TypeScript/JavaScript 支持哪些能力
ESM（后面几个问题细说）、DOM API、部分 Navigator API、Audio、Glob、Fetch、WebSocket、OffscreenCanvas 等，除此之外，还添加 Node.js Buffer 和 asset 的跨平台支持，完整的 API 列表在 JSAR-DOM 的 script-context 中定义：https://github.com/M-CreativeLab/jsar-dom/blob/main/src/living/script-context.ts。
JSAR ESM 有哪些特殊的支持？
由于是面向 XR 的设备端开发，因此我默认支持了直接导入图片、音频和通用的二进制数据，目前返回的都是 ArrayBuffer，开发者自己再决定如何使用，与此同时也默认支持导入 JSON 文件和 WebAssembly。
同样，所有支持的格式以及导入类型都在 https://github.com/M-CreativeLab/jsar-dom/blob/main/src/living/esm-supports.json。
比如上图的代码中通过 ESM 导入了一个 jpeg 文件，并通过 createImageBitmap 和 OffscreenCanvas 最终获取到图片的像素数据（即 ImageData）。
JSAR TypeScript API 还提供了哪些有意思的能力？
JSAR-DOM 内置了噪音（Noise）算法的支持（基于 Rust Noise 的 WebAssembly 实现），可以基于它做一些有趣的顶点动画，比如：
比如上图，通过 new Noise() 返回了一个噪音算法实例，然后调用 simplex3(x, y, z) 并将顶点的三维信息传入来生成一个球形的变形动画效果，完整代码：https://github.com/M-CreativeLab/jsar-dom/blob/main/fixtures/spatial-vertices-updating.xsml。
哪里可以看到更多的例子：
JSAR-DOM 仓库内部有一些测试用例：https://github.com/M-CreativeLab/jsar-dom/tree/main/fixtures，每个 XSML 都可以用 JSAR-DOM on Babylon.js 打开，比如：https://m-creativelab.github.io/jsar-dom/?url=https://raw.githubusercontent.com/M-CreativeLab/jsar-dom/main/fixtures/spatial-polyhedra-element.xsml，只需要在 URL 后面添加一个 url 参数指向 XSML 的具体地址即可。
JSAR 未来会有哪些有意思的功能？
可能会跨平台支持 WebGPU，确保 JSAR 渲染和 Host 环境（比如 Unity、UE5、Realitykit 等）不会渲染异常。
JSAR 欢迎哪类开发者参与？
欢迎任何开发者参与到 JSAR 的开发中来，但我对以下几个方向的贡献者有强烈的需要：
其一、希望将 2D Web 生态移植到 JSAR 的开发者，比如在 JSAR 中使用 React、Vue、Web Component、Bootstrap 等框架。
其二、希望将 JSAR 潜入到更多运行时，比如 Godot、UE5、iOS/Android/Harmony、微信 XRFrame 等。
其三、希望帮助 JSAR 完善诸如 WebXR Device、Web Bluetooth、CDP Server 等标准能力的开发者。
其四、希望帮助完善 VSCode Extension 插件能力的开发者。
最后，两个硬广告：
GitHub - M-CreativeLab/jsar-dom: The 3D-first designed DOM implementation for XR applications 欢迎关注与参与项目Rokid AR Platform 欢迎申请 Rokid 空间计算套件的样机，在数字世界中感受空间小程序
还没有任何评论，你来说两句吧