如何在Flutter中构建增强现实应用

AR应用为我们在相机上的体验添加数据或视觉效果。流行的示例包括Instagram过滤器、Snapchat过滤器、各种地图应用程序等。AR允许用户将虚拟对象放置在现实世界中，然后与它们进行交互。AR应用程序将（我认为）在游戏中特别受欢迎——MicrosoftHololens和GoogleGlass等AR耳机设备提供真实的游戏体验、购物和工业领域。也许我们中的一个人可以构建一个应用程序，我可以用它轻松检查哪种类型的帽子适合我？老实说，在购买和退回我不满意的东西之前，我真的需要它。看，AR可以帮助我们在家中轻松尝试。在今天的文章中，我们将一起学习以下内容：什么是ARCore？什么是ARKit？什么是ar_flutter_plugin以及如何使用以上插件？请注意，学习本教程需要我们具备一些Flutter的基础知识。如果您是Flutter新手，请通过Flutter官方文档进行了解。1.ARCore是什么？ARCore是Google的平台，可让我们的手机感知周围环境、了解世界并与信息互动。并提供一些可以跨Android和iOS设备访问的API，从而实现共享的AR体验。以下是支持ARCore的设备要求。IOS系统，要求苹果手机系统为iOS11.0以上版本。Android系统，要求Android手机设备的系统为Android7.0或更高版本的Android系统。谷歌的ARCore文档是这样说的：“从根本上说，ARCore做了两件事：跟踪移动设备移动时的位置，并建立它对现实世界的理解。”如果您正在寻找ARCore的一些实际使用示例，请查看这些使用ARCore的应用程序。其中一些应用ARCore在自己的空间查看电商产品的尺寸，例如宜家目录，而另一些则以娱乐为主，例如星球大战AR游戏。2.ARKit是什么？ARKit是Apple的工具套件，可让您为iOS构建增强现实应用程序。任何在iOS11.0或更高版本上使用AppleA9或更高版本（iPhone6s/7/SE/8/X、iPad2017/Pro）的人都可以使用ARKit。对于某些功能，需要iOS12或更高版本。如果您正在寻找一些ARKit操作，请查看SwiftPlayground。专为iPad和Mac打造的应用程序，让学习Swift充满乐趣。ARKit与ARCore有许多相似之处，主要区别在于其针对Apple的支持与SceneKit和SpriteKit配合良好。我们可以从这里了解更多关于ARKit的信息。3.开始我们可以从这个地址https://github.com/himanshusharma89/arcore_example/tree/starter下载带有所有预构建UI的入门应用程序，在编辑器中打开它，然后构建并运行应用程序：启动项目的文件结构如下所示：main.dart-整个应用程序的入口点homeView.dart-这包含主视图，带有一个导航到AR视图屏幕的按钮localAndWebObjectsView.dart-屏幕显示3D本地和网络对象使用什么是ar_flutter_plugin？ar_flutter_plugin(https://github.com/CariusLars/ar_flutter_plugin)是一个用于AR的Flutter插件，支持Android上的ARCore和iOS设备上的ARKit。您可以同时获得两者！显然，这是一个优势，因为您不必为另一种选择进行开发。另外，你可以从这个地址（https://github.com/CariusLars/ar_flutter_plugin#plugin-architecture）了解这个插件的架构。设置plugin01),添加Flutter依赖，在pubspec.yaml文件中添加ar_flutter_plugin:...dependencies:flutter:sdk:flutterar_flutter_plugin:^0.6.2...02),应用级别Android配置更新minSdkVersionbuild.gradle文件：android{defaultConfig{...minSdkVersion24}}或者在Android目录下的local.properties文件中添加minSdkVersion：flutter.minSdkVersion=24，并更新应用级build.gradle文件：android{defaultConfig{...minSdkVersionlocalProperties。getProperty('flutter.minSdkVersion')}}03),iOSConfiguration如果你在iOS中有权限问题，请在你的iOS目录中添加以下Podfile:post_installdo|installer|安装程序.pods_project.targets.each|目标|flutter_additional_ios_build_settings(target)target.build_configurations.each做|config|#其他配置选项可能已经在这里设置#你应该添加什么的开始config.build_settings['GCC_PREPROCESSOR_DEFINITIONS']||=[##dart:PermissionGroup.相机'PERMISSION_CAMERA=1',##飞镖：PermissionGroup.photos'PERMISSION_PHOTOS=1'，##飞镖：[PermissionGroup.location，PermissionGroup.locationAlways，PermissionGroup.locationWhenInUse]'PERMISSION_LOCATION=1'，##飞镖：PermissionGroup.sensors'PERMISSION_SENSORS=1'，##dart:PermissionGroup.bluetooth'PERMISSION_BLUETOOTH=1',′#addadditionalpermissiongroupsifrequired]#ENDOFWHATYOUSHOULDADDendendend用法在继续之前，您需要了解以下API：ARView：使用PlatformARView创建平台-依赖相机视图ARSessionManager：管理ARView的会话配置、参数和事件ARObjectManager：管理ARView的所有节点相关操作ARAnchorManager：管理锚函数，例如下载处理程序和上传处理程序ARLocationManager：提供获取和更新设备当前位置的能力ARNode:节点对象的模型类你可以从https://pub.dev/documentation/ar_flutter_plugin/latest/了解更多关于API的信息Workingwithlocalorremoteobjects最基本的用途之一是将来自资产或网络的3D对象放置在屏幕上。为此，您需要在pubspec文件中提供一个.gltf或.glb文件，如下所示：WhatareglTForGLBfiles?glTF是一种用于3D模型和场景的图形语言传输格式。它有两个扩展名：.gltf：以JSON/ASCII格式存储场景描述，包括节点层次结构、相机和材质.glb：以二进制格式存储模型描述您可以从这个地址获取它（https://en.wikipedia.org/在wiki/GlTF了解更多关于glTF的信息）。现在，转到localAndWebObjectsView.dart文件并创建以下变量：lateARSessionManagerarSessionManager;lateARObjectManagerarObjectManager;//StringlocalObjectReference;ARNode?localObjectNode;//StringwebObjectReference;ARNode?网络对象节点；接下来，使用ARView小部件更新空容器，如下所示：ARView(onARViewCreated:onARViewCreated,)这里您使用小部件的onARViewCreated属性的onARViewCreated方法：/1this.Manager=Sessionsthis.arObjectManager=arObjectManager;//2this.arSessionManager.onInitialize(showFeaturePoints:false,showPlanes:true,customPlaneTexturePath:"triangle.png",showWorldOrigin:true,handleTaps:false,);//3this.arObjectManager.onInitialize();在上面的代码中，你做了以下事情：定义arSessionManager和arObjectManager变量使用ARSessionManager的onInitialize方法设置session属性这些设置用于可视化特征点、平面、世界坐标系等。在这里，您使用customPlaneTexturePath来引用您的pubspec中定义的资产。此外，使用ARObjectManager的onInitialize来设置管理器。创建和删除本地对象现在，我们需要使用“添加/删除本地对象”按钮通过onLocalObjectButtonPressed回调创建或删除localObjectNode，如下所示：FutureonLocalObjectButtonPressed()async{//1if(localObjectNode!=null){arObjectManager.removeNode(localObjectNode!);localObjectNode=null;}else{//2varnewNode=ARNode(type:NodeType.localGLTF2,uri:"assets/Chicken_01/Chicken_01.gltf",scale:Vector3(0.2,0.2,0.2),position:Vector3(0.0,0.0,0.0),旋转:Vector4(1.0,0.0,0.0,0.0));//3布尔值？didAddLocalNode=awaitarObjectManager.addNode(newNode);localObjectNode=(didAddLocalNode!)?newNode:null;}}这里我们完成了以下操作：检查localObjectNode是否为null，如果不为null，则删除本地对象。通过提供本地glTF文件路径和类型以及包含节点位置、旋转和其他转换的坐标系来创建新的ARNode对象。将newNode添加到ARView的顶层（如Stack）并将其分配给localObjectNode。NodeType是一个枚举，用于设置插件支持的节点类型，包括localGLTF2、webGLB、fileSystemAppFolderGLB和fileSystemAppFolderGLTF2。添加远程对象接下来，您需要使用带有onWebObjectAtButtonPressed回调的添加/删除Web对象按钮，如下所示：webObjectNode=null;}else{varnewNode=ARNode(类型：NodeType.webGLB，uri：“https://github.com/KhronosGroup/glTF-Sample-Models/raw/master/2.0/Duck/glTF-Binary/Duck.glb",scale:Vector3(0.2,0.2,0.2));布尔？didAddWebNode=awaitarObjectManager.addNode(newNode);webObjectNode=(didAddWebNode!)?newNode:null;}}上面的方法和onLocalObjectButtonPressed方法类似，只是URL不同。此处，URL以Web中的GLB文件为目标。如果要跟踪3D对象的位置或姿势的变化，则需要为此定义锚点。Anchors描述或检测现实世界中的特征点和平面，让您可以简单地将3D对象放置在世界中。请注意，特征点是图像中的独特位置。例如，拐角、交叉路口等。这可确保对象留在原处，即使环境随时间发生变化并影响应用程序的用户体验。最后，管理器使用dispose方法释放资源。结语最终项目地址：https://github.com/himanshusharma89/arcore_example在今天的文章中，我们学习了如何使用Flutter构建增强现实应用。下一步，您可以尝试使用手势旋转或变换对象，或者使用GoogleCloudAnchorAPI或外部数据库获取3D对象。希望今天的内容对你有用。如果喜欢今天的内容，记得点赞，关注我，分享给身边做开发的朋友，说不定能帮到他。最后，感谢阅读，祝编程愉快！