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 對象。

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

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