前端前沿技术之webAR

简介: 随着用户体验的升级和技术的进步,浏览器中涌现了越来越多的技术。前端也从十年前网页中的纯HTML和CSS技术开始涵盖到服务端、移动端的领域。

AR技术如今越来越火,大家自然希望能把这项技术应用到网页中,于是就有了web AR的概念。AR可以简单被认为是一种实时地把虚拟图像叠加在现实场景中的技术。目前实现AR的方式有两种方法,一种是光学透视式,另一种是视频透视式。光学式透视式就是人们眼前的屏幕上实时地出现特效,这样看起来就和实景合为一体,这样的优点是逼真度更高。视频透视式是把场景实时录下来,然后生成特效和场景合并在一起,这样的优点是同步程度高,还可以对生成的结果根据用户的需求进一步的处理。
1.jpg

WebAR 是如何工作的?
WebAR 利用手机上的传感器来允许在物理世界中放置和跟踪数字材料。通过将这些传感器和智能手机上的计算机视觉技术相结合,AR 技术可以实现动画 3D 内容、目标识别和交互式体验。WebAR 也可以在桌面设备上运行,但由于 PC 被束缚在一个位置,因此受到限制。

随着移动浏览器添加支持功能,WebAR 体验将变得越来越复杂。允许 AR 访问设备的 RGB 摄像头、陀螺仪、加速度计、方向和磁力计,或者将移动设备上的 WebAR 连接到智能可穿戴设备是实现此目的的几种方法。

当前的 Web AR 体验利用了五项关键技术:

  • 来自移动摄像头的媒体流——WebAR 技术通过摄像头流访问同步虚拟世界和物理世界。为了将 AR 体验添加到现实世界的场景中,它利用 RGB 摄像头进行透视和视野范围。
  • 内容管理系统——用户可以使用基于云的内容管理系统 (CMS) 访问 AR 体验,该系统响应各种触发器,例如 QR 码或超链接。用户可以通过简单的相机镜头捕获访问 WebAR,将交互式信息放置在几乎任何地方。
  • 场景理解——为了在物理环境中定位 3D 项目,WebAR 需要场景理解,或者移动设备映射表面并估计周围环境中存在的光量的能力。
  • 兼容的浏览器——浏览器的设计必须具有丰富的视觉效果和交互体验,其中涉及大量数据处理,以及高效运行和低带宽占用的能力,以避免减慢智能手机的运行速度。
  • 应用程序编程接口 (API)——API 将 Web AR 转换为真正连接的应用程序,用户可以在其中通过单一虚拟体验完成各种不同的任务。例如,API 可以允许在线购物者在 WebAR 中试用产品以进行购买。

src=http___p7.itc.cn_images01_20200727_adb08b537f3148ee84b641d27d9cbf3f.png&refer=http___p7.itc.webp.jpg

WebAR的优点

  • WebAR可以轻松地运行在Android、iOS、Windows、Mac系统的Web浏览器上,无需APP,轻松实现跨平台。
  • WebAR 可以实现扫描识别图呈现3D动画模型、视频、图片、文字、UI按钮等效果,并且支持3D模型交互。
  • WebAR主要是以URL的格式传播,符合微信等社交媒体信息流动的基本技术要求,配合创意策划方案,可以形成爆炸式的病毒营销效果。

WebAR目前存的在一些问题:

  • 各浏览器标准不统一
  • 3D内容加载慢,无法实现复杂的内容
  • 渲染质量低
  • 存在隐私问题
  • 网络限制
相关文章
|
1月前
|
人工智能 前端开发 数据可视化
前端技术的发展趋势是怎样的
【8月更文挑战第4天】前端技术的发展趋势是怎样的
35 1
|
1月前
|
人工智能 前端开发 数据可视化
前端技术的发展趋势
【8月更文挑战第4天】前端技术的发展趋势
43 1
|
26天前
|
前端开发 JavaScript 开发者
震惊!Web 前端 href 与 src 竟有如此差异,快来一探究竟,掌握热门技术核心要点
【8月更文挑战第26天】在Web前端开发中,`href`与`src`是两个常用属性,但其差异常被忽视。`href`(超文本引用)用于创建文档间的链接关系,如链接至外部网页或引入CSS文件;`src`(来源)则用于在文档内嵌入资源,如图片或JavaScript文件。两者在使用场景及加载机制上有所不同:`href`支持并行下载且不阻塞渲染,适合非关键资源加载;而`src`加载时会暂停页面渲染直至资源加载完成,适用于如图片和脚本这类对页面显示至关重要的资源。因此,正确理解并运用这两个属性对于保障网页性能和用户体验至关重要。
38 3
|
26天前
|
存储 移动开发 前端开发
HTML5时代来临,这些新特性你掌握了吗?一篇文章带你玩转Web前端技术潮流!
【8月更文挑战第26天】HTML5(简称H5)作为新一代Web标准,相比HTML4带来了诸多增强功能。
35 2
|
1月前
|
前端开发 JavaScript 项目管理
飞跃前端瓶颈:技术进阶指南精华篇
飞跃前端瓶颈:技术进阶指南精华篇
47 1
|
1月前
|
移动开发 前端开发 JavaScript
前端需要掌握的技术有哪些方面?
前端需要掌握的技术有哪些方面?
75 1
|
1月前
|
存储 前端开发 安全
【海贼王航海日志:前端技术探索】CSS你了解多少?(三)
【海贼王航海日志:前端技术探索】CSS你了解多少?(三)
26 2
|
1月前
|
Web App开发 前端开发
【海贼王航海日志:前端技术探索】CSS你了解多少?(二)
【海贼王航海日志:前端技术探索】CSS你了解多少?(二)
19 2
|
1月前
|
缓存 前端开发 JavaScript
【海贼王航海日志:前端技术探索】CSS你了解多少?(一)
【海贼王航海日志:前端技术探索】CSS你了解多少?(一)
20 2
|
1月前
|
前端开发 JavaScript 数据安全/隐私保护
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
28 1