元宇宙下的前端現狀
↓ 推薦關注↓
資本熱詞: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
-
相關 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 框架及關鍵原理
-
主要是封裝了:
-
實現 AR 需要:
識別、追蹤和渲染
-
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]
-
還有一些獨立功能的框架:
-
識別與追蹤: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] 、
識別圖片地址
-
EasyAR:
www.easyar.cn/
-
支持WebAR、小程序 AR、Sense 跟蹤能力,還提供雲識別、姿態\手勢識別服務
-
8th Wall:
www.8thwall.com/
-
集創造、協作和發佈增強現實項目於一體的平台,不需要第三方軟件,服務器設置或外部工具,只需登錄,編碼,然後點擊發布
-
創建了一個端到端雲解決方案,用於創建、協作和即時發佈基於瀏覽器的 WebAR 項目
-
示例:
http://github.com/8thwall/web/tree/master/examples/threejs
-
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開源資源