在 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 命中測試 (#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 工作階段和執行轉譯迴圈的基本概念，在 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，我們會根據作業進度，在這裡發布新文章。