Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

バーチャルライブプラットフォーム 「INSPIX」を支える技術とその活用法

2,147 views

Published on

xR Tech Tokyo #14 @ メルカリで発表した資料です
https://vrtokyo.connpass.com/event/114566/

Published in: Engineering
  • Be the first to comment

バーチャルライブプラットフォーム 「INSPIX」を支える技術とその活用法

  1. 1. © 2019 pulse.Inc バーチャルライブプラットフォーム 「INSPIX」を支える技術とその活用法 パルス株式会社 加田健志 2019.2.17
  2. 2. © 2019 pulse.Inc 自己紹介 加田 健志 パルス株式会社 / VR Live Engineer アーケードゲーム開発会社、 VRゲーム開発会社を経て 2018年パルス株式会社に入社。 2015年より公私にわたって VRコンテンツの制作に従事 現在はVRデバイス制御、クライアント通信、サウンド制御が主な担当範囲 登壇 - CEDEC2018 おうちでVRライブ体験 バーチャルライブプラットフォーム「INSPIX」のこれまでと今後 - UNREAL FEST EAST 2017 脱Unity!? UE4でVR開発のここが変わった
  3. 3. © 2019 pulse.Inc パルス株式会社 株式会社イグニスの子会社 VRコンテンツの企画・開発・運営 岩本町芸能社・株式会社ミラクルプロと 業務提携中 えのぐ 馬越健太郎 米(マイ)プリンセス
  4. 4. © 2019 pulse.Inc アジェンダ ● バーチャルライブプラットフォーム「INSPIX」とは ● VRライブを支える技術 ○ 光学式モーションキャプチャシステム ○ ライブプラットフォームに求められる技術 ● ライブ以外の活用法 ● 今後の展望
  5. 5. © 2019 pulse.Inc 世はVRライブ戦国時代
  6. 6. © 2019 pulse.Inc
  7. 7. © 2019 pulse.Inc とは? バーチャルライブプラットフォーム
  8. 8. © 2019 pulse.Inc バーチャルライブプラットフォーム「INSPIX」 https://1923.co.jp/press-release/2018/12/25_01.html ・フルタイムリアルタイムライブ ・スマホVRから出発 ・多人数出演
  9. 9. © 2019 pulse.Inc フルタイムリアルタイムライブ ● 全てがリアルタイム ○ リアルタイム体験こそライブ ○ 歌とダンスも生 ○ 実在感を表現 歌 MC 歌 生 生 生
  10. 10. © 2019 pulse.Inc スマホVRから出発 ● ユーザーが高価な機材を買わなくても体験できる ● VRライブの認知度を上げてから専用デバイスに拡大 ● エンジニア・デザイナ的には厳しいところからスタート
  11. 11. © 2019 pulse.Inc 多人数出演 ● 理論上は何人でも出演可能 ● 光学式モーションキャプチャシステムで実現 ○ あとで詳しく話します
  12. 12. © 2019 pulse.Inc 2018年INSPIX活用年表 誕生祭 VR お話会 2月 誕生祭 VR お話会 3月 4月 初ライブ 5月 6月 誕生祭 VR お話会 7月 誕生祭 VR お話会 8月 9月 10月 誕生祭 VR お話会 11月 12月 ライブ ライブ ライブ ライブ ライブ ライブ CD リリースイ ベント 360度 ライブ バーチャル 握手会 一日店長 イベント 360度 生放送 ライブ8回 VRお話会5回+お話会2回
  13. 13. © 2019 pulse.Inc アジェンダ ● バーチャルライブプラットフォーム「INSPIX」とは ● VRライブを支える技術 ○ 光学式モーションキャプチャシステム ○ ライブプラットフォームに求められる技術 ● ライブ以外の活用法 ● 今後の展望
  14. 14. © 2019 pulse.Inc モーションキャプチャシステム アクターの動きを取り込むためのシステム ゲーム・映画・VTuberなど応用範囲は広い 磁気式・光学カメラ式・VRデバイスを使ったシステムなどがある ボーンの位置・回転情報をデータとして出力
  15. 15. © 2019 pulse.Inc 光学式モーションキャプチャシステム アクターはマーカーを取り付けた専用のスーツを着用 マーカーの位置を専用のカメラが撮影し、モーションをトラッキング トラッキングスペース内であれば、理論上何人でもトラッキングが可能 めっちゃ高い
  16. 16. © 2019 pulse.Inc 弊社のキャプチャスタジオ キャプチャ用カメラ
  17. 17. © 2019 pulse.Inc リアルタイムモーションキャプチャの難しさ 常に正しい動きが出力されるわけではない →想定していない方向に関節が曲がっている 一般のモーションキャプチャ →キャプチャ後にアニメーターがデータを編集 リアルタイムモーションキャプチャ →キャプチャデータ自体の編集はできない →キャラクターにモーションを適用する際に制御を加える →ボーンの角度制限・IK・サブボーンなど
  18. 18. © 2019 pulse.Inc 他にも・・・ ・アクターとキャラクターの体格差  →小物を持たせると破綻が発生  →IKなどを駆使し解決 ・ポーズがうまく決まらない  →アクターのポーズとキャラクターのポーズに差異  →キャプチャされたポーズがカッコよくなるようにアクターが調整 課題はアクターの練習とエンジニアリング両面で解決
  19. 19. © 2019 pulse.Inc アジェンダ ● バーチャルライブプラットフォーム「INSPIX」とは ● VRライブを支える技術 ○ 光学式モーションキャプチャシステム ○ ライブプラットフォームに求められる技術 ● ライブ以外の活用法 ● 今後の展望
  20. 20. © 2019 pulse.Inc ライブプラットフォームに求められる技術 通信 描画
  21. 21. © 2019 pulse.Inc ライブプラットフォームに求められる技術 通信 描画
  22. 22. © 2019 pulse.Inc ライブプラットフォームに求められる通信 リアルタイム通信で送らなければいけないデータ - アクターのモーション・表情 - 音楽・歌声 - ライトやビジョンの演出 - 観客の動き タイミングが揃わないとライブ感は得られない
  23. 23. © 2019 pulse.Inc 単純に各データを送ってしまうと 音声データ モーションデータ 音声データと モーションデータの タイミングがそろわない イマイチなライブ体験
  24. 24. © 2019 pulse.Inc モーションデータにタイミング情報を付与 音声データ モーションデータ エモいライブ体験 何秒目の音声の時の モーションだったか タ イ ミ ン グ を そ ろ え て か ら 再 生
  25. 25. © 2019 pulse.Inc 通信の安定化 通信が不安定になると・・・ →音やモーションが途切れる →ライブ体験の質が大幅に下がる 通信を安定させるために効果的なこと ・強力なインフラを準備する? ・高スペックなマシンを用意する? →通信量を減らす
  26. 26. © 2019 pulse.Inc 通信量の削減 通信量を減らすために効果的だったこと 〇送信モーションデータの削減  ・毎フレーム送らず受信側で補間  ・見た目に影響しないボーン情報を送信しない 〇ボーン情報をQuaternionではなくEulerで送信  ・float4個からfloat3個に削減 〇ボーンの回転情報をfloat[3]ではなくintに圧縮  ・x軸とy軸は11bit z軸は10bitに圧縮   →合計32bit 通信量約90%減を達成 改善前 改善後
  27. 27. © 2019 pulse.Inc ライブプラットフォームに求められる技術 通信 描画
  28. 28. © 2019 pulse.Inc 今日から始められる描画の工夫 ● モバイル端末で描画可能な仕様を作成 ● 描画の最適化は難しいことが多い&すぐできない事が多い ○ ポリゴン数減らす ○ ボーン数減らす ○ シェーダーのロジックを工夫して最適化する etc... アセットを導入するだけの 簡単な描画最適化法2種類を紹介
  29. 29. © 2019 pulse.Inc 観客描画 ● ライブ感を出すためにモブ観客が必要 ● 立ってるだけじゃつまらないので動かしたい ● Skinned MeshとAnimatorでは数10体が限界・・・ ● Animation Texture Baker for Unityを導入 ○ シェーダーで頂点アニメーションさせる ● 10倍以上の数の描画が可能に ● https://github.com/sugi-cho/Animation-Texture-Baker
  30. 30. © 2019 pulse.Inc 揺れもの最適化 ● 以前は揺れものにDynamic Boneを使用 ○ めっちゃ重い・・・ ○ モバイルで5人出すのは辛い ● Unity Chan Spring Boneを導入 ○ Dynamic Boneに比べて軽量 ○ 日本語UIなので非エンジニアでも パラメータ調整が可能に ○ https://github.com/unity3d-jp/UnityChanSpringBone
  31. 31. © 2019 pulse.Inc アジェンダ ● バーチャルライブプラットフォーム「INSPIX」とは ● VRライブを支える技術 ○ 光学式モーションキャプチャシステム ○ ライブプラットフォームに求められる技術 ● ライブ以外の活用法 ● 今後の展望
  32. 32. © 2019 pulse.Inc 2018年INSPIX活用年表 誕生祭 VR お話会 2月 誕生祭 VR お話会 3月 4月 初ライブ 5月 6月 誕生祭 VR お話会 7月 誕生祭 VR お話会 8月 9月 10月 誕生祭 VR お話会 11月 12月 ライブ ライブ ライブ ライブ ライブ ライブ CD リリースイ ベント 360度 ライブ バーチャル 握手会 一日店長 イベント 360度 生放送
  33. 33. © 2019 pulse.Inc お話会 バーチャル握手会
  34. 34. © 2019 pulse.Inc アイドルと直接会話を楽しむイベント ● アイドルは接近戦が楽しい! ○ 双方向コミュニケーション ● VRお話会 ○ Viveを装着し、アイドルと1分程度の話を楽しめる ● お話会 ○ スクリーン越しにアイドルと1分程度の会話を楽しめる
  35. 35. © 2019 pulse.Inc モーション 音声 音声 カメラ映像 アイドル スタジオ側 ファン 現地側
  36. 36. © 2019 pulse.Inc バーチャル握手会 ● デビューシングル発売イベントとして実施 ● 会場に人を集めて2日間開催 ● 11〜13時、14〜16時、17〜19時の三部構成 ● のべ体験人数約1000人
  37. 37. © 2019 pulse.Inc 体験の流れ 3人同時にHMDを装着 VR空間で順番待ち アイドルと握手や会話を楽しむ フェードアウトして終了 自分の順番になったら 時間が来たら
  38. 38. © 2019 pulse.Inc バーチャル握手会のここが良い 剥がし役が不要
  39. 39. © 2019 pulse.Inc 触覚デバイスについて ● 握手会なので触覚デバイス? →付け外しの手間がかなりかかる →衛生的にも懸念がある →断念
  40. 40. © 2019 pulse.Inc Daydream Mirage Solo ● AndroidベースのスタンドアローンVR HMD ○ HMDは6DoF対応 ● コントローラーは3DoF・振動なし ○ エフェクトやサウンドで握手やハイタッチしている感を演出 ● バッテリーは処理負荷が高いと1時間半程度 ○ モバイルバッテリーを接続してサブバッテリーとして運用 ● HMD内蔵のマイクの精度が結構高い ○ 外部機器を使わなくても双方向の会話が可能 ● 当日は予備も含め40台用意 ○ アクセスポイントは2か所用意 モバイルバッテリー
  41. 41. © 2019 pulse.Inc スタンドアローンHMDイベント運用での工夫 ● お客さんが何を見ているか分からない ● バッテリー残量がわからない ● 通信が生きているのかわからない →端末の情報を定期的に現地のPCに送信 視線情報(数フレーム間隔) バッテリー情報(数秒間隔)
  42. 42. © 2019 pulse.Inc 360度配信
  43. 43. © 2019 pulse.Inc 360度配信 = お気軽VR配信 配信者:専用の動画フォーマットで収録 or 生配信するだけ ユーザー:専用デバイスが無くても視聴可能 2018年は2回 360度生配信を実施 - 11月 実験!360度生放送!【VRアイドルえのぐ】 - 12月 【360度LIVE】VRアイドル「えのぐ」クリスマス特別生ライブ開催! Equirectangularフォーマット エクイレクタングラー
  44. 44. © 2019 pulse.Inc 安定した360度動画を得るまで ● 専用のアセットを使ってみる ○ 360 Panorama Capture ○ 360 VR Camera Capture Rig ○ Facebook 360-Capture-SDK ■ 生配信対応 ■ 動画エンコードもアセット内で行う ■ https://github.com/facebook/360-Capture-SDK ● 1回目の生配信は「Facebook 360-Capture-SDK」を使った ○ PCが負荷に耐え切れず画質が低下・・・ ○ 音もなぜか高くなっていく・・・
  45. 45. © 2019 pulse.Inc 自前で360度動画フォーマットにする Unity単体で360度動画フォーマットにする方法 1. カメラからCube Mapを生成 2. Cube Mapを RenderTexture.ConvertToEquirect を使って変換 3. 画面の最前面に描画 音声 OBSなどの 配信ソフト 合成 送信
  46. 46. © 2019 pulse.Inc ソースコード using UnityEngine ; [RequireComponent (typeof(Camera))] public class EquirectRenderer : MonoBehaviour { RenderTexture m_cubemap ; [SerializeField ] RenderTexture m_EquirectTexture ; //このテクスチャを Canvasなどを使って最前面に描画 Camera m_Camera ; void Start() { m_Camera = this.GetComponent <Camera>(); m_cubemap = new RenderTexture (1024, 1024, 24); m_cubemap .dimension = UnityEngine .Rendering .TextureDimension .Cube; //Cubemap 形式に設定 } private void LateUpdate () { m_Camera .RenderToCubemap (m_cubemap ); //カメラの映像を Cubemapに撮像 m_cubemap .ConvertToEquirect (m_EquirectTexture ); //Cubemap をEquirectangular に変換 } } https://github.com/tkada/UnityEquirectRenderer
  47. 47. © 2019 pulse.Inc 12月のライブは大成功! ・音や映像が途切れることなくライブができた ・解像度も11月より向上 ・今後も時々360度動画企画やるかも? 【360度LIVE】VRアイドル「えのぐ」 クリスマス特別生ライブ開催!
  48. 48. © 2019 pulse.Inc アジェンダ ● バーチャルライブプラットフォーム「INSPIX」とは ● VRライブを支える技術 ○ 光学式モーションキャプチャシステム ○ ライブプラットフォームに求められる技術 ● ライブ以外の活用法 ● 今後の展望
  49. 49. © 2019 pulse.Inc 今後の展望 ● スマホ版INSPIXリリース ● 不定期で行われるイベント対応&機能拡張 ● コラボ案件にも柔軟に対応できるよう機能拡張
  50. 50. © 2019 pulse.Inc INSPIX Support Program INSPIXを使ってライブがしてみたい! INSPIXを使って握手会がしてみたい! VTuberさんや企業の方 お問い合わせはこちら https://1923.co.jp/inspix-inquiry
  51. 51. © 2019 pulse.Inc 【VRアイドル】えのぐチャンネル 馬越健太郎チャンネル 米プリンセスチャンネル チャンネル登録よろしくお願いします!
  52. 52. © 2019 pulse.Inc 2月20日 TOKYO MXの番組に「えのぐ」が出演 放送日:2019年2月20日(水)20:27〜20:56 放送局:TOKYO MX 番組名:ソーシャルジン 公式サイト:http://socialzine.love/
  53. 53. © 2019 pulse.Inc 積極採用中です!!! クライアントエンジニア、サーバーエンジニア、 Webエンジニア 3Dモデラー、3Dアニメーター、エフェクトデザイナー、 イラストレーター プランナー、QAなどなど https://recruit.1923.co.jp/recruits
  54. 54. © 2019 pulse.Inc ご清聴ありがとうございました

×