元宇宙相关的前端技术

最新推荐文章于 2024-09-17 01:55:54 发布

2401_83916435

最新推荐文章于 2024-09-17 01:55:54 发布

阅读量815

点赞数 25

分类专栏：程序员文章标签：前端

本文链接：https://blog.csdn.net/2401_83916435/article/details/137134238

版权

程序员专栏收录该内容

546 篇文章 2 订阅

订阅专栏

维基百科：通过虚拟增强的物理现实，呈现收敛性和物理持久性特征，基于未来互联网，具有链接感知和共享特征的3D虚拟空间。
简单点讲就是：我们在虚拟世界中与一个全新的身份一一对应，并且不会间断地“生活下去”
Roblox 提出一个真正的元宇宙产品应该具备八大要素，很容易就能让人联想到《头号玩家》这部电影：
身份：拥有一个虚拟身份，无论与现实身份有没有相关性。
朋友：在元宇宙当中拥有朋友，可以社交，无论在现实中是否认识。
沉浸感：能够沉浸在元宇宙的体验当中，忽略其他的一切。
低延迟：元宇宙中的一切都是同步发生的，没有异步性或延迟性。
多元化：元宇宙提供多种丰富内容，包括玩法、道具、美术素材等。
随地：可以使用任何设备登录元宇宙，随时随地沉浸其中。
经济系统：与任何复杂的大型游戏一样，元宇宙应该有自己的经济系统。
文明：元宇宙应该是一种虚拟的文明。

作为大家口中的“互联网的最终形态”，需要如今大热的包括 AR、VR、5G、云计算、区块链等软硬件技术的成熟。才能构建出一个去中心化的、不受单一控制的、永续的、不会终止的世界。上面提到的各项技术，和目前前端关联比较大的，便是 AR、VR。

AR 现状

有种新瓶装旧酒的感觉，VR、AR 概念大火的时候还是 17、18 年。几年来，AR 被用来创建虚拟的地方游览、设计和协作 3D 模型、游戏、娱乐、购物、营销、学习、可视化等等。从可用到易用，再到体验的升级，这是用户体验 UX 上一轮的主要革新命题，新一轮的用户体验革命会聚焦在如何真正提供体验的价值。目前 AR 在生活中发挥的就是这样的作用。

案例：

AR + 旅游：导航、门店提示、广告、优惠活动提示等等

image.png

购物：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 模型并与之交互

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

auto-rotate

camera-controls>

实际效果：

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

效果如下：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]

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可获取

前端路线图