こんにちは！VR事業部の石井です。
今回は、Meta社主催のPresence Platform Hackathon 2024に参加してきましたので、イベントのレポートと開発した作品について紹介します。
その2（長谷川視点）の参加レポートは公開次第追記します。
開催概要
今回のハッカソンは東京のMeta社オフィスで2024年7月9日～12日の4日間にわたり行われました。
誰でも参加できるオープンな場ではなく、招待された人だけが参加できるクローズドなイベントという貴重な場なので、経験と力試しも兼ねて参加することにしました。
テーマは「Meta Quest3でPresence Platformを活用したMRコンテンツの開発」です。
チームは全体で12チームあり、それぞれユーティリティ、教育、ゲームのいずれかのジャンルで挑戦します。
このジャンルはハッカソン初日にアイデア出しをした後に1つのジャンルにチームが集中しないように運営が割り振ります。
ハッカソンの詳細と各チームが開発したアプリはこちらから閲覧できます。（英語）
presence-platform-japan-2024.devpost.com
Meta Quest 3とは？
Meta社が販売しているVRゴーグルで、2023年10月10日に日本でも発売されました。
VR（仮想現実）機能の他にビデオシースルー方式によるMR（複合現実）機能も搭載されています。
公式ストアの通常価格は74,800円（128GBモデル）ですが、今回はなんとMeta社から1人1台支給されました！
しかも、ハッカソン終了後も持って帰って私物にして良いという、なんとも太っ腹なお土産です。
Presence Platformとは？
Presence Platformは以下の機能を持ったMetaのSDKの総称です。
そのものずばりの名称のSDKがあるわけではないので注意が必要です。
- 複合現実
- パススルー、シーン、空間アンカーなど
- インタラクション
- インタラクションSDK、ジェスチャーコントロール、ボイスSDK、トラッキングキーボード、オーディオSDKなど
チームメンバー
弊社の長谷川と別会社のLimesさんとの3人チームで臨みました。
Limesさんとは以前から交流があり、今回お誘いさせていただきました。
Limesさん視点の記事はこちらを参照ください。
www.crossroad-tech.com
アプリの概要
今回開発したアプリは「Spatial Cityscape」という、新しいスタイルのコミュニケーションアプリです。
例えば、病気や高齢のために友人と出かけることができない場合、単に旅行先の写真を共有するだけでは良いコミュニケーションにはなりません。
そこで、MRとVRを利用して他人の旅行を追体験できるシステムを考えました。
Spatial Cityscapeは、スマートフォン、クラウド環境、Quest3で構成されます。
スマートフォンユーザーはウェブアプリ上で撮影した画像をクラウド環境に送信します。このとき位置情報も同時に送信します。
Quest3ユーザーはMRモードでミニチュアの都市モデルにマッピングされた写真を眺めるだけでなく、VRモードでリアルスケールの都市モデルに入り込むこともできます。
都市モデルは国土交通省が無料で公開しているPLATEAUを使用しました。
そして、このアプリはユーティリティ部門で優勝しました！
アプリの詳細はこちらのページを参照ください。（英語）
devpost.com
ウェブアプリ実装の話
私は主にウェブアプリのクライアント部分の実装を担当しましたので、その話を書きます。
クライアントはHTMLとJavaScriptでコーディングしました。
ウェブアプリはメイン機能ではない、審査員がほぼ触らない、時間もないということでとにかく動けば良いということを念頭に実装しました。
画面の見た目はこのようにシンプルになっています。（カメラ映像部分は黒塗りにしてあります）
処理の流れとしては以下のようにしました。
navigator.mediaDevices.getUserMedia({video: { facingMode: 'environment' }})で背面カメラを起動し、HTMLのvideo要素に映像を流す- 撮影したい画角になったら[Snap Photo]ボタンをタップする
canvas.getcontext('2d').drawimageでvideo要素に映っている映像をcanvas要素をキャプチャする- [Upload]ボタンをタップする
canvas.toBlobでcanvas要素をjpgに変換し、ファイル名をタイムスタンプにする- jpgをサーバーにアップロードする
navigator.geolocation.getCurrentPositionで緯度、経度を取得し、平面直角座標系に変換する- サーバーにあるJSONファイルを取得する
- JSONファイルに平面直角座標、jpgファイルURL、タイムスタンプを追記してサーバーに上書きアップロードする
Quest3のアプリ側ではJSONファイルを取得し、内容をパースして写真を空間に配置します。
AI活用の話
アップロードした画像がサーバーに保存されているか確認すると、ファイル名が意図しない長い英数字になっていました。
アップロードする際のコードをいくらデバッグしてもおかしな部分はなかったので、ChatGPTに聞くことにしました。
すると「ファイル名を指定してアップロードするためには、バックエンド側のコードも適切に設定する必要があります。ここでは、Node.jsとExpressを使ってアップロードされたファイルの名前を正しく設定する方法を説明します。」と、バックエンド側の対応も必要だと返答がありました。
この指示を元にバックエンド側のコードを修正したところ、見事に意図したファイル名で保存されるようになりました！
また、クライアント側でのJSONの読み書きも一部ChatGPTの力を借りて実装しました。
すぐに解決策が見つかったのでとても助かりました。
ご飯の話
なんとMeta社から朝、昼、夕の3食が無料で提供されました！
しかも簡単なおにぎりやサンドイッチではなく、ベジタリアン向けのハンバーガーや豪勢なお弁当、ビュッフェ形式のタコスなどが用意されていました。
極め付きは、ハッカソン3日目夕方に行われたお疲れ様パーティーのことです。
オフィスでパーティーが行われましたが、そこには寿司職人がおりその場で魚を捌いて参加者に振る舞われました！
豪華すぎる…！
当然ながらどの食事も大変美味しかったです。
まとめ
優勝できたことが夢のようです。
久しぶりにハッカソンに参加しましたが数日でコンテンツを開発するのは楽しかったです！
一部予定していた機能が間に合わなかったことが残念ですが、それでも形にできて万々歳です。
このハッカソンで作られた様々なアプリを体験できる場があると良いと思うんですが、そういう機会はあるのでしょうか…？
