Flutter で 3D モデル表示を試してみるメモ

Flutter Forward で発表された 3D モデルの表示を試してみます。試すのと同時に書いているメモなのでうまく動くかもわかりません。

https://github.com/flutter/flutter/wiki/Impeller-Scene

今回試すサンプルリポジトリは ↑

普通に `flutter run` してみる

使った flutter のバージョンは 3.7.0

$ flutter pub get

Error detected in pubspec.yaml:
Unexpected child "models" found under "flutter".
Please correct the pubspec.yaml file at /Users/itome/Projects/github.com/bdero/flutter-scene-example/pubspec.yaml

flutter run の前に flutter pub get で落ちました。どうやら models というセクションに対応できていないっぽいです。

pubspec.yaml の models セクションを見ると下記のように glb ファイルが並んでいます。 glb ファイルは 3D モデルを格納する用のファイル形式で、どうやらここに書いたファイルがアプリ内で使えるらしいです。 assets を使って画像をアプリ内で使うのと同じですね。

  models:
    - models/sky_sphere.glb
    - models/dash.glb
    - models/ground.glb
    - models/coin.glb

stable チャンネルでは未対応だったので、 dev main master それぞれのチャンネルで試してみます。切り替えが面倒だったので fvm を使いました。

$ fvm spawn dev pub get

Spawning version "dev"...
Error detected in pubspec.yaml:
Unexpected child "models" found under "flutter".
Please correct the pubspec.yaml file at /Users/itome/Projects/github.com/bdero/flutter-scene-example/pubspec.yaml

$ fvm spawn main pub get

Spawning version "main"...
Resolving dependencies...
Got dependencies!

どうやら mainチャンネル以降だと問題なく flutter pub get が動くらしいです。

`main`チャンネルで `flutter run` してみる

flutter pub get がうまくいったので flutter run してみます。

$ fvm spawn main run

Spawning version "main"...
Launching lib/main.dart on iPhone 14 Pro in debug mode...
Running Xcode build...
Xcode build done.                                            4.3s
Failed to build iOS app
Error (Xcode): ../../../../.pub-cache/hosted/pub.dev/flutter_scene-0.0.1-dev.1/lib/scene.dart:13:8: Error: Type 'ui.SceneNode' not found.

Could not build the application for the simulator.
Error launching application on iPhone 14 Pro.

flutter_scene パッケージの ui.SceneNode がないと言われました。

改めてリポジトリのREADME.mdを見てみると、 --enable-impeller-3d フラグ付きでビルドした Flutter Engine を使う必要があるみたいです。

Flutter Engine を `--enable-impeller-3d`付きでビルドする

https://github.com/flutter/flutter/wiki/Impeller-Scene

ビルド方法はこちらを参考に進めていきます。

ビルド環境を作る

https://github.com/flutter/flutter/wiki/Setting-up-the-Engine-development-environment

やり方はこちら。ビルドさえできれば良いので最低限の環境だけ作っていきます。

depot_tools をダウンロード

$ git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
$ export PATH=`pwd`/depot_tools:"$PATH"

engine リポジトリをフォークしてクローン

$ git clone https://github.com/itome/engine

.gclient ファイルを作成

$ touch engine/engine/.gclient

.gclient ファイルの中身を以下のように編集

solutions = [
  {
    "managed": False,
    "name": "src/flutter",
    "url": "git@github.com:itome/engine.git",
    "custom_deps": {},
    "deps_file": "DEPS",
    "safesync_url": "",
  },
]

4. `gclient sync` を実行

Flutter Engine をビルドする

環境を作ったら以下のコマンドでビルドできます。実行する場所は engine/src ディレクトリです。

$ ./flutter/tools/gn --enable-impeller-3d --no-lto
$ ./flutter/tools/gn --enable-impeller-3d --no-lto --ios --simulator  --simulator-cpu=arm64
$ ninja -C out/host_debug
$ ninja -C out/ios_debug_sim_arm64

ninja コマンドは M2 Mac で 30 分以上かかりました

ビルドした Flutter Engine を使って `flutter run`

flutter run コマンドに --local-engine フラグを渡すことで先ほどビルドした flutter engine を使うことができるようになります。

$ fvm spawn main run --local-engine-src-path=<engine リポジトリをクローンした場所>/engine/src --local-engine=ios_debug_sim_arm64

Scene1	Scene2

うまく動きました

Flutter で 3D モデル表示を試してみるメモ

普通に flutter run してみる

mainチャンネルで flutter run してみる

Flutter Engine を --enable-impeller-3d付きでビルドする