WebAR开发简介

WebAR 开发使企业能够以独特且高度有趣的方式向客户和员工提供信息。 它提供增强现实 (AR) 内容,人们在智能手机上将其视为视觉叠加。 然而,WebAR 可在手机的普通网络浏览器上运行,无需下载任何应用程序。

WebAR 的多种用途包括帮助零售和在线购物者、培训学生和工人、帮助旅行者导航以及为维护人员和其他员工提供实时帮助。 所有这些和其他应用程序都补充了 WebAR 更常见的娱乐用途,例如视频游戏。

与需要时间和精力下载的传统增强现实应用程序相比,WebAR 的用户采用率更高。 WebAR 相对无缝的特性以及网络更广泛的影响反过来又提高了投资回报率,因为更多人可以享受到相同的体验。 此外,WebAR 体验的开发速度更快、成本更低。 而且可以自动更新它们,无需任何用户操作,这与需要用户下载新版本的传统 AR 应用程序不同。

AR 已经受到消费者的欢迎,这为企业利用 WebAR 技术的众多优势铺平了道路。 事实上,许多企业已经在这个快速增长的领域迈出了第一步。

1、WebAR 支持的浏览器和设备

WebAR 的主要优势在于它得到了广泛的支持。 这项技术几乎可以在任何智能手机上运行。 也就是说,哪些功能在哪些浏览器和设备上运行得最好,存在细微的差异。

在浏览器中,WebAR 适用于所有主要软件包,包括 Chrome、Safari、Firefox、Opera、Edge 等。 就设备而言,WebAR 几乎可以在任何最新的硬件上运行,只要它具有互联网接入和摄像头即可。 然而,AR 的某些特定方面在更新、功能更强大的设备上运行得更好。 屏幕尺寸也会影响用户的体验,因为复杂的功能在更大的屏幕上更容易使用。

WebAR 开发的一个值得注意的好处是,相同的体验可以在各种浏览器和设备上运行。 编写一次,随处运行。 这与为你想要支持的每个平台开发自定义移动应用程序形成鲜明对比。 例如,必须为 iPhone 用户和 Android 用户维护不同的应用程序。

大型科技公司目前支持两种更流行的增强现实引擎:谷歌的 ARCore 和苹果的 ARKit。 后者与其他 Apple 产品线密切相关,包括 iPhone、iPad 和 iPod。 相比之下,ARCore通过通用软件开发工具包(SDK)支持多个不同供应商的移动设备。 数十亿人使用的品牌都可以运行 Google 的 ARCore,例如 LG、华为、摩托罗拉和三星。

谷歌、苹果和其他制造商正在大力投资硬件和软件,以使 AR 无处不在。 市场上的大多数手机都支持 WebAR,这是一种基于网络的增强现实方法,比基于移动应用程序的方法更为广泛。 这使得 WebAR 成为一种有吸引力的方式,可以吸引尽可能广泛的受众,这些受众希望将数字创作与常规环境相融合。

2、最流行的 WebAR 框架

框架使 WebAR 开发过程变得更加容易,为开发人员构建应用程序提供了坚实的基础。 有许多框架可供选择,它们的功能和受欢迎程度各不相同。 他们经常使用 JavaScript 语言,大多数网络浏览器都包含该语言。

流行的开源 WebAR 框架包括 AR.js、JSARToolKit 和 Three.ar.js。 最后提到的是广泛使用的 Three.js 框架的库,使开发人员能够构建利用 Google 和 Apple 功能的基于 Web 的增强现实程序。 AR.js 被认为是一个轻量级且简单的框架,它使用 Vuforia 进行标记和图像跟踪。 它可以与 Three.js 或 A-Frame 库一起使用。

另一个重要的 WebAR 框架称为 X3DOM。 该平台使 Web 开发人员能够将增强现实内容直接合并到 HTML 本身的网页中。 这消除了对任何外部插件或库的需要,因为场景现在是页面的一个组成部分。 正如你已经可以包含带有 HTML 标签的段落或图像一样,X3DOM 允许你包含带有 HTML 标签的 3D 元素。

这些开源 WebAR 框架通常都有一个 GitHub 页面,任何人都可以在其中访问源代码。 这些存储库包含有关如何安装和使用框架的文档。 如果在开发过程中,您对框架本身进行任何修改,你也可以将这些修改贡献给项目。

借助 WebAR 框架,你可以启动全新的增强现实项目,并将 AR 内容添加到现有的 Web 应用程序中。 这是使用这些 Web 框架的一个关键优势:它们为你提供强大的 AR 功能以及 Web 脚本的适应性。

3、顶级 WebAR 工具

WebAR 工具与框架的不同之处在于,它不仅具有组装增强现实产品的基本基础设施,而且还具有多个附加功能来支持整个 WebAR 开发过程。 此类工具的示例包括用于跟踪和修改人的面部或身体的功能,或者用于跟踪对象和图像以及环境的其他方面的功能。 这些工具还可以协助完成开发前后的任务,包括分发。

一个典型的例子是 8th Wall,这是一个流行的 WebAR 平台,它驱动了 RPR 制作的一些特殊的增强现实内容。 借助 8th Wall,开发人员可以利用丰富的资源来制作交互式体验,甚至可以满足最复杂的需求。 许多垂直领域的大型企业都使用这个 WebAR 框架,它使企业能够与一流的合作伙伴合作并取得惊人的效果。

8th Wall 的云编辑器包含代码编辑器、调试器和模板等开发功能。 该产品还支持协作和发布。 使用该框架进行开发时,可以轻松管理代码和资产,同时查看你的创作进展。 此外,该工具与 Three.js、A-Frame 和 PlayCanvas 等通用 3D 框架具有良好的互操作性。

其他 WebAR 工具包括专门专注于增强人脸的 Banuba Face AR,以及 Blippar 和 Zappar。 Blippar 提供开发人员工具包以及自己的开发服务。 与 8th Wall 一样,它可以与 A-Frame 和 PlayCanvas 等 3D 框架进行互操作。 Zappar 还提供了与 8th Wall 类似的工具集,具有面部和图像跟踪以及 WebAR 发布等功能。

开发人员现在可以使用广泛的 WebAR 工具包来简化生产。 你应该使用哪个框架或工具? 这取决于项目的复杂性和开发人员的技能。

4、创造创意资产和环境

开发 WebAR 内容不仅涉及代码,还涉及 3D 内容本身。 因此,有许多技术可以帮助制作创意资产和环境,从而创造引人入胜的体验。

制作增强现实内容涉及向底层场景添加 3D 图形。 从根本上来说,Web 浏览器通过使用称为 WebGL 的 Web 3D 标准来实现此目的。 然而,对于开发人员来说,有更高级别的库可用。 我们已经讨论了其中一些库,因为它们受到 8th Wall 等 WebAR 工具的支持。 例如,Three.js、A-Frame 和 PlayCanvas 都可以与 8th Wall 配合使用。

使用 3D 库增加了另一层技术,同时减少了开发人员的工作量。 如果没有这些库,开发人员将被迫创建更复杂的低级代码。

  • Three.js 和 A-Frame

Three.js 包含添加和修改对象的工具,从而可以使用 JavaScript 生成交互式场景。 A-Frame 通过添加基于 HTML 的结构来补充 Three.js,使生成 3D 内容变得更加简单。

A-Frame 的另一个出色功能是视觉检查器,它允许开发人员查看场景中的任何元素来分析数据。 A-Frame 配备了各种设施:灯光和阴影、可以放置在场景中的音频以及几何形状和材料。 它甚至提供高级功能,例如粒子和其他基于物理的系统。

  • PlayCanvas

PlayCanvas 还使用 WebGL 来生成 3D 图形。 然而,该平台将自己呈现为网页游戏引擎。 它包括一个类似于著名游戏引擎Unity的编辑器。 团队参与者可以在基于浏览器的编辑器中工作时互相聊天。 该技术可实现令人印象深刻的视觉效果和高速交互性。

  • WebGL

WebGL 代表“网络图形库”,它取代了早期的几次尝试,使丰富的体验在互联网上变得可行。 它随后成为网络浏览器的黄金标准,使其成为促进 WebAR 资产开发的理想选择。

WebGL 对较低级别的 OpenGL 进行了扩展,可生成交互式 3D 图形。 通过JavaScript,它能够连接用于开发增强现实场景的框架和工具。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/287542.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习的发展历史(深度学习入门、学习指导)

目录 🏀前言 ⚽历史 第一代神经网络(1958-1969) 第二代神经网络(1986-1998) 统计学习方法的春天(1986-2006) 第三代神经网络——DL(2006-至今) 🏐总结…

2010年之前电脑ubuntu安装nvidia驱动黑屏处理

装好驱动 仿真fps直接到60Hz 陈旧设备 都是非常老旧的电脑,没钱换新电脑,就这么穷…… 电脑详细配置: 冲动 想装显卡驱动提升一下性能,结果……黑了 黑习惯了也无所谓,几分钟就能解决,关键还是太穷&…

docker快速安装Es和kibana

文章目录 概要一、Es二、kibana三、dcoker compose管理四、参考 概要 在工作过程中,经常需要测试环境搭建Es环境,本文基于Es V8.12.2来演示如何快速搭建单节点Es和kibana。 服务器默认已按装docker 一、Es 1:拉取镜像 docker pull elast…

小程序富文本图片宽度自适应

解决这个问题 创建一个util.js文件,图片的最大宽度设置为100%就行了 function formatRichText(html) {let newContent html.replace(/\<img/gi, <img style"max-width:100%;height:auto;display:block;");return newContent; }module.exports {formatRichT…

1.4.1 着色器

着色器&#xff08;Shader&#xff09;是运行在GPU上的小程序&#xff0c;这些小程序为图形渲染管线的某个特定部分而运行&#xff0c;从基本意义上来说&#xff0c;着色器只是一种把输入转化为输出的程序。 一、着色器类QOpenGLShaderProgram QOpenGLShaderProgram是Qt中对着…

Elasticsearch入门及常用命令和Spring中的常用操作

入门 官网 简介 一个分布式的、Restful风格的搜索引擎。支持对各种类型的数据的检索。搜索速度快&#xff0c;可以提供实时的搜索服务。便于水平扩展&#xff0c;每秒可以处理PB级海量数据。 常用术语 索引&#xff1a;与MySQL数据库中的Database相对应类型&#xff1a;与…

【计算机网络】IP 协议

网络层IP协议 一、认识 IP 地址二、IP 协议报头格式三、网段划分1. 初识子网划分2. 理解子网划分3. 子网掩码4. 特殊的 IP 地址5. IP 地址的数量限制6. 私有 IP 地址和公网 IP 地址7. 理解全球网络&#xff08;1&#xff09;理解公网&#xff08;2&#xff09;理解私网&#xf…

MySQL---存储过程详解

目录 一、介绍 二、基础语法 三、变量 四、流程控制 五、参数 六、游标 七、条件处理程序 八、存储函数 一、介绍 存储过程是事先经过编译并存储在数据库中的一段 SQL 语句的集合&#xff0c;调用存储过程可以简化应用开发人员的很多工作&#xff0c;减少数据在数据库和…

科技引领趋势:3D元宇宙展厅在各行业中的应用及其未来展望

随着技术的不断进步&#xff0c;3D元宇宙展厅正逐渐成为各行各业展示产品的新选择。相较于传统的线下展厅&#xff0c;3D元宇宙展厅以其独特的优势&#xff0c;为产品展示和品牌推广提供了全新的可能性。 一、虚拟与现实的完美融合 3D元宇宙展厅是指在虚拟世界中构建的三维展览…

I/O(输入/输出流的概述)

文章目录 前言一、流的概述二、输入/输出流 1.字节/字符输入流2.字节/字符输出流总结 前言 在变量、数组和对象中储存的数据是暂时的&#xff0c;程序结束后它们就会丢失。如果想要永久地储存程序创建的数据&#xff0c;需要将其保存在磁盘文件中&#xff0c;这样就可以在程序中…

Java框架安全篇--Shiro-550漏洞

Java框架安全篇--Shiro-550漏洞 Shiro反序列化源码可以提取&#xff1a; https://codeload.github.com/apache/shiro/zip/shiro-root-1.2.4 JAVA反序列化就不说了&#xff0c;可以参考前面文章 https://blog.csdn.net/m0_63138919/article/details/136751184 初始Apache Sh…

OC 技术 苹果内购

一直觉得自己写的不是技术&#xff0c;而是情怀&#xff0c;一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的&#xff0c;希望我的这条路能让你们少走弯路&#xff0c;希望我能帮你们抹去知识的蒙尘&#xff0c;希望我能帮你们理清知识的脉络&#xff0…

【Linux】-Linux下的编辑器Vim的模式命令大全及其自主配置方法

目录 1.简单了解vim 2.vim的模式 2.1命令模式 2.2插入模式 2.3底行模式 3.vim各模式下的命令集 3.1正常&#xff08;命令模式下&#xff09; 3.1.1光标定位命令 3.1.2 复制粘贴 3.1.3 删除 3.1.4 撤销 3.1.5大小写转换 3.1.6替换 「R」&#xff1a;替换光标所到之处的字符&…

使用llamafile 构建本地大模型运用

安装 https://github.com/Mozilla-Ocho/llamafile 下载 大模型文件&#xff0c;选择列表中任意一个 wget https://huggingface.co/jartine/llava-v1.5-7B-GGUF/resolve/main/llava-v1.5-7b-q4.llamafile?downloadtrue https://github.com/Mozilla-Ocho/llamafile?tabre…

Element UI中日期选择日(date-picker)等其他选择器下拉显示错位、位置错误解决

省流版 给选择器加上唯一key&#xff08;下面的想看就看&#xff09; 问题复现 需求是用一个下拉切换时间维度的选择&#xff0c;分别为年度、季度、月度&#xff0c;但是开发的时候发现&#xff0c;当切换的时候&#xff0c;视图可正常切换&#xff0c;但点击选择时却发现选…

基于nginx 动态 URL反向代理的实现

背景&#xff1a; 我们在项目中在这样一个场景&#xff0c;用户需要使用固定的软件资源&#xff0c;这些资源是以服务器或者以容器形式存在的。 资源以webAPI方式在内网向外提供接口&#xff0c;资源分类多种类型&#xff0c;每种类型的资源程序和Wapi参数都一样。这些资源部属…

STL —— string(3)

目录 1. 使用 1.1 c_str() 1.2 find() & rfind() 1.3 substr() 1.4 打印网址的协议域名等 1.5 find_first_of() 2. string() 模拟实现 2.1 构造函数的模拟实现 2.2 operator[] 和 iterator 的模拟实现 2.3 push_back() & append() & 的模拟实现 2.4 ins…

sqlite3嵌入式开发板命令行方式使用

如何在编译嵌入式版本的sqlite3&#xff0c;请看我上一篇文章 sqlite3 交叉编译-CSDN博客 一、sqlite3命令行方式使用 假如我将编译好的嵌入式的sqlite3放置在如下路径&#xff1a; 进入bin目录进行操作 1.运行sqlite3 运行sqlite3有两种方式 1&#xff09;直接在内存里面…

零拷贝技术、常见实现方案、Kafka中的零拷贝技术的使用、Kafka为什么这么快

目录 1. 普通拷贝 2. 数据拷贝基础过程 2.1 仅CPU方式 2.2 CPU&DMA方式 3.普通模式数据交互 4. 零拷贝技术 4.1 出现原因 4.2 解决思路 4.2.1 mmap方式 4.2.2 sendfile方式 4.2.3 sendfileDMA收集 4.2.4 splice方式 5. Kafka中使用到的零拷贝技术 参考链接 本…

Intellij IDEA构建Android开发环境

Intellij IDEA创建项目时没有Android的选项 进设置&#xff08;Intellij IDEA - Settings - Plugins &#xff09; 再次创建项目可以看到Android的选项 解决Android导入项目时Gradle下载速度慢/超时/失败