元宇宙相關的前端技術
資本熱詞:Metaverse
-
7 月 28 日 扎克伯格表示,該公司正在組建一個產品團隊,致力於元宇宙(Metaverse)的開發。“未來五年內,將 Facebook 從社交媒體網絡轉變爲一個元宇宙公司。”
-
英偉達通過一部紀錄片自曝:“今年 4 月份那場發佈會,全部是合成的”
-
-
今年 3 月初,“元宇宙第一股” 的美國多人在線 3D 創意社區 Roblox(羅布樂思) 已在紐交所上市,而其當天股價暴漲 54.4%
-
騰訊拿下了 Roblox 中國區代理
-
2020 年 12 月,騰訊 CEO 馬化騰表示,移動互聯網時代已經過去,全真互聯網時代纔是未來。
-
-
遊戲公司 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 + 旅遊:導航、門店提示、廣告、優惠活動提示等等
-
-
-
購物:AR 試鞋、試衣、試妝
-
-
遊戲:
-
WebXR
WebXR 是標準也是概念,指的基於 Web 實現虛擬現實和增強現實的能力。其實就是在 Web 上開發 AR(Augmented Reality)和 VR(Virtual Reality)應用的 API, “X” 代表沉浸式體驗中的任何事物。
API
-
API 演進:主要是 google 在推進,從 2016 年開始提出的 WebVR 標準,到由於缺了增強現實這一塊,2018 年改爲 WebXR[1]
-
相關 API 示例:immersive-web.github.io/webxr-sampl…[2]
-
最新動態: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[3]
- 谷歌實現的一個 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>
-
實際效果:
-
Unity
作爲知名的 3d 遊戲引擎,也有相應的 WebWR 支持庫
- unity-webxr-export:github.com/De-Panther/…[4]
社區生態
-
XR Swim[5]:爲開發者提供了一個發佈 WebXR 內容的統一平臺,相當於網頁端 AR/VR 應用領域的 Steam 平臺。
-
挑戰
-
如何保持低延遲、高精度的場景,以及快速處理數據進行渲染和展示動畫的能力。
-
傳統的通信方法速度不夠快。查看場景產生的大量數據可能超出渲染限制。
WebAR
優缺點
和 WebXR 有相似的優缺點。
-
優點:跨平臺、傳播方便( URL 的格式傳播)
-
缺點:
-
各瀏覽器標準不統一
-
3D 內容加載慢,無法實現複雜的內容
-
渲染質量低
-
無法實現複雜交互(受限於瀏覽器傳統交互方式)
WebAr 框架及關鍵原理
-
實現 AR 需要:識別、追蹤和渲染
-
-
AR SDK:谷歌 AR 團隊(Google AR[6])提供 WebARonARKit, WebARonARCore。均具備運動追蹤、環境感知和光線感應等功能。
-
蘋果: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:獲取視頻流(最關鍵的 API 方法是 getUserMedia() ,實時獲取攝像頭的視頻流)
-
JSARToolKit[16]:主要提供了識別和追蹤 marker 的功能。(1999 年發佈,一直更新至今)
-
Three.js、Babylon.js、A-Frame(這幾個都是基於 WebGL 的渲染庫)
-
用十行 HTML 就實現 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>
-
效果如下:codepen 地址 [18]、識別圖片地址 [19]
-
還有一些獨立功能的框架:
-
A-Frame:基於 Three.js 的開源框架,可以在 HTML 中直接配置場景,適用於簡單的 3D 場景搭建
-
方式一:在前端直接處理視頻流。在前端直接進行圖像處理,可以用 Tracking.js 和 JSFeat。這兩個庫類似,都是在前端做計算機視覺的,包括提取特徵點、人臉識別等。
-
方式二:前端傳輸視頻流給後端,後端處理完畢返回結果到前端,目前有一些雲識別服務就是如此。
-
識別與追蹤:Tracking.js、JSFeat、ConvNetJS、deeplearn.js、keras.js 。獲取到視頻流之後的工作就是識別和追蹤。不管是對於 native AR 還是 WebAR,目前的識別算法與框架已經非常成熟,難就難在識別之後如何跟蹤,如何更好更穩定更高質量的跟蹤。
-
渲染與交互:A-Frame[20]、Three.js、Babylon.js、Pixi.js、WebGL
-
框架庫實現原理:上面提到的 AR 框架實現原理大都如下圖所示:
性能方案
-
把純計算的代碼移到 WebGL 的 shader 或 Web Worker 裏
-
適用於事先計算或實時性要求不高的代碼,如佈局算法
-
shader 可以用於加速只和渲染(重繪)有關的代碼,無關渲染的代碼放入 shader 中反而會造成重複計算
-
WebGL 調用 GPU 加速
-
Web Worker
-
WebAssembly
-
gpu.js[21]
-
將簡單的 JavaScript 函數轉換爲着色器語言並編譯它們,以便它們在您的 GPU 上運行。如果 GPU 不可用,函數仍將在常規 JavaScript 中運行。
-
用濾波算法(比如卡爾曼濾波)將卡頓降到更小,讓用戶從視覺感受上似乎更流暢
市場化解決方案
-
Kivicube:www.kivicube.com/[22]
-
-
-
創建 AR、VR 與 3D 場景,並在通用的 Web 平臺上分享它們
-
AR Quick Look:www.kivicube.com/ar-quick-lo…[23]
-
示例:訪問地址 [24]、識別圖片地址
-
EasyAR:www.easyar.cn/[25]
-
-
支持 WebAR、小程序 AR、Sense 跟蹤能力,還提供雲識別、姿態 \ 手勢識別服務
-
8th Wall:www.8thwall.com/[26]
-
-
集創造、協作和發佈增強現實項目於一體的平臺,不需要第三方軟件,服務器設置或外部工具,只需登錄,編碼,然後點擊發布
-
創建了一個端到端雲解決方案,用於創建、協作和即時發佈基於瀏覽器的 WebAR 項目
-
示例:github.com/8thwall/web…[27]
-
Apple AR Quick Look:www.kivicube.com/ar-quick-lo…[28]
-
給開發者提供了便捷的 3D 模型預覽和分享的工具
-
iPhone 和 iPad 的應用程序或者網站中嵌入 Quick Look 視圖,以 3D 或 AR 形式顯示虛擬對象的 USDZ 文件
擴展
-
企業 AR:2021 年的 7 個實際用例:arvrjourney.com/enterprise-…[29]
-
主流領域:遠程協助、醫療診斷、銷售、培訓、物流、製造、原型設計
相關資料
-
Google AR:
-
github:github.com/google-ar[30]
-
AR Core 站點:developers.google.com/ar[31]
-
WebXR:
-
google:developers.google.com/ar/develop/…[32]
-
w3c:www.w3.org/TR/webxr/[33]
-
相關 API 官方示例:immersive-web.github.io/webxr-sampl…[34]
-
MDN:developer.mozilla.org/zh-CN/docs/…[35]
-
A Gentle Introduction To WebXR:arvrjourney.com/a-gentle-in…[36]
-
WebAR 與小程序 AR 極速入門教程:juejin.cn/post/695158…[37]
-
萬字乾貨介紹 WebAR 的實現與應用:mp.weixin.qq.com/s?__biz=Mzg…[38]
-
Web 前端中的增強現實(AR)開發技術:segmentfault.com/a/119000001…[39]
-
Augmented Reality in 10 Lines of HTML:medium.com/arjs/augmen…[40]
-
資源:
-
Mixamo:www.mixamo.com/#/[41]
源自:https://juejin.cn/post/7001419484376350727
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/qAzeF8eVI3NKgRsPfj9Nxg