進入 WebXR 的世界

隨着元宇宙的興起，VR 和 AR 技術再次回到同學們的視野。

比起完全是 0% 支持率的 WebGPU, 作爲 WebVR 技術的後繼者，WebXR Device API 以 0%+71.08% 的支持率展示了對於一個新的 feature 的期待。

面對越來越碎片化的移動端生態，Web 標準作爲可能是唯一的跨平臺工具，在生態中的重要性不言而喻。

如果想要學習 WebXR，從哪裏入手呢？別急，雖然 WebXR 和 WebGPU 還都不成熟，但是現有的技術已經可以讓我們實現超出你想象的效果了。

3DoF 和 6DoF

3DoF 是 Three Degrees of Freedom 的簡稱，意思是三個自由度。同理，6DoF 是 Six Degrees of Freedom 的簡稱，表示有 6 個自由度。

當只有三個自由度的時候，就是我們日常使用的 3D 模型系統那樣的，只能響應旋轉操作。千里之行，始於足下。我們就從 3 個自由度開始。

2D 時代，我們通過佈局來管理頁面的版面。到了 3D 情況下有些不同。我們先從一個例子來體會一下。

CSS 時代我們就是畫各種盒子的，所以爲了向 CSS 致敬，我們也畫一個 3D 的盒子。

前端寫 3D，最主要的框架是 Three.js。我們從 Three.js 的一個封裝，A-frame 入手。類似於 div，在 A-frame 中使用 a-scene 來作爲一個場景的容器。場景中放各種實體。實體有各種屬性。

a-box 是一個 3D 的盒子。a-sky 是一個背景天空。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 0 -5" rotation="0 0 0" color="#d4380d"></a-box>
      <a-sky color="#1890ff"></a-sky>
    </a-scene>
  </body>
</html>

顯示出來的效果如下：

a-box 的 position 屬性是 x,y,z 的值。其中 x 的正方向向右，y 的正方向向上，z 的正方向向外。

rotation 也是按 x,y,z 軸旋轉。

我們試下先水平向左轉 30 度。爲了區分上圖我們換個顏色：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 0 -5" rotation="0 -30 0" color="#eb2f96"></a-box>
      <a-sky color="#1890ff"></a-sky>
    </a-scene>
  </body>
</html>

這個盒子可不是靜態的哈，可以拖着玩一玩。

一個場景不能只有孤零零一個元素啊，我們再給我們的盒子上面頂個球。我們給盒子也換個方向，讓它右轉 30 度。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 0 -5" rotation="0 30 0" color="#eb2f96"></a-box>
      <a-sphere position="0 1.4 -5" radius="1" color="#389e0d"></a-sphere>
      <a-sky color="#1890ff"></a-sky>
    </a-scene>
  </body>
</html>

效果如下：

這兩個元素是一體的，可以一起拖來拖去。

從 3D 到 6D

光有形狀太單調了，我們需要像加載 2D 時代的圖片一樣的 3D 模型。

a-assets 用來指定資源，每一條資源項目用 a-assets-item 來表示。

      <a-assets>
        <a-asset-item id="glass" src="./model.glb"></a-asset-item>
      </a-assets>

引用的時候，我們給模型指定類型就好：

      <a-entity position="0 1.5 -4" scale="5.0 5.0 5.0" gltf-model="#glass">          
      </a-entity>

我們給上面的例子的球上面加個眼鏡吧：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 0 -5" rotation="0 30 0" color="#eb2f96"></a-box>
      <a-sphere position="0 1.4 -5" radius="1" color="#389e0d"></a-sphere>
      <a-sky color="#1890ff"></a-sky>
      <a-assets>
        <a-asset-item id="glass" src="./model.glb"></a-asset-item>
      </a-assets>
      <a-entity position="0 1.5 -4" scale="5.0 5.0 5.0" gltf-model="#glass"></a-entity>
    </a-scene>
  </body>
</html>

然後我們一腳踢開 VR 的大門，點擊右下解的 VR 按鈕，最終變成下面這樣子：

這時候我們需要 VR 眼鏡和支持 VR 的遊覽器。需要硬件設備的支持來讓我們從 3 自由度跨越到 6 自由度。

小夥伴們表示缺少 VR 設備，我們先按下不表，說說不需要設備就可以使用的 AR 技術。

比如，上面的圖我們通過 AR 的插件可以支持 AR 模式：

AR 的第一步

把眼鏡戴到人臉上

A-frame 主要用來處理 VR，但是它也是 AR 的基礎。要實現 AR，我們再加一個支持 AR 的庫就好了，比如 MindAR.

我們下面就把上面加載的小眼鏡戴到腦袋上：

我們來看看源代碼：

<!DOCTYPE html>
<html>
    <head>
      <meta  />
      <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-face.prod.js"></script>
      <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
      <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/dist/mindar-face-aframe.prod.js"></script>
      <style>
        body {
          margin: 0;
        }
        .example-container {
          overflow: hidden;
          position: absolute;
          width: 100%;
          height: 100%;
        }
      </style>
    </head>
    <body>
      <div class="example-container">
        <a-scene mindar-face embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
          <a-assets>
            <a-asset-item id="headModel" src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.1.4/examples/face-tracking/assets/sparkar/headOccluder.glb"></a-asset-item>
            <a-asset-item id="glassModel" src="./model.glb"></a-asset-item>
          </a-assets>
          <a-camera active="false" position="0 0 0"></a-camera>
          <a-entity mindar-face-target="anchorIndex: 168">
        <a-gltf-model mindar-face-occluder position="0 -0.3 0.15" rotation="0 0 0" scale="0.06 0.06 0.06" src="#headModel"></a-gltf-model>
          </a-entity>
          <a-entity mindar-face-target="anchorIndex: 10">
        <a-gltf-model rotation="0 -0 0" position="0 -0.5 -0.6" scale="5.8 5.8 5.8" src="#glassModel" visible="true"></a-gltf-model>
          </a-entity>
      </div>
    </body>
  </html>

我們可以看到，我們在 a-scene 裏面引入了 mindar-face 屬性的方式來調用 Mind-AR 的庫。因爲用到攝像頭，我們增加一個 a-camera 實體。

頭部遮擋器模型

在代碼中我們發現一個奇怪的東西，我們引入了一個不知道有什麼作用的 gltf model.

        <a-gltf-model mindar-face-occluder position="0 -0.3 0.15" rotation="0 0 0" scale="0.06 0.06 0.06" src="#headModel"></a-gltf-model>

這是初涉 AR 都會遇到的問題。就是我們從攝像頭中獲取了足夠的人臉的信息，但是我們還需要對人頭進行 3D 模型的重建，這樣才能跟眼鏡的模型一起計算遮擋關係。

在 Mind-AR 中，通過 mindar-face-occluder 屬性來實現這個遮擋器的模型，如上面的代碼所示。

另外，我們是如何將確定在人臉的什麼位置呢？

這需要深度學習人臉識別的模型給我們提供幫助。我們使用 Tensorflow.js 的 Face Landmarks Detection 模型，它會將人臉識別爲 468 個關鍵點。

如果看不清的話，我們將頭頂部分局部放大一下：

從中我們可以看到，頭頂最中央的位置的錨點編號是 10，我們的眼鏡定位就是選這個點做定位的。

          <a-entity mindar-face-target="anchorIndex: 10">
        <a-gltf-model rotation="0 -0 0" position="0 -0.5 -0.6" scale="5.8 5.8 5.8" src="#glassModel" visible="true"></a-gltf-model>
          </a-entity>

我們當然也可以用兩眼中間的 168 號點作爲眼鏡定位的點，實際上我們看到，我們的頭模型正是以這個 168 點爲錨進行定位的：

          <a-entity mindar-face-target="anchorIndex: 168">
        <a-gltf-model mindar-face-occluder position="0 -0.3 0.15" rotation="0 0 0" scale="0.06 0.06 0.06" src="#headModel"></a-gltf-model>
          </a-entity>

事件處理

光有 AR 代碼還不行，我們還得加上事件處理來處理各種玩法。

比如我們想判斷 AR 系統什麼時候就緒，可以去監聽 arReady 事件：

          document.addEventListener("DOMContentLoaded", () => {
            const scene = document.querySelector('a-scene');
            const arSystem = scene.systems['mindar-face-system'];

            scene.addEventListener("arReady", (event)=>{
                alert('AR系統加載成功！');
            })
          });

除此之外，arSystem 還支持下面的事件：

Mind-AR 背後的技術

我們打開控制檯，可以看到 Mind-AR 背後的幾個技術：

要支持這種級別的計算，wasm+simd 加上 webgl2/WebGPU 是標配。還沒有學習相關技術的同學，敬請關注我的相關係列文章。

另外，前面我們展示的是人臉識別的能力。我們採用其它的深度學習網絡，就可以實現其它的錨點功能。

比如，我們可以用 coco keypoints 模型，使用 17 個點來定位人的姿態。

如果覺得 17 個點太粗糙，還想針對手和腳做更精確一點的定位，我們可以換成 blazepose 的 32 點的模型：

更多的 tfjs 的模型，還有其它兄弟框架的模型，都可以集成進來一起爲我們工作。

比如可以翻翻 tfjs 的模型庫：https://github.com/tensorflow/tfjs-models

用 React 寫 Mind-AR

如果不習慣 HTML 格式的話，Mind-AR 也支持 React 的寫法：

import React, { useState } from 'react';
import 'mind-ar/dist/mindar-image.prod.js';
import 'aframe';
import 'mind-ar/dist/mindar-image-aframe.prod.js';
import './App.css';
import MindARViewer from './mindar-viewer';

function App() {
  const [started, setStarted] = useState(false);
  return (
    <div class>
      <h1>Example React component with <a href="https://github.com/hiukim/mind-ar-js" target="_blank">MindAR</a></h1>

      <div>
    {!started && <button onClick={() => {setStarted(true)}}>Start</button>}
    {started && <button onClick={() => {setStarted(false)}}>Stop</button>}
      </div>

      {started && (
    <div class>
      <MindARViewer/>
      <video></video>
    </div>
      )}
    </div>
  );
}

export default App;

小結

總結 Web AR 技術，我們主要做三件事：

  1. 圖像識別與物體跟蹤：這是一門比較成熟的基於深度學習的技術。實踐中，我們主要使用 tensorflow.js 的模型來實現

  2. 建模：就像我們給頭進行建模所做的事情一樣，要讓我們識別出來的視頻變成 3D 模型

  3. 合成：在建模的基礎上，將其他的對象一起繪製上去。這方面主要就是結合 Three.js, Babylon.js 以及 VR 的 A-frame 等框架

我們要在手機上落地，還需要對 tf.js 這樣的深度學習引擎，物體識別的算法，還有 3D 繪圖技術進行深度的優化。

此外，3D 建模只是模仿外形，我們還沒有觸及物體的靈魂。後面我們還需要結合數字孿生等技術，讓物體數據驅動、智能化，提升交互的效率，更好地服務於業務。

編輯 | 橙子君

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/WP3SMTzaNlmLEfjMUIyIsw

猜你喜歡