【Flutter】3Dモデルデータ・AR表示の実装方法

記事の概要

本記事では、Flutterで簡単に3Dモデルの表示、ARでの表示をする実装方法とその周辺用語に関して解説する。
実装にはFlutterのプラグインであるmodel_viewer_plusを利用する。
※本記事ではiOSでの実装方法のみを扱う。

前提知識

model_viewer_plusとは

・Flutterで3Dモデルの表示、ARでの表示を簡単に実装できるパッケージ。
・model-viewerをWebViewに埋め込んで表示するウィジェットを提供する。
https://pub.dev/packages/model_viewer_plus

model-viewerとは

・Googleが開発しているオープンソースのプロジェクトであり、Web上で簡単に3Dモデル、ARの表示ができる機能を提供する。
・model-viewerでは、Androidの場合Scene Viewer、iOSの場合AR Quick Lookというネイティブの機能を呼び出すことで3DモデルやARでの表示を実現している。
https://modelviewer.dev/

AR Quick Lookとは

・Appleが提供する機能。3Dモデルの表示やARでの表示機能を提供している。
・AR Quick LookはiOS端末のSafariのみで動作する。
・AR Quick Lookで表示できる3Dモデルデータはusdz形式である必要がある。

Scene Viewerとは

・Googleが提供する機能。3Dモデルの表示やARでの表示機能を提供している。
・ARCoreをサポートするAndroid端末のブラウザで動作する。
・Scene Viewerで表示できる3Dモデルデータはglb/gltf形式である必要がある。

実装手順

model_viewer_plusを利用して3Dモデルの表示と、ARでの表示を実装する。
1. ライブラリのインストール

pubspec.yaml

dependencies:
  model_viewer_plus: ^1.3.3

2. Info.plistに設定値の追加
ios/Runner/Info.plistに以下の値を追加する。

Info.plist

<key>io.flutter.embedded_views_preview</key>
<true/>

3. main.dartの実装

main.dart

import 'package:flutter/material.dart';
import 'package:model_viewer_plus/model_viewer_plus.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text("Model Viewer")),
        // ①ModelViewerウィジェットの各プロパティを設定する
        body: ModelViewer(
          src: 'https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb',
          iosSrc: 'https://modelviewer.dev/shared-assets/models/Astronaut.usdz',
          ar: true,
          autoRotate: true,
          cameraControls: true,
        ),
      ),
    );
  }
}

ModelViewerウィジェットの各プロパティの解説

• src :
  3DモデルのURLを指定する。glbまたはgltf形式を指定する必要がある。
  ここで指定したモデルデータがアプリ内のWebViewに表示される。
  以下のようにURLではなく、あらかじめ3DモデルデータをダウンロードしておきFlutterアセットとして指定して読み込むこともできる。

main.dart

body: ModelViewer(
          src: 'assets/NeilArmstrong.glb',
          ---省略---
        ),

• iosSrc :
  usdz形式の3DモデルのURLを指定する。
  ここで指定したモデルデータがAR Quick Lookで利用される。
  AR Quick Lookはアプリ内のWebViewに表示されている3Dビューアーボタン(画面右下)で呼び出すSafariから起動できる。
  以下のようにURLではなく、あらかじめ3DモデルデータをダウンロードしておきFlutterアセットとして指定して読み込むこともできる。

main.dart

body: ModelViewer(
          iosSrc: 'assets/Astronaut.usdz',
          ---省略---
        ),

• ar :
  デバイスでのAR機能の有効/無効を設定する。

• autoRotate :
  モデルの自動回転機能の有効/無効を設定する。

• cameraControls :
  マウス/タッチによるモデルコントロール機能の有効/無効を設定する。

その他のプロパティに関しては公式のドキュメントを参照。

動作確認

※動作確認のためのデバッグでは、シュミレータではなくiphone SE2実機(iOS:15.6.1)を利用。

1. アプリ起動
   
   srcで指定したデータがアプリ内のWebViewに表示される。

2. 3Dビューアーボタン(画面右下)をタップ
   ※ 3DビューアーボタンはiOS16以上では表示されません。 model_viewer_plusのREADMEに以下のように説明されています。(2023/10/22追記)

Compatibility
・iOS (AR View may not avaliable on iOS 16+)

Safariが起動し、iosSrcに指定したモデルが表示される。

3. Safari上でモデルをタップしAR Quick Lookを起動
   
   ARでモデルの表示が確認できる。

実装コード

今回実装したコード全文

main.dart

import 'package:flutter/material.dart';
import 'package:model_viewer_plus/model_viewer_plus.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text("Model Viewer")),
        body: ModelViewer(
          src: 'https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb',
          iosSrc: 'https://modelviewer.dev/shared-assets/models/Astronaut.usdz',
          ar: true,
          autoRotate: true,
          cameraControls: true,
        ),
      ),
    );
  }
}

まとめ

model_viewer_plusを利用して3Dモデルデータの表示、ARでの表示を簡単に実装することができた。本記事ではiOSのみを扱ったが、model_viewer_plusのREADMEを参考にすれば、Android/Webに関しても簡単に実装ができそうである。

参考

・Appleが提供するusdz形式のサンプル3Dデータ
https://developer.apple.com/augmented-reality/quick-look/
・model-viewer
https://modelviewer.dev/