VtuberでもWebXRを使いたい！ 彩

リンク飛んだりしたい場合はSpeakerDeck説明欄に記 載のGoogle Slideから閲覧ください すまんね

Vtuberの彩です ● 2018年2月にVtuberデビュー ● VRとスマブラが好き ● VR関連 ○ 2020年 日本VR学会 上級バーチャルリアリティ技術者 ● スマブラ関連 ○ スマメイトレート1700達成（3DS) ○ スマメイトレート1600達成（SP） ● Youtube ○ https://www.youtube.com/channel/UCaO7o3PXaId7vhvBUAmK_Iw スマブラ、雑談、VRなどしてます。良かったら見てください。あとさらに言うとチャンネル登録と高評価をして く モーニングスターの 動画がおすすめです。 アイコン 全身図

この発表で話すこと ● 360度動画を作って流した(一言だけ) ● 高原でVtuberの撮影会に参加するやつ作った(3分) ○ モーション付き3Dモデルの作成 ○ XRモード機能の追加 ○ 写真撮影機能の追加（スクリーンショット機能）

この発表で話すこと ● 360度動画を作って流した(1分) ● 高原でVtuberの撮影会に参加するやつ作った(3分) ○ モーション付き3Dモデルの作成 ○ XRモード機能の追加 ○ 写真撮影機能の追加（スクリーンショット機能）

360度動画を作って流した https://playground.babylonjs.com/#SQ5UC1#373 右下のHMDアイコンを 押すとXRモードになる よ 下のURLで見れるよ サンプルの通りに書けば作れる

360度動画を作って流した https://playground.babylonjs.com/#SQ5UC1#373 私が言うことは 何一つ無い 360度動画 → Unityで撮影可能 アルミナナさんのこちらの記事が参考になります 【Unity】Unityで360度動画＆画像を作る方法【Unity Recorder】 https://aluminium7.com/unity-recorder-360movie/ サンプルの通りに書けば作れる

この発表で話すこと ● 360度動画を作って流した(1分) ● 高原でVtuberの撮影会に参加するやつ作った(3分) ○ モーション付き3Dモデルの作成 ○ XRモード機能の追加 ○ 写真撮影機能の追加（スクリーンショット機能）

高原で撮影会するやつ作った https://playground.babylonjs.com/#WGZLGJ#5457

この発表で話すこと ● 360度動画を作って流した(1分) ● 高原でVtuberの撮影会に参加するやつ作った(3分) ○ モーション付き3Dモデルの作成 ○ XRモード機能の追加 ○ 写真撮影機能の追加（スクリーンショット機能）

モーションをつけたい Limes さんのこの記事が参考になる（とLimesさんから直々に教えてもらった！） Plaskで取得したbvh形式モーションをglb形式のアバターに適用させる方法 https://www.crossroad-tech.com/entry/bvh-glb-blender-retargetting VRM (3Dモデル データ) BVH (モーション データ) GLB (3Dモデル データ) 出力 出力 変換 モーション 追加 出力 モーション付きGLB (3Dモデルデータ) 彩アプリ モデル作成フロー

BlenderでVRM→GLB変換 参考資料 参考動画 VRMをblenderを使ってFBXに変換してUnityで動かす。前編【VOICEBOX】 https://www.youtube.com/watch?v=erl9z__-HaQ Motion Capture ToolsはGithubから取得 Blender2.83.21でしたがこのバージョンでもGithubから取得が必要。 Blenderの標準アドオンでモーションデータのリターゲティング【Blender 2.8 2.9対応】 https://kurokinadir.fanbox.cc/posts/2933176#:~:text=%E8%A9%A6%E3%81%97% E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82-,Blender%202 .9%E3%81%A7Motion%20Capture%20Tools%E3%82%92%E4%BD%BF%E3%8 1%86,-Blender%202.9%E3%81%8B%E3%82%89

VRM→GLB変換の知見 Vroid StudioでVRM出力→BlenderでGLB変換が正解 またUnity経由したVRM等だと発声していた 目のクマなどの症状も無くなった。 変に色々経由すべきでないな。 悪いところ ・目が上向いたまま。怖い ・脚の向き、左右が逆に設定されてる？ ・なんか光沢がある ・GLBサイズ25MB以上。 重い上にGithubにも上げられない

第一話：バーチャファイター彩 誕生 まあ踊ってるから ヨシ！！ Vスタンプより作成→

最終話：バーチャファイター彩 引退 ②脚の動きがおかしい ①目がやばい ③ライト当てるとテッカテカ 良い訳が 無い!! Vスタンプより作成

修正①目がおかしい 最初根性でBlenderで目のボーンを確認しながら修正してたけど、 Blenderで目の動きはBVH適用させないように外せば良いだけだった 右 目 左 目 5億年 刹那

修正②：モーションデータの動きが少しおかしい 下半身が左脚と右脚が逆にセットされているように見える。 BVHデータ （モーションデータ） モーションデータをキャ プチャーしたモデル

修正②：モーションデータの動きが少しおかしい BVHファイル内部を確認 ボーンの情報が初めにオフセットされてい て その後フレーム毎の更新データが記載さ れている

修正②：モーションデータの動きが少しおかしい ★結論：BVHファイルのモーションの変換が必要であった BVH（右手系）
 Babylon.js（左手系） 
 X②
 Y③
 Z①
 Z①
 Y③
 X②
 ①②③：回転順 以下2点を考慮してモーションを付与する必要がある ● TDPTのBVHはZ→X→Yの順で回転 ● BVHファイルは右手座標系

修正③ライト当てるとテッカテカ 鏡面反射光（specular reflection light）だ からライトの設定

この発表で話すこと ● 360度動画を作って流した(1分) ● 高原でVtuberの撮影会に参加するやつ作った(3分) ○ モーション付き3Dモデルの作成 ○ XRモード機能の追加 ○ 写真撮影機能の追加（スクリーンショット機能）

XRカメラの位置：上から見たような感じになる デフォルトのXRCamera（視線）の位置が高い 真正面から見たい こうしたい 神目線 観客目線

XRカメラの位置：正面から見れる高さにしたい The basic Experience Helperを使うとカメラの位置を変えられるらしい （通常のは Default Experience というみたい） WebXR Experience Helpers | Babylon.js Documentation これが色々と調べないと出てこなかったので次スライドに書く

XRカメラの位置：WebXRExperienceHelperの使用① WebXRExperienceHelper.CreateAsync()を使用してXR Helperを初期化する。 通常のXRで使用するのはcreateDefaultXRExperienceAsync()。 WebXRExperienceHelperを使用する場合は async/awaitで宣言しないとエラーになる。 PlaygroundではクラスがWebXRExperienceHelperが 無いのでBABYLONを頭に着けて持ってくる。 WebXR Experience Helpers | Babylon.js Documentation

XRカメラの位置：WebXRExperienceHelperの使用② enterXRAsync()でXRセッションを開始する。 WebXR Experience Helpers | Babylon.js Documentation 参照するXRスペースの初期位置を変更し、セッションマネージャーを更新。 WebXR Experience Helpers | Babylon.js Documentation カメラ位置が高いのでオフセットで 高さを1変更する ここまでやってセッションマネージャー が更新される。 正面から見れるような高さ になった！

XRモードの開始トリガーについて createDefaultXRExperienceAsync()を使えば勝手にXRモードのボタンが作られる ためブラウザ使用とHMD使用を選択できるが、WebXRExperienceHelperの場合は xrBasicHelper.enterXRAsync()がXRモード開始のトリガーになるため強制的にXR モード。ボタンなど存在しない。 ブラウザモードとXRモードと選択できるようにしたい WebXRExperienceHelperを使ったらXRモードになるボタンが消えた（右図）

XRモードの開始トリガーについて The Babylon GUIで作ろう。 Playgroundから拝借。 ↑ついでにカメラオフセットの スライダーも用意 ブラウザモードとXRモードが選択でき るようになった。 ＊XRモードを終了させる関数もあるが、 HMD外したら勝手に終了する ので実装せず。 ドキュメントはこちら： https://doc.babylonjs.com/divingDeeper/gui/gui

この発表で話すこと ● 360度動画を作って流した(1分) ● 高原でVtuberの撮影会に参加するやつ作った(3分) ○ モーション付き3Dモデルの作成 ○ XRモード機能の追加 ○ 写真撮影機能の追加（スクリーンショット機能）

写真撮影機能の追加（スクリーンショット機能） 機能実装の目的 以下の三段論法が成り立つ ● Vtuber ＝ アイドル ○ 彩 ＝ Vtuber ■ 彩 ＝ アイドル また、以下は自明である ● アイドルと言えば撮影会 私へのニーズは写真撮影であると直感。 写真撮影機能を実装する。 At times I feel certain I am right while not knowing the reason. 私は、直感や霊感を信じている。 ときに理由 は分からずとも、正しいと確信することがある のだ。 アルベルト・アインシュタインの名言より引用 アルベルト・アインシュタイン (1879-1955)

写真撮影機能の追加（スクリーンショット機能） Babylon.JSにはスクリーンショットの機能もある Render Scenes To .png Files | Babylon.js Documentation ● 良さ①GUIを取り除ける(Renderを選択できる) ● 良さ②XRモードで撮影できる ● 良さ③連射できる 左：Windowsのスクショ機能 右：Babylon.jsのスクショ機能

写真撮影機能の追加（スクリーンショット機能） キー操作でスクショできるようにする。 通常用 XR用 Ｓキーでスクショのアクションを登録するよ 非同期（async/await） WebXRCameraクラスも適用可能 キー操作の参照はこちら Actions | Babylon.js Documentation

以上。後で思ったこと basic Experience Helperを使って得たこと ● 目線の高さのオフセット Default Experience Helperを使うと得られること ● コントローラーのインプット ● 簡単な設定 ● XRモードボタン 写真撮影機能もコントローラーで実装したかったし、 次はDefault Experience Helperを使いたいなと思いました カメラ位置もどうにか なったのでは？？

付録：ゲーミング彩 【Unity】ImageやSpriteの色を虹色に変化させる【ゲーミング発光】｜ドロップアウト・クリエイターズ https://dropoutc.com/creation/colorrainbow/ Color3 | Babylon.js DocumentationのHSVtoRGBToRef https://doc.babylonjs.com/typedoc/classes/BABYLON.Color3#HSVtoRGBToRef:~:text=Static-,HSVtoRGBToRef,-Search%20playground%20for ここをコメントアウトすると …？ ゲーミング彩に!! 使った関数 [0-1] [0-1] [0-359] 約1680万色に（正確には16777216色）輝く！

ありがとうございました！ BabylonJS勉強会はいいぞ ● イワケンさん Github関連、WebXR関連参考にさせていただいた ● やまゆさん babylon-vrm-loaderの環境をベースで作らせていただきました ● Limesさん 3Dモデルの動かし方のアドバイスと参考資料をしてくださいました ● 皆さま この会があるからがんばろうと思いました。 技術、やる気のある人ばかりの Babylon.JS勉強会、 3DCG技術に興味のある人は入るしかないですね！

EOF