元宇宙下的前端現(xiàn)狀
資本熱詞：Metaverse
7 月 28 日 扎克伯格表示，該公司正在組建一個產(chǎn)品團隊，致力于元宇宙（Metaverse）的開發(fā)?！拔磥砦迥陜?nèi)，將 Facebook 從社交媒體網(wǎng)絡轉(zhuǎn)變?yōu)橐粋€元宇宙公司。” 英偉達通過一部紀錄片自曝：“今年 4 月份那場發(fā)布會，全部是合成的” 
今年3月初，“元宇宙第一股” 的美國多人在線 3D 創(chuàng)意社區(qū) Roblox（羅布樂思） 已在紐交所上市，而其當天股價暴漲 54.4% 騰訊拿下了 Roblox 中國區(qū)代理 2020 年 12 月，騰訊 CEO 馬化騰表示，移動互聯(lián)網(wǎng)時代已經(jīng)過去，全真互聯(lián)網(wǎng)時代才是未來。 
游戲公司 Epic Games 在 4 月獲得 10 億美元投資用來構建元宇宙 國內(nèi)方面號稱要打造全年齡段元宇宙世界的 MeteApp 公司，在 Roblox 上市后拿到了 SIG 海納亞洲資本領投的 1 億美元 C 輪融資 字節(jié)跳動于 4 月被曝光已投資 “中國版 Roblox ” 代碼乾坤近億元 陌陌王力表示，未來隨著虛擬現(xiàn)實的進一步發(fā)展，VR/AR 硬件的不斷成熟向家用普及以及人機交互模式的變化，必然會出現(xiàn)新的機會，也就是一種直接將人背后的生活串聯(lián)起來的方式。 阿里前端委員會互動技術方向重點也是“虛擬角色”和“ AR/VR ”
可以看到：“交互娛樂類資本瞄準的互聯(lián)網(wǎng)未來 - 元宇宙”
何為元宇宙
首次出現(xiàn)：1992 年尼爾·斯蒂芬森的科幻小說《雪崩》當中，在這部小說中講述了大量有關虛擬化身、賽博朋克等場景。
維基百科：通過虛擬增強的物理現(xiàn)實，呈現(xiàn)收斂性和物理持久性特征，基于未來互聯(lián)網(wǎng)，具有鏈接感知和共享特征的3D虛擬空間。
簡單點講就是：我們在虛擬世界中與一個全新的身份一一對應，并且不會間斷地“生活下去” Roblox?提出一個真正的元宇宙產(chǎn)品應該具備八大要素，很容易就能讓人聯(lián)想到《頭號玩家》這部電影：
身份：擁有一個虛擬身份，無論與現(xiàn)實身份有沒有相關性。
朋友：在元宇宙當中擁有朋友，可以社交，無論在現(xiàn)實中是否認識。
沉浸感：能夠沉浸在元宇宙的體驗當中，忽略其他的一切。
低延遲：元宇宙中的一切都是同步發(fā)生的，沒有異步性或延遲性。
多元化：元宇宙提供多種豐富內(nèi)容，包括玩法、道具、美術素材等。
隨地：可以使用任何設備登錄元宇宙，隨時隨地沉浸其中。
經(jīng)濟系統(tǒng)：與任何復雜的大型游戲一樣，元宇宙應該有自己的經(jīng)濟系統(tǒng)。
文明：元宇宙應該是一種虛擬的文明。
作為大家口中的“互聯(lián)網(wǎng)的最終形態(tài)”，需要如今大熱的包括 AR、VR、5G、云計算、區(qū)塊鏈等軟硬件技術的成熟。才能構建出一個去中心化的、不受單一控制的、永續(xù)的、不會終止的世界。上面提到的各項技術，和目前前端關聯(lián)比較大的，便是 AR、VR。
AR 現(xiàn)狀
有種新瓶裝舊酒的感覺，VR、AR 概念大火的時候還是 17、18 年。幾年來，AR 被用來創(chuàng)建虛擬的地方游覽、設計和協(xié)作 3D 模型、游戲、娛樂、購物、營銷、學習、可視化等等。從可用到易用，再到體驗的升級，這是用戶體驗 UX 上一輪的主要革新命題，新一輪的用戶體驗革命會聚焦在如何真正提供體驗的價值。目前 AR 在生活中發(fā)揮的就是這樣的作用。
案例：
AR + 旅游：導航、門店提示、廣告、優(yōu)惠活動提示等等 
image.png 
購物：AR 試鞋、試衣、試妝 
游戲： 
WebXR
WebXR 是標準也是概念，指的基于 Web 實現(xiàn)虛擬現(xiàn)實和增強現(xiàn)實的能力。其實就是在 Web 上開發(fā) AR（Augmented Reality）和 VR（Virtual Reality）應用的 API， “X”代表沉浸式體驗中的任何事物。
API
API 演進：主要是 google 在推進，從 2016 年開始提出的 WebVR 標準，到由于缺了增強現(xiàn)實這一塊，2018 年改為?WebXR[1] 相關 API 示例：immersive-web.github.io/webxr-sampl…[2] 最新動態(tài)：2021 年 4月13日 Chrome 的 90 版本增加新 WebXR API： WebXR Depth API：獲取用戶的設備與現(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設置渲染：創(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)
????//?檢索設備的姿態(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);
}
兼容性：作為 W3C 的前沿標準，目前主要是 Chrome 在推進。市面上瀏覽器對 WebXR 的支持整體較弱，后面會介紹相關的兼容庫和現(xiàn)成的解決方案。 
模型觀察者：model-viewer[3]
谷歌實現(xiàn)的一個 web component，可用于查看 Web 上的 3D 模型并與之交互
?
??
??
?
