はじめに
こんにちは！lainと申します。
初めてSTYLYのアドカレに参加させていただきます。
普段はエンタメ企業でモーションキャプチャ周りのアプリ開発をやっています。
本記事はSTYLY Advent Calendar 2025の25日目の記事です。エントリーするのが遅かったので気づいたら最終日しか空きがありませんでした；；
昨日の記事は@jojomonvrさんによる記事でした。
概要
本章ではVPS技術とSTYLYとUnityを利用して、MV(Music Video)を聖地でのみ追体験できるモバイルARコンテンツの作り方を紹介していきます。まずは以下のURLから体験時の様子をご覧ください。
動画20秒あたりから左右に動画が配置されますが、左側がSTYLYのアプリ画面、右側が実際のMVです。
MVに出てくる歩道橋は実際に赤坂見附に存在し、筆者が歩道橋に赴きスキャンをしたのち、Unity上で合成を行いました。 本コンテンツを作った理由としては、実写背景にCGを合成したMVは数多あれど、逆にMVの聖地でしっかり位置合わせしてMVの情景を体験できるコンテンツが少ないと感じていたからです。素材集め
まずコンテンツを作るにあたって、聖地でのスキャンとモ―ションの録画を行いました。スキャンに当たってはImmersal Mapperというアプリを使用しました。モ―ションの録画はmocopiを使用しました。
Immersal Mapperの役割を説明する前に、前提となるVPS(Visual Positioning System)について説明します。
VPSはカメラで取得した視覚情報を基に自己位置と姿勢を推定する技術です。視覚ベースなのでGPSの電波の届きにくい屋内でも高精度に推定が行える点がメリットです。位置推定のための3Dマップを生成するのがImmersal Mapperの役割です。撮影の際は必ずManual Modeにし、映像がぶれないようにゆっくりと移動しながら、マップ化したい範囲を多様な角度から、十分に重なり合うように撮影するのが高品質な3Dマップを作成するコツです。
無料版のSTYLYではImmersal機能の利用は非商用で個人用途での利用であることに留意してください。
モデリング
残念ながら創作に使える公式モデルが配布されていなかったため、自分でモデリングを行う必要がありました。フルスクラッチでキャラクタモデリングを行うのは大変なので、VRoidを使用してモデリングを行いました。
VRoidはピクシブが提供する直感的にキャラクタモデリングが行えるモデリングツールです。プリセットが公式やboothを通して数多く提供されているためより簡単にキャラクタを製作することができます。リギングも設定する必要がないため手軽です。
こだわった点はテクスチャの一部を透明にすることでアシンメトリーな衣装を再現したところです。
ただし、靴は残念ながらアシンメトリーには対応していなかったので泣く泣く両方同じデザインになってしまっています。
合成
素材の作成が終わったらいよいよUnity上で位置合わせをやっていきます。Unityのバージョンは2019.4.29を使用しました。
環境構築のために有料アセットであるPlaymakerが必要になります。環境構築はいくつか手順がありますがSTYLYの公式記事に沿ってやっていけば準備できると思います。
スキャンしたロケーションのglbファイルをUnityのヒエラルキーに移動するとメッシュが表示されると思います。これが原寸大のモデルになっているのでこれを基準にして位置合わせを行っていきます。
次にVRoidで製作したモデルをUnityに読み込んでいきます。VRoidで製作したモデルはVRM形式になるためUniVRMをダウンロードし、Unityプロジェクトにインポートした上でモデルを読み込みます。
アニメーションを適用していきます。mocopiでキャプチャしたデータはiPhoneの場合「ファイル」アプリ内のmocopi > MotionDataに格納されます。
UnityでBVH形式は標準サポートされていないため、FBXなどの形式に変換する必要があります。恐らく一番簡単なのはBlenderでBVHをインポートし、FBXとしてエクスポートする方法でしょう。詳しくはこちらの記事をご覧ください。
素材をUnityにインポート出来たら、いよいよ位置合わせです。ちょうど歩道橋のモデルの上をヰ世界情緒の3Dモデルが歩いているように見えるようにモデルを配置します。
これで完成！と思いきや実はアニメーションを全く編集していないためmocopiの録画を止める瞬間がアニメーションに反映されてしまっています。
この部分のアニメーションを削るだけだと、キャラクタが突然静止して実在感が損なわれてしまうため、ディゾルブシェーダで消えるようにしました。シェーダーに使うマスクテクスチャは工数削減のためChatGPTにつくってもらいました。VRMで使われているMToonを改造するのは骨が折れるため、MToonっぽさを残しつつもディゾルブするシェーダをChatGPTで生成しました。
一つここで問題がありました。スマホを触り始めるタイミングを検知するのが難しいということです。STYLY SDKを利用しているので衝突判定や時間指定でのシェーダが発火するタイミングがUnity C#から直接指定できません。Playmakerのノードで頑張ることもできそうですが、シェーダー側からの時間指定を利用しました。しかし、シェーダーのTime.yは実行時からのグローバル時間を利用するため、人によってアプリを立ち上げてから位置合わせが完了する時間が異なります。スマホを触り始める直前までをカットした上でユーザー間の時間の差異を吸収できるバッファ用のアニメーションを用意し、そのバッファ用アニメーションの途中で絶対にディゾルブシェーダーが発火するようにしました。ディゾルブシェーダが発火し始めるのは49秒に設定しました。
バッファアニメーションには元々持っていた待機用アニメーションのアセットを利用しました。
位置合わせが最短ではアプリを立ち上げてから6秒程度、ヰ世界情緒の歩行アニメーションが11秒程度なのでバッファ用アニメーションが再生されてから32秒後(=49-6-11)にディゾルブアニメーションが発火します。位置合わせは30秒でタイムアウトするように設定しているため、最長ではアプリ立ち上げに6秒、位置合わせに30秒、歩行アニメーションが11秒程度なのでバッファ用アニメーションが再生されてから2秒後(=49-6-11-30)にディゾルブアニメーションが再生されます。
最適化
さてここまで来たら完成としてもいいですが、聖地巡礼の現場はWi-Fiが使えないことがほとんどです。ユーザのスマホに優しくするために容量を削っていきます。とはいってもたいしたことはしていません。3Dモデルの中でパフォーマンスのボトルネックになりやすいのはテクスチャです。従ってテクスチャのMax Sizeを下げました。顔など大事なパーツはそこまでテクスチャ解像度を下げず、足元や単色の部分などあまり目立たない所は大きく解像度を下げました。STYLYにアップロードするprefabの推奨上限は20MB以下ですが、最適化をした結果約14MBまでファイルサイズを下げることができました。
アップロード
これで漸くアップロードができます。アップロードは公式記事に沿ってやれば難しいことはないでしょう。アップロードする前に位置合わせに使った背景を削除し、ARContentsを非表示にするのを忘れないようにしてください。
終わりに
お読みいただきいただきありがとうございました！
STYLYとImmersalを利用することで聖地で簡単に推しのMVの世界観をつくることができるようになりました。ぜひ本章をお読みになった皆さんも自身の好きなコンテンツをARで顕現させてみてください。筆者1人では限界があるため、日本中、いや世界中の聖地がARコンテンツで溢れるといいですね。聖地を指定してモデルをアップロードするだけで聖地巡礼ができるプラットフォームが作れたらよさそうです。いつか世界中の人がアップロードしたコンテンツがシームレスに存在し、どこを見てもなんらかの面白コンテンツが見えるようになる世界になったら面白そうですね。