如何在 Flutter 中構建增強現實應用

2022-05-31 08:49:02

開發前端

在今天的文章中，我們將了解如何使用支持 Android 和 iOS 設備的插件在 Flutter 中構建增強現實應用程序。

AR 應用程序為我們在相機上的體驗添加數據或視覺效果。流行的示例包括 Instagram 過濾器、Snapchat 過濾器、各種地圖應用程序等。

AR 允許用戶將虛擬對象放置在現實世界中，然后與它們進行交互。AR 應用程序將（我認為）在游戲中特別流行——像 Microsoft Hololens 和 Google Glass 這樣的 AR 耳機設備提供真正的游戲體驗，購物和工業領域。

也許我們中的一個人可以構建一個應用程序，我可以使用它輕松檢查適合我的帽子類型？老實說，在購買和退回不滿意的東西之前，我真的需要它。看，AR 可以幫助我們在家中輕松嘗試。

在今天的文章中，我們將一起來學習以下內容：

什么是 ARCore？
什么是 ARKit？
什么是 ar_flutter_plugin
如何使用上述插件？

注意，學習本教程需要我們對 Flutter 有一些基本的知識。如果你是 Flutter 新手，請通過Flutter官方文檔了解一下。

1、什么是 ARCore？

ARCore 是 Google 的平臺，可讓我們的手機感知環境、了解世界并與信息交互。并提供一些可跨 Android 和 iOS 設備訪問的API ，從而實現共享的 AR 體驗。

以下是 ARCore 支持的設備要求。

IOS系統，需要蘋果手機的系統在iOS 11.0 或更高版本上。
Android 系統，需要安卓手機設備的系統在 Android 7.0 或更高版本的 Android 系統。

谷歌的 ARCore 文檔是這樣說的：“從根本上說，ARCore 做了兩件事：在移動設備移動時跟蹤它的位置，并建立它對現實世界的理解。”

如果您正在尋找一些實際使用 ARCore 的示例，請查看這些使用 ARCore 的應用程序。其中一些應用 ARCore 來查看您自己空間中的電子商務產品的尺寸，例如宜家目錄，而另一些則是基于娛樂的，例如星球大戰 AR 游戲。

2、什么是 ARKit？

ARKit 是 Apple 的一套工具，可讓您為 iOS 構建增強現實應用程序。在 iOS 11.0 或更高版本上使用 Apple A9 或更高版本（iPhone 6s/7/SE/8/X、iPad 2017/Pro）的任何人都可以使用 ARKit。對于某些功能，需要 iOS 12 或更高版本。

如果您正在尋找一些 ARKit 動作，請查看 Swift Playground。這是一款專為 iPad 和 Mac 打造的應用，讓學習 Swift 變得有趣。

ARKit 與 ARCore 有許多相似之處，它們的主要區別在于其 Apple 獨有的支持與 SceneKit 和 SpriteKit 配合得很好。我們可以從此處了解有關 ARKit 的更多信息。

3、開始入門

我們可以從此下面的地址處下載包含所有預構建 UI 的入門應用程序，https://github.com/himanshusharma89/arcore_example/tree/starter

在編輯器中打開它，然后構建并運行應用程序：

啟動項目的文件結構如下所示：

main.dart – 整個應用程序的入口點
homeView.dart - 這包含主視圖，有一個導航到 AR 視圖屏幕的按鈕
localAndWebObjectsView.dart - 屏幕顯示從本地和 Web 獲取 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）了解此插件架構內容。

設置插件

01）、添加 Flutter 依賴

在 pubspec.yaml 文件中添加 ar_flutter_plugin：

...
dependencies:
flutter:
  sdk: flutter
ar_flutter_plugin: ^0.6.2
...

02）、安卓配置

更新應用級 build.gradle 文件中的 minSdkVersion：

android {
   defaultConfig {
       ...
       minSdkVersion 24
   }
}

或者在 Android 目錄下的 local.properties 文件中添加 minSdkVersion：

flutter.minSdkVersion=24

并更新應用級 build.gradle 文件：

android {
   defaultConfig {
       ...
       minSdkVersion localProperties.getProperty('flutter.minSdkVersion')
   }
}

03）、iOS 配置

如果您在 iOS 中遇到權限問題，請在您的 iOS 目錄中添加以下 Podfile：

post_install do |installer|
   installer.pods_project.targets.each do |target|
     flutter_additional_ios_build_settings(target)
     target.build_configurations.each do |config|
       # Additional configuration options could already be set here
       # BEGINNING OF WHAT YOU SHOULD ADD
       config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
         '$(inherited)',
         ## dart: PermissionGroup.camera
         'PERMISSION_CAMERA=1',
         ## dart: PermissionGroup.photos
         'PERMISSION_PHOTOS=1',
         ## dart: [PermissionGroup.location, PermissionGroup.locationAlways, PermissionGroup.locationWhenInUse]
         'PERMISSION_LOCATION=1',
         ## dart: PermissionGroup.sensors
         'PERMISSION_SENSORS=1',
         ## dart: PermissionGroup.bluetooth
         'PERMISSION_BLUETOOTH=1',′
         # add additional permission groups if required
       ]
       # END OF WHAT YOU SHOULD ADD
     end
   end
 end

用法

在繼續之前，您需要了解以下 API：

ARView：使用 PlatformARView 創建與平臺相關的相機視圖
ARSessionManager：管理 ARView 的會話配置、參數和事件
ARObjectManager：管理一個 ARView 的所有節點相關的動作
ARAnchorManager：管理錨功能，如下載處理程序和上傳處理程序
ARLocationManager：提供獲取和更新設備當前位置的能力
ARNode：節點對象的模型類

您可以從以下地址處了解更多 API。https://pub.dev/documentation/ar_flutter_plugin/latest/

使用本地或遠程對象

最基本的用途之一是將 3D 對象從資產或網絡放置到屏幕上。

為此，您需要在 pubspec 文件中提供 .gltf 或 .glb 文件，如下所示：

什么是 glTF 或 GLB 文件？

glTF 是 3D 模型和場景的圖形語言傳輸格式。它有兩個擴展：

.gltf：以 JSON/ASCII 格式存儲場景描述，包括節點層次結構、相機和材質
.glb：以二進制格式存儲模型描述

您可以從此地址（https://en.wikipedia.org/wiki/GlTF）處了解有關 glTF 的更多信息。

現在，轉到 localAndWebObjectsView.dart 文件并創建以下變量：

late ARSessionManager arSessionManager;
late ARObjectManager arObjectManager;
//String localObjectReference;
ARNode? localObjectNode;
//String webObjectReference;
ARNode? webObjectNode;

接下來，使用 ARView 小部件更新空容器，如下所示：

ARView(
onARViewCreated: onARViewCreated,
)

在這里，您將 onARViewCreated 方法用于小部件的 onARViewCreated 屬性：

void onARViewCreated(
  ARSessionManager arSessionManager,
  ARObjectManager arObjectManager,
  ARAnchorManager arAnchorManager,
  ARLocationManager arLocationManager) {
// 1
this.arSessionManager = arSessionManager;
this.arObjectManager = arObjectManager;
// 2
this.arSessionManager.onInitialize(
      showFeaturePoints: false,
      showPlanes: true,
      customPlaneTexturePath: "triangle.png",
      showWorldOrigin: true,
      handleTaps: false,
    );
// 3
this.arObjectManager.onInitialize();
}

在上面的代碼中，您正在執行以下操作：

定義 arSessionManager 和 arObjectManager 變量
使用 ARSessionManager 的 onInitialize 方法設置會話屬性
這些設置用于可視化特征點、平面、世界坐標系等。在這里，您使用 customPlaneTexturePath 來引用您的 pubspec 中定義的資產。

另外，使用 ARObjectManager 的 onInitialize 來設置管理器。

創建和刪除本地對象

現在，我們需要使用“添加/刪除本地對象”按鈕使用 onLocalObjectButtonPressed 回調創建或刪除 localObjectNode，如下所示：

Future<void> onLocalObjectButtonPressed() async {
// 1
if (localObjectNode != null) {
  arObjectManager.removeNode(localObjectNode!);
  localObjectNode = null;
} else {
  // 2
  var newNode = 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),
      rotation: Vector4(1.0, 0.0, 0.0, 0.0));
  // 3
  bool? didAddLocalNode = await arObjectManager.addNode(newNode);
  localObjectNode = (didAddLocalNode!) ? newNode : null;
}
}

在這里，我們完成了以下操作：

檢查localObjectNode是否為null，如果不為null則刪除本地對象。

通過提供本地 glTF 文件路徑和類型以及包含節點的位置、旋轉和其他變換的坐標系來創建一個新的 ARNode 對象。

將 newNode 添加到 ARView 的頂層（如 Stack）并將其分配給 localObjectNode。

NodeType 是一個枚舉，用于設置插件支持的節點類型，包括 localGLTF2、webGLB、fileSystemAppFolderGLB 和 fileSystemAppFolderGLTF2。

添加遠程對象

接下來，您需要使用帶有 onWebObjectAtButtonPressed 回調的 Add / Remove Web Object 按鈕，如下所示：

Future<void> onWebObjectAtButtonPressed() async {
if (webObjectNode != null) {
  arObjectManager.removeNode(webObjectNode!);
  webObjectNode = null;
} else {
  var newNode = ARNode(
      type: 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));
  bool? didAddWebNode = await arObjectManager.addNode(newNode);
  webObjectNode = (didAddWebNode!) ? newNode : null;
}
}

上述方法與 onLocalObjectButtonPressed 方法類似，只是 URL 有所不同。在這里，URL 以來自網絡的 GLB 文件為目標。

如果要跟蹤 3D 對象的位置或姿勢變化，則需要為此定義錨點。錨點描述或檢測現實世界中的特征點和平面，并簡單地讓您在世界中放置 3D 對象。

注意，特征點是圖像中的獨特位置。例如，角落、路口等。

即使環境隨時間發生變化并影響應用程序的用戶體驗，這也可確保對象保持在其放置的位置。

最后，使用 dispose 方法對管理人員進行處置，以釋放資源。

結論

最終的項目地址：https://github.com/himanshusharma89/arcore_example

在今天的文章中，我們了解了如何使用 Flutter 構建增強現實應用程序。對于下一步，您可以嘗試使用手勢旋轉或轉換對象，或者使用 Google Cloud Anchor API 或外部數據庫獲取 3D 對象。

我希望今天的內容對你有用，如果你喜歡今天的內容，記得點贊我，關注我，并分享給你身邊做開發的朋友，也許能夠幫助到他。

最后感謝你的閱讀，祝編程快樂！

責任編輯：龐桂玉來源： web前端開發

Flutter 應用程序前端