「長〜く歩く路上 AR 体験」を実装した話②〈MR デバイスで空間描画 & エクスポート〉
はじめに
2025年3月8日(土)から3月30日(日)まで山梨県富士河口湖町にて開催された、 やまなしメディア芸術アワード(YMAA)メタバース企画《6okken 拡張遊歩「まだ見ぬ世界」の歩き方》展（以下、《拡張遊歩》） において、 xR 作品パートのテクニカルディレクションと実装 を担当しました。
本記事は、プロジェクト《拡張遊歩》の xR 作品パートの実装過程をトピックごとにまとめる記事シリーズのうちの一つです。
- 〈はじめに〉
- 〈MR デバイスで空間描画 & エクスポート〉 ◀ イマココ
- 〈Meta Quest をかぶって長距離移動したい場合の注意事項〉
- 〈立体地図プラットフォーム Cesium を用いた AR コンテンツのシミュレーション〉
- 〈雪の積もる地域で路上 AR 体験を提供するには〉
- 〈STYLY の AR で長距離移動したい〉
- 〈安全に関する配慮〉
- 〈おまけ：表現の余白や遊びをもたせるための実装〉
本記事で書くこと
-
MR 空間描画機能 について
- 流用できそうな 既存のサンプル の調査
- 線の描画 に利用できるライブラリ
- 線の書き出し 時にした工夫
《拡張遊歩》で実装した空間描画機能
書かないこと / 注意事項
- 実装したコードの全体像や詳細に関しては、本記事では省略します。
- それぞれのトピックについて検証が完璧に行えたわけではない（むしろ結構カツカツだった）ので、より適切な実装方法が存在するかもしれません。参考程度にご覧ください。
- より良い選択肢や、内容の誤りを見つけた場合はコメントで指摘をいただければ幸いです。
本題：MR で「空間描画 & エクスポート」する機能を作りたい
〈はじめに〉で紹介したとおり、《拡張遊歩》の xR 作品パートは 「作家が気ままに遊歩した軌跡を、線状の CG オブジェクトとして記録し、 AR コンテンツとして周辺地域に展開する」 というものでした。
そのためプロジェクトの初期段階は、作品の根幹となる 「MR で空間描画 & エクスポートする」 機能の実装検討から始まりました。その際に調べたことなどを以下にまとめます。
MR 空間描画機能として流用できそうな既存のサンプルなど
始めに、有用なサンプルや流用できそうなアプリがないかを調査しました。
参考事例①：Apple 公式の visionOS 向けサンプル
Apple Vision Pro が使えるのであれば、公式で用意されている空間描画のサンプルプロジェクトが便利そうでした。ただし、 PolySpatial (Unity) ではなくネイティブ (Swift) での実装になります。
なお《拡張遊歩》では、MR 空間描画した後のフローで Unity による実装やシミュレーションを考えていたため、今回は visionOS での空間描画は採用しないことにしました。
参考事例②：Open Brush
かつて Skillman & Hackett によって開発され、オープンソース化後にアーカイブされた VR お絵かきアプリの 「Tilt Brush」。現在は Icosa Foundation によってフォークされ、オープンソースの Unity プロジェクト「Open Brush」 として管理されています。
Meta Quest シリーズ、Pico シリーズ、HTC Vive シリーズなど主要な HMD で動作するよう整備が進んでいるうえ、いろんなブラシエフェクトを選択できたり、作ったシーンを 3D オブジェクトとしてエクスポートできたりなど、至れり尽くせりです。（最近、マルチプレイまで対応したとのこと。）
リッチな VR 空間描画体験を開発するのであればこのプロジェクトから派生させるのが良さそうですが、《拡張遊歩》における要件のように 自由度高く「描画 + 出力」の2機能だけ作りたい というニーズに対してはモリモリすぎる気も…。独自のビルドシステムが用意されているなどハマるとややこしそうな要素もあったため、今回のプロジェクトでの採用は見送りましたが、機会があれば今後試したいです。
その他、見つけた Unity 向け空間描画っぽいプロジェクトのメモ（ちゃんと試せていません）
おまけ①： Unreal Engine 向けに見つけた事例
UE 向けのチュートリアルも見つけたのでメモとして。標準機能の Spline Mesh Component を使って実装。お手軽そうですね。
おまけ②： モバイル AR 実装で充分な場合も
要件によっては、無理に HMD 向けの実装にせずとも、モバイル AR お絵かきアプリとしての実装で充分な場合もあるかもしれません。例：Just a Line (Google)
《拡張遊歩》での方針
結局、シンプルに「空間描画 & エクスポート」の機能だけをサクッを検証できるだけの都合の良いサンプルは見つからなかったので、《拡張遊歩》では既存のサンプルプロジェクトは利用せず、
- 線の描画
- 線の書き出し
をそれぞれ見繕って組み合わせてしまうのが早そう、という結論に至りました。そのあたりについても以下にまとめます。
「線の描画」機能
「作家の手」や「握ったコントローラーの位置」を取得して、指定したフレームレートで軌跡を記録することで、線を描くような機能を考えます。
《拡張遊歩》で実装した空間描画機能
Unity における線のレンダリング方法については、いくつかの方法が見つかりました。
LineRenderer
LineRenderer は、Unity 標準の線描画コンポーネントです。登録されたポイント間を、太さをもった板状のポリゴンによって繋ぐ形で、3次元的な線として描画します。
これを活用した VR 空間描画実装の記事も見つかりますね。
XRLineRenderer
XRLineRenderer は、 xR 用途に最適化された LineRenderer の拡張版で、こちらも Unity から提供されています。「3D カプセルによるレンダリングを模倣しながら、2クワッド分のジオメトリしか使用しない」とのことです。
TubeRenderer
有料アセット TubeRenderer を用いると、 LineRenderer と同様にポイントを配列として格納していくことでチューブ状のメッシュを動的に生成できます。
Mesh Filter として作成されるため、ランタイム時に書き出しする機能を用意すれば 3D モデルとして出力できます。《拡張遊歩》ではこれを利用して線を描くことにしました。
「線の書き出し」機能
TubeRenderer によって作成された線を、3D モデルとして書き出します。
《拡張遊歩》で実装したエクスポート機能
Mesh Filter をランタイムで書き出し
ランタイムで動作する任意の Exporter を利用すれば TubeRenderer によって生成されたメッシュを書き出せます。Unity から提供されているものとしては FBX Exporter や glTFast がありますが、後者の方がエラーなく出力できたのでそちらを活用しました。
書き出した .glb ファイルを Blender でプレビュー
ポイントの配列も .json として書き出し
TubeRenderer による線をのちほど C# スクリプトを用いて編集できるように、ポイントの配列やその他の情報も .json ファイルで出力しました。
"Points":[
{"x":-1.4164512157440186,"y":0.6240198016166687,"z":-2.4862616062164308},
{"x":-1.4236308336257935,"y":0.6226453185081482,"z":-2.459488868713379},
...
{"x":-15.531600952148438,"y":3.847057342529297,"z":85.02635192871094},
{"x":-15.529624938964844,"y":3.8473024368286135,"z":85.03347778320313}]}
],
"FrameRate":60.0,
"Radius":0.04713646322488785
これらは後日、線の太さやポリゴンの滑らかさなどを編集する際や、線に沿ったアニメーションを作成する際 などに役立ちました。
上記ポイント配列を Timeline に書き出して、ドーナツ型のオブジェクトを線に沿って動かしています
書き出しの原点
「MR 空間描画 & エクスポート」機能によって書き出された線は、その後 AR コンテンツとして土地にアンカリングされることになります。そのため、位置合わせのための目印 を作っておくことが大事です。
《拡張遊歩》では、 MR アプリ起動時に「書き出しの原点」を任意の場所に配置してから線を描く実装にしています。そのうえで作家には 「Google Earth からも見えるような、動かなくてわかりやすい場所（例えば横断歩道や電柱など）を原点にしてから描いてください」 と指示を出しました。
コントローラーで「原点」をわかりやすいところに置いてから空間描画をする
つづく
上記のような過程を経て、「MR 空間描画 & エクスポート」の機能を実装しました。なお、開発環境は Meta Quest 3 で、実際に作家が線を描いた際には Meta Quest 3S を用いました。
次回、〈Meta Quest をかぶって長距離移動したい場合の注意事項〉では、実際に屋外で空間描画を実施するにあたり、注意すべきだったポイントなどをまとめます。
Discussion