No.1_すPLATEAU～ん

PLATEAU AWARD 2022 ファイナリスト作品No.1
チーム名：すPLATEAU～ん
作品名：すPLATEAU～ん

Transcript

1. すPLATEAU〜ん
 Play with Cities as your Canvas members: afro (developer) akutsu (presenter) tatsumin (planner) 2023/2/18 PLATEAU HACKATHON
2. 「すPLATEAU〜ん」 は 2022年8月に開催された PLATEAU Hackathon で 初めて出会った 3人が 24時間でつくりあげた 作品です
3. What’s “すPLATEAU〜ん”
 コンセプト：
 
 AR都市空間との
 インタラクティブな体験を通して
 都市の魅力を再発見する。
 街の課題を解決する。
 コア技術：
 
 PLATEAUの3D都市モデルを
 Unityバックエンド &
 Webフロントエンドで実装！
 
 「すPLATEAU～ん」はスマホをかざして見えている画面情報をもとに、国交省PLATEAUの３D都市モデルデータをリアルタイムに正確に 取り込み、マーキング、保存が可能なアプリです。 コア技術の汎用性が非常に高く、様々な開発の土台になりうるものであり、SDKとして準備を進めています。
4. デモ動画
 デモ動画リンク PCのブラウザ で俯瞰 （複数名同時操作 にも対応） スマホ操作画面 （複数名同時操作にも 対応 スマホを現場で操作するひと 約30秒
5. https://splateaun-webview.glitch.me
 WebSocket 司令官モード　
 全プレーヤーの位置と 
 状況を俯瞰　
 対戦機能はWebSocket通信実装
 
 

6. Back 
 
 
 
 
 
 
 
 カメラ撮影
 画像を背景に
 Front WebView オーバーレイ ✖ PLATEAU １、Unity + ARCore Geospatial API で 
 　　緯度・経度・高さ・方向　を取得 
 
 ２、WebView (CesiumJS) 側の 
 　　カメラ位置と同期させた 
 
 Unity で捉えた現実空間と
 WebView のバーチャル空間を
 リーズナブルに重ねた。
 
 これぞデジタルツイン！！
 
 ※SDK化を検討中
 仕組み
 アプリ内のUIを２層のレイヤーにわけた
7. 1. Webアプリを１種類つくるだけで
 iPhone と Android と PC で動きます。
 2. 3D都市モデルを fbx 変換不要 
 全国のPLATEAU 3D都市モデルをそのまま動的ロードして表示
 3. テスト稼働＆デバッグが楽！！！！！
 JavaScript だから都度コンパイル＆インストールしなくても動く
 4. WEB版のソースは公開済み。（Unity 側は調整中）
 何が革新的か？
 (開発基盤として評価いただきたい)

8. ハッカソン後のアップデート
 位置情報つき動画の録画・再生機能
 
 Recording and Playback API に対応 

9. デモ動画　位置情報つき動画の再生操作
 デモ動画リンク 約100秒 (うち60秒を再生）
10. 2023年2月 長野県茅野市　森ビル株式会社 先端的サービスの開発・構築等に関する 調査事業 PLATEAU 3D都市モデルを活用した 防災ワークショップを開催
11. 冬季積雪時 「消火栓みつからない問題」 を 「すPLATEAU〜ん」を応用 で解決できないか？ 16
12. 丸くて目立つ 看板表示ではなく 道路表面にある 　・消火栓の蓋 　・仕切弁の蓋 を見つける必要があり 積雪時は困難 消防団も人数が減少 隣の地区への出動など 消火栓の正確な位置を 把握できていないケー スも少なくない
13. DEMO動画 19
15. すPLATEAU〜ん
 をベースに
 JavaScript だけで
 スピード開発
16. GAME Splatoonのような陣取りゲーム 
 建物の色を塗り合う 想定ユースケース 1/3

17. HAZARD MAP 交通事故や災害の発生しやすい場所を 
 3D空間上にタグづけする 東京都 防犯ボランティア応援サイト「大東京防犯ネットワーク」
 https://www.metro.tokyo.lg.jp/tosei/hodohappyo/press/2021/03/24/11.html 国土地理院　地域の安全安心マップコンテスト第10回 https://www.gsi.go.jp/MUSEUM/SAKUHIN/20sakuhin-kyoto.html 想定ユースケース 2/3

18. EXHIBITION カメラを通じてみられる都市の上に 
 作品の展示を行う 想定ユースケース 3/3

19. その後の更新メモ
 2022.８ すPLEATEAU〜ん アプリダウンロードサイト設置。 
 国交省PLATEAUハッカソン参加者に利用していただいた 
 2022.９ すPLEATEAU〜ん ソースを公開 
 2022.10 Android 版も準備・公開
 2022.10 手裏剣やハンマーの表示は異なるデバイス間で共有されますが、
 赤色や青色のペイントは共有されていません（現在の仕様です）
 2022.11 Android 版のみ位置情報つき録画機能追加
 （Google機能を使っているため）
 2023．2　消火栓をみつけるAR　すPLATEAUん 活用

20. すPLATEAU〜ん　詳細技術解説（1/2） 
 デジタルツインをより身近にするAR手法に FPV(FirstPerson View) や VPS(Visual　Positioning Serviece) 等がある。その実装には従来はUnityや UE あるいはネイティブアプリでの開発となり、下記のなどの課題があった。 
 (1) CityGML 3Dモデルの fbx 形式などへの事前変換が必要 
 (2) 対象エリアを絞っての (1) の準備が定石で、せっかくの日本列島が細切れになる 
 それをゲームエンジンの Unity を土台にフロント側を WEBの技術で Wrap することで解決した。 
 本作品は、PLATEAU 3D都市モデルのデータを全て読み込んでいるわけでなく 、スマートフォンでかざしたところの部分のみリアルタイムに読み込 む形式をとっている。このため、データをアプリケーションの中に取り込むことなくアプリケーションが完成しており、非常にアプリケーションが小さく、 ハンドリングがよくできている。 
 また、読み込み対象の3D都市モデルデータの格納場所をURLで指定する方式ため、今後ますます 拡張・整備が進む PLATEAU 3D都市モデル （LOD1からLOD４への精度向上や市区町村のモデル化）に 容易で安価に対応 することができる。 

21. -- 使用したツールやデータ、API等-- 
 1. PLATEAU： 3D都市モデル/Terrain/オルソ画像 
 2. Unity
 3. Geospatial API: VPS の精度を高めるために利用 
 4. CesiumJS ：WEB側のユーザーインターフェイス開発に利用 
 -- 動作環境—
 
 1. スマートフォン：iOS, Android 両方に対応 
 2. PC/Mac：ある程度あたらしい Chrome に対応 
 
 すPLATEAU〜ん　詳細技術解説（2/2） 
 フロントエンドが Webのため要求技術レベルが低く (Java script でOK）PLATEAUを活用した開発の裾野を広げる仕組みとなっている。 Android でも iOS でも同一コードで動作 するため、２重の開発費が不要 となることも優位である。 
 また、スマホでFPVを実現している。Java script がそのまま別途のPCにおいてバードビュー（鳥瞰）で実行できる。これも大きな副次的メリットといえ る。
 Unity部分のオープンソース化も検討中だが、現時点でもアプリの設定画面から 読み込むURLを差し替えるだけで表現したい内容を変更 できる。 （ファミコンのカードリッジを差し替えるようなイメージ） 
 
 これは開発段階においてもリリース後のバージョンアップの際も 都度コンパイル＆再配布する必要がなくリーズナブル である。
 例えば、PLATEAUの3D地図上で、子供たちの通学路の中で、車の交通が多いところ、夕方には暗くなるところ、等 危険なところをマーキングし PLATEAUの3D地図を有効に活用するためのアイデア がある。（ ※2021年ハッカソン通学路のガードレールの利用例）そのような実装もこの仕組み をベースにすれば WEB技術者がいるだけで数日あれば実現可能となると考える。 
 ◆その後のアプリケーションの機能追加　録画機能（Androidのみ） 
 東京の街で歩きながらスマホで 「すPLATEAU〜ん」 を動かし 「録画」ボタンを利用して撮影する。 撮影した動画をシェア すると、例えば長野にいても 再生できて、PLATEAU 3D都市モデルの東京の状況を表示し、シミュレーションができる。