點擊上方前端Q，關(guān)注公眾號

回復(fù)加群，加入前端Q技術(shù)交流群

資本熱詞：Metaverse

7 月 28 日扎克伯格表示，該公司正在組建一個產(chǎn)品團隊，致力于元宇宙（Metaverse）的開發(fā)。“未來五年內(nèi)，將 Facebook 從社交媒體網(wǎng)絡(luò)轉(zhuǎn)變?yōu)橐粋€元宇宙公司。”
英偉達通過一部紀(jì)錄片自曝：“今年 4 月份那場發(fā)布會，全部是合成的”

今年3月初，“元宇宙第一股” 的美國多人在線 3D 創(chuàng)意社區(qū) Roblox（羅布樂思）已在紐交所上市，而其當(dāng)天股價暴漲 54.4%

騰訊拿下了 Roblox 中國區(qū)代理
2020 年 12 月，騰訊 CEO 馬化騰表示，移動互聯(lián)網(wǎng)時代已經(jīng)過去，全真互聯(lián)網(wǎng)時代才是未來。

游戲公司 Epic Games 在 4 月獲得 10 億美元投資用來構(gòu)建元宇宙
國內(nèi)方面號稱要打造全年齡段元宇宙世界的 MeteApp 公司，在 Roblox 上市后拿到了 SIG 海納亞洲資本領(lǐng)投的 1 億美元 C 輪融資
字節(jié)跳動于 4 月被曝光已投資 “中國版 Roblox ” 代碼乾坤近億元
陌陌王力表示，未來隨著虛擬現(xiàn)實的進一步發(fā)展，VR/AR 硬件的不斷成熟向家用普及以及人機交互模式的變化，必然會出現(xiàn)新的機會，也就是一種直接將人背后的生活串聯(lián)起來的方式。
阿里前端委員會互動技術(shù)方向重點也是“虛擬角色”和“ AR/VR ”

可以看到：“交互娛樂類資本瞄準(zhǔn)的互聯(lián)網(wǎng)未來 - 元宇宙”

何為元宇宙

首次出現(xiàn)：1992 年尼爾·斯蒂芬森的科幻小說《雪崩》當(dāng)中，在這部小說中講述了大量有關(guān)虛擬化身、賽博朋克等場景。
維基百科：通過虛擬增強的物理現(xiàn)實，呈現(xiàn)收斂性和物理持久性特征，基于未來互聯(lián)網(wǎng)，具有鏈接感知和共享特征的3D虛擬空間。

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

Roblox 提出一個真正的元宇宙產(chǎn)品應(yīng)該具備八大要素，很容易就能讓人聯(lián)想到《頭號玩家》這部電影：

身份：擁有一個虛擬身份，無論與現(xiàn)實身份有沒有相關(guān)性。
朋友：在元宇宙當(dāng)中擁有朋友，可以社交，無論在現(xiàn)實中是否認(rèn)識。
沉浸感：能夠沉浸在元宇宙的體驗當(dāng)中，忽略其他的一切。
低延遲：元宇宙中的一切都是同步發(fā)生的，沒有異步性或延遲性。
多元化：元宇宙提供多種豐富內(nèi)容，包括玩法、道具、美術(shù)素材等。
隨地：可以使用任何設(shè)備登錄元宇宙，隨時隨地沉浸其中。
經(jīng)濟系統(tǒng)：與任何復(fù)雜的大型游戲一樣，元宇宙應(yīng)該有自己的經(jīng)濟系統(tǒng)。
文明：元宇宙應(yīng)該是一種虛擬的文明。

作為大家口中的“互聯(lián)網(wǎng)的最終形態(tài)”，需要如今大熱的包括 AR、VR、5G、云計算、區(qū)塊鏈等軟硬件技術(shù)的成熟。才能構(gòu)建出一個去中心化的、不受單一控制的、永續(xù)的、不會終止的世界。

上面提到的各項技術(shù)，和目前前端關(guān)聯(lián)比較大的，便是 AR、VR。

AR 現(xiàn)狀

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

案例：

AR + 旅游：導(dǎo)航、門店提示、廣告、優(yōu)惠活動提示等等

image.png

購物：AR 試鞋、試衣、試妝

游戲：

WebXR

WebXR 是標(biāo)準(zhǔn)也是概念，指的基于 Web 實現(xiàn)虛擬現(xiàn)實和增強現(xiàn)實的能力。

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

API

API 演進：主要是 google 在推進，從 2016 年開始提出的 WebVR 標(biāo)準(zhǔn)，到由于缺了增強現(xiàn)實這一塊，2018 年改為 WebXR^[1]
相關(guān) API 示例：immersive-web.github.io/webxr-sampl…^[2]
最新動態(tài)：2021 年 4月13日 Chrome 的 90 版本增加新 WebXR API：

WebXR Depth API：獲取用戶的設(shè)備與現(xiàn)實環(huán)境中物體的距離
WebXR AR Lighting Estimation：獲取環(huán)境的光線情況

示例代碼：

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

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

  // 創(chuàng)建一個有不同顏色面的立方體
  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設(shè)置渲染：創(chuàng)建渲染器、掛載相機
  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');

  // 創(chuàng)建一個渲染循環(huán)，允許我們在 AR 視圖上繪圖
  const onXRFrame = (time, frame) => {
    session.requestAnimationFrame(onXRFrame);

    // 將圖形幀緩沖區(qū)綁定到 baseLayer 的幀緩沖區(qū)
    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer)

    // 檢索設(shè)備的姿態(tài)
    // 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);
}
復(fù)制代碼

兼容性：作為 W3C 的前沿標(biāo)準(zhǔn)，目前主要是 Chrome 在推進。市面上瀏覽器對 WebXR 的支持整體較弱，后面會介紹相關(guān)的兼容庫和現(xiàn)成的解決方案。

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

谷歌實現(xiàn)的一個 web component，可用于查看 Web 上的 3D 模型并與之交互

<script type="module" src="https://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>
復(fù)制代碼

實際效果：

Unity

作為知名的 3d 游戲引擎，也有相應(yīng)的 WebWR 支持庫

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

社區(qū)生態(tài)

XR Swim^[5]：為開發(fā)者提供了一個發(fā)布 WebXR 內(nèi)容的統(tǒng)一平臺，相當(dāng)于網(wǎng)頁端 AR/VR 應(yīng)用領(lǐng)域的 Steam 平臺。

挑戰(zhàn)

如何保持低延遲、高精度的場景，以及快速處理數(shù)據(jù)進行渲染和展示動畫的能力。
傳統(tǒng)的通信方法速度不夠快。查看場景產(chǎn)生的大量數(shù)據(jù)可能超出渲染限制。

WebAR

優(yōu)缺點

和 WebXR 有相似的優(yōu)缺點。

優(yōu)點：跨平臺、傳播方便（ URL 的格式傳播）
缺點：

各瀏覽器標(biāo)準(zhǔn)不統(tǒng)一
3D 內(nèi)容加載慢，無法實現(xiàn)復(fù)雜的內(nèi)容
渲染質(zhì)量低
無法實現(xiàn)復(fù)雜交互（受限于瀏覽器傳統(tǒng)交互方式）

WebAr 框架及關(guān)鍵原理

實現(xiàn) AR 需要：識別、追蹤和渲染
AR SDK：谷歌 AR 團隊（Google AR^[6]）提供 WebARonARKit, WebARonARCore。均具備運動追蹤、環(huán)境感知和光線感應(yīng)等功能。
蘋果：WebARonARKit^[7]（源自移動端 ARKit）
安卓：WebARonARCore^[8]（源自移動端 ARCore）
主流AR 框架：目前維護和使用比較多的是 AR.js^[9]，另外還有一些其他的：
three.ar.js：github.com/google-ar/t…^[10]
ARToolKit：www.hitl.washington.edu/artoolkit/^[11]
JSARToolKit：github.com/kig/JSARToo…^[12]
argon.js：www.argonjs.io/^[13]
awe.js：awe.media/#main^[14]
tracking.js：github.com/eduardolund…^[15]
AR.js：具備上述提到的從信息獲取到處理、渲染繪制的能力。
主要是封裝了：

WebRTC：獲取視頻流（最關(guān)鍵的 API 方法是 getUserMedia() ，實時獲取攝像頭的視頻流）
JSARToolKit^[16]：主要提供了識別和追蹤 marker 的功能。（1999 年發(fā)布，一直更新至今）
Three.js、Babylon.js、A-Frame（這幾個都是基于 WebGL 的渲染庫）

用十行 HTML 就實現(xiàn) AR^[17]：

<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>

<body style='margin : 0px; overflow: hidden;'>
 <a-scene embedded arjs='sourceType: webcam;'>
  <a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
  <a-marker-camera preset='hiro'></a-marker-camera>
 </a-scene>
</body>
復(fù)制代碼

效果如下：codepen 地址^[18]、識別圖片地址^[19]
還有一些獨立功能的框架：

A-Frame：基于 Three.js 的開源框架，可以在 HTML 中直接配置場景，適用于簡單的 3D 場景搭建
方式一：在前端直接處理視頻流。在前端直接進行圖像處理，可以用 Tracking.js 和 JSFeat。這兩個庫類似，都是在前端做計算機視覺的，包括提取特征點、人臉識別等。
方式二：前端傳輸視頻流給后端，后端處理完畢返回結(jié)果到前端，目前有一些云識別服務(wù)就是如此。
識別與追蹤：Tracking.js、JSFeat、ConvNetJS、deeplearn.js、keras.js 。獲取到視頻流之后的工作就是識別和追蹤。不管是對于 native AR 還是 WebAR，目前的識別算法與框架已經(jīng)非常成熟，難就難在識別之后如何跟蹤，如何更好更穩(wěn)定更高質(zhì)量的跟蹤。
渲染與交互：A-Frame^[20]、Three.js、Babylon.js、Pixi.js、WebGL

框架庫實現(xiàn)原理：上面提到的 AR 框架實現(xiàn)原理大都如下圖所示：

性能方案

把純計算的代碼移到 WebGL 的 shader 或 Web Worker 里

適用于事先計算或?qū)崟r性要求不高的代碼，如布局算法
shader 可以用于加速只和渲染（重繪）有關(guān)的代碼，無關(guān)渲染的代碼放入 shader 中反而會造成重復(fù)計算
WebGL 調(diào)用 GPU 加速
Web Worker

WebAssembly
gpu.js^[21]

將簡單的 JavaScript 函數(shù)轉(zhuǎn)換為著色器語言并編譯它們，以便它們在您的 GPU 上運行。如果 GPU 不可用，函數(shù)仍將在常規(guī) JavaScript 中運行。

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

市場化解決方案

Kivicube：www.kivicube.com/^[22]

創(chuàng)建 AR、VR 與 3D 場景，并在通用的 Web 平臺上分享它們
AR Quick Look：www.kivicube.com/ar-quick-lo…^[23]
示例：訪問地址^[24]、識別圖片地址

EasyAR：www.easyar.cn/^[25]

支持WebAR、小程序 AR、Sense 跟蹤能力，還提供云識別、姿態(tài)\手勢識別服務(wù)

8th Wall：www.8thwall.com/^[26]

集創(chuàng)造、協(xié)作和發(fā)布增強現(xiàn)實項目于一體的平臺，不需要第三方軟件，服務(wù)器設(shè)置或外部工具，只需登錄，編碼，然后點擊發(fā)布
創(chuàng)建了一個端到端云解決方案，用于創(chuàng)建、協(xié)作和即時發(fā)布基于瀏覽器的 WebAR 項目
示例：github.com/8thwall/web…^[27]