空間小程序: Web 開發者的下一個增長曲線?

2023-10-22     InfoQ

原標題:空間小程序: Web 開發者的下一個增長曲線?

作者 | 劉亞中

YodaOS 首個版本發布於 19 年,它當時定位於開源智能音箱解決方案,筆者當時就作為 YodaOS 應用框架的核心維護者,為 Java 開發者提供了內置的 Java 語音應用框架。

時過境遷,智能音箱逐漸淡出了人們的焦點,似乎在語音助手領域的場景與 Web 生態並沒那麼契合,帶屏音箱也讓解決方案重新回到了 AOSP(Android)的生態。

而我兜兜轉轉 4 年過去,又回到了 Rokid,我仍然希望為 Web 開發者們找到一些有趣又足夠支撐起工程師們生存的下一個增長曲線,於是便有了今天的 YodaOS JSAR —— 空間小程序。

幾年時間,YodaOS 從原來的智能音箱作業系統(基於 Linux)升級為 YodaOS Master,後者是用於空間計算(AR/MR/XR)場景的作業系統,技術底座也從原來的 Linux Kernel 變為 AOSP,而 YodaOS JSAR 則是在這個系統之上構建的一套面向 Web 開發者的應用框架,可以說 YodaOS JSAR 是之前 YodaOS Java Application Framework 的延續,從原來開發一個語音技能應用升級到空間小程序的開發。

就在不久前,筆者受邀參加了 OpenJS World 2023 在上海的一次小型分享會:

OpenJS World 2023 上海站研討會

本文將結合這次研討會上分享的內容做一次文字版本的輸出,以期望給本文讀者了解 YodaOS JSAR 的全貌以及背後的思考邏輯。

空間與空間計算

作為背景補充,首先來了解什麼是空間。

在增強現實(AR)的場景中,空間是指現實世界中的一個區域,這個區域可以是一個平面,也可以是一個立體的物體。用戶通過空間小程序來獲取空間的信息,比如空間的大小、空間的位置、空間的旋轉角度等等,而在一般的 AR 應用開發中,我們都會使用一個場景來承載空間。

來自 Wolvic 技術文檔

如上圖,來自 Wolvic 的技術文檔,它描述了一個瀏覽器在空間中的設計,可以看到瀏覽器之前的 Tab 現在變為了一系列環繞在用戶周圍的虛擬螢幕(網頁),這樣用戶只需要通過轉頭即可切換要瀏覽的網頁或應用,而功能菜單則位於虛擬螢幕的上下,可以通過手柄或者手勢進行交互。

來自 YodaOS-Master 系統真機錄製

而 YodaOS Master 系統也有同樣的設計,用戶可以在系統中打開不同的窗口,每個窗口對應一個網頁或者安卓應用,用戶通過手勢或射線來與窗口和功能菜單進行交互。

來自 Wolvic 技術文檔

用戶空間描述起來就如同上圖一樣:用戶位於空間的中心,圍繞著用戶的是一個圓柱曲面,用戶可以將曲面中的一部分作為一塊虛擬螢幕用於顯示一個網頁或應用,用戶通過轉頭來切換要使用的應用。

空間小程序

讀者熟知的小程序一般是微信小程序,開發者通過開發小程序可以在用戶無需下載應用的情況下,在微信中使用一些即開即用的功能,比如:點外賣、酒店預定、網約車等。

那空間小程序是什麼呢?先來看一個演示視頻:

https://ar.rokidcdn.com/web-assets/pages/yodaos-jsar-demo.mp4(這裡是視頻)

https://ar.rokidcdn.com/web-assets/pages/yodaos-jsar-demo.mp4(這裡是視頻)

可以看到除了在上一小節中看到的螢幕外,還在空間中有一些可交互的 3D 物體,這就是空間小程序。

因此,空間小程序就是在原有的空間中,在螢幕之外添加一些可交互的 3D 物體,並且每個可交互物體之間是獨立運行的。這就需要空間小程序具備以下特性:

  • 安全性
  • 從平面到立體
  • 從窗口到空間

為什麼選擇 Web

單從空間小程序的技術實現來說,並不一定要選擇 Web,像 Lua、Python 或是其他腳本語言都可以完成,這次除了我自己對於 Web 的一腔熱血外,也需要一些特別的技術優勢。

Web 技術從 1993 年 HTML 1.0 發布以來,從原來的文檔分享,到信息站點,再到現在的 Web 應用,我們可以抽取到大家願意使用 Web 技術的特點就是安全性和便捷性,而這兩者相輔相成、互相成就。

因此 YodaOS JSAR 希望基於安全性和便捷性設計的空間應用框架,以此來讓開發者和用戶可以在獨立的空間應用之外,可以做一些簡單、有趣、便捷的「空間小程序」,它可以很容易被分享(當然安全性是前提)和傳播。

新三劍客

在空間計算時代,YodaOS JSAR 給出了 Web 的新解決方案,即新的三件套 —— XSML、SCSS 和 Type。

XSML

它對應於 HTML,全稱是 eXtensible Spatial Markup Language,即可拓展空間標記語言。

XSML 代碼示例

上圖是 XSML 的代碼示例,熟悉 HTML 的開發者一定不陌生,幾乎和今天的 HTML 類似,區別僅在於一些標籤的差異,比如:

  • 變成了
  • 變成了

以下便是一些 YodaOS JSAR 新增的標籤:

  • 引用 3D 模型
  • 創建一個立方體
  • 創建一個平面
  • 創建一個球體
  • 創建一個膠囊形狀
  • 創建一個圓環
  • 創建一個 3D 包圍盒,類似於

上圖的獅子就是通過 XSML 描述生成的:

  • 原始碼:https://github.com/M-CreativeLab/jsar-gallery-flatten-lion/blob/main/lib/lion.xsml
  • 在線演示:https://jsar.netlify.app/playground?url=https://raw.githubusercontent.com/M-CreativeLab/jsar-gallery-flatten-lion/main/lib/lion.xsml(請確保你本地可以訪問 raw.githubusercontent.com 域名)

如需了解完整的 XSML 說明,可訪問:https://jsar.netlify.app/zh-CN/manual/latest/basic-concepts/intro-xsml

如需了解完整的 XSML 說明,可訪問:https://jsar.netlify.app/zh-CN/manual/latest/basic-concepts/intro-xsml

SCSS

它對應於 CSS,全稱是 Spatial Cascading Style Sheet,即空間層疊樣式表。SCSS 語法完全繼承自 CSS,使用方式也相同:

比如:

#box{rotation: 00180;position: 010;material: "red";}

可以看到現在設置的不再是原來 CSS 的樣式,而是面向 3D 空間設計的旋轉、位置和材質等。通過 SCSS 可以非常容易和自然的布局空間樣式,相較於腳本的方式更直觀。

如需了解完整的 SCSS 說明,可訪問:https://jsar.netlify.app/zh-CN/manual/latest/basic-concepts/intro-scss

如需了解完整的 SCSS 說明,可訪問:https://jsar.netlify.app/zh-CN/manual/latest/basic-concepts/intro-scss

Type

隨著 Deno 和 Bun 這樣的服務端運行時都默認支持了 Type,YodaOS JSAR 也選擇了 Type 作為原生的支持語言,它在運行時內置了一個 Type 編譯器,在解釋 >時,會進行 Type 代碼的預處理後在 v8 中執行。

選擇 Type 的原因主要如下幾個方面:

  • Type 結合 Visual Studio Code 開發體驗極好
  • Type 可以運行 Java,因此支持了 Type 也意味著兼容 Java
  • 3D 開發領域,由於增加了多一個維度,複雜度也上升數倍,因此繼續使用 Java 來維護代碼對開發者要求會增加,使用 Type 可以降低這個門檻
  • 有了類型系統的加持,可以更容易面向各類 LLM 寫出效率更高、通用性更好的代碼生成提示詞

通過 YodaOS JSAR 的腳本系統,你可以使用 Babylon.js APIs 和 Web APIs。

Babylon.js 是一個支持多後端(WebGL、WebGPU、服務端以及 Native)的開源 3D 渲染引擎,它提供了一系列的遊戲場景 API,可用於開發 3D 遊戲和應用。

比如:

YodaOS JSAR 提供了一個全局對象 spatialDocument,它類似於瀏覽器中的 document,你可以通過該對象訪問到當前的 3D 場景。

YodaOS JSAR 基於 Babylon.js 框架構建,因此你可以直接通過 scene 訪問到 Babylon.js 的其他能力,可以通過這裡 https://jsar.netlify.app/zh-CN/manual/latest/runtime/babylonjs-apis獲取到 Babylon.js 的支持情況。

YodaOS JSAR 基於 Babylon.js 框架構建,因此你可以直接通過 scene 訪問到 Babylon.js 的其他能力,可以通過這裡 https://jsar.netlify.app/zh-CN/manual/latest/runtime/babylonjs-apis獲取到 Babylon.js 的支持情況。

另外,YodaOS JSAR 也支持了一些 Web APIs,未來也會持續支持更多的 Web APIs,以下是目前我們認為可能在空間計算設備上繼續發揮作用的 Web APIs:

  • 使用 WebXR Device API 處理空間關係、獲取輸入數據、管理生命周期等
  • 使用 ECMA Module 管理模塊
  • 使用 fetch 發送網絡請求
  • 使用 Timer 創建計時器
  • 使用 Web Audio 處理和播放視頻
  • 使用 Web Speech 識別用戶語音與生成語音
  • 繼續支持 WebAssembly

可以訪問 https://jsar.netlify.app/zh-CN/manual/latest/runtime/web-apis 獲取我們 Web APIs 的支持情況。

技術細節

本節會介紹一些在實現 YodaOS JSAR 的技術。

與 Unity 集成

首先,要回答一個問題 —— 為什麼要與 Unity 集成?

無論是 Apple Vision Pro 還是 YodaOS Master 中,開發者現在可供選擇的 3D 應用開發框架目前來說幾乎就只有 Unity 這一個選擇,比如對於 YodaOS Master 的桌面應用來說,它就是一個 Unity 應用,那麼要實現上面說到的將空間小程序可以放到一個 Unity 應用的空間中,那麼就需要實現與 Unity 一起來完成這項工作。

因此,這也意味著未來 Unity 開發者可以使用 YodaOS JSAR 集成到任何一個 Unity 應用並發布到其他平台。

下面就來看下是 YodaOS JSAR 是如何集成到 Unity 運行時的。

與 Unity 集成

上圖中,左側是 Unity 相關的部分,而右側是 Java 相關的部分,連接兩端的是 YodaOS JSAR 的 Unity 插件包,Unity 應用通過添加該插件來獲取 YodaOS JSAR 的運行時能力,它大體的工作流程如下:

通過以上的流程,YodaOS JSAR 就可以完成將空間小程序中的代碼在 Unity 中渲染的效果,並且由於最終生成的都是 Unity 的對象,因此也可以很容易通過 Unity 的交互來移動、旋轉和縮放這個物體。

程序隔離性

上圖是 YodaOS JSAR 的架構圖,通過它我們可以很方便地窺見它是如何保證程序隔離性的:

  • 在 Unity Runtime,每個空間小程序的實體是獨立的
  • 每個實體對應於一個數據通道
  • 在 Node.js 運行時側,每個空間小程序對應一個 XSMLDocument ,同樣每個文檔對應一個獨立的數據通道

基於以上的設計,就可以保證所有小程序在同一個 Node.js 線程的情況下,保證實際渲染是隔離並互不影響。

中間協議的設計

YodaOS JSAR 最重要的部分之一便是 Unity 和 Node.js 側中間數據的設計,下圖是我們在定義數據層級的切入點示意圖。

可以看到,OpenGL 包含了所有場景的三維坐標信息(包含基於坐標的其他數據)、著色器程序以及轉換矩陣,那麼要實現將物體渲染到 Unity 場景中,其實也可以通過 OpenGL 去實現,而且這種方式通用性更好,也更標準化,然而 YodaOS JSAR 堅持從場景管理切入的原因是我們希望做的不僅僅是輸出渲染,而是與 Unity 框架做更好的融合,讓用戶可以在 Unity 場景中與空間小程序中的物體真實的交互,這就需要我們將物體的描述信息抽取出來去同步,而非更底層的頂點數據與著色器。

為了解決場景數據不標準的問題,我們也希望開放中間部分的數據格式,作為新的 Web Virtual Object Model 標準草案。

多端統一

YodaOS JSAR 希望給到開發者一致的開發體驗,因此多端表現一致性也是我們期望的重要特性。

首先,YodaOS JSAR 支持的渲染端包括:

  • Unity Runtime for Android
  • Unity Editor
  • Web Browser
  • JSAR DevTools for Visual Studio Code

對於 Unity Runtime 和 Unity Editor,由 Unity 保障。

對於後兩者,其實本質上都是 Web 平台,在一開始有兩個選擇:一為通過 Babylon.js,二為通過 Unity 編譯為 WebGL,最終使用了後者,原因如下:

  • 設計上更清晰,所有的跨端都通過 Unity 保證
  • Babylon.js 和 Unity 在渲染底層有很大的不同,因此很難保證表現一致
  • Babylon.js 在 Web 上支持所有的能力,但在 YodaOS JSAR 只有部分支持,這樣可能開發者在 Web 上調試完卻發現在真機上不支持

得益於 Unity 在多端渲染上的良好表現,YodaOS JSAR 就得到了如下的效果:

YodaOS JSAR 的多端一致性

最 後

我們希望藉助 YodaOS,為 Node.js 社區補全終端開發這一版圖,讓我們用這門親切的語言,再次回到我們熟悉的「端」的開發

我們希望藉助 YodaOS,為 Node.js 社區補全終端開發這一版圖,讓我們用這門親切的語言,再次回到我們熟悉的「端」的開發

上面這句是 YoadOS 應用框架上一直的期望,現在仍舊初心不改,希望 YodaOS JSAR 能在空間計算時代帶給當下迷茫的前端開發者們更多的可能性!關於 YodaOS JSAR 的開源問題,它最終一定會以開源方式運作,但目前它的首要任務仍然是支持空間小程序開發者的需求以及壯大社區,當社區達到一定規模後,YodaOS JSAR 一定會以開源方式運作。

最後,對於 YodaOS JSAR 感興趣的讀者們,可以參與 Rokid 的開發者支持計劃,通過點擊閱讀原文可申請 Rokid AR Studio 樣機,來開始你的第一個空間小程序。

作者簡介:

劉亞中, 前 Node.js Collaborator, 先後就職於 SeedMail、Rokid 和淘寶技術部,期間負責過多個開源項目的開發,一直致力於 Web 及其他領域的交叉應用,如 Node.js 的 IoT 設備運行時 ShadowNode、Node.js 與 Python 跨語言調用庫 Boa 等,目前供職於 Rokid 負責空間小程序框架 YodaOS JSAR 的設計、研發與推廣。

B 站廣州研發工作室解散;外媒曝光蘋果中國區醜聞;OpenAI 被曝已叫停新大模型項目 | Q 資訊

「MySQL 之父」的 MariaDB 要完蛋了?叫停兩款核心產品並裁員 28%,分析師:該行為無異於自毀長城

劍指 Kubernetes!微軟發布開源平台 Radius:高效構建、運行雲原生應用程式

前端根本不需要構建!「技術邪教」 Ruby on Rails 之父再出激進言論引爭議

文章來源: https://twgreatdaily.com/zh-cn/37ad50bd54099461aa9a8d0b4194d48c.html