随着移动硬件的加速发展,应用程序开发人员倾向于重新考虑增强现实技术(下文简称AR)在增强用户体验方面更好地满足客户需求的重要性?请参阅维基百科的一个解释:
增强现实(AR)是一种真实世界环境的交互式体验,其中驻留在真实世界中的对象通过计算机生成的感知信息得到增强。AR可以定义为一个具备三个基本特征的系统:真实世界和虚拟世界的结合、实时交互、虚拟和真实物体的精确3D注册。
本博客将不探讨AR可能发挥重要作用的场景。相反,Jerry将介绍一种开发方法,使开发人员能够利用AR生成应用程序,而不必对计算机图形有深入的了解。
这种方法由纯JavaScript技术堆栈组成:React Native和ViroReact的组合。
Jerry介绍了如何使用Cordova打包混合移动设备过去的应用:
一步一步为Android创建一个定制的Cordova插件,并在你的UI5应用中使用它一步一步地为Android创建一个定制的Cordova插件,并在UI5应用程序中使用它如何使用定制插件通过Cordova将UI5应用程序打包到移动设备上进行调试
与Cordova相比,React Native有着截然不同的设计思想:Cordova可以很容易地允许现有的web应用程序在不同的移动平台下运行,但会造成一些性能损失,而React Native构建的应用程序可以正常运行更像是一个本地移动应用程序。
关于这两个技术栈的具体比较,请参阅本文。
ViroReact,一个供开发人员使用React native快速构建本地跨平台AR应用程序的平台。它的网站提供了许多分步指南,通过这些指南,您可以很快获得一个运行中的Hello World应用程序,并启用AR。
尽管下面只提供了一个声明代码,将ViroReact的依赖性引入您的React本机应用程序,但这只是冰山一角。
当我们使用react viro在其包.json并执行npm安装,很多工件自动下载到node_modules文件夹:
展开文件夹react viro,我们可以找到两个单独的文件夹android和ios,其中包含每个平台对应的库代码。这种机制意味着ViroReact如何实现AR特性的跨平台支持。上面的android文件夹下的arcore\u客户端是什么意思?
在深入研究源代码之前,让我们先了解一些必备知识。在ViroReact网站上,有文件证明iOS的ARKit和Android的ARCore都是受支持的。
在这个博客中,我选择了Android平台,这意味着我将专注于ARCore。还记得前面提到的arcore\u客户端文件夹吗?
让我们先来看看我的同事王利欧开发的一些实例:
太棒了,不是吗?
下面是如何开发这样的应用程序并使其在您的Android手机上运行的步骤。
作为第一步,ARCore应该安装在Android手机上。
ARCore是谷歌构建增强现实体验的平台。使用不同的API,ARCore使您的手机能够感知其环境,了解世界,与信息互动。
查看谷歌网站上支持的设备列表,并按照相应的说明将ARCore安装到您的设备中:
在ViroReact网站上有一个很好的初学者教程(就像我们的SAP UI5教程一样)。
只需按照那里的步骤操作,最后您就会得到一个Hello在现实世界中放置一些计算机生成的虚拟对象的世界应用程序:
事实上,我的同事Leo的AR car演示也是基于本教程,因此我将介绍Leo在Hello World教程的基础上添加的delta部分。
在React Native中包.json文件,将项目命名为"ViroSample",并声明React Native和ViroReact的依赖关系:
执行以下两个命令行:
React Native startreact native run android
在android文件夹下可以找到对应生成的android平台Java源代码。最重要的是主活动.java,其中包.json注入:
和主应用程序.java,React Native JavaScript模块的入口点被注入到Android回调getJSMainModuleName中:
我认为ViroReact开发的一般过程包括三个主要步骤:匹配、替换和删除增强
匹配步骤
当开发人员将计算机生成的虚拟对象与现实世界混合时,他们必须决定在真实环境中哪些地方可以容纳虚拟对象,并告诉AR应用程序确切的位置。在基于ViroReact的AR应用程序中,这是通过标记实现的。参见下面的一个例子。
作为它的名字提示,这个标签声明了一个标记,它引导ViroReact以虚拟对象应该放在的确切位置。只要最终用户打开设备摄像头并在现实世界中检测到与标记所代表的对象完全相同的真实对象,大数据应用,我们就将此过程称为"匹配",ViroReact将自动用另一个准备好的虚拟对象替换标记(将很快引入)。只要标记与现实世界中的某个对象匹配,则替换过程将自动完成,而无需开发人员进行任何额外编码。
标记是应用程序中的占位符,可以有多种类型,当然,ViroARImageMarker将Image作为标记类型,构建云服务器,大数据的数据库,图像标记表示为上面第44行中定义的名称"logo"。
在上面的示例中,名为"logo"的标记由以下代码创建:
createTargets API的输入是存储在项目文件夹中的图像文件:
这是在youtube演示视频中,Leo首先在屏幕上显示此图像的原因,然后通过手机摄像头扫描,图像标记被准备好的汽车3D模型替换
替换步骤
如前所述,在这一步中,开发者除了提供一个要用图像标记替换的3D模型外,没有什么可做的。
ViroReact提供了标签,它表示由纯模型(.obj文件)和一系列材质纹理组成的3D汽车模型。
下面是这个汽车演示的obj文件,通过3D设计软件打开:
在Paint 3D软件中,我们可以拖动它并在其上进行360度查看。你可以从这段视频中看到动态效果:
你可能会认为车型表面没有颜色,看起来一点也不花哨。我也是。这就是为什么我们也需要准备纹理。
在项目文件夹中,六个不同的图像文件存储在那里作为模型纹理的原始材料。
使用这些纹理图像文件创建彩色材料,最后在youtube视频中生成有光泽的汽车模型。
增强步骤