元宇宙下的前端現狀

↓ 推薦關注↓

資本熱詞：Metaverse

• 7 月 28 日 扎克伯格表示，該公司正在組建一個產品團隊，致力於元宇宙（Metaverse）的開發。“未來五年內，將 Facebook 從社交媒體網路轉變為一個元宇宙公司。”

• 英偉達通過一部紀錄片自曝：“今年 4 月份那場釋出會，全部是合成的”

• 遊戲公司 Epic Games 在 4 月獲得 10 億美元投資用來構建元宇宙

• 國內方面號稱要打造全年齡段元宇宙世界的 MeteApp 公司，在 Roblox 上市後拿到了 SIG 海納亞洲資本領投的 1 億美元 C 輪融資

• 位元組跳動於 4 月被曝光已投資 “中國版 Roblox ” 程式碼乾坤近億元

• 陌陌王力表示，未來隨著虛擬現實的進一步發展，VR/AR 硬體的不斷成熟向家用普及以及人機互動模式的變化，必然會出現新的機會，也就是一種直接將人背後的生活串聯起來的方式。

• 阿里前端委員會互動技術方向重點也是“虛擬角色”和“ AR/VR ”

可以看到： “互動娛樂類資本瞄準的網際網路未來 - 元宇宙”

何為元宇宙

• 首次出現：1992 年尼爾·斯蒂芬森的科幻小說《雪崩》當中，在這部小說中講述了大量有關虛擬化身、賽博朋克等場景。

• 維基百科：通過虛擬增強的物理現實，呈現收斂性和物理永續性特徵，基於未來網際網路，具有連結感知和共享特徵的3D虛擬空間。

• 簡單點講就是：我們在虛擬世界中與一個全新的身份一一對應，並且不會間斷地“生活下去”

• Roblox提出一個真正的元宇宙產品應該具備八大要素，很容易就能讓人聯想到《頭號玩家》這部電影：

• 身份：擁有一個虛擬身份，無論與現實身份有沒有相關性。

• 朋友：在元宇宙當中擁有朋友，可以社交，無論在現實中是否認識。

• 沉浸感：能夠沉浸在元宇宙的體驗當中，忽略其他的一切。

• 低延遲：元宇宙中的一切都是同步發生的，沒有非同步性或延遲性。

• 多元化：元宇宙提供多種豐富內容，包括玩法、道具、美術素材等。

• 隨地：可以使用任何裝置登入元宇宙，隨時隨地沉浸其中。

• 經濟系統：與任何複雜的大型遊戲一樣，元宇宙應該有自己的經濟系統。

• 文明：元宇宙應該是一種虛擬的文明。

作為大家口中的“網際網路的最終形態”，需要如今大熱的包括 AR、VR、5G、雲端計算、區塊鏈等軟硬體技術的成熟。才能構建出一個去中心化的、不受單一控制的、永續的、不會終止的世界。

上面提到的各項技術，和目前前端關聯比較大的，便是 AR、VR。

AR 現狀

有種新瓶裝舊酒的感覺，VR、AR 概念大火的時候還是 17、18 年。幾年來，AR 被用來建立虛擬的地方遊覽、設計和協作 3D 模型、遊戲、娛樂、購物、營銷、學習、視覺化等等。從可用到易用，再到體驗的升級，這是使用者體驗 UX 上一輪的主要革新命題，新一輪的使用者體驗革命會聚焦在如何真正提供體驗的價值。目前 AR 在生活中發揮的就是這樣的作用。

案例：

• AR + 旅遊：導航、門店提示、廣告、優惠活動提示等等

WebXR

WebXR 是標準也是概念，指的基於 Web 實現虛擬現實和增強現實的能力。

其實就是在 Web 上開發 AR（Augmented Reality）和 VR（Virtual Reality）應用的 API， “X”代表沉浸式體驗中的任何事物。

API

• API 演進：主要是 google 在推進，從 2016 年開始提出的 WebVR 標準，到由於缺了增強現實這一塊，2018 年改為 WebXR

• 相關 API 示例： immersive-web.github.io/webxr-sampl… ^[1]

• 最新動態： 2021 年 4月13日 Chrome 的 90 版本增加新 WebXR API：

• WebXR Depth API：獲取使用者的裝置與現實環境中物體的距離

• WebXR AR Lighting Estimation：獲取環境的光線情況

• 示例程式碼：

async function activateXR() {
  // 建立 WebGL 上下文
  const canvas = document.createElement("canvas");
  document.body.appendChild(canvas);
  const gl = canvas.getContext("webgl", { xrCompatible: true });

  // 初始化three.js
  const scene = new THREE.Scene();

  // 建立一個有不同顏色面的立方體
  const materials = [
    new THREE.MeshBasicMaterial({ color: 0xff0000 }),
    new THREE.MeshBasicMaterial({ color: 0x0000ff }),
    new THREE.MeshBasicMaterial({ color: 0x00ff00 }),
    new THREE.MeshBasicMaterial({ color: 0xff00ff }),
    new THREE.MeshBasicMaterial({ color: 0x00ffff }),
    new THREE.MeshBasicMaterial({ color: 0xffff00 })
  ];

  // 將立方體新增到場景中
  const cube = new THREE.Mesh(new THREE.BoxBufferGeometry(0.2, 0.2, 0.2), materials);
  cube.position.set(1, 1, 1);
  scene.add(cube);

  // 使用three.js設定渲染：建立渲染器、掛載相機
  const renderer = new THREE.WebGLRenderer({
    alpha: true,
    preserveDrawingBuffer: true,
    canvas: canvas,
    context: gl
  });
  renderer.autoClear = false;

  // API 直接更新相機矩陣
  // 禁用矩陣自動更新
  const camera = new THREE.PerspectiveCamera();
  camera.matrixAutoUpdate = false;


  // 使用“immersive-ar”初始化 WebXR 會話
  const session = await navigator.xr.requestSession("immersive-ar");
  session.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl)
  });

  const referenceSpace = await session.requestReferenceSpace('local');

  // 建立一個渲染迴圈，允許我們在 AR 檢視上繪圖
  const onXRFrame = (time, frame) => {
    session.requestAnimationFrame(onXRFrame);

    // 將圖形幀緩衝區繫結到 baseLayer 的幀緩衝區
    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer)

    // 檢索裝置的姿態
    // XRFrame.getViewerPose 可以在會話嘗試建立跟蹤時返回 null
    const pose = frame.getViewerPose(referenceSpace);
    if (pose) {
      // 在移動端 AR 中，只有一個檢視
      const view = pose.views[0];

      const viewport = session.renderState.baseLayer.getViewport(view);
      renderer.setSize(viewport.width, viewport.height)

      // 使用檢視的變換矩陣和投影矩陣來配置 THREE.camera
      camera.matrix.fromArray(view.transform.matrix)
      camera.projectionMatrix.fromArray(view.projectionMatrix);
      camera.updateMatrixWorld(true);

      // 使用 THREE.WebGLRenderer 渲染場景
      renderer.render(scene, camera)
    }
  }
  session.requestAnimationFrame(onXRFrame);
}

• 

• 相容性：作為 W3C 的前沿標準，目前主要是 Chrome 在推進。市面上瀏覽器對 WebXR 的支援整體較弱，後面會介紹相關的相容庫和現成的解決方案。

模型觀察者： model-viewer ^[2]

• 谷歌實現的一個 web component，可用於檢視 Web 上的 3D 模型並與之互動

<script type="module" src="http://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
  ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
  alt="A 3D model of an astronaut"
  ar
  auto-rotate
  camera-controls></model-viewer>

• 實際效果：

Unity

作為知名的 3d 遊戲引擎，也有相應的 WebWR 支援庫

• unity-webxr-export： github.com/De-Panther/… ^[3]

社群生態

• XR Swim ： 為開發者提供了一個釋出 WebXR 內容的統一平臺，相當於網頁端 AR/VR 應用領域的 Steam 平臺。

挑戰

• 如何保持低延遲、高精度的場景，以及快速處理資料進行渲染和展示動畫的能力。

• 傳統的通訊方法速度不夠快。檢視場景產生的大量資料可能超出渲染限制。

WebAR

優缺點

和 WebXR 有相似的優缺點。

• 優點：跨平臺、傳播方便（ URL 的格式傳播）

• 缺點：

• 各瀏覽器標準不統一

• 3D 內容載入慢，無法實現複雜的內容

• 渲染質量低

• 無法實現複雜互動（受限於瀏覽器傳統互動方式）

WebAr 框架及關鍵原理

• 效果如下： codepen 地址 ^[14] 、 識別圖片地址 ^[15]

• 還有一些獨立功能的框架：

• 識別與追蹤：Tracking.js、JSFeat、ConvNetJS、deeplearn.js、keras.js 。 獲取到影片流之後的工作就是識別和追蹤 。不管是對於 native AR 還是 WebAR，目前的識別演算法與框架已經非常成熟，難就難在識別之後如何跟蹤，如何更好更穩定更高質量的跟蹤。

  渲染與互動：A-Frame、Three.js、Babylon.js、Pixi.js、WebGL

• A-Frame：基於 Three.js 的開源框架，可以在 HTML 中直接配置場景，適用於簡單的 3D 場景搭建

• 方式一：在前端直接處理影片流。在前端直接進行影象處理，可以用 Tracking.js 和 JSFeat。這兩個庫類似，都是在前端做計算機視覺的，包括提取特徵點、人臉識別等。

• 方式二：前端傳輸影片流給後端，後端處理完畢返回結果到前端，目前有一些雲識別服務就是如此。

• 框架庫實現原理：上面提到的 AR 框架實現原理大都如下圖所示：

效能方案

• 把純計算的程式碼移到 WebGL 的 shader 或 Web Worker 裡

  WebAssembly

  gpu.js

  用濾波演算法（比如卡爾曼濾波）將卡頓降到更小，讓使用者從視覺感受上似乎更流暢

• 將簡單的 JavaScript 函式轉換為著色器語言並編譯它們，以便它們在您的 GPU 上執行。如果 GPU 不可用，函式仍將在常規 JavaScript 中執行。

• 適用於事先計算或實時性要求不高的程式碼，如佈局演算法

• shader 可以用於加速只和渲染（重繪）有關的程式碼，無關渲染的程式碼放入 shader 中反而會造成重複計算

• WebGL 呼叫 GPU 加速

• Web Worker

市場化解決方案

• Kivicube：

  www.kivicube.com/

• 建立 AR、VR 與 3D 場景，並在通用的 Web 平臺上分享它們

• AR Quick Look： www.kivicube.com/ar-quick-lo… ^[16]

• 示例：

  訪問地址 ^[17] 、

  識別圖片地址

• Apple AR Quick Look：

  http://www.kivicube.com/ar-quick-look

• 給開發者提供了便捷的3D模型預覽和分享的工具

• iPhone 和 iPad 的應用程式或者網站中嵌入 Quick Look 檢視，以 3D 或 AR 形式顯示虛擬物件的 USDZ 檔案

擴充套件

• 企業 AR：2021 年的 7 個實際用例：

  http://arvrjourney.com/enterprise-ar-7-real-world-use-cases-for-2021-81ea0319b8e5

• 主流領域：遠端協助、醫療診斷、銷售、培訓、物流、製造、原型設計

相關資料

• Google AR：

• github： github.com/google-ar ^[18]

• AR Core 站點： developers.google.com/ar ^[19]

• WebXR：

• google： developers.google.com/ar/develop/… ^[20]

• w3c： www.w3.org/TR/webxr/ ^[21]

• 相關 API 官方示例： immersive-web.github.io/webxr-sampl… ^[22]

• MDN： developer.mozilla.org/zh-CN/docs/… ^[23]

• A Gentle Introduction To WebXR： arvrjourney.com/a-gentle-in… ^[24]

• WebAR與小程式AR極速入門教程： juejin.cn/post/695158… ^[25]

• 萬字乾貨介紹WebAR的實現與應用：mp.weixin.qq.com/s?__biz=Mzg…

• Web 前端中的增強現實（AR）開發技術： segmentfault.com/a/119000001… ^[26]

• Augmented Reality in 10 Lines of HTML： medium.com/arjs/augmen… ^[27]

• 資源：

• Mixamo： www.mixamo.com/#/ ^[28]

參考資料