资本热词: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

--- EOF ---

推荐↓↓↓

“在看和转发”就是最大的支持

元宇宙趋势下的前端现状相关推荐

  1. 35位嘉宾的“2022年元宇宙趋势研判”!丨2022元宇宙云峰会金句集锦

    2022年4月20-21日,巴比特主办的万物起源·2022元宇宙云峰会成功举办. 2天时间里,来自元宇宙产业链的数十位重磅嘉宾将轮番登场,带来15场"主题各异"的精彩演讲,以及6场 ...

  2. 中国移动通信联合会元宇宙产业委员会联席秘书长、北京金山顶尖科技股份有限公司元宇宙研究院院长李正海组织百城万项.石景山元宇宙发展暨工业元宇宙三人行直播第四期活动并做《城市元宇宙体系下的产业发展策略》

    中国移动通信联合会元宇宙产业委员会联席秘书长.北京金山顶尖科技股份有限公司元宇宙研究院院长李正海组织百城万项.石景山元宇宙发展暨 工业元宇宙三人行直播第四期活动并做<城市元宇宙体系下的产业发展策 ...

  3. 元宇宙场景下的实时互动RTI技术能力构建

    元宇宙可谓是处在风口浪尖,无数的厂商都对元宇宙未来抱有非常美好的憧憬.正因如此,许许多多厂商都在用他们自己的方案,为元宇宙更快.更好的实现,在自己的领域贡献力量.LiveVideoStack 2022 ...

  4. 企业数字化转型高级解决方案专家柳京活:元宇宙背景下的大数据之路 l 华坤道威专访

    近两年,元宇宙成为时下热门话题之一,从概念的形成到观念的传播,从技术的创新再到资本驱动的产业迭代升级,可谓是说风头正劲,而"大数据"也成为推动元宇宙发展的关键部分,越来越多企业把& ...

  5. 元宇宙视角下区块链赋能数据价值释放的研究

    元宇宙视角下区块链赋能数据价值释放的研究 摘要: 当人工智能.网络.虚拟现实.区块链.生物技术等多领域技术出现了类似于摩尔定律的指数级增长和积木叠加式创新时,全新升维式的社会组织方式将会到来--元宇宙 ...

  6. 元宇宙概念下的虚拟人|广州华锐互动

      在元宇宙概念的帮助下,可以说2021是元宇宙虚拟人觉醒的一年.无论是企业对虚拟人的大量投资,还是研发机构对虚拟人产品的不断创新,虚拟人作为行业知名品牌,将率先在元宇宙中实现大规模创收,是真人进入虚 ...

  7. 2023元宇宙趋势一:VR/AR推动互联网3D化

    咨询公司 McKinsey and Company 预测,到 2030 年,元宇宙经济提供的聚合潜力可以产生高达5万亿美元的影响.在这个预测周期内,2023年是元宇宙发展早期的关键年份,因为全球各大科 ...

  8. 687亿美元,微软为元宇宙买下第一张门票

     关注ITValue,看企业级最新鲜.最价值报道! 图片来源视觉中国 ▎微软将以687亿美元收购动视暴雪,成为仅次于腾讯和索尼的游戏公司.微软董事长表示,将开创一个游戏的新时代,把玩家和创作者放在第一 ...

  9. 光环:元宇宙概念及生态发展现状与研判——张子良

    摘要:文章内容主要来源于光环国际2022年第三届中国科创者大会张子良老师的分享,原分享名称为"元宇宙行业应用实践探索".讲述了元宇宙的理论知识.元宇宙生态圈及当前发展的情况.提出来 ...

  10. 重磅:字节跳动张一鸣90亿布局元宇宙,下一个时代已经来临

    8月29日,据多家媒体报道,VR(虚拟现实)创业公司Pico发布全员信,证实了该公司被字节跳动收购一事. 内部信中称,Pico将并入字节跳动的VR相关业务,整合字节跳动的内容资源和技术能力,并将在产品 ...

最新文章

  1. linux常用性能分析命令详解#TOP
  2. HTTP Error 500.21
  3. 四、数据仓库和Hive环境搭建
  4. boost::python模块显示如何使扩展类pickleable
  5. 2018一级计算机基础,2018年计算机一级考试计算机基础及Photoshop试题及答案.pdf
  6. 冒泡排序 小白学demo_day2
  7. Java统计文件夹中文件总行数
  8. C# 实现一个基于值相等性比较的字典
  9. C语言,向函数传递一维数组,计算最高分,平均分,人数(要求输入负值时输入结束,且不能超过40人)
  10. node process
  11. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_03 斗地主案例(单列)_1_斗地主案例的需求分析...
  12. 20155337 《网络对抗》 Exp2 后门原理与实践
  13. Spring-web源码解析之HttpRequestHandler
  14. 基于spring boot 轻量级的完全开源商城 mall4j
  15. 【真人手势动画制作软件】万彩手影大师教程 | 预览、保存及发布视频
  16. 无需支付688苹果开发者账号,xcode打包导出ipa,提供他人进行内测
  17. python人脸融合_使用 python 进行 面部合成
  18. 侦探系列-照片隐藏信息提取
  19. iterator的用法
  20. [python ][opencv][图片卡通化]

热门文章

  1. C语言根号下的书写方法
  2. python避障小车_[TPYBoard - Micropython之会python就能做硬件 8] 学习使用超声波模块制作避障小车...
  3. 电赛公开课整理(二),电路基础,截图+模电知识【16000字】【原创】
  4. c++vs解决字符常量过多
  5. webqq linux,Ubuntu下WebQQ桌面化替代方案完美版
  6. qq的 html页面布局,wep.qq webqq网页版QQ怎么登陆
  7. 简练网软考知识点整理-项目配置管理计划
  8. 《麦肯锡方法》读书笔记10
  9. 一个很好的多代理服务器调度软件-ProxyExpert(绿色软件) - 『 软件使用交流 』 - 赢政天下 - YingZheng.com - Powered by Discuz!...
  10. win7驱动程序未经签名可以使用吗_win7系统驱动强制数字签名的问题