JSAR 0.6 功能抢先预览 —— Let's Play WebXR

yorkie
237 阅读5分钟

如果不了解 JSAR 的小伙伴可以先通过 Yorkie：JSAR 新版本预览：8个月到底写了个啥 了解。
简单的说 JSAR 就是一个以 XR（比如 Apple Vision Pro、Pico 或 Rokid ARLite）设计优先的 Web 运行时（或者自大一点叫浏览器），它可以将不同的 WebXR 应用渲染到同一个场景，并且可以交互。

JSAR 在 0.6.0 的版本中，在上个版本的基础上，开始支持使用 HTML 去替代原来 XSML 的功能，好处是向后兼容性更好，让开发者可以使用一套代码同时运行在 Web 浏览器和 JSAR 环境中。

同时，为了让开发者可以及时的体验到新版本功能，我开发了一个 Play WebXR 的应用（已同时发布到 AR Studio 和 ARLite 应用商店，由于精力有限，后面完善后会再考虑非 Rokid 设备），它相当于一个 WebXR 应用的浏览器，通过输入你的 URL 就可以在当前场景打开多个 WebXR 应用，同时也内置了一些我们提供好的应用和模型。话不多说，先看下面的录屏：

Play WebXR 应用介绍

Play WebXR 是同时发布在 AR Studio 和 ARLite 应用商店的一个空间应用，它集成最新的 JSAR SDK，可以实现在打开的应用空间中同时预览和使用多个 WebXR 应用（也包括模型）。

因此开发者/用户可以使用 Play WebXR 应用实现：

  1. 调试自己的 WebXR 应用（JSAR 环境）
  2. 浏览其他 WebXR 应用（JSAR 环境）
  3. 3D 模型浏览器

输入框（URL）支持的格式：

- .xsml 文件
- .html 文件
- .glb/.gltf 文件

JSAR 0.6 新功能

支持 HTML

现在 JSAR 可以直接运行 HTML 文件，比如：

<html>
<head>
  <title>My First WebXR</title>
  <script type="importmap">
    {
      "imports": {
        "three": "https://ar.rokidcdn.com/web-assets/yodaos-jsar/dist/three/build/three.module.js"
      }
    }
  </script>
  <script type="module">
    import * as THREE from 'three';

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, 1.0, 0.1, 1000);

    const light = new THREE.DirectionalLight(0xffffff, 0.5);
    light.position.set(0, 1, 1);
    scene.add(light);

    const geometry = new THREE.TorusKnotGeometry(0.2, 0.05, 50, 16);
    const material = new THREE.MeshLambertMaterial({ color: 0x00ffff, wireframe: false });
    const obj = new THREE.Mesh(geometry, material);
    scene.add(obj);

    navigator.xr.requestSession('immersive-ar', {}).then((session) => {
      const baseLayer = new XRWebGLLayer(session, navigator.gl);
      session.updateRenderState({ baseLayer });

      const renderer = new THREE.WebGLRenderer({
        canvas: {
          // mock the canvas
          addEventListener() { },
        },
        context: navigator.gl,
      });
      renderer.xr.enabled = true;
      renderer.xr.setReferenceSpaceType('local');
      renderer.xr.setSession(session);

      function animate() {
        obj.rotation.x += 0.01;
        obj.rotation.y += 0.01;
        renderer.render(scene, camera);
      }
      camera.position.z = 5;
      renderer.setAnimationLoop(animate);
    }, (err) => {
      console.warn('Failed to start XR session:', err);
    });
  </script>
</head>
<body>
</body>
</html>

HTML 与之前 XSML 的区别在于：它不支持 XSML 内置的 3D 元素，因此你需要使用 Three.js 或者 Babylon.js 的 API 自己实现相关的定义。

但使用 HTML 可以让开发者用同一个 HTML 内容支持浏览器环境和 JSAR 环境运行，开发者可以通过 navigator.gl 判断环境。

如果你好奇为什么我要支持 HTML，请阅读这边文章：jsar.netlify.app/manual/0.6.…。简单来说就是 HTML 和 CSS 本身就已经可以描述 3D 空间了，因此就完全没必要引入一个新的标记语言了。

TypeScript 支持

在 HTML 中，仍然可以继续使用 TypeScript，并且具备更快的编译速度，不过唯一的区别是通过

比如可以创建文件 foo.ts

export class Foo {
  bar: string = 'bar';
  constructor() {
    console.log(this.bar, 'from TypeScript');
  }
}

然后在 HTML 中导入：

<html>
<head>
  <script type="module">
    import { Foo } from './foo.ts';
    new Foo();
  </script>
</head>
</html>

更多用法和介绍可查阅文档：jsar.netlify.app/zh/manual/0…

Three.js 支持

正如上面小节中所见，在新版本中，开发者可以在 HTML 中使用 Three.js 来编写你的应用，不过有几点需要注意：

1）请使用 JSAR 提供的 Three.js 版本：ar.rokidcdn.com/web-assets/… （原因：官方版本未对 multiview 渲染做支持）
2）使用 navigator.gl 创建渲染器
3）使用 navigator.xr.requestSession 直接创建 WebXR Session，不需要添加任何 VR Button。

具体可以查看 Three.js 支持文档：jsar.netlify.app/zh/manual/0…

Babylon.js 支持

在 HTML 中，你仍然可以使用 Babylon.js 开发，但仍然有几点需要注意：

1）需使用 JSAR 提供的 Babylon.js 版本：ar.rokidcdn.com/web-assets/…
2）使用 navigator.gl 创建 Engine

具体可以查看 Babylon.js 支持文档：jsar.netlify.app/zh/manual/0…

原生框架支持

如果你没有使用 Three.js 或 Babylon.js，而是自己实现的渲染器，JSAR 也提供了相关的支持帮助你可以适配你的3D引擎运行在 JSAR 环境中，具体支持文档请阅读：jsar.netlify.app/zh/manual/0…

模块系统

与 Web 和 Node.js 应用一样，在 JSAR 中你可以使用 ECMAScript Module 来组织你的项目结构，除此之外，JSAR 还内置了资源加载器用于加载比如像音频、图片、二进制和配置等文件。

import screenshot from './screenshot.png';
import music from './music.mp3';
console.info(screenshot); // prints the screenshot as ArrayBuffer
console.info(music); // prints the music as ArrayBuffer

同时在 JSAR 中，可以直接在 HTML 中配置 importmap 来配置你的第三方模块路径。

具体细节可查看文档：jsar.netlify.app/zh/manual/0…

Web Workers

由于 Three.js 的 draco 解压器依赖 Web Workers，为此，在 0.6.0 的版本也对 Web Workers 做了最小支持，开发者也可以使用它来帮助你实现一些异步的 CPU 任务。

具体细节可查看文档：jsar.netlify.app/zh/manual/0…

音频与空间音频

尽管在之前的版本也可以通过 API 播放音乐，但新版本中音乐/音频播放开始变得有趣了，由于每个应用现在都具备一个位置，因此要实现空间音频的效果变得异常简单：

const audio = new Audio('https://example.com/audio.mp3');
audio.play();

JSAR 在运行时，会根据应用的位置去进行音频空间化处理，这样随着应用和用户位置的变化，声音也会不同。

0.7 版本计划

在下个版本中，JSAR 会继续 HTML 化，主要为：

  1. 将 XSML 之前的空间标签（如 cube、sphere 等）迁移到 HTML 中（类似于在 HTML 中使用 svg 的用法）
  2. 将开始实现 HTML 部分 2D 标签（如 div、span、p、h1、h2 等）在空间中的渲染，以及支持少部分 CSS 布局和样式属性
avatar
文章
阅读
粉丝