在 Chrome 67 中,我們宣布適用於擴增實境 (AR) 和虛擬實境 (VR) 適用的 WebXR Device API,但只有啟用 VR 功能。VR 只是單純的運算裝置另一方面,AR 可讓您在現實世界中算繪虛擬物件為了讓這些物件可以放置及追蹤,我們剛剛在 Chrome Canary 中新增了 WebXR 命中測試 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 應用程式會告訴你沙發是否適合你的空間,以及沙發放在其他家具旁的樣貌。
光線投射、命中測試和十字準線
導入擴增實境時要解決的一個關鍵問題是,如何將物件放置在實際檢視畫面中。這項操作的方法稱為光線投射。光線投射是指計算指標光線與真實世界中的表面之間的交點。該交集稱為「命中」,用於判斷命中是否發生在「命中測試」。
不妨趁這個機會試用 Chrome Canary 中新的程式碼範例。在執行任何操作前,請再三檢查是否已啟用正確的標記。接著載入樣本,然後點選「開始 AR」。
請注意以下幾點:首先,您可能會在其他沉浸式範例中看到速度計,顯示每秒 30 張影格,而不是 60 張。這是網頁接收相機傳送圖像的速率。
AR 命中測試示範
您應該會注意到葵花圖片。它會隨著您的移動和貼齊而移動到樓層數和桌面等表面。如果輕觸螢幕,途徑上就會出現向日葵,並隨著裝置一起移動。
隨著裝置移動並嘗試鎖定表面的圖片稱為格線。十字準線是暫時圖像,可協助將物件放置在擴增實境中。在此示範中,存放區是要放置的映像檔副本。但其實不必如此。舉例來說,在 Chacmool 示範中,這個參考點是矩形方塊,大致上與放置物件的底座相同。
程式碼
Chacmool 示範會顯示 AR 在正式版應用程式中的樣貌。幸運的是,WebXR 範例存放區中有一項更簡單的示範。我的程式碼範例來自該存放區中的 AR 命中測試示範。提醒您,為了協助您瞭解發生的情況,我會簡化程式碼範例。
進入 AR 工作階段並執行算繪迴圈的基本程序與 VR 相同。如果不熟悉這些概念,可以參考我先前的文章。具體來說,進入並執行 AR 工作階段的方式與進入 VR 魔術視窗工作階段幾乎一樣。如同魔術視窗,工作階段類型必須是非沉浸式,且參照類型的影格必須為 'eye-level'
。
新版 API
接下來,我將說明如何使用新版 API。請注意,在 AR 中,十字準線會在放置物品前嘗試尋找表面。這項操作是透過命中測試完成。如要執行命中測試,請呼叫 XRSession.requestHitTest()
。這是訂閱按鈕的圖示:
xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
//
});
此方法的三個引數代表光線投射。光線投射是由光線上的兩個點 (origin
和 direction
) 定義,並計算出這些點的起點 (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- Matrix 數學程式庫。但 gl- Matrix 不是必要項目。重要的是瞭解您要用它計算什麼,以及它是根據裝置的位置計算。從 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,而 Three.js 自 5 月起就支援 WebXR。
放置物件
使用者輕觸螢幕時,系統會將物件放入 AR 中。為此,您可以使用 select
事件。這個步驟的重點是瞭解要放置哪些內容。由於移動式套件可提供持續的命中測試來源,因此放置物件最簡單的方法是在上次命中測試時將物件繪製在已知位置。必要時,假設您有不正當理由不想要展示的正當理由,您可以在選取事件中呼叫 requestHitTest()
,如範例所示。
結論
如要掌握這項功能,最佳做法是逐步完成程式碼範例,或試用程式碼研究室。希望我提供的背景資訊足以讓你瞭解這兩種方法。
我們還沒有完成建構沉浸式 Web API,我們會在進展順利時發布新文章。