元宇宙相关的前端技术
大家好,我是 漫步,今天带来一篇文章带你了解哪些跟元宇宙相关的前端技术。喜欢记得关注我并设为星标,方便及时收到更新。
资本热词: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 + 旅游:导航、门店提示、广告、优惠活动提示等等
-
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.jsconst 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 可以在会话尝试建立跟踪时返回 nullconst 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.cameracamera.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"arauto-rotatecamera-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
参考资料
[1]
https://www.w3.org/TR/webxr/
[2]
https://immersive-web.github.io/webxr-samples/
[3]
https://modelviewer.dev/examples/augmentedreality/#ar
[4]
https://github.com/De-Panther/unity-webxr-export
[5]
https://xrswim.com/
[6]
https://github.com/google-ar
- EOF -
相关文章 点击标题可跳转
清华大学:2021 元宇宙研究报告!
前端游戏巨制! CSS居然可以做3D游戏了
50天用JavaScript完成50个web项目
关注下方「前端热榜」,回复 “思维图”
获取公众号所有JS思维图
我是漫步,分享技术,不止前端,下期见~
最后,欢迎加我的微信,拉你进上百人的前端交流群
创作不易,加个点赞、在看 支持一下哦!
元宇宙相关的前端技术相关推荐
- 德纳:Mecha《机甲变形》NFT元宇宙链游开发技术详情
Mecha<机甲变形>元宇宙链游开发技术详情 <机甲变形>是一款完全去中心化的A RPG游戏,玩家在它的虚拟世界里可以尽情的挥洒能量.这款玩赚游戏利用区块链技术,以数字货币和N ...
- 巴比特 | 元宇宙每日必读:5年内元宇宙相关产业规模突破800亿元!合肥高新区发布元宇宙产业发展规划...
摘要:2月14日,<合肥高新区元宇宙产业发展规划(2023-2028)>在中安创谷科技园全球路演中心正式发布.该规划的具体目标包括到2028年,元宇宙相关产业规模突破800亿元:推动建设2 ...
- 元宇宙:虚拟仿真技术的全面提升
在当今数字化的世界中,我们经常听到虚拟现实.增强现实.混合现实等技术的名词,这些技术的应用越来越成熟.其中,虚拟仿真技术是一种通过计算机技术来模拟实际场景和对象的过程,它为我们提供了更多的可能性.而最 ...
- 巴比特 | 元宇宙每日必读:2022年高校招标的元宇宙相关项目达27个,总价格超过6500万元,供应商称元宇宙校园订单增长迅速...
摘要:据链新报道,高校的元宇宙布局是一个规模可观的元宇宙市场需求,据不完全统计,2022年高校招标的元宇宙相关项目达27个,总价格超过6500万元.一位元宇宙校园供应商负责人称,今年下半年以来,元宇宙 ...
- 元宇宙文旅ar技术方案及场景
元宇宙是虚拟世界与现实社会交互的重要平台,作为全新的产业,正以新理念.新业态.新模式与多行业发展深度结合,逐渐成为重组全球要素资源.重塑全球产业结构.改变全球产业发展的关键力量,被称为"万亿 ...
- 元宇宙的八大支撑技术
元宇宙,被称为"互联网的终极形态""人类数字化生存的最高形态",是超越现实世界的虚拟世界.2022年腾讯.苹果.谷歌.亚马逊.脸书都投入了大量资源来概念化&qu ...
- 腾讯申请元宇宙相关商标,惨遭被驳回
根据企查查信息显示:最近,腾讯音乐娱乐科技(深圳)有限公司申请的"律动元宇宙"商标遭到驳回,目前商标状态为等待驳回复审,商标申请日期为 2021 年 9 月. 除了腾讯,此前多家公 ...
- Java 8备受宠爱,HarmonyOS冲刺全球第三大操作系统,全民热议元宇宙|2021十大技术热词
有没有觉得 2021 年过得特别快?如果你的回答是有,那么你的感觉可能是对的.因为在物理世界中,与上个世纪相比,地球自转的速度正在加快,这导致我们现在一天的时间比以前短了一些:在理想丰满现实骨感的现实 ...
- Java 8备受宠爱,HarmonyOS冲刺全球第三大操作系统,全民热议元宇宙|2021十大技术热词...
整理 | 苏宓,于轩 出品 | CSDN(ID:CSDNnews) 有没有觉得 2021 年过得特别快?如果你的回答是有,那么你的感觉可能是对的.因为在物理世界中,与上个世纪相比,地球自转的速度正在加 ...
- 区块链、NFT 与元宇宙中的稀缺性技术
转载原文链接:http://www.btcwbo.com/5878.html 元宇宙是人类创造的虚拟世界,可以沉浸式体验.作为这个世界的一员."门票",NFT半年前完全火了.NFT ...
最新文章
- valgrind——Callgrind检测程序代码的运行时间和调用过程,程序分析性能。
- 企业绩效管理推不动,如何用绩效创造价值?
- java基础-数据类型
- 与Henrik Feldt谈论Suave 1.0
- BZOJ 2333 【SCOI2011】 棘手的操作
- php 反射类,PHP中的反射类
- nginx_lua 学习网站
- python log日志级别_python – 日志记录:如何为处理程序设置最大日志级别
- JavaScript随机排序算法1
- 表贴电阻尺寸与什么有关_0欧电阻存在的意义?看了就懂了
- 数学建模13种常见方法
- pandas DataFrame 分组求和
- html宠物医院制作与实现,基于Web方式的宠物医院管理系统的实现 .doc
- laravel文档工具
- JSZip,saveAs压缩保存文件
- java开发一款推箱子游戏
- Python .format()的详细使用(英文版)
- 7个适合设计小白学的平面设计软件
- ipa在线安装搭建_iOS12.4.1 越狱无法安装?教你百分百安装
- 【软件工程】交付和维护
热门文章
- ConcurrentHashMap源码分析
- 程序员应该坚持写博客
- centos 安装rarlinux
- cnpack代码输入助手失效的解决办法
- php无法禁用,security center无法禁用怎么办
- Mac不用Boot Camp 安装双系统
- 服务器2008r2修改数据,win2008 R2服务器下修改MySQL 5.5数据库data目录的方法
- 整理12种电脑有趣屏保
- Android mc怎么和win10联机,大更新!我的世界手机版/win10版联机完美互通
- 阿里云技术专家入选Apache Member;百度Q1财报:营收241亿元;华为面向全球发布AI-Native数据库……...