元宇宙相關的前端技術

資本熱詞:Metaverse

可以看到:“交互娛樂類資本瞄準的互聯網未來 - 元宇宙”

何爲元宇宙

作爲大家口中的 “互聯網的最終形態”,需要如今大熱的包括 AR、VR、5G、雲計算、區塊鏈等軟硬件技術的成熟。才能構建出一個去中心化的、不受單一控制的、永續的、不會終止的世界。上面提到的各項技術,和目前前端關聯比較大的,便是 AR、VR。

AR 現狀

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

案例:

WebXR

WebXR 是標準也是概念,指的基於 Web 實現虛擬現實和增強現實的能力。其實就是在 Web 上開發 AR(Augmented Reality)和 VR(Virtual Reality)應用的 API, “X” 代表沉浸式體驗中的任何事物。

API

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);
}

模型觀察者:model-viewer[3]

<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>

Unity

作爲知名的 3d 遊戲引擎,也有相應的 WebWR 支持庫

社區生態

挑戰

WebAR

優缺點

和 WebXR 有相似的優缺點。

WebAr 框架及關鍵原理

<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>

性能方案

市場化解決方案

擴展

相關資料

源自:https://juejin.cn/post/7001419484376350727

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