網頁版擴增實境

喬梅利
Joe Medley

在 Chrome 67 版中,我們宣布了擴增實境 (AR) 與虛擬實境 (VR) 適用的 WebXR Device API,但僅支援 VR 功能。VR 只是基於運算裝置 所呈現的體驗另一方面,AR 技術則可在真實世界中算繪虛擬物件為了讓放置及追蹤這些物件的位置,我們已在 Chrome Canary 中新增 WebXR Hit Test API,這是一種新方法,可以協助沉浸式網頁程式碼在實際環境中放置物件。

哪裡可以取得這項優惠?

這個 API 旨在於短期之內繼續保持在 Canary 中。我們希望延長測試期,因為這是全新的 API 提案,我們希望確保此提案內容完善且適合開發人員。

除了 Chrome Canary 外,你還需要:

  • 搭載 Android O 以上版本的相容智慧型手機
  • 如何安裝 ARCore
  • 兩個 Chrome 旗標 (chrome://flags):WebXRDevice API (#webxr) 和 WebXR Hit Test (#webxr-hit-test)

您可以運用這些資訊深入瞭解示範或試用程式碼研究室。

只是網路

今年 Google IO 透過早期版本的 Chrome 展示擴增實境技術。我在這三天內,不斷向開發人員和非開發人員說了一句話,希望我知道把這篇沉浸式網路文章寫在「只有網路」。

「我需要安裝哪些 Chrome 擴充功能?」「沒有延期。只是網路而已。」

「我需要使用特殊的瀏覽器嗎?」「只是網路。」

「我需要安裝哪個應用程式?」「沒有特別的應用程式,只是網路而已。」

這可能容易發現,因為您正在瀏覽專為網路提供的網站。如果您使用這個新的 API 建構示範內容,請準備這個問題。實際成效總和。

介紹 IO 時,如果您想大致瞭解沉浸式網路的一般資訊,我們會在何處觀看這部影片

作用為何?

對於許多現有網頁,擴增實境技術能夠帶來助益。 例如,它可協助人們在教育網站上學習,讓潛在買家在購物時以視覺化方式呈現家中物品。

相關示範說明瞭讓使用者能以真實尺寸的方式呈現物件,就跟現實中一樣。放置完成後,圖片會維持在所選介面上,並顯示圖片位在該表面時時的尺寸,並讓使用者可以任意移動圖片,或者遠離圖片。與雙維影像相比,這種做法能讓檢視者更深入瞭解物件。

如果您不確定自己所有的意思,使用示範時就會清楚瞭解。如果您沒有可執行示範的裝置,請查看本文頂端的影片連結。

示範和影片沒有提到,AR 可以傳達實際物體的大小。此處的影片示範了我們打造了 Chacmool 的教育示範影片。隨附文章會詳細說明此示範。本討論的重點在於,將 Chacmool 雕像放在擴增實境中,就可看出它的尺寸,就像您實際在房間內一樣。

Chacmool 的例子是教育性質,但內容很容易上手。想像一個在客廳擺放沙發的家具購物網站。AR 應用程式會顯示沙發適合你的空間,以及沙發與其他家具相鄰的效果。

Ray 演員、點擊測試和視詞

實作擴增實境時,有一個重要問題是如何將物件放置在實際檢視畫面中。這項操作的方法稱為「光柵轉換」。雷射轉換指的是計算真實世界中指標射光與表面之間的交集。這個交集稱為「命中」,用來判斷是否發生命中

建議您現在試試 Chrome Canary 中的新的程式碼範例。開始操作前,請仔細檢查是否已啟用正確的標記。現在載入樣本並按一下「啟動 AR」。

請留意以下事項。首先,您可能從其他沉浸式樣本中辨識出的速度計量器顯示每秒 30 個影格,而非 60 個。這是網頁從相機接收圖片的速率。

AR 運作時為每秒 30 個影格

AR 命中測試示範

另一邊值得注意的是向日葵圖片。會隨著您移動並貼齊表面 (例如樓層和桌面) 移動。如果您輕觸螢幕,表面上就會出現向日葵,並隨著裝置移動一道新的向日葵。

圖片會隨著裝置一起移動,並嘗試鎖定表面的圖片,稱為「顯像」。拼圖是一種暫時圖片,可在擴增實境中放置物件。在本示範中,組合器是要放置的圖片副本。但不一定要如此。例如,在 Chacmool 示範中,這是一個矩形方塊,與放置物件的基礎形狀大致相同。

向下編寫程式碼

Chacmool 示範顯示 AR 在正式版應用程式中可能呈現的樣貌。幸好,WebXR 範例存放區中提供了更簡單的示範內容。我的範例程式碼來自該存放區的 AR Hit Test 示範。順帶一提,我想簡化程式碼範例,方便您瞭解實際情況。

進入 AR 工作階段及執行轉譯迴圈的基本操作方法與 AR 相同。如果您並不熟悉,請參閱我的上一篇文章。更具體地說,進入及執行 AR 工作階段看起來就像進入 VR 魔法視窗工作階段。和魔法視窗一樣,工作階段類型必須非沉浸式,且參照類型的框架必須為 'eye-level'

全新 API

接下來,我將示範如何使用新的 API。提醒您,在 AR 中,系統會在放置項目前嘗試尋找表面。做法是使用命中測試來達成如要執行命中測試,請呼叫 XRSession.requestHitTest()。這是訂閱按鈕的圖示:

xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
  //
});

這個方法的三個引數代表光線轉換。光柵投射方式是由光柵上的兩個點 (origindirection) 和這些點做為計算依據 (frameOfReference) 所定義。起點和方向皆為 3D 向量。無論提交的值為何,都會經過正規化 (轉換為長度) 為 1。

移動遺珠

當您移動裝置時,骰子需要隨著裝置一起移動,系統會嘗試找出可放置物件的位置。這表示每個影格都必須重新繪製組合。

requestAnimationFrame() 回呼開始。就像 VR 一樣 你需要一個工作階段和一個姿勢

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Do the hit test and draw the reticle.
  }
}

取得課程和姿勢後,請判斷光線投放的位置。程式碼範例使用 gl-矩陣數學程式庫。不過,gl-矩陣並非必要條件。重點在於瞭解計算的內容,以及根據裝置的位置。從 XRPose.poseModalMatrix 擷取裝置位置。將光線投射到手中,請呼叫 requestHitTest()

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Calculate the origin and direction for the raycast.
    xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
    .then((results) => {
      if (results.length) {
        // Draw for each view.
      }
    });
  }
  session.requestAnimationFrame(onXRFrame);
}

雖然命中測試樣本中顯而易見,您還是需要循環瀏覽檢視畫面才能繪製場景。使用 WebGL API 進行繪圖。只要您勇於嘗試,就能做到這一點。不過,我們建議採用架構沉浸式網頁範例使用專為 Cottontail 所建立的範例,從 5 月開始支援 WebXR,Three.js 也已支援 WebXR。

放置物件

當使用者輕觸螢幕時,物件會顯示在 AR 中。因此,請使用 select 事件。這個步驟的重點在於知道該插入何處。由於移動的雷根可提供固定的命中測試來源,因此放置物件最簡單的方法就是在上次命中測試的針織位置繪製物件。如有需要,如果您基於正當理由而選擇不顯示謎題,則可以在選取事件中如範例所示呼叫 requestHitTest()

結語

如要取得控制代碼,最好的方法就是逐步查看程式碼範例,或試用程式碼研究室。希望我已經有足夠的背景介紹,對雙方有所幫助。

我們已不再建構沉浸式網路 API,而不只是一幅樣本,在我們取得進展的同時,也會在這裡發布新文章。