VtuberでもWebXRを使いたい！

Google Slideはこちら。リンクに飛ぶのに便利です。
https://docs.google.com/presentation/d/1QsOj18mq0UGDEASmTtQj3k0qy4maeQU3dBuHeXY4qNQ/edit#slide=id.p

Babylon.js勉強会主催のゆるほめLTにて発表した資料になります。
360度動画、WebXRを使ったカメラのpngファイル出力について話しています。
その他、作成にあたり知見などを記載。

イベントURLはこちら
https://babylonjs.connpass.com/event/250238/

Transcript

1. VtuberでもWebXRを使いたい！ 彩
2. リンク飛んだりしたい場合はSpeakerDeck説明欄に記 載のGoogle Slideから閲覧ください すまんね
3. Vtuberの彩です • 2018年2月にVtuberデビュー • VRとスマブラが好き • VR関連 ◦ 2020年 日本VR学会 上級バーチャルリアリティ技術者 • スマブラ関連 ◦ スマメイトレート1700達成（3DS) ◦ スマメイトレート1600達成（SP） • Youtube ◦ https://www.youtube.com/channel/UCaO7o3PXaId7vhvBUAmK_Iw スマブラ、雑談、VRなどしてます。良かったら見てください。あとさらに言うとチャンネル登録と高評価をして く モーニングスターの 動画がおすすめです。 アイコン 全身図
4. この発表で話すこと • 360度動画を作って流した(一言だけ) • 高原でVtuberの撮影会に参加するやつ作った(3分) ◦ モーション付き3Dモデルの作成 ◦ XRモード機能の追加 ◦ 写真撮影機能の追加（スクリーンショット機能）
5. この発表で話すこと • 360度動画を作って流した(1分) • 高原でVtuberの撮影会に参加するやつ作った(3分) ◦ モーション付き3Dモデルの作成 ◦ XRモード機能の追加 ◦ 写真撮影機能の追加（スクリーンショット機能）
6. 360度動画を作って流した https://playground.babylonjs.com/#SQ5UC1#373 右下のHMDアイコンを 押すとXRモードになる よ 下のURLで見れるよ サンプルの通りに書けば作れる
7. 360度動画を作って流した https://playground.babylonjs.com/#SQ5UC1#373 私が言うことは 何一つ無い 360度動画 → Unityで撮影可能 アルミナナさんのこちらの記事が参考になります 【Unity】Unityで360度動画＆画像を作る方法【Unity Recorder】 https://aluminium7.com/unity-recorder-360movie/ サンプルの通りに書けば作れる
8. この発表で話すこと • 360度動画を作って流した(1分) • 高原でVtuberの撮影会に参加するやつ作った(3分) ◦ モーション付き3Dモデルの作成 ◦ XRモード機能の追加 ◦ 写真撮影機能の追加（スクリーンショット機能）
9. 高原で撮影会するやつ作った https://playground.babylonjs.com/#WGZLGJ#5457
10. この発表で話すこと • 360度動画を作って流した(1分) • 高原でVtuberの撮影会に参加するやつ作った(3分) ◦ モーション付き3Dモデルの作成 ◦ XRモード機能の追加 ◦ 写真撮影機能の追加（スクリーンショット機能）
11. モーションをつけたい Limes さんのこの記事が参考になる（とLimesさんから直々に教えてもらった！） Plaskで取得したbvh形式モーションをglb形式のアバターに適用させる方法 https://www.crossroad-tech.com/entry/bvh-glb-blender-retargetting VRM (3Dモデル データ) BVH (モーション データ) GLB (3Dモデル データ) 出力 出力 変換 モーション 追加 出力 モーション付きGLB (3Dモデルデータ) 彩アプリ モデル作成フロー
12. 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
13. VRM→GLB変換の知見 Vroid StudioでVRM出力→BlenderでGLB変換が正解 またUnity経由したVRM等だと発声していた 目のクマなどの症状も無くなった。 変に色々経由すべきでないな。 悪いところ ・目が上向いたまま。怖い ・脚の向き、左右が逆に設定されてる？ ・なんか光沢がある ・GLBサイズ25MB以上。 重い上にGithubにも上げられない
14. 第一話：バーチャファイター彩 誕生 まあ踊ってるから ヨシ！！ Vスタンプより作成→
15. 最終話：バーチャファイター彩 引退 ②脚の動きがおかしい ①目がやばい ③ライト当てるとテッカテカ 良い訳が 無い!! Vスタンプより作成
16. 修正①目がおかしい 最初根性でBlenderで目のボーンを確認しながら修正してたけど、 Blenderで目の動きはBVH適用させないように外せば良いだけだった 右 目 左 目 5億年 刹那
17. 修正②：モーションデータの動きが少しおかしい 下半身が左脚と右脚が逆にセットされているように見える。 BVHデータ （モーションデータ） モーションデータをキャ プチャーしたモデル
18. 修正②：モーションデータの動きが少しおかしい BVHファイル内部を確認 ボーンの情報が初めにオフセットされてい て その後フレーム毎の更新データが記載さ れている
19. 修正②：モーションデータの動きが少しおかしい ★結論：BVHファイルのモーションの変換が必要であった BVH（右手系）
 Babylon.js（左手系） 
 X②
 Y③
 Z①
 Z①
 Y③
 X②
 ①②③：回転順 以下2点を考慮してモーションを付与する必要がある • TDPTのBVHはZ→X→Yの順で回転 • BVHファイルは右手座標系
20. 修正③ライト当てるとテッカテカ 鏡面反射光（specular reflection light）だ からライトの設定
21. この発表で話すこと • 360度動画を作って流した(1分) • 高原でVtuberの撮影会に参加するやつ作った(3分) ◦ モーション付き3Dモデルの作成 ◦ XRモード機能の追加 ◦ 写真撮影機能の追加（スクリーンショット機能）
22. XRカメラの位置：上から見たような感じになる デフォルトのXRCamera（視線）の位置が高い 真正面から見たい こうしたい 神目線 観客目線
23. XRカメラの位置：正面から見れる高さにしたい The basic Experience Helperを使うとカメラの位置を変えられるらしい （通常のは Default Experience というみたい） WebXR Experience Helpers | Babylon.js Documentation これが色々と調べないと出てこなかったので次スライドに書く
24. XRカメラの位置：WebXRExperienceHelperの使用① WebXRExperienceHelper.CreateAsync()を使用してXR Helperを初期化する。 通常のXRで使用するのはcreateDefaultXRExperienceAsync()。 WebXRExperienceHelperを使用する場合は async/awaitで宣言しないとエラーになる。 PlaygroundではクラスがWebXRExperienceHelperが 無いのでBABYLONを頭に着けて持ってくる。 WebXR Experience Helpers | Babylon.js Documentation
25. XRカメラの位置：WebXRExperienceHelperの使用② enterXRAsync()でXRセッションを開始する。 WebXR Experience Helpers | Babylon.js Documentation 参照するXRスペースの初期位置を変更し、セッションマネージャーを更新。 WebXR Experience Helpers | Babylon.js Documentation カメラ位置が高いのでオフセットで 高さを1変更する ここまでやってセッションマネージャー が更新される。 正面から見れるような高さ になった！
26. XRモードの開始トリガーについて createDefaultXRExperienceAsync()を使えば勝手にXRモードのボタンが作られる ためブラウザ使用とHMD使用を選択できるが、WebXRExperienceHelperの場合は xrBasicHelper.enterXRAsync()がXRモード開始のトリガーになるため強制的にXR モード。ボタンなど存在しない。 ブラウザモードとXRモードと選択できるようにしたい WebXRExperienceHelperを使ったらXRモードになるボタンが消えた（右図）
27. XRモードの開始トリガーについて The Babylon GUIで作ろう。 Playgroundから拝借。 ↑ついでにカメラオフセットの スライダーも用意 ブラウザモードとXRモードが選択でき るようになった。 ＊XRモードを終了させる関数もあるが、 HMD外したら勝手に終了する ので実装せず。 ドキュメントはこちら： https://doc.babylonjs.com/divingDeeper/gui/gui
28. この発表で話すこと • 360度動画を作って流した(1分) • 高原でVtuberの撮影会に参加するやつ作った(3分) ◦ モーション付き3Dモデルの作成 ◦ XRモード機能の追加 ◦ 写真撮影機能の追加（スクリーンショット機能）
29. 写真撮影機能の追加（スクリーンショット機能） 機能実装の目的 以下の三段論法が成り立つ • Vtuber ＝ アイドル ◦ 彩 ＝ Vtuber ▪ 彩 ＝ アイドル また、以下は自明である • アイドルと言えば撮影会 私へのニーズは写真撮影であると直感。 写真撮影機能を実装する。 At times I feel certain I am right while not knowing the reason. 私は、直感や霊感を信じている。 ときに理由 は分からずとも、正しいと確信することがある のだ。 アルベルト・アインシュタインの名言より引用 アルベルト・アインシュタイン (1879-1955)
30. 写真撮影機能の追加（スクリーンショット機能） Babylon.JSにはスクリーンショットの機能もある Render Scenes To .png Files | Babylon.js Documentation • 良さ①GUIを取り除ける(Renderを選択できる) • 良さ②XRモードで撮影できる • 良さ③連射できる 左：Windowsのスクショ機能 右：Babylon.jsのスクショ機能
31. 写真撮影機能の追加（スクリーンショット機能） キー操作でスクショできるようにする。 通常用 XR用 Ｓキーでスクショのアクションを登録するよ 非同期（async/await） WebXRCameraクラスも適用可能 キー操作の参照はこちら Actions | Babylon.js Documentation
32. 以上。後で思ったこと basic Experience Helperを使って得たこと • 目線の高さのオフセット Default Experience Helperを使うと得られること • コントローラーのインプット • 簡単な設定 • XRモードボタン 写真撮影機能もコントローラーで実装したかったし、 次はDefault Experience Helperを使いたいなと思いました カメラ位置もどうにか なったのでは？？
33. 付録：ゲーミング彩 【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色）輝く！
34. ありがとうございました！ BabylonJS勉強会はいいぞ • イワケンさん Github関連、WebXR関連参考にさせていただいた • やまゆさん babylon-vrm-loaderの環境をベースで作らせていただきました • Limesさん 3Dモデルの動かし方のアドバイスと参考資料をしてくださいました • 皆さま この会があるからがんばろうと思いました。 技術、やる気のある人ばかりの Babylon.JS勉強会、 3DCG技術に興味のある人は入るしかないですね！
35. EOF