はじめに
2024年1月6日に開催された電音部 ULTRA EXPO 2024で電音部のキャラクターと一緒に撮影ができるARフォトスポットの開発を行いました。
本稿ではARフォト撮影の技術的な裏側を簡単に紹介します。
技術構成
- ARアプリ
- Unity
- AR Foundation
- 撮影機能＆サイネージ実装
- TouchDesigner
- Resolume Arena
- Node.js
- ARフォトDLページ、QRコード表示サイネージ
- Next.js
- AWS
- Amplify
- Lambda
- API Gateway
- DynamoDB
細かい機材構成は下図です。
データ通信はOSC、NDIを使って基本イーサネット経由で行うように実装しました。
映像は縦横さまざまなモニターへ出力する必要があったので、マッピングのしやすさ、撮影時の演出も考慮して最終OUTPUTはResolume Arenaを使用しました。
AR部分の実装
今回は、電音部season1のサイトを再現するテーマがあったので、サイト上の演出をUnity上で再現することを目指して実装しました。
AR実装にはAR Foundationを使用しています。Unity公式などからもサンプルが多数あるのでとても実装しやすくて便利でした。
ブース壁面の一部をマーカーとしてオブジェクトを配置できるようにPrefabを作成し、マーカーを認識したらその位置にPrefabを生成するというシンプルな実装です。
また、今回はiPad Proを使用したのでLiDARセンサーを使ったPeopleOcclusionも実装しています。
実際のブースのイメージを掴むためにデザイナーに1/10スケールのミニチュア模型を作成してもらい、ブース全体を考慮しながらAR空間の制作を行いました。
電音部season1のサイトの3D空間上のLEDでYouTubeを流せる仕組みになっていた部分も、AR上でNDI映像を流せるメッシュ(黒い枠の部分)を用意するなど細かいところまで再現しています。
他にもお遊び要素として、バーチャル照明を配置しブース内で流れているBGMに合わせた照明演出など実装しています。
全体システムの実装
撮影・データの保存・バーチャル照明などの制御はTouchDesignerで行いました。
基本的な制御は全てTouchDesignerを経由してからそれぞれのアプリケーションにデータを飛ばす仕組みになっています。
REST APIをNode.jsで叩いている理由については過去の記事で解説していますので合わせてご参照ください…！
撮影に関してはiPadのキャプチャ映像を1フレーム分トリミングしてフレームと合成して保存するというシンプルな仕組みで実装しています。このiPadのキャプチャ映像をサイネージや体験者が確認するための返しモニターの映像ソースとして使用しました。
撮影やキャラクター切り替えはMIDIコンのボタンをトリガーにして各制御を行いました。
画像ファイルが特定のフォルダに生成された時、Node.jsで作成したサーバーにOSCでファイルパスを投げ画像ファイルをバイナリに変換し、APIを叩きAWS上に画像ファイルを保存します。
また、ブース運営を非エンジニアが行っていたので、ARのキャリブレーション制御やカメラのオートフォーカス制御、バーチャル照明の制御を簡易的に行える管理画面UIを作成しました。
ARフォトDLページ、QRコード表示サイネージの実装
AWS上に保存された画像リストを定期的に取得して、最新データが取得されたらQRコードサイネージに表示するという実装をしました。サイネージも含めて全てNext.jsを実装しています。
AWSに画像を保存する際にUUIDを発行してDynamoDBに保存しておき、UUIDをパスパラメータとしてサイトにアクセスすると特定の画像を取得できる仕組みになっています。
おわりに
ARフォトスポット全体の実装について、簡単にではありますがまとめてみました。
まとめてみると色々なツールを使うことで比較的にシンプルな構成で実装できたかなと思います。
当日は約580人の方に体験いただきました。
体験していただいた方は本当にありがとうございました！
Discussion