はじめに

日本Androidの会浜松支部と香川支部の共同開催のPLATEAUのハッカソン
香川はデジタルハリウッド高松STUDIO、浜松はSOUで行われました。
PLATEAUの詳細は公式サイトを見てもらうのがわかりやすいです。
公式サイトの言葉を借りると「国土交通省が主導する、日本全国の3D都市モデルの整備・活用・オープンデータ化プロジェクト」になります。
PLATEAUで提供されるデータはUnityやThree.jp、AR.jsなどで扱うことが可能です。

ツールとか

PLATEAU VIEW

PLATEAUのデータをWebで確認できる

PLATEAU GitHub

UnityやUNREAL ENGINE用のSDK等を公開している

なにやった？

アイデアソンにも参加してないし、UnityもThree.jp、AR.jsも使ったことがないので、ハッカソンに参加していますが、お勉強です。
日本Androidの会浜松支部第144回ミーティング「PLATEAU体験会パート2(もくもく会Part39)」で公式のUnityのサンプルを動かした。
Flutterでも扱えそうなので、こちらを参考にしつつ、model_viewer_plusで表示ができないか試してみる。

model_viewer_plus を導入する

インストール

model_viewer_plus はAndroidとiOSで扱える形式が変わるみたい。
今回はAndroidでやっていきます。

まずは、model_viewer_plus を導入。

> flutter pub add model_viewer_plus
・・・
Changed 17 dependencies!
Building with plugins requires symlink support.

Please enable Developer Mode in your system settings. Run
  start ms-settings:developers
to open settings.

Windowsだと開発者モードを有効にしないといけないらしい。
以下のコマンドで開発者向けオプションを起動します。
※Windows11以外はこれでいいのかわからない。

> start ms-settings:developers

開発者モードをONにし、表示されるダイアログで「はい」ボタンをクリック

もう一度実行したら成功

> > flutter pub add model_viewer_plus
"model_viewer_plus" is already in "dependencies". Will try to update the constraint.
Resolving dependencies... 
  collection 1.17.1 (1.18.0 available)
  matcher 0.12.15 (0.12.16 available)
  material_color_utilities 0.2.0 (0.8.0 available)
  meta 1.9.1 (1.10.0 available)
  model_viewer_plus 1.6.1 (1.7.0 available)
  source_span 1.9.1 (1.10.0 available)
  stack_trace 1.11.0 (1.11.1 available)
  stream_channel 2.1.1 (2.1.2 available)
  test_api 0.5.1 (0.6.1 available)
  url_launcher_web 2.0.19 (2.0.20 available)
Got dependencies!

設定

AndroidManifest.xml 変更

AndroidManifest.xmlに変更が必要(Android9以上)
android:usesCleartextTraffic="true" を applicationタグに追加する

    <application
        android:label="plateaudemo"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher"
        android:usesCleartextTraffic="true">

app/build.gradle の変更

minSdkVersion flutter.minSdkVersion を minSdkVersion 21に変更

    defaultConfig {
        minSdkVersion 21

データの準備と表示の確認

まずは、PLATEAUのデータをgltf形式に変換する。
公式ドキュメントのTOPIC 12｜Three.jsで活用する[1/2]｜Three.jsを使った3D都市モデルの読み込みと表示にやり方が載っているのでそれを参考に行う。

まずBlenderが必要になるので、インストールが必要になる。
次に都市データをダウンロードする。
今回はチュートリアルにある東京23区のデータを使う。

扱うデータはチュートリアル通り、以下のいずれかをインポートして変換する

bldg/lod1/53394525_bldg_6677.fbx
bldg/lod2/53394525_bldg_6677.fbx
- こっちのほうがデータが重い。データ読みこんでるときにアプリが落ちた。

BlenderでインポートメニューからFBXを選択。

チュートリアルにあるファイルを選択する。
オプションを以下のように設定する必要がある。

項目		設定
スケール		100
方向を手動で設定	前方	Yが前方
	上	Zが上

表示の確認っぽいのは置いておいて、エクスポートする

・・・時間がかかるようだ

表示はできたが、小さすぎて見えない。

エクスポート時のオプションを変えてみる。
次に、データを選択してからエクスポートを選択。
内容の選択したオブジェクトにチェックを入れてエクスポートする。

大きく表示された！

ソースは以下の通り

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: ModelViewer(
        backgroundColor: Color.fromARGB(0xFF, 0xEE, 0xEE, 0xEE),
        src:'assets/53394525_bldg_6677.glb',
        ar: false,
        autoRotate: false,
        cameraControls: false,
        disableZoom: true,
        arModes: ['scene-viewer', 'webxr', 'quick-look'],
      ),
    );
  }
}

工夫して何か作る

ハッカソンなので、何か作りたい。
この時点で残り時間2時間半を切っている・・・

とりあえずARを有効にして、コンビニでガンダム買ってきて合わせてみた・・・

ピントが・・・ｗ

ARについて

ARはGoogleの機能を使うので、作成したアプリとは別にGoogleのAR用のアプリが起動する感じ。
なので、ARの機能はこちらでは制御できなさそう。
アプリ内でコントロールとして扱われれば何かできそうな気もするけど。
ただ、写真は取れるので、ARで撮影した写真を加工するなどの利用方法はありかも。

使った感想

ハッカソンとしては時間が短かったとはいえ、何も知らないところから何かできた感じがあったので良かったかな。
model_viewer_plusはモデルを表示するライブラリのようなので、モデルデータでいろいろやりたいという用途には向かないかなと思います。

賞を頂きました

審査員賞頂きました
地図を召喚的なご意見もいただきました。
地図を召喚・・・このワードは使える！
何か考えよう！

発表資料はこちら

補足
イベントも終わって1日たったので冷静に。
審査員賞を頂いたのは技術面ではないです。
地図を持ってくる発想に対して評価を頂きました。
それで、審査員の方より地図を召喚するという言葉を頂きました。
まぁ、3時間で初めて使ったライブラリを試した程度ですので技術面の評価はいただけないのは仕方がないのですが、発想の面で評価いただいたのは良かったと思っています。
次はSPAJAMも控えている(予選の参加が抽選になって漏れなければ)いますが、PLATEAU AWARD 2023に向けて何か作れれば応募したいと思います。