WebAR开发简介

news2025/2/2 2:47:09

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.coloradmin.cn/o/1555371.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

HEVC的Profile和Level介绍

文章目录 HEVCProfile(配置):Level(级别):划分标准 HEVC HEVC(High Efficiency Video Coding),也称为H.265,是一种视频压缩标准,旨在提供比先前的…

Game Audio Programming

音频编程时游戏开发中最容易忽略,学习资源又是很少的环节。接下来,你将和我探索人耳的工作机制。 what is sound? 我们可以解释电视机是如何通过眼睛传递视觉信息的,但却往往无法对听觉信息做出类似的解释。 对声音的科学研究被称为声学&…

PTA-练习10

目录 主串中查找子串 7-29 删除字符串中的子串 7-30 字符串的冒泡排序 主串中查找子串 查找子串在主穿的中出现的位置 函数strstr&#xff08;s1&#xff0c;s2&#xff09;&#xff0c;返回的是s2在s1中出现的位置指针 #include<stdio.h> #include<stdlib.h> #…

酷体体育科技加入飞桨技术伙伴计划,共同打造“AI随身教练”体育分析新模式...

近日&#xff0c;陕西酷体体育科技有限公司正式加入飞桨技术伙伴计划&#xff0c;双方将共同努力在AI体育技术分析领域&#xff0c;创新打造“AI体育”新模式&#xff0c;助力体育训练、康复、人才选拔数智化转型。通过大模型技术赋能体育&#xff0c;持续挖掘AI技术在体育领域…

vscode调试Unity

文章目录 vscode调试UnityC#环境需求开始调试 Lua添加Debugger环境配置联系.txt文件配置Java环境 添加调试代码断点不生效的问题 vscode调试Unity C# 现在使用vscode调试Unity的C#代码很简单&#xff0c;直接在vscode的EXTENSIONS里面搜索“Unity”&#xff0c;第一个就是&am…

【Vue3源码学习】— CH2.5 reactiveEffect.ts:Vue 3响应式系统的核心

reactiveEffect.ts&#xff1a;Vue 3响应式系统的核心 1. 什么是 reactiveEffect&#xff1f;2. 核心机制2.1 依赖收集&#xff08;Track&#xff09;2.2 触发更新&#xff08;Trigger&#xff09;2.3 效果范围&#xff08;effectScope&#xff09; 3. 源码解析 —— track3.1 …

ElasticSearch学习篇11_ANNS之基于图的NSW、HNSW算法

前言 往期博客ElasticSearch学习篇9_文本相似度计算方法现状以及基于改进的 Jaccard 算法代码实现与效果测评_elasticsearch 文字相似度实现方法-CSDN博客 根据论文对文本相似搜索现状做了一个简要总结&#xff0c;然后对论文提到的改进杰卡德算法做了实现&#xff0c;并结合业…

39.基于SpringBoot + Vue实现的前后端分离-无人智慧超市管理系统(项目 + 论文PPT)

项目介绍 随着互联网时代的发展&#xff0c;传统的线下管理技术已无法高效、便捷的管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;国家在环境要求不断提高的前提下&#xff0c;无人智慧超市管理系统建设也逐渐进入了信…

如果有效的编写 ChatGPT 提示?

1. 明确目标&#xff1a;确定使用 ChatGPT 的目的。无论是创意写作、产生想法还是查找信息&#xff0c;知道你想要什么可以让你更有效地使用这个工具。 2. 具体说明&#xff1a;你的提示越具体&#xff0c;ChatGPT 就越能理解你的需求。例如&#xff0c;你可以要求 ChatGPT…

网络编程基本概念(一篇文章掌握基本内容的详细概念,IP,端口号,协议,协议分层,封装和分用,客户端和服务端,请求和回应,两台主机的通信)

IP地址 概念 IP地址主要⽤于标识⽹络主机、其他⽹络设备&#xff08;如路由器&#xff09;的⽹络地址。简单说&#xff0c;IP地址⽤于定位主机的⽹络地址。 就像我们发送快递⼀样&#xff0c;需要知道对⽅的收货地址&#xff0c;快递员才能将包裹送到⽬的地。 IP的格式 IP地址…

Python环境下基于小波变换和机器学习的地震信号处理和识别

天然地震是由地球板块之间的碰撞或挤压引起的自然现象&#xff0c;这种碰撞或挤压导致板块边缘位移和板块内部破裂。非天然地震是指由人类活动引起的地面震动活动&#xff0c;比如矿震、核试验以及人工爆破等。随着社会经济的不断发展&#xff0c;人工爆破在生产生活中得到了广…

OSX-02-Mac OS应用开发系列课程大纲和章节内容设计

本节笔者会详细介绍下本系统专题的大纲&#xff0c;以及每个专题章节的组织结构。这样读者会有一个全局的概念。 在开始前还是在再介绍一下下面这个框架图&#xff0c;因为比较重要&#xff0c;在这里再冗余介绍一下。开发Apple公司相关产品的软件时&#xff0c;主要有两个框架…

【Canvas与艺术】五角星光芒四射的效果展示

【关键点】 三一渐变式光芒的实现。 【效果】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>光芒四射</title><st…

网络安全新视角:数据可视化的力量

在当今数字化时代&#xff0c;网络安全已成为各大企业乃至国家安全的重要组成部分。随着网络攻击的日益复杂和隐蔽&#xff0c;传统的网络安全防护措施已难以满足需求&#xff0c;急需新型的解决方案以增强网络防护能力。数据可视化技术&#xff0c;作为一种将复杂数据转换为图…

IDEA报错:java.nio.charset.MalformedInputException: Input length = 1

今天启动Springboot项目的时候报错&#xff1a; 一、问题 java.nio.charset.MalformedInputException: Input length 1和Input length 2 二、原因 是因为你的配置文件里面有中文或者是你的编码格式不正确导致 三、解决方案 解决方案一&#xff1a; 改变你的编码格式改为UT…

JAVA8 新特性StreamAPI使用

一、使用StreamAPI&#xff0c;操作两个队伍中名字&#xff0c;需求如下&#xff1a; 1、第一个队伍名字为3个字的成员姓名 2、第一个队伍筛选名字为3个字之后的前三个成员 3、第二个队伍筛选姓张的成员 4、第二个队伍筛选姓张的之后跳过前两个成员 5、将两个队伍合并成一个队伍…

利用HIVE的窗口函数进行SQL查询中出现的问题记录

student_info部分数据 score_info部分数据 course_info 1、问题复现 --完整SQL selectsti.stu_id,sti.stu_name,concat_ws(",",collect_set(ci.course_name)) over(partition by sti.stu_id) fromstudent_info sti left joinscore_info sci onsti.stu_idsci.stu_id l…

标题:基于uQRCode的Vue前端二维码生成组件技术探究

摘要&#xff1a;随着移动互联网的普及&#xff0c;二维码作为信息传递的媒介在各类应用中得到了广泛使用。前端开发中&#xff0c;二维码生成功能已成为一个常见的需求。本文将深入探讨如何使用uQRCode库在Vue前端框架中封装一个二维码生成组件&#xff0c;该组件可适用于所有…

银河麒麟服务器操作系统安装SQLite数据库

SQLite&#xff0c;是一款轻型的数据库&#xff0c;是遵守ACID的关系型数据库管理系统&#xff0c;它包含在一个相对小的C库中。它是D.RichardHipp建立的公有领域项目。它的设计目标是嵌入式的&#xff0c;而且已经在很多嵌入式产品中使用了它&#xff0c;它占用资源非常的低&a…

Servlet基础 管理员注册页面

管理员注册页面 index.jsp <% page language"java" import"java.util.*" pageEncoding"UTF-8"%> <% String path request.getContextPath(); String basePath request.getScheme()"://"request.getServerName()":&quo…