WebAR 如何改变增强现实的未来

更新日期: 2020-01-07阅读: 2.4k标签: web
作者:Matvii Kovtun
翻译:疯狂的技术
原文:https://perfectial.com/blog/

增强现实技术在开发人员和智能手机用户中越来越受欢迎,但它还是没有在无所不在的技术中占据一席之地。要体验 AR,用户必须安装专用的程序,但经常会在用过几次后就将其删除,甚至根本去下载它。 WebAR 将成为用户不愿意通过下载应用程序体验的解决方案,并且有相当多的证据表明它会成功。


什么是WebAR?

WebAR 是一种增强现实体验,可通过 Web 浏览器而不是应用程序进行访问。它通过使用诸如 WebGL、WebRTC、WebVR 和 api 之类的技术来提供基于 Web 的 AR 体验。简而言之,你只需要一部智能手机即可访问它。

WebAR 使智能手机用户可以通过 web 以最简单的方式发现 AR 技术,没有安装的负担。它简单地打破了障碍,并创建了可以通过 QR 码或链接访问的交互式 3D 模型。目前与基于应用程序的 AR 相比,WebAR 提供了有限的功能,但它已经有了简单的动画、视频和一定程度的交互性功能。此外 WebAR 支持图像目标检测。


WebAR 背后的技术

WebAR 是沉浸式网络的一部分,尽管它不需要应用程序,但仍然有一些技术要求。首先,你的智能手机必须具有陀螺仪、加速度计和 RGB 摄像头等传感器(大多数现代智能手机都配备了此类传感器)才能运行 WebAR 页面。此外你的浏览器应支持 WebXR,该 API 可让用户无需安装额外的插件或软件即可查看 AR/VR 内容,并且已安装了 AR Core(适用于 Android 设备)。

对于 iOS 设备用户,Apple 开发了 AR Quick Look,该扩展使用户可以在 Web 上使用 ARKit。这样可以通过 Web 快速轻松地访问 AR —— AR Quick Look 使用 USDZ 格式的模型。然后在屏幕上显示 AR 图像后,只需轻按一下即可获得AR体验。它可以在 Safari 浏览器和邮件、便笺和消息等内置应用中运行,并允许你查看高质量的 3D 对象。

USDZ 格式是由 Apple 与 Pixar Animation Studio 共同创建的,并允许开发人员为 AR 创建3D模型。这是 USD 格式的扩展,它结合了多个对象(例如图像和文本),并将它们渲染为一个。 USDZ 本身是未加密的 zip 文件,可以通过 Apple 的基于 Python 的工具创建。它还包括一个转换器,可将其他文件格式(如 .fbx,.abc,.gltf,.obj)转换为 USDZ。

还有许多其他工具和框架可帮助开发人员使用 WebAR 扩展沉浸式网络。例如,AR.js 是 Web 上增强现实的开放源代码库,用于改善智能手机上的 WebAR 性能,其中包括基于标记的技术(简化的 QR 码)和基于位置的 AR。它可以轻松执行到 60FPS,并且很容易构建 WebAR 体验。总而言之,为了使现代浏览器能够识别并显示 3D 内容,而不仅仅是像素,“ 3D 内容必须是可组合的,可互操作的且可标准化的”以推动这项技术的发展。


WebAR 如何工作

通常 WebAR 可以作为 AR 真正能够为其用户提供的惊人体验,但是在开发过程中需要考虑很多方面。为了发挥功能和用户友好性,WebAR 应该以以下方式工作。

首先,应该定义设备在 3D 空间中的什么地方——其位置和方向。需要执行此步骤才能在真实世界上同步 3D 图像。有时可以将此过程称为六个自由度,这意味着可以跟踪三个位置轴和三个方向轴。其次,需要暴露摄像机流,其视野和摄像机的透视图。虚拟世界和现实世界的同步也需要此功能。第三,要在无缺陷的 Web 版本中运行 AR,应包括场景理解功能,这意味着设备能够找到放置 3D 对象的表面并具有估算环境中的光线的能力。

与 Facebook 和 Snapchat 一样,基于应用程序的 AR 使用了基于云的 CMS,并基于某种触发、链接、标记甚至用户脸部的 AR 体验。触发器向后端系统发出请求,以发送资源和代码来启动 AR 体验。要快速下载并正常工作,AR 文件大小(4mb)有一定限制。 WebAR 还可以通过触发器(QR 代码或链接)激活,但是它使用 Web 优化来下载内容,但是其大小仍然有限。此外,最好使 QR 码图像保持平整,放在非反射材料上并具有特定尺寸。但是,如果移动设备的计算机视觉 AI 可以检测到图像的某些特征点,则代码最终仍将起作用。


目前 WebAR 功能的限制

尽管为智能手机用户提供了更多可能性,但 WebAR 的功能相当有限; AR 的性能在应用程序上更好。显示 AR 图像的网页对内存的限制是提高 WebAR 性能的障碍之一,因为它直接影响动画的质量。

更重要的是,与基于应用程序的 AR 相比,WebAR 的功能也受到更多限制。例如将物体放在墙上或进行真实世界的测量将是有问题的。与基于应用程序的 AR 开发流程相比,在创建 WebAR 体验期间,开发人员无法访问为其构建设备的所有功能。因此它们只能使用基本功能。

互联网的速度是另一个可能阻碍 WebAR 的因素:它必须具有最高的速度,并且必须不间断地工作,因为 WebAR 需要持续连接到互联网。但是显然随着 5G 的到来,这个问题将不再重要。

如果你想体验 WebAR 的高级功能,可以在 Chrome Canary 上试用,这是给 Chrome 开发人员的实验版,可让你了解新技术的未来。例如,你可以测试 Chacmool demo —— 教育性的 AR 体验,以帮助用户探索古老的 Chacmool 雕塑。


WebAR 的市场意义

常规的基于应用程序的 AR 已被广泛使用,并可供所有人使用。诸如 Snapchat 或 Instagram 之类的应用程序具有“masks”,这已成为一种趋势。宜家和乐高也已经成功实施了这项技术。但是所有这些 AR 应用程序都缺少一样东西——自治。因此 WebAR 很有可能像基于应用程序的应用一样流行,甚至替代它。让我们看一下在商业、营销或日常生活中可能的 WebAR 应用。

第一个也是最令人兴奋的 WebAR 应用可能是搜索查询。 谷歌已经宣布了一个计划,这将使 AR 进入网络搜索。例如,当你查找有关鲨鱼的信息时,可以将动物的动画版本放在真实的背景上;或者你可以尝试一双鞋,看看它们在现实中的样子。后一个功能为在线购物开辟了全新的可能,因为如果客户能够在购买之前先通过与产品的 3D 模型进行交互进行尝试,他们将会对购买更有信心。


可以使用 WebAR 的行业:

  • 电子商务和广告。 WebAR 可以将电子商务体验提升到另一个层次。就营销而言,它将为广告活动提供一个新平台,因为人们只需扫描 QR 码或点击链接即可得到他们喜欢的更具吸引力和互动性的广告。
  • 教育。 WebAR 在教育中的应用可能是一种使学生参与课堂活动,并使整个教育过程更加互动和令人兴奋的好方法。此外它还可以帮助学生在校园内导航
  • 娱乐。将 WebAR 用于娱乐可能是最明显的,因为交互本身确实很有趣。它可以用于游戏甚至电影宣传。Sony Pictures 实际上是使用 WebAR 来宣传《勇敢者的游戏》的,他们通过语音交互提供了真正引人入胜的体验,从而进行激动人心的 3D 冒险。
  • 商业。 WebAR 最有趣的实现之一是 3D AR 名片。当你扫描 QR 码时,手机屏幕上会出现一个交互式卡片。你可以从那里浏览用户的社交媒体、电子邮件等。你的 WebAR 名片还可以让你跟踪分析使用 QR 码的人数。


WebAR 的未来

WebAR 将很快成为主流,并且可能会被营销人员更多地使用。关于 WebAR 最好的事情是,它可以用一种非常简单的方法来访问信息。只需要一次 QR 码扫描或一次点击,就可以在周围任何地方集成、创建一个无需搜索即可获得数据的空间。通过交互式地图将视觉方向叠加在真实背景上,你将轻松找到自己的路。或者当你在汽车站时,可以使用手机扫描空旷的道路,来查看公交车是否会如期到达。

根据 Google 的前 UX 工程师 Jordan Santell 的观点,最可能的发展结果是 AR 更好地适应了 Web 格式,这意味着能更好地了解场景,并为共享的 WebAR 体验创建云空间。WebAR 的进一步发展也可以通过头戴式设备的广泛认可而加速,这可以为整个 AR 提供其他层次的体验。这意味着,当人的真实背景发生变化时,当上下文相关的内容出现时,便可以立即访问信息。

但是在现实中,这种情况不太可能发生,因为 Google 的增强现实头戴式设备并未普及,并且还涉及许多问题,例如个人隐私问题、数据安全性和过度消费等。因此必须通过适当的立法,世界必须学习如何明智地使用这项技术,以使它对所有人都有好处。


总结一下

使 AR 进入 web 可能是这项技术未来的最佳选择。智能手机用户不必安装大量应用程序,WebAR 可以使增强现实更容易访问,并且对业务更有利。使用 WebAR 进行产品数字化,将会把客户关系开创一个新纪元,并极大地丰富了品牌的业务战略。也许在不久的将来,能够通过专用 VR 头盔进行交互的 WebAR 仍将在日常生活中得到广泛使用,但出于商业目的,它的积极应用正在发生。


链接: https://fly63.com/article/detial/8529

前端开发,页面加载速度性能优化,如何提高web页面加载速度

通过技术的角度,来探讨如何提高网页加载速度的方法和技巧,一个网站速度的访问快慢将直接影响到用户体验,对于我们开发来说是应该解决的。

web开发,关于XSS的介绍和案例分析

XSS攻击的全称Cross Site Scripting(跨站脚本攻击),为了避免和样式表CSS混淆而简写为XSS。XSS恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户的目的。

web页面弹出遮罩层,通过js或css禁止蒙层底部页面跟随滚动

通过js或css禁止蒙层底部页面跟随滚动:pc端推荐给body添加样式overflow: hidden;height: 100%;移动端利用移动端的touch事件,来阻止默认行为,若应用场景是全平台我们要阻止页面滚动,那么何不将其固定在视窗(即position: fixed),这样它就无法滚动了,当蒙层关闭时再释放。

关于渐进式 Web 应用,你应该知道的一切

渐进式 Web 应用是利用现代浏览器的特性,可以添加到主屏幕上,表现得像原生应用程序一样的 Web 应用程序。

Web前端知识体系精简

Web前端技术由 html、css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构。

Web的26项基本概念和技术

Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行。今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术。

web浏览器基础知识【web前端】

Web浏览器的主要功能是展示网页资源,即请求服务器并将结果展示在窗口中。地址栏输入URL到页面显示经历的过程、浏览器的主要组件、浏览器渲染...

Web 前端中的增强现实(AR)开发技术

增强现实(以下简称 AR)浪潮正滚滚而来,Web 浏览器作为人们最唾手可得的人机交互终端,正在大力发展 AR 技术。AR 可以简单的理解为一种实时将虚拟图像叠加在现实场景中的技术

神奇的Workbox_让你的 Web 站点轻松做到离线可访问

先了解一下 workbox:不管你的站点是何种方式构建的,都可以为你的站点提供离线访问能力。就算你不考虑离线能力,也能让你的站点访问速度更加快。几乎不用考虑太多的具体实现,只用做一些配置...

原生js判断用户是否操作了web页面

用户是否操作了web页面,我们可以在一定时间内根据用户是否触发了某些事件进行判断。比如用户是否点击,是否按键,是否移动了鼠标等

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!