元宇宙下的前端現狀
↓ 推薦關注↓
資本熱詞:Metaverse
-
7 月 28 日 扎克伯格表示,該公司正在組建一個產品團隊,致力於元宇宙(Metaverse)的開發。“未來五年內,將 Facebook 從社交媒體網路轉變為一個元宇宙公司。”
-
英偉達通過一部紀錄片自曝:“今年 4 月份那場釋出會,全部是合成的”
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b8d4cfe241d1a5e99a9cc6971121b4c57746cb73ab2ad20ea942f9de39fb02ffa.jpg)
-
今年3月初,“元宇宙第一股” 的美國多人線上 3D 創意社群 Roblox(羅布樂思) 已在紐交所上市,而其當天股價暴漲 54.4%
-
騰訊拿下了 Roblox 中國區代理
-
2020 年 12 月,騰訊 CEO 馬化騰表示,移動網際網路時代已經過去,全真網際網路時代才是未來。
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393d9044859123c44096cb7a9e03430f2d67e37b1a0d1aa8903674ce376e53d42d3.jpg)
-
遊戲公司 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 + 旅遊:導航、門店提示、廣告、優惠活動提示等等
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af983937993cb62f1c48c1af0503790bf6bb9ca20fc6318a2afc39267e7f5f0fd4a5ee6.jpg)
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b995e4cf9df1b0219695d9af42e3318ff7babf51f7a424674651df44ce5883e36.jpg)
-
購物:AR 試鞋、試衣、試妝
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bc8c6864152a926828bb6c15cf3ab436bda5ac0a044d6765f158893da8791d012.jpg)
-
遊戲:
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b089e216fbb9d221ac3cd28ec990cea0f4ff29d23403415a1b42e43a7e7b6ad20.jpg)
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 的支援整體較弱,後面會介紹相關的相容庫和現成的解決方案。
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b192e748228c50d7b50a0b33bf05f7cc9ff771ef84fd660ce150b37729c37e787.jpg)
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4bde775ebdc75bf240a8f6bca252b5dbedda22b748f7d9c882e8a076296c8895ec.jpg)
模型觀察者: 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>
-
實際效果:
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229b648ace0c5d8f4c326f195869c2cca094d9c19f80e3aa26edcd6e1dd80d0d600c.jpg)
Unity
作為知名的 3d 遊戲引擎,也有相應的 WebWR 支援庫
-
unity-webxr-export: github.com/De-Panther/… [3]
社群生態
-
XR Swim : 為開發者提供了一個釋出 WebXR 內容的統一平臺,相當於網頁端 AR/VR 應用領域的 Steam 平臺。
挑戰
-
如何保持低延遲、高精度的場景,以及快速處理資料進行渲染和展示動畫的能力。
-
傳統的通訊方法速度不夠快。檢視場景產生的大量資料可能超出渲染限制。
WebAR
優缺點
和 WebXR 有相似的優缺點。
-
優點:跨平臺、傳播方便( URL 的格式傳播)
-
缺點:
-
各瀏覽器標準不統一
-
3D 內容載入慢,無法實現複雜的內容
-
渲染質量低
-
無法實現複雜互動(受限於瀏覽器傳統互動方式)
WebAr 框架及關鍵原理
-
主要是封裝了:
-
實現 AR 需要:
識別、追蹤和渲染
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393ca130b31aa32fd9b1bce541abda9d589303a1af96ef8742bfb737480d4bd0a6f.jpg)
-
AR SDK : 谷歌 AR 團隊( Google AR )提供 WebARonARKit, WebARonARCore。 均具備運動追蹤、環境感知和光線感應等功能。
-
蘋果: WebARonARKit [4] (源自移動端 ARKit)
-
安卓: WebARonARCore [5] (源自移動端 ARCore)
-
主流AR 框架 : 目前維護和使用比較多的是 AR.js ,另外還有一些其他的:
-
three.ar.js: github.com/google-ar/t… [6]
-
ARToolKit: www.hitl.washington.edu/artoolkit/ [7]
-
JSARToolKit: github.com/kig/JSARToo… [8]
-
argon.js: www.argonjs.io/ [9]
-
awe.js: awe.media/#main [10]
-
tracking.js: github.com/eduardolund… [11]
-
AR.js : 具備上述提到的從資訊獲取到處理、渲染繪製的能力。
-
主要是封裝了:
-
WebRTC:獲取影片流(最關鍵的 API 方法是 getUserMedia() ,實時獲取攝像頭的影片流)
-
JSARToolKit [12] :主要提供了識別和追蹤 marker 的功能。(1999 年釋出,一直更新至今)
-
Three.js、Babylon.js、A-Frame(這幾個都是基於 WebGL 的渲染庫)
-
用十行 HTML 就實現 AR [13] :
<script src="http://aframe.io/releases/0.8.0/aframe.min.js"></script>
<script src="http://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 地址 [14] 、 識別圖片地址 [15]
![](http://mdimg.wxwenku.com/getimg/ccdf080c7af7e8a10e9b88444af98393c2bf04b0f6d7c269192606823e38ff033edd30e2a56ceccb171e3270566f0eb2.jpg)
-
還有一些獨立功能的框架:
-
識別與追蹤: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 框架實現原理大都如下圖所示:
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b1597c4813b92b357a8a69bd8fbbf47646bd877b2c1ec34c1b5d5f0f630d1d84b.jpg)
效能方案
-
把純計算的程式碼移到 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] 、
識別圖片地址
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4baf49eb1345e507a0ab522fb27c1cb52c4f806a3ca2211869d18d78f9637824d9.jpg)
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4b4ecccd75157785f088a2cdc49a06b1089b2a1945c655074e4747efa49158f8d9.jpg)
-
EasyAR:
www.easyar.cn/
-
支援WebAR、小程式 AR、Sense 跟蹤能力,還提供雲識別、姿態\手勢識別服務
![](http://mdimg.wxwenku.com/getimg/356ed03bdc643f9448b3f6485edc229bf07465182bb6f47cb6a5191239509ad1824b86e58f4545da78bd9ef039057558.jpg)
-
8th Wall:
www.8thwall.com/
-
集創造、協作和釋出增強現實專案於一體的平臺,不需要第三方軟體,伺服器設定或外部工具,只需登入,編碼,然後點擊發布
-
建立了一個端到端雲解決方案,用於建立、協作和即時釋出基於瀏覽器的 WebAR 專案
-
示例:
http://github.com/8thwall/web/tree/master/examples/threejs
![](http://mdimg.wxwenku.com/getimg/6b990ce30fa9193e296dd37902816f4be54192e34ff80435249135e996d1822ed98ebbe00c9eb04589b36307252c3452.jpg)
-
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]
參考資料
immersive-web.github.io/webxr-sampl…: http://immersive-web.github.io/webxr-samples/
model-viewer: http://modelviewer.dev/examples/augmentedreality/#ar
github.com/De-Panther/…: http://github.com/De-Panther/unity-webxr-export
WebARonARKit: http://github.com/google-ar/WebARonARKit
WebARonARCore: http://github.com/google-ar/WebARonARCore
github.com/google-ar/t…: http://github.com/google-ar/three.ar.js
www.hitl.washington.edu/artoolkit/: http://www.hitl.washington.edu/artoolkit/
github.com/kig/JSARToo…: http://github.com/kig/JSARToolKit
www.argonjs.io/: http://www.argonjs.io/
awe.media/#main: http://awe.media/#main
github.com/eduardolund…: http://github.com/eduardolundgren/tracking.js
JSARToolKit: http://artoolkit.org/
用十行 HTML 就實現 AR: http://medium.com/arjs/augmented-reality-in-10-lines-of-html-4e193ea9fdbf
codepen 地址: http://codepen.io/jeromeetienne/pen/mRqqzb
識別圖片地址: http://jeromeetienne.github.io/AR.js/data/images/HIRO.jpg
www.kivicube.com/ar-quick-lo…: http://www.kivicube.com/ar-quick-look
訪問地址: http://www.kivicube.com/scenes/zDBaOUJBYX8uwi91vubgiFWooXZAz85V
github.com/google-ar: http://github.com/google-ar
developers.google.com/ar: http://developers.google.com/ar
developers.google.com/ar/develop/…: http://developers.google.com/ar/develop/webxr
[21]
www.w3.org/TR/webxr/:http://www.w3.org/TR/webxr/
immersive-web.github.io/webxr-sampl…: http://immersive-web.github.io/webxr-samples/
developer.mozilla.org/zh-CN/docs/…: http://developer.mozilla.org/zh-CN/docs/Web/API/WebXR_Device_API
arvrjourney.com/a-gentle-in…: http://arvrjourney.com/a-gentle-introduction-to-webxr-d5111304a870
juejin.cn/post/695158…: http://juejin.cn/post/6951588622566948901
segmentfault.com/a/119000001…: http://segmentfault.com/a/1190000014891945
medium.com/arjs/augmen…: http://medium.com/arjs/augmented-reality-in-10-lines-of-html-4e193ea9fdbf
www.mixamo.com/#/: http://www.mixamo.com/#/
作者:宮秋
http://juejin.cn/post/7001419484376350727
- EOF -
伯樂線上
分享IT網際網路職場和精選乾貨文章(原域名已不再維護)。組織 維護10萬+star的開源技術資源庫,包括:Python, Java, C/C++, Go, JS, CSS, Node.js, PHP, .NET 等。
回覆 資源 獲取10萬+star開源資源