当前位置: 首页 > Web前端 > HTML

使用 JavaScript 开发AR(增强现实)移动应用的预备知识和环境搭建

时间:2023-03-29 12:49:55 HTML

使用JavaScript开发AR(AugmentedReality)移动应用程序的前期知识和环境搭建多媒体、3D建模、实时跟踪、智能交互、传感等计算机技术被广泛用于模拟文本、图像、3D模型、音乐、视频和程序代码生成的其他虚拟信息,再通过移动设备的摄像头观察到的现实世界中展示给终端用户,虚拟世界与现实世界相得益彰,让终端用户体验到“增强"现实世界的体验。对于前端开发人员来说,一个好消息是,现在我们可以仅使用JavaScript技能来开发支持增强实现的移动应用程序。使用的工具是React-Native+ViroReact。React-Native在国内已经不是新技术了。与另一个通过JavaScript语言开发移动应用程序的Cordova开源项目不同,ReactNative产生的不是运行在移动设备操作系统的WebView控件中的混合应用程序,而是一个真正的原生移动应用程序,使用基本的UI组件是与本机应用程序完全相同。从用户体验的角度来看,React-Native封装的原生应用与用Objective-C或Java编写的原生应用几乎没有区别。ViroReact是一个基于React-Native的开发库,为React-Native开发者提供了一种通过JavaScript语言开发支持AR的跨平台原生移动应用程序的手段。官网:https://docs.viromedia.com/do...虽然只需要一行代码就可以介绍React-Native项目中ViroReact的依赖,但这只是冰山一角:我们打开一个声明上述依赖的React-Native应用npminstall安装依赖后,可以在node_modules文件夹下看到ViroReact的实现。ViroReact官网所宣称的“一次编写,到处运行”的特性在这里也有所体现:ViroReact基于iOS的ARKit和Android的ARCore,提供了一个跨iOS和Android平台的高性能3D渲染引擎。在移动设备上本地运行以获得最佳性能。它支持基于物理的渲染(PBR)、高动态范围(HDR)以及实时光照和阴影,使开发人员能够创建令人惊叹的增强现实场景。使用Viro的物理引擎还可以为开发对象添加真实世界的机械效果,其提供的全功能粒子系统允许渲染烟雾和火焰等特殊效果。Viro平台提供了大量组件,开发人员可以利用这些组件为JavaScript应用程序构建AR体验。与传统的3D渲染和VR相比,AR的亮点在于响应用户现实世界发起的交互请求。本文重点介绍ARCore。在ViroReact库文件夹下的android子文件夹中,我们看到一个名为arcore的文件夹。所以要使用ViroReact,首先要了解什么是ARCore。ARCore是Google提供的一个平台,用于开发Android的AR原生应用程序。它以SDK的形式,为开发者提供了AR应用的三个必备功能:MotionTracking——运动追踪Environmentalunderstanding——环境识别Lightestimation——光源估计MotionTracking当我们移动Android手机时,ARCore会使用一个叫做COM(ConcurrentOdometry&Mapping,平行测距映射),结合手机的硬件传感器,确定手机在现实世界中的准确位置和姿势。当现实世界场景出现在手机摄像头中并发生位移时,ARCore通过一系列算法在图像上标记出特征点,并根据这些特征点计算出位置变化。如果你看一下视频中摄像头中显示的特斯拉汽车,你会发现随着手机位置的变化,摄像头中显示的汽车的3D图像也会发生变化,就好像它是一个存在于场景中的物体一样。现实世界。这个效果是ARCore的功劳:手机摄像头捕捉到的视觉信息,结合手机中的惯性测量单元(InertialMeasurementUnit,简称IMU,由三个单轴加速度计和三个单轴陀螺仪组成)电话设备。通过对得到的惯性测量值进行综合计算,可以渲染出相机中的虚拟物体,随着时间的推移和手机的位移,也可以保证在现实世界中改变位置和方向的效果变化。Environmentalunderstanding-Environmentrecognition在真实世界的水平或垂直表面(如桌面或墙壁)上,相机中出现的一系列特征点,是ARCore尝试识别环境的输入。ARCore使用这些特征点作为输入,在识别出现实世界的平面和边界信息后,开发者可以通过编程方式将一些虚拟物体放置在这些识别出的平台上。Lightestimation-光源估计。我们在相机中观察到的现实世界中的所有物体都被各种强弱不同的光线覆盖,从而形成具有不同灰度的阴影效果。如果通过代码投射到现实世界的虚拟物体不支持光源照射的阴影效果,那么虚拟物体的保真度会大大降低。好消息是ARCore可以检测真实环境中的光照信息。开发者可以使用ARCore捕捉出现在相机中的现实世界的平均光照强度,然后将光照信息投射到虚拟物体上,进一步增加他们的真实感。一个SDK支持这么多强大的功能,谷歌不愧是谷歌!支持ARCore的安卓手机型号列表可以从谷歌官网获取:https://developers.google.com...在三星应用商店或腾讯应用包中搜索ARCore并下载:安装完成后,我们就可以开始了使用ViroReact进行应用程序开发。总结本文首先介绍了增强现实开发领域需要了解的一些最基本的概念和术语,然后介绍了AR开发库ViroReact的跨平台工作特性,并介绍了构建和配置步骤其开发环境。本系列的下一篇文章将具体介绍如何使用ViroReact进行应用开发。