英文 | https://blog.logrocket.com/build-augmented-reality-app-flutter/
翻譯 | 楊小愛
在今天的文章中,我們将了解如何使用支援 Android 和 iOS 裝置的插件在 Flutter 中建構增強現實應用程式。
AR 應用程式為我們在相機上的體驗添加資料或視覺效果。流行的示例包括 Instagram 過濾器、Snapchat 過濾器、各種地圖應用程式等。
AR 允許使用者将虛拟對象放置在現實世界中,然後與它們進行互動。AR 應用程式将(我認為)在遊戲中特别流行——像 Microsoft Hololens 和 Google Glass 這樣的 AR 耳機裝置提供真正的遊戲體驗,購物和工業領域。
也許我們中的一個人可以建構一個應用程式,我可以使用它輕松檢查适合我的帽子類型?老實說,在購買和退回不滿意的東西之前,我真的需要它。看,AR 可以幫助我們在家中輕松嘗試。
在今天的文章中,我們将一起來學習以下内容:
- 什麼是 ARCore?
- 什麼是 ARKit?
- 什麼是 ar_flutter_plugin
- 如何使用上述插件?
注意,學習本教程需要我們對 Flutter 有一些基本的知識。如果你是 Flutter 新手,請通過Flutter官方文檔了解一下。
01、什麼是 ARCore?
ARCore 是 Google 的平台,可讓我們的手機感覺環境、了解世界并與資訊互動。并提供一些可跨 Android 和 iOS 裝置通路的API ,進而實作共享的 AR 體驗。
以下是 ARCore 支援的裝置要求。
- IOS系統,需要蘋果手機的系統在iOS 11.0 或更高版本上。
- Android 系統,需要安卓手機裝置的系統在 Android 7.0 或更高版本的 Android 系統。
谷歌的 ARCore 文檔是這樣說的:“從根本上說,ARCore 做了兩件事:在移動裝置移動時跟蹤它的位置,并建立它對現實世界的了解。”
如果您正在尋找一些實際使用 ARCore 的示例,請檢視這些使用 ARCore 的應用程式。其中一些應用 ARCore 來檢視您自己空間中的電子商務産品的尺寸,例如宜家目錄,而另一些則是基于娛樂的,例如星球大戰 AR 遊戲。
02、什麼是 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 的更多資訊。
03、開始入門
我們可以從此下面的位址處下載下傳包含所有預建構 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 來設定管理器
建構并運作您的應用程式。你會看到這樣的 ARView:
建立和删除本地對象
現在,我們需要使用“添加/删除本地對象”按鈕使用 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 檔案為目标。
建構并運作應用程式,然後單擊添加/删除 Web 對象按鈕:
如果要跟蹤 3D 對象的位置或姿勢變化,則需要為此定義錨點。錨點描述或檢測現實世界中的特征點和平面,并簡單地讓您在世界中放置 3D 對象。
注意,特征點是圖像中的獨特位置。例如,角落、路口等。
即使環境随時間發生變化并影響應用程式的使用者體驗,這也可確定對象保持在其放置的位置。
最後,使用 dispose 方法對管理人員進行處置,以釋放資源。
結論
最終的項目位址:https://github.com/himanshusharma89/arcore_example
在今天的文章中,我們了解了如何使用 Flutter 建構增強現實應用程式。對于下一步,您可以嘗試使用手勢旋轉或轉換對象,或者使用 Google Cloud Anchor API 或外部資料庫擷取 3D 對象。
我希望今天的内容對你有用,如果你喜歡今天的内容,記得點贊我,關注我,并分享給你身邊做開發的朋友,也許能夠幫助到他。
最後感謝你的閱讀,祝程式設計快樂!
學習更多技能
請點選下方公衆号
、