UnityChanSpringBone2.0で揺れものセットアップして、透過スクリーンを使ったバーチャルライブ作ってみた話 REALITY AdventCalendar #5
ご挨拶
ごきげんよう、はじめまして、10月よりREALITYにJoinしましたUnityエンジニア かとーです。
REALITYでは主にアバター周りのアレコレなど担当しております。
記事内容
アドカレ5日目、今回の記事はUnityChanSpringBone2.0と透過スクリーンについてです！
テーマを決めた理由
UnityChanSpringBone2.0
REALITYではアバターの揺れもの設定にUnityChanSpringBone2.0を採用しています。揺れものパラメータ設定はArtチーム担当ではあるのですが、プロジェクトで使ってるものはしっかり把握しておこうということで、調べてみたところ、ネット上にはあまり情報が無いようでした。そんな経緯があり、REALITY内だと参考になるデータもあることだし、この機会に自分で記事を書いてググればUnityChanSpringBone2.0の使い方が出てくる優しい世の中にしようと思ったのが理由です！
透過スクリーン
縁あってバーチャルライブの現場で使ってるのを何度か見ていたのですが、自分で扱ったことはなく、使い方は何となく分かるけど、使ったことはないという状態だったのでこの機会に使ってみようというのが理由です！
UnityChanSpringBone2.0って？
MITライセンスで提供される、無料かつ高機能な揺れものアセットです。
（ざっくりですが、使う上ではこれぐらい知っておけばOK）
UnityChanSpringBone2.0の使い方
今回初めて使ってみたのですが、UnityChanSpringBone2.0（以下UCSB）はセットアップ用のエディタ拡張が付属したとても使いやすいアセットでした。
しかも無料！素晴らしいですね！
■ダウンロード
https://github.com/unity3d-jp/UnityChanSpringBone
ここから、UCSBをダウンロードしてUnityにインポートしてください。
（release/1.1のタグを指定してダウンロードしてください、1.2だとセットアップ用のエディタ拡張が入っていません）
■手順1
まず、セットアップしたいモデルをシーンに配置してメニューバーよりセットアップ用の拡張ウィンドウ"スプリングボーン窓"を開きましょう。
■手順２
モデルを選択して、スプリングボーン窓の"マネージャーを作成/更新"ボタンをクリックしてください。モデルにSpringManagerコンポーネントがアタッチされます。
SpringManagerはモデルに付いているSpringBoneを管理するコンポーネントで、追加すると足元に板状のコライダーも同時に追加されます。
■手順３
次に物理シミュレーションで動かしたい、ボーンを全て選択して"スプリングボーン追加"→"基点作成"の順にクリックしてください。
（階層が最も下のボーンに関してはTipボーン扱いでSpringBoneコンポーネントのアタッチや基点の作成がされないので、一番階層が下のボーンを動かしたいときは、ダミーで空オブジェクトを最下層に配置してやる必要があります）
この操作で、揺らしたいボーンにSpringBoneコンポーネントがアタッチされ、物理シミュレーションの基点となるオブジェクトが作成されます。
この時点でひとまず揺れるようになるはずです。
■手順４
次はパラメータを設定します。
角度制限はメッシュの貫通を防止する上で非常に有用な設定項目です。
現状だと全てのSpringBoneコンポーネントに既定値が入っている状態なので、SpringManagerの"SpringBoneを全て選択"ボタンで全選択してザックリと調整してみましょう。
スカートの場合はz軸の下限を0にしておくと、スカートが下がってこないのでメッシュの貫通が起きにくくなります。
画像の通り"角度制限"(軸ごとの揺れ幅の最大値、最小値)、"硬さ"（ボーンが元の形状に戻ろうとする力）や"空気抵抗"（動きの減衰強度）を調整しました。
実際に設定する場合はボーンの階層ごとに角度制限の値を変化させて、ボーンの先端に行くほど揺れ幅を大きくするなどすれば、より綺麗にゆらすことができます。
ちなみに、UCSBには設定をcsvで保存、読込する機能がついているので、エディタを再生して動きを見ながら調整した状態で、保存しておけば再生終了後にパラメータがリセットされても、保存したものを読み込むことでパラメータを復旧することができ便利です。
■手順５
ここではメッシュの貫通を防ぐためのコライダー設定をします。
コライダーをつけたいボーンを選択して、"球体"、"カプセル"、"板"のいずれかのボタンをクリックすると、コライダーがボーンの子に生成されます。
今回はスカートに対するコライダーなので、UpperLegにカプセルコライダーをつけます。
コライダーが生成されたのを確認したら、位置やパラメータを上足に合うよう調整してください。
（気持ち大きめに設定しておくのをオススメします）
あとは、コライダーをつけたいSpringBoneコンポーネントを選択してコライダーをアサインすればコリジョンが有効になるので、コリジョン半径やコライダーのパラメータを動かしながら調整しましょう。
ここまでで、コリジョンなど込みで一通りのセットアップができたかと思います、お疲れさまでした！
これでUCSBセットアップ解説は終わりです！
今回各パラメータ項目について詳細な解説まではしていませんが、一通り動かせるようにはなったかと思いますので、後は色々ためしながら覚えていく形で問題なく使えるようになるかと思います。
ちなみにUCSBの角度制限+コライダーによる貫通防止は数ある揺れものアセットの中でも非常に強力な部類に入ります。
普段メッシュの貫通に悩まされている方はぜひ、UCSBの採用を検討してみてください。
また余談ではありますが、スカート周りの設定はUCSBだけでなく、Unityにデフォルトで入っているRotationConstraintコンポーネントを使用して足の動きにボーンの1階層目を一定割合で追従させるなどすると良い結果になることが多いです。
■おまけ（UCSBで風を吹かせる）
WindVolumeコンポーネントをシーンに置くことで、SpringBoneに影響を与える風を吹かすことができます。
MVの素材を撮影するときなんかには重宝しそうな機能ですね。
透過スクリーンとは
透過スクリーンはバーチャルキャラクターのライブなどでよく使われる、プロジェクターで投影した映像を映す透明のスクリーンです。
バーチャルキャラクターのライブで透過スクリーンが使用される理由としては、画像のように背景とキャラクターを前後にずらして配置することで、キャラクター、背景、バックダンサーなどを配置することでまるでキャラクターがステージの上にいるかのように見せられるためです。
規模の大きなライブでは、複数の透過スクリーンを重ねて使うこともあるので、その場合スクリーンの透過率が重要になってきたりします。
画像はUnity上で透過スクリーンを使ったバーチャルライブの様子を再現したものです、1枚目が横から2枚目が正面からのカメラで見ています。
透過スクリーン使ってみた
今回は後ろからプロジェクタの光をあてるリアプロジェクションタイプの透過スクリーン(A3サイズ)にモバイルプロジェクタ「Anker Nebula Vega Portable」で投影しました。
一般向けのプロジェクタで光量も低めだったので、きれいに映ってくれるか不安でしたが綺麗に映ってくれました。
（写真だとピントなんかの関係で、かなり微妙に見えますが実際はかなりクッキリと映っていてブレなどもありませんでした）
ただ動いているだけだと寂しかったので合宿でのデモの際は、簡易的な制御システムをつくり、リップシンクや表情変化をつけたり、パーティクルを散らしたりしています。
透過スクリーンTips
記事を読んで透過スクリーンに興味を持ってくれた人向けに、ここでは透過スクリーンを扱う上で知っておいたほうが良い知見を紹介します。
■透過スクリーンでは、透明＝黒
透過スクリーンに投影する場合、黒＝透明という扱いになります。
上の写真で透明になっている箇所は、Unityとしては黒で描画された部分です。インターネット上で見つかる、透過スクリーンを使ったライブのデモ風景などの写真をみると、さりげなく後ろに黒い柱があったりするのはそういうことです。
■明るいところでは見にくい
スクリーンの質にもよりますが、基本的に透過スクリーンは明るい空間よりも暗い空間のほうがよく見えます。
なので、もし透過スクリーンを使用する機会があるようなら使用する場所の明るさや、電気を消してしまっても良い場所か事前に確認しておくと良いです。
■プロジェクターの光量
プロジェクターにはそれぞれ、出力できる光量が決まっており、カタログスペック上はルーメン(lm)と表示されています、今回はスクリーンが小さいこと、また、合宿にハンドキャリーで持っていく都合上、光量の小さな500lmのプロジェクターを使用していますが、大きなスクリーンに映す際は光量の大きな(3000lm以上ぐらいが目安)プロジェクターが必要です。
あとがき
合宿アドカレいかがだったでしょうか？
興味をもってここまで読んでいただけたようでしたら、とても嬉しいです。
記事を書いていて思ったのですが、バーチャルライブが温泉を楽しみながら作業するレベルで作れてしまう、良い時代ですね！
Facebookが社名をMetaに変更したことを皮切りに、世間でもメタバースという言葉が認知されるようになってきました、メタバースという言葉自体にはまだ明確な定義もありませんし、あやふやなものです。
しかし、時代や技術は日々前に進みます、今YouTubeなどで当然のように見ることができるVTuber文化の盛り上がりもセンサーや、カメラでモーションのキャプチャを行う技術の発展、一般化あってのものです、少なくともガラケー時代にVTuber文化は生まれなかったでしょう。
時代、技術が進めば、新しい価値観や、文化がうまれていきます、そして今よりもう少し時代が進み、ネットワーク上でもっと多くの表現や密なコミュニケーションが行われるようになれば、そこにはメタバースという新しい世界が生まれるのではないかと思います。
（これは会社というより私個人が考えるメタバースについての見解です）
REALITYは、「メタバースを作る！」というのを目指している会社です。
REALITYでは一緒に働く仲間を絶賛募集中なので、一緒に新しい世界、メタバースを作っていきたい！という方の応募お待ちしています。
カジュアル面談も実施していますのでそちらも是非！
それでは、またどこかで！
この画像は合宿先の旅館で撮影した写真とアバターをAfterEffectsで合成して制作したものです。
明日のアドベントカレンダーは！
次回は、ナオヤさんの「REALITYで動くマルチゲームを作ってみた」になります。