A-Frame 的無縫相連(Link Traversal)與傳送門(Portals)功能

搶先體驗(需搭配 Oculus、HTC Vive、Daydream 或 GearVR 等控制器)

A-Frame 0.6.0 和 Firefox Nightly 現在已經支援 VR 模式下的頁面瀏覽功能。WebVR 終於得到 Web 榮譽徽章了!Web 的命名源自於它透過網址連結(link)串聯互連內容的結構。

直到最近,由於 VR 連線仍被排除於頁面導覽之外,VR Web 還是支離破碎,連線的數據量也備受侷限。在 WebVR API 的第一個開發迭次中,我們把焦點放在像素呈現和滿足單一頁面之使用效能需求上。現在,我們要特別感謝 Doshheng Mu Kip 的努力,讓 Firefox Nightly 終於可開始提供 VR 網站間無縫轉換的功能了。

VR的無縫相連(link traversal)是靠 onvrdisplayactivate 屬性達成的。當上一個網站內容是透過 VR 頭盔呈現時,視窗上的物件便會在新頁面載入時自動執行此屬性。當第一次進入 VR 模式時,使用者需點擊滑鼠或按下鍵盤快速鍵來開啟 VR 模式,以免發生頭盔變成被網站控制的狀況。一啟動 VR,後續瀏覽其他頁面時,網頁內容便會自動透過頭盔呈現,而不再需要手動干預。若要讓網頁自動允許進入 VR 模式,你只需加入一個事件處理常式(event handler):
window.addEventListener('vrdisplayactivate' function (evt) { 
 /* A page can now start presenting in the headset */
 vrDisplay.requestPresent([{ source: myCanvas }]).then(function () { ... });
}

A-Frame 的連結(link)功能

A-frame 0.6.0 釋出了一個 link 元件及 a-link 原始型別(primitive)。前者可透過幾種方式設定:

<a-entity link="href: index.html; title:My Home; image: #homeThumb"></a-entity>

a-link 原始型別的介面則更精簡,類似於我們所熟悉的<a> tag。

<a-link href="index.html" image="#thumbHome" title="my home"></a-link>

圖像的屬性指向<img> 元素,此元素將用於 portal 的背景,而其 title 即為連結上顯示的文字。

VR 連結的使用者體驗

我們運用 arturitu 的創作來展示此 A-Frame 元件和原始型別在 VR 上呈現連結的方式,也希望藉此開啟未來幾年間有關這些功能的討論。藉由跨出此第一步,我們解決了幾個問題:

連結的視覺化元素應具一致性
使用者現在可快速一眼看出網頁跳接體驗之間的連貫性。在很著色器功能專家的 kip 的建議下,我們使用了能突顯各連結內容之獨特風格的方式來呈現 portal。A-Frame 有內嵌的截圖元件,能讓使用者輕鬆建立 portal 預覽所需的 360 度全景。

連結應不分遠近都可使用
Portal 有助於區分出距離較近的連結,但距離一拉長內容就會變得用處不大。若距離很遠,由於 portal 可能會融入背景、或因視角過寬而不易發現,變得不太容易看出來。為解決這個問題,我們讓連結淡入有白色外框的桃紅色圓圈內,白色的外環還會隨著距離拉遠而變寬,以為連結創造出一致的外型(顏色可調整)。另外,Portal 也會正對相機,以避免廣角導致可視表面變小。

連結應提供有關體驗的提示
你可以善用周圍的畫面,提供有關連結指向內容的提示。此外,連結上也可顯示標題或其所代表之 URL。這種做法可為使用者提供多一點有關連結內容的資訊。

應該有更簡單的方法來探索畫面上的連結
雖然傳送門是預覽 VR 體驗的好辦法,但若使用者得在畫面上一一檢視不同的連結,就不太容易找到適合的選項。因此,我們開發出「偷窺」功能,使用者指向任一連結後,不必做任何動作就可快速拉近看預覽。

下一步

現有 API 的侷限之一是,網頁開發人員還是得用手動的方式指向 link 用以產生 portals 的縮圖(thumbnail)。我們希望找到不同的方式,包括 meta tags、Web manifest 或其他手法,讓網站提供外部連結使用的縮圖。這樣才能讓開發者對網站在其他網頁上呈現的方式有更多的主控權。

另一個問題是,開啟網頁後,若需要很長一段時間才能載入內容或出現錯誤訊息時的處理方式。若使用者戴著 VR 頭盔,目前還沒有方法能告訴使用者發生這些問題。我們打算想辦法讓瀏覽器主動介入 VR,在使用者離開、載入和進入新 VR 內容的每個時間點上,都能用恰當的方式來告知。

結語

隨著 VR 模式下頁面轉換功能的推出,我們又朝著在現有 Web 架構上建立開放虛擬實境(Open Metaverse)邁出一大步。透過分享對於網頁連結的願景,我們希望能集思廣益。我們不知道未來的連結會是什麼模樣:門戶、跨空間的傳送門、或在畫面上放個墨西哥捲餅來取代系統選單(exit burrito)……未來的可能性不可限量,歡迎您探索。所有的程式碼及示範都已隨 A-Frame 0.6.0 釋出。Happy hacking!

原文連結

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.