PLATEAU 2023 ハッカソン by 日本Androidの会 に参加

# はじめに

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

# ツールとか

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

https://plateauview.mlit.go.jp/

## PLATEAU GitHub

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

https://github.com/Project-PLATEAU


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

# model_viewer_plus を導入する

## インストール

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

まずは、model_viewer_plus を導入。

```terminal
> 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以外はこれでいいのかわからない。
```terminal
> start ms-settings:developers
```

開発者モードをONにし、表示されるダイアログで「はい」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277984/6cd95e2b-5a4c-bfec-a2a0-1c65666d405a.png)

もう一度実行したら成功
```terminal
> > 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タグに追加する

```xml
    <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都市モデルの読み込みと表示](https://www.mlit.go.jp/plateau/learning/tpc12-1/)にやり方が載っているのでそれを参考に行う。

まずBlenderが必要になるので、インストールが必要になる。
次に都市データをダウンロードする。
今回はチュートリアルにある[東京23区のデータ](https://www.geospatial.jp/ckan/dataset/plateau-tokyo23ku)を使う。

扱うデータはチュートリアル通り、以下のいずれかをインポートして変換する
- bldg/lod1/53394525_bldg_6677.fbx
- bldg/lod2/53394525_bldg_6677.fbx
    -  こっちのほうがデータが重い。データ読みこんでるときにアプリが落ちた。


BlenderでインポートメニューからFBXを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277984/721e8b0a-c206-f889-2ce7-a4b4b2984f89.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277984/d659de7a-708a-6807-e7cb-aaa5e9250d9d.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277984/0b26d29b-e7ee-b4fe-8112-099e8dd09c6d.png)

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

表示はできたが、小さすぎて見えない。
![Screenshot_20230917-132302243.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277984/5ca684c5-8176-804f-db50-3a720bba47f5.jpeg)

エクスポート時のオプションを変えてみる。
次に、データを選択してからエクスポートを選択。
内容の選択したオブジェクトにチェックを入れてエクスポートする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277984/e106b1ac-f7ca-0adc-a1bd-1f2669827a39.png)

大きく表示された！
![Screenshot_20230917-133409517.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277984/ea151e0a-0b70-3d01-031a-6235b773b2ac.jpeg)

ソースは以下の通り
```dart
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を有効にして、コンビニでガンダム買ってきて合わせてみた・・・
![IMG_20230917_141116.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277984/9a054d52-7847-7d87-d88c-004329c9154d.jpeg)


ピントが・・・ｗ

# ARについて

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

# 使った感想

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

# 賞を頂きました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277984/2c4ef88b-1722-792a-39a9-73cf3213ce5a.png)


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

発表資料は[こちら](https://docs.google.com/presentation/d/1hNLrhUrMPpYGeLPjRHWJ6cpChqhzEMbWqzWKdetsTsM/edit?usp=drive_link)

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