CMS 在空間計算未來的可能性

已發表: 2019-10-24

在 WP Engine 擔任職務時,我有機會作為大使環遊世界,宣傳使用 WordPress 的新穎有趣的方式。 我最近在北卡羅來納州的羅利,在 All Things Open 上談論 CMS 在空間計算未來的可能性。 對於 45 分鐘的演講來說,這是一個崇高的話題,所以我想我會更深入地分享一種使用無頭方法使用 WordPress 構建擴展現實 (XR) 體驗的新方法。

無頭狂潮

我認為我們中的許多人主要將 headless 視為使我們的網站更快並將它們與控制我們內容的 CMS 分離的一種方式。 雖然在某些情況下是正確的,但當我們考慮這對本機應用程序和增強、虛擬和混合現實(更廣泛地定義為擴展現實)意味著什麼時,這可能不是看待這個概念的最引人注目的鏡頭。

為了了解 WordPress 如何為 XR 體驗提供動力,我們必須退後一步,了解開發人員和設計人員在交互式應用程序中需要哪些關鍵功能。

CMS 的核心吸引力是什麼?

縮小並查看 CMS 的核心是什麼,突出了一些關鍵功能,這些功能使我對未來的想像力進行了競賽。 CMS 可以廣義地定義為:

  • 帖子/頁面數據
  • 與用戶和帖子等數據相關聯的元數據
  • 安全的用戶系統
  • 豐富的內容編輯器
  • 通過插件/主題/等的可擴展性。

WordPress 在整個範圍內都大放異彩,再加上開源的靈活性,您可以構建您夢想的任何東西。 用戶系統和內容是 XR 等交互式和富媒體應用程序的關鍵要求。 像 WordPress 這樣的開源解決方案為開發人員提供了更大的自由度和對源代碼和軟件的更多控制權,這意味著他們可以對其進行調整以按照他們想要的方式執行,而不受許可的限制。 當新的 Gutenberg 編輯器合併到 WordPress 5.0 中時,實現了另一個級別的自由,進一步普及了世界上最受歡迎的 CMS 的力量。

新 WordPress 編輯器的可能性

我們花了很多時間思考以統一的方式使用塊來控制標記的前端優勢。 我認為在前端開發中很大程度上被忽視的新 WordPress 編輯器的一個方面是塊本身的數據結構。

通過 REST API 提取數據通常會返回帖子的最終標記。 這使得非基於 html 的應用程序難以解析或使用數據。 您當然可以清理最終輸出,但它不能提供前進的信心,並且經常會刪除重要的上下文。

在帖子在前端呈現標記之前,有一些有價值的屬性用於確定最終標記。 這些選項通常對非瀏覽器應用程序和基於瀏覽器的體驗一樣有用; 這只是確保內容已針對您的目的進行清理的問題。

假設我們有一個具有srcloopautoplay等屬性的音頻塊。這些屬性對於期望在運行時做出相同決定的非瀏覽器應用程序同樣重要。 通過查詢 Gutenberg 帖子,可以提取音頻文件以及它應該如何表現的屬性,從而使應用程序與瀏覽器行為統一。

在不久的將來,物理世界和數字世界將繼續融合在一起。 隨著年輕一代越來越多地通過屏幕、鍵盤和鼠標以外的方式進行交互,我們可能應該開始考慮到這個未來來創建內容。 我們真的想要保存所有這些標記嗎? 它甚至重要嗎? 如果是,則該屬性可能應該通過 JSON 保存、鍵入和公開。 標記實際上只對前端渲染有用。

純聲音 AR 博客閱讀器概念

Bose 正在開創一種有趣的增強現實方法。 他們已經迅速更新了他們的產品,在耳機和太陽鏡中加入了 6 個自由度 (6DoF) 傳感器,為純聲音的 AR 體驗提供動力。 這為我們提供了 XR 的三個重要機制; 6DoF 頭部追踪、私密聲音體驗和手勢識別。 我決定使用這項技術來說明古騰堡塊數據結構的潛力。

Bose AR 太陽鏡的照片

使用由 Roy Sivan 和貢獻者開源和構建的 Gutenberg Object Plugin,我能夠以 REST 友好的方式公開屬性數據。 然後,我能夠將注意力轉移到構建機制和 MVP 應用程序上,以便在看不見的情況下閱讀博客。 該應用程序將按鈕放置在訪客周圍的 3D 空間中。 右側是“下一篇文章”按鈕。 在他們的正前方,一個帖子正文按鈕可以播放帖子數據的讀數。 通過使用適用於 WordPress 的 Amazon AI 插件,語音轉文本技術成為可能。

當面向帖子主體雙擊眼鏡框時,語音提示訪問者使用點頭手勢播放帖子音頻。 在構思這個想法的 24 小時內,我得到了一個工作概念證明,我將其主要歸因於不必弄清楚如何準備我的數據。 Blocks 和 JSON 為我做了這一切!

下圖是該概念的草圖以及最終產品。

Bose AR 博客閱讀器的草圖。
Bose AR 博客閱讀器原型的最終設計。

傳統增強現實中的塊

空間化塊對我來說很有趣,所以我構建了另一個概念證明,演示了遊戲引擎中的 3D 預製對像如何與網頁上的 2D 塊相關聯。 下面是在我的酒店房間周圍渲染的古騰堡帖子的屏幕截圖。

顯示網站和 AR 體驗關係的示例。

雖然 AR 中網頁的字面 1:1 表示表明我們可以將我們的設計決策耦合進出瀏覽器,但我認為我們可以更進一步。 一個塊可以代表很多東西; 那麼為什麼不使用自定義塊來抽象 3D 創意呢?

非標准文件類型和抽象 3D 對象

HTML 具有開箱即用的有限文件類型列表。 這並不是說我們僅限於這些選項。 WordPress 足夠靈活,只需添加允許的類型即可擴展到其他人。

我一直在構建一個名為 Broken Place 的音樂遊戲,它允許玩家在 AR 中與實時音樂互動。 聲音引擎正在運行一種名為 Pure Data (PD) 的開源編程語言,該語言具有非常特定的文件類型,只有它可以讀取。 在 WordPress 中,我在一個名為“歌曲”的自定義帖子類型中管理帖子內容,玩家可以在其中上傳他們的 PD 補丁。 玩家只需以貢獻者用戶角色登錄網站並上傳他們的補丁。 從本機應用程序查詢歌曲帖子並加載補丁。

海灘上的增強現實合成器

內容提交選項開啟了允許用戶設計自己的音樂界面佈局的潛力。 想像在下圖中,圖中的每個 3D 旋鈕都與一個名為“Knob”的 Gutenberg 塊相關聯,並且每個旋鈕都有一個與發送到音頻引擎的聲音信息相關聯的屬性。 內容創建者可以使用列塊確定聲音信息在網格中的映射方式。 當您在列塊中嵌套塊時,REST 響應還將對象嵌套為塊的子級,並且可以使用 JSON 結構應用邏輯。

VR中的合成器界面

敘事設計潛力

在帖子數據中,我們在講故事; 一些信息,一些個人,但它們充當思想膠囊。 我夢想著一個帖子不僅僅是屏幕上的文本和圖像的未來。 空間化內容為敘事設計提供了驚人的機會。 我已經在 AMP Stories 中看到了這種潛力,並希望這種結構可以幫助激發在 3D 物理空間中講述的故事。

AMP Stories 區塊的圖片

想像一下 AMP 故事的相同帖子結構,但用於 3D 空間,您可以放在家里或辦公室。 Mozilla Hubs 在對所有設備開放的協作 XR 空間方面處於領先地位,我看到了為 Mozilla Hubs 結合 WordPress 敘事設計以允許共享講故事體驗的有趣潛力。

我很高興繼續探索使用無頭 WordPress 為 XR 體驗提供動力的新方法,並幫助開創我們如何與數字內容交互和創建數字內容的全新時代。