こんにちは、みやもってぃーと申します。
こちらはIwaken Lab. Advent Calendar 2024の11日目の記事です。
はじめに
私は、光と音を用いてインタラクションのあるコンテンツを制作し、「情動を揺るがす体験や表現」を探求しています。
今年の4月からXR領域に強く興味を持ち始め、Iwaken Lab. で多くの刺激を受けながらXR（特にARやMR）のコンテンツ制作や開発に挑戦してきました。
まだまだ成長過程の身ではありますが、先日制作したXRコンテンツを集めた体験展示会を開催しました。子どもから高齢者まで計72人の方々に体験いただき、予想以上に好評を得ることができました。
本記事では、企画から実施までの過程と、得られた知見を共有したいと思います。
実施に至った背景
今回のプロジェクトは、「学生目線で今までにないイベントを創発する」という市の公募があり、そちらに応募し採択されました。
企画にあたり、以下のことを重視しました。
「光と音による表現でXRの技術と魅力を伝える」
これは自分が今までやってきた光と音による表現をXRという新たな技術と表現で、幅広い年代の地域の人たちに体験してもらい、XRの可能性を広げ、街全体で盛り上げていきたいという想いを込めました。
このような背景のもと、WebARからMRまで、様々なXRコンテンツを集めた体験展示会の実施に至りました。
展示コンテンツ一覧
今回の展示会では、以下の4つのコンテンツを用意しました：
- Meta Quest 3 × Unreal Engine によるMRコンテンツ
- 公園内を巡るWeb-ARコンテンツ（VPS）
- mocopiを使ったモーションキャプチャー体験
- インタラクティブなムービングライト操作体験
各コンテンツの詳細
1. Meta Quest 3 MRコンテンツ
Meta Quest 3のパススルー機能を活用し、宇宙の銀河に包まれるようなMRコンテンツをUnreal Engineを使って制作しました。
使用技術
- Meta Quest 3
- Unreal Engine 5.4
- TouchDesigner
- Ableton Live
実装のポイント
- Unreal Engine × MR によって、綺麗な宇宙の銀河への没入を表現
- Ableton Liveで制作したGenerative SoundのAudio Level
- MIDIコントローラーをシステムに組み込み、ヘッドセットを被って体験していない人がそれを操作することで、NoiseのFrequencyやStrengthを変え、見ている映像が変化するインタラクションを実装した
→ 現実世界と仮想世界の両方を見ることができるというMRの強みを活かして、ヘッドセットを被っていない人ともコミュニケーションを取りながらコンテンツが変わっていく様子を楽しめるようにしました。
体験にまつわるエピソード
親子で体験しに来てくれた方の中に、お母さんがヘッドセットを被っていて子どもがMIDIコンを操って、「ママ変わったでしょ〜、もっとキラキラしてあげるね〜」と言って、お母さんが「え〜すっごい変わったよ！〇〇ちゃん！」と楽しそうに会話している様子を見ていて、とてもほっこりしました。
2. 公園内Web-ARコンテンツ
Web3D/WebXR開発のためのビジュアルエディター「Niantic Studio」と8thWallの「Lightship VPS for Web」を用いて、公園内で体験できるARコンテンツを4箇所用意しました。
公園内に掲示してあるマップのQRコードかWebページからコンテンツを体験できるようにしました。
使用技術
- Lightship VPS for Web (8thWall)
- Niantic Studio
- three.js（一部のコンテンツで使用）
実装のポイント
- 公園内にある彫刻をVPSに登録し、ARでデジタル上の彫刻と現実の彫刻をともに鑑賞することができる
- 初めてのWebAR開発ということもあり、サンプルプロジェクトを基盤に制作
公園を活用してほしいということでVPSを用いたWeb ARのコンテンツ制作に初めて挑戦したのですが、今回はWeb3D/WebXR開発のためのビジュアルエディター「Niantic Studio」を使用しました。これは直感的にコードを書かずに作ることができる反面、光のあるBloom効果を実装するには、three.jsなどコードをしっかり書かないといけず、勉強不足のためその実装ができませんでした... 次はリベンジできるようにしたいです！
3. mocopiモーションキャプチャー体験
SONYの開発したモバイルモーションキャプチャー「mocopi」を用いて、フルボディトラッキングによるアバター体験できるコンテンツを、Unreal Engineで制作しました。
使用技術
- mocopi
- Unreal Engine 5.4
- mocopi Receiver Plugin for Unreal Engine
実装のポイント
- 複数アバターを同時に動かせるよう、多様な5体のアバターをリターゲティング
- Unreal EngineのDMXテンプレートを基盤に制作
mocopiとUnreal Engine の連携はこちらを参考に制作しました。
4. 光を手で操れるムービングライト
カメラの前で自分の手を動かすと、それに追従するようにムービングライトが動いていくコンテンツです。（※XRコンテンツではありません）
これは元々、現実世界のムービングライトとUnrealEngine上のムービングライトが連動するように考えていたのですが、制作時間とコンテンツの数を確保するために実現には至りませんでした。
Googleで開発を主導しているオープンソースの機械学習ライブラリーである「MediaPipe」を用いて、ハンドトラッキングしたデータを元にムービングライトのDMX制御を行っています。
使用技術
- TouchDesigner
- MediaPipe
- QLC+
実装のポイント
- ハンドトラッキングによって取得したxy座標をムービングライトのPanとTiltに変換をした（曲座標変換）
- 広い会場スペースを活かし、天井まで縦横無尽に光を操れるようにキャブリケーションした
- Webカメラから手をトラッキングするために、カメラの前に照明を置いて画像認識を上げた
制作にあたってこちらのサイトを参考にさせていただきました。
来場者の反応
子どもから高齢者まで計72人に体験していただきました。一番多かったのは家族連れで、「何が見えるのー？どんな感じ〜？どう楽しいー？」など子どもと一緒にコミュニケーションを取りながらコンテンツを楽しんでいただけました。また、高齢者の夫婦もお散歩ついでに立ち寄ってくださり、おばあちゃんが「これはすごいよあなた！」と言いながら興味津々でMRコンテンツを体験していただいたのが印象的でした。中には名古屋から旅行に来ていた家族が訪れてくださって、本当に良い体験と旅の思い出になりましたと言っていただけました。企画段階で目的としていた、「光と音による表現をXRという新たな技術と表現で、幅広い年代の地域の人たちに体験してもらい、XRの可能性を広げていくこと」のスタートを切ることができたかなと思います。これをきっかけに、さらにXR技術で街が盛り上がっていくと良いなと思っています！！
（ちなみに会場となった公園ではほとんどの人がポケモンGOをしており、市民のXRとの親和性は高いと思っています。）
イベント運営について
当日は私を含め、合計4名のスタッフで会場の運営をしました。各コンテンツに1人配置し、15分ほどの体験時間で上手く回すことができるよう、導線を作り、体験フローを確立しました。ただどうしてもmocopiの着脱やキャリブレーションに時間がかかってしまうため、外の公園内を巡るARコンテンツを先に体験してもらうように勧めたり、他の室内コンテンツで遊んでもらうようにしました。また、人が多くて待ち時間があっても快く待ってくださり、時間がかかっても体験をしたいと思ってくれる方が多く、会場を訪れた人の定着率は非常に高かったと思います。
もう少し改善した方が良かった点は、事前のイベント告知に力を入れることでした。市の広報やホームページにイベントを掲載いただいたのですが、自分からSNSで発信したりすることができず、当日に声掛けをして呼び込むということが多かったです。また大学生や高専生、中高生あたりは参加が少なかったので、もう少し学校等の教育機関と連携して絡めるべきだったなあと思っています。
今後は、小中高校生向けにワークショップを開催して、一緒にNiantic StudioでWebARコンテンツを制作したり、SNS等でどんどん発信できるようにしていきたいです。
技術面での学び
開発時の工夫
今回コンテンツを製作するにあたって、圧倒的なグラフィックによる表現を追求するためUnreal Engineを選定しました。普段はTouchDesignerで映像を含めコンテンツを作ることが多く、初めてのUnreal Engineでの制作になかなか苦労しました。特にMetaQuest3とUnreal Engineでポストプロセスを使ったMR表現をするまでに、情報源がほとんどなくレンダリング設定をずっとやっていました...（こちらの設定の自分の理解が追いつき次第、記事化したいと思っております）
ただ、自分はコードを書くのがあまり得意でないのですが、Unreal EngineのNiagaraやBluePrintを使うとリッチなグラフィック表現が比較的簡単にでき、それをOSCを通じて音と連携したり、MIDIコントローラなどと外部接続することができました。そのおかげでMRでのパーティクル表現の幅を広げることができたと思います。今後は、対応が間に合わなかったハンドトラッキングや他のインタラクション機能やUIを追加していきたいと思います。
今回、どのコンテンツにも総じて言える知見は ”現実空間の広さ” が大事だということを感じました。やはり現実空間にデジタル情報を付加するという性質上、現実空間が広ければ広いほど奥行きを感じ、空間全体に対するインタラクションでフィードバックを得やすいと感じました。幸いにも今回の展示会場は、室内展示でありながらかなり広いところを確保できたため、MR空間の広がりはもちろんのこと、子どもたちがmocopiをつけて走り回ったり、ライトをめいいっぱい動かしている様子が印象的でした。空間インタラクションを設計する上で現実空間の広さを確保することは、重要な要素の一つとなりうるのだと学びました。
トラブルシューティング
現場にトラブルは付きもので、なんで本番になったら動かなくなるの！？ということが起きてしまいました。原因はUnreal EngineでMRコンテンツを立ち上げる（VRプレビューをする）と、TouchDesignerが裏で止まっており再度立ち上げ（アプリをクリック）ないといけませんでした。それに気づかず何度かPCを再起動してたりしてました...
加えて、mocopiのキャリブレーションが身長の小さな子どもだとうまくいかないということは盲点でした。(mocopiがモーションを正しく認識できる身長は140～190cmらしいです。)
失敗の原因を知ること、様々なことに対処できるように冷静かつ視野を広くすることが、現場の動きとして大事だと改めて感じました。
おわりに
ここまで読んでくださり、ありがとうございました。
本記事で紹介したコンテンツの詳細な実装方法については、別記事として公開予定です。
実は今日（公開日）から「XR Kaigi 2024」に現地で初参加してきます！
今回の経験で自分の中のXRに対する熱がどんどん大きくなり、イベント参加が本当に楽しみです。
また、地方から参加するにあたって、ご支援いただいた方々にはこの場をお借りしてお礼申し上げます。たくさん刺激をもらって体験して吸収してきます！
Iwaken Lab. Advent Calendar 2024 の12日目は Ekito さんです！お楽しみに！