PLATEAU AWARD 2022 ファイナリスト作品No.1 チーム名：すPLATEAU～ん 作品名：すPLATEAU～ん
すPLATEAU〜ん Play with Cities as your Canvasmembers:afro (developer)akutsu (presenter)tatsumin (planner) 2023/2/18PLATEAU HACKATHON
View Slide
「すPLATEAU〜ん」は2022年8月に開催されたPLATEAU Hackathon で初めて出会った 3人が24時間でつくりあげた作品です
What’s “すPLATEAU〜ん” コンセプト： AR都市空間との インタラクティブな体験を通して 都市の魅力を再発見する。 街の課題を解決する。 コア技術： PLATEAUの3D都市モデルを Unityバックエンド & Webフロントエンドで実装！ 「すPLATEAU～ん」はスマホをかざして見えている画面情報をもとに、国交省PLATEAUの３D都市モデルデータをリアルタイムに正確に取り込み、マーキング、保存が可能なアプリです。コア技術の汎用性が非常に高く、様々な開発の土台になりうるものであり、SDKとして準備を進めています。
デモ動画 デモ動画リンクPCのブラウザで俯瞰（複数名同時操作にも対応）スマホ操作画面（複数名同時操作にも対応スマホを現場で操作するひと約30秒
https://splateaun-webview.glitch.me WebSocket司令官モード 全プレーヤーの位置と 状況を俯瞰 対戦機能はWebSocket通信実装
Back カメラ撮影 画像を背景に FrontWebViewオーバーレイ✖PLATEAU１、Unity + ARCore Geospatial API で 緯度・経度・高さ・方向 を取得 ２、WebView (CesiumJS) 側の カメラ位置と同期させた Unity で捉えた現実空間と WebView のバーチャル空間を リーズナブルに重ねた。 これぞデジタルツイン！！ ※SDK化を検討中 仕組み アプリ内のUIを２層のレイヤーにわけた
1. Webアプリを１種類つくるだけで iPhone と Android と PC で動きます。 2. 3D都市モデルを fbx 変換不要 全国のPLATEAU 3D都市モデルをそのまま動的ロードして表示 3. テスト稼働＆デバッグが楽！！！！！ JavaScript だから都度コンパイル＆インストールしなくても動く 4. WEB版のソースは公開済み。（Unity 側は調整中） 何が革新的か？ (開発基盤として評価いただきたい)
ハッカソン後のアップデート 位置情報つき動画の録画・再生機能 Recording and Playback API に対応
デモ動画 位置情報つき動画の再生操作 デモ動画リンク約100秒 (うち60秒を再生）
2023年2月長野県茅野市 森ビル株式会社先端的サービスの開発・構築等に関する調査事業PLATEAU 3D都市モデルを活用した防災ワークショップを開催
冬季積雪時「消火栓みつからない問題」を「すPLATEAU〜ん」を応用で解決できないか？16
丸くて目立つ看板表示ではなく道路表面にある ・消火栓の蓋 ・仕切弁の蓋を見つける必要があり積雪時は困難消防団も人数が減少隣の地区への出動など消火栓の正確な位置を把握できていないケースも少なくない
DEMO動画19
すPLATEAU〜ん をベースに JavaScript だけで スピード開発
GAMESplatoonのような陣取りゲーム 建物の色を塗り合う想定ユースケース 1/3
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
EXHIBITIONカメラを通じてみられる都市の上に 作品の展示を行う想定ユースケース 3/3
その後の更新メモ 2022.８ すPLEATEAU〜ん アプリダウンロードサイト設置。 国交省PLATEAUハッカソン参加者に利用していただいた 2022.９ すPLEATEAU〜ん ソースを公開 2022.10 Android 版も準備・公開 2022.10 手裏剣やハンマーの表示は異なるデバイス間で共有されますが、 赤色や青色のペイントは共有されていません（現在の仕様です） 2022.11 Android 版のみ位置情報つき録画機能追加 （Google機能を使っているため） 2023．2 消火栓をみつけるAR すPLATEAUん 活用
す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４への精度向上や市区町村のモデル化）に 容易で安価に対応 することができる。
-- 使用したツールやデータ、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都市モデルの東京の状況を表示し、シミュレーションができる。
toshiseisaku
morganepeng
dotmariusz
akmur
reverentgeek
addyosmani
paigeccino
maggiecrowley
dougneiner
rmw
bcantrill
garrettdimon