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.

【Unity道場スペシャル 2017札幌】おっさんでも美少女になれる?!VRアイドルの作り方

16,280 views

Published on

2017/10/8に開催されたUnity道場 札幌スペシャル2の講演動画です。
講師:山口直樹(株式会社インフィニットループ)
講演動画:https://youtu.be/wKAKw2qKKQI

VRアイドル戦国時代の昨今、VRを使えばだれでも美少女になれます。(ただし仮想世界で)VRとの親和性の高いUnityを使って技術のなさをお金でカバーしながらも仮想世界で美少女になってVRアイドルとしてデビューする方法を紹介します。かわいいは作れる!(別途アセット購入費用)を合言葉に美少女になる方法をお伝えします。

こんな人におすすめ
・VRは難しいと思ってる方
・HTC ViveでのVRコンテンツの作り方
・VR関連のアセットについて 

得られる知見
・かわいいは作れる

Unityのイベント資料はこちらから:
https://www.slideshare.net/UnityTechnologiesJapan/clipboards

Published in: Technology
  • Be the first to comment

【Unity道場スペシャル 2017札幌】おっさんでも美少女になれる?!VRアイドルの作り方

  1. 1. おっさんでも美少女になれる?! VRアイドルの作り方 株式会社インフィニットループ システム開発部 山口直樹
  2. 2. 対象者 ・VRの開発をやったことない人 ・VRの開発って難しいって思ってる人 ・美少女になりたい人 VR機材はHTC Viveを想定しています 昨年同様 ノーコーディングで進行します
  3. 3. 株式会社インフィニットループとは ・ゲーム開発 ・モバイルアプリ開発 ・Webアプリ開発 ・Linuxサーバ構築運用 サーバのことなら任せとけって会社です
  4. 4. そんなサーバな会社がなぜVR? 去年エイプリールフールのネタが軽くバズったからです ちなみに今年はそうでもなかったです
  5. 5. 自己紹介(1) 札幌のソフト会社で20年ほど 低レイヤーのネットワーク管理に従事 その後、インフィニットループに転職 山口 直樹 得意な言語 そもそもプログラムなんてやってない 特技 UTPケーブルの8字巻き
  6. 6. 自己紹介(2) 会社でVRのコンテンツをはじめて見て「こ れ出来ればあんなことやこんなこともでき るじゃん!!」と 思って覚え始めた2年前の12月 あいえるたんさわさわ Vive あいえるたん お姫様だっこ せかいぬりえ
  7. 7. どんなことやってるのか?
  8. 8. どんなことやってるのか?
  9. 9. どんなことやってるのか?
  10. 10. VRアイドルって何? 定義が不明 たぶん3Dのモデルキャラを動かしたら VRアイドルになれるのではないか? FaceRigやKinectを使ってVRアイドルと言ってる人たちもいるので・・・
  11. 11. VRアイドルやってました 今の定義がVRアイドルでしたら 個人的に4年以上前からやってました もしかして今ブーム???
  12. 12. VR Live Studio ・多人数での空間共有 ・コメントAPIにフックしてコメントの可視化 (Youtube ニコ生 Twitter等) ・描画クライアントはなんでもOK ・ライブ配信に特化したシステム (字幕機能やダンス等) ・画面共有、カメラ切り替え ディスクトップキャプチャー機能 その他いろいろ
  13. 13. 第一章 美少女を 動かしてみよう!
  14. 14. 美少女の用意 弊社マスコットキャラクターの 「あいえるたん」を使用します ホームページからUnityアセットが ダウンロードできます http://www.infiniteloop.co.jp/special/iltan/3d-dl.php
  15. 15. 美少女の用意 アセットをインポート後、アセットの中に 【ILtan】プレファブがあるので置いてみる
  16. 16. 美少女の用意 美少女ではなく、社長になりたい 方はアセットの中にうちの社長が 入ってるのでこちらをどうぞ
  17. 17. IKコンポーネントの用意 ちょっとお高いけど、美少女になるためです。出費しましょう。 キャラクターを動かすため のコンポーネントです。 (定番)
  18. 18. IKコンポーネントの用意 IKコンポーネントの中の 【VRIK】コンポーネントを ILtanに入れます
  19. 19. IKコンポーネントの設定 1.適当なオブジェクト作成 (ここではCube 大きさは0.1に) 2.作成したオブジェクトをVRIKの Left Arm→Targetへ
  20. 20. できたもの
  21. 21. ということは・・・ TargetのところをHTC Viveコントローラに すれば両手を自由に動かせれるのでは? (ついでに頭のところをHMDにしちゃう)
  22. 22. 第二章 美少女になろう!
  23. 23. SteamVR Pluginのインポート UnityでHTC Viveを使うには、とりあえずこれがないとはじまりません。 (なくても使えるけど・・・ってツッコミはなしの方向で)
  24. 24. HTC Viveを使えるようにする いらない 1. [CameraRig]プレファブを ヒエラルキーに置く 2. カメラが二つになるので最初 にあるカメラを削除
  25. 25. VRIKの設定 [CameraRig]の中の Controller(right) → Right ArmのTarget Controller(left) → Left ArmのTarget Camera(eye) → Head Target IKポイントを設定します
  26. 26. できたもの
  27. 27. 大失敗 IKの基準が地面なのをやめて無条件にHMDが頭にくるようにする (美少女が宙に浮くけど、美少女だから問題なし) 顔の描画をやめる 解決策その1 解決策その2 失敗1. 美少女の背丈とリアルの背丈があっていない (そのため目線が頭の上) 失敗2. 目線が頭の中なので、頭の中(顔の裏)しか見えない
  28. 28. 解決策 その1 ここのチェックを外す 以上
  29. 29. 解決策 その2 顔の部分のレイヤーを Default以外にする
  30. 30. 解決策 その2 CameraのCulling Maskで 顔のレイヤーを外す (これで描画しない)
  31. 31. できたもの
  32. 32. 自分の姿が見えない!!
  33. 33. 第2.5章 鏡の作成
  34. 34. 鏡の作り方 ・板を作って、そこにカメラを置いて カメラの映像を板に映せば出来るんじゃない? (Render Texture)
  35. 35. やってみる 鏡用のRenderTextureとマテリアルの作成 テクスチャサイズを 1024x1024に ShaderをUnlit/Textureに テクスチャを作成したRenderTextureに
  36. 36. やってみる 適当に板作成(Quadで作成) 作成した板のマテリアルを先ほど 作成したマテリアルに設定
  37. 37. やってみる その板に、カメラを追加 カメラの向きが反対なので y=180に設定 カメラ以外は使わないので Audio Listener等余計なもの は削除 TargetTextureは作成した RenderTextureを設定
  38. 38. できたもの
  39. 39. 自分の姿は見えたけど・・・ 鏡なのに左右が変 鏡なのになんか比率?が変 (近づいたら巨大) 全体的に変で鏡ではない!!
  40. 40. 鏡なのに左右が変 鏡の板のScaleを変更 (xをマイナスに)
  41. 41. 鏡なのになんか比率?が変 間違い 正解 カメラの画角に ぴったり合わさるように カメラを後ろに配置する必要あり
  42. 42. カメラの距離の求め方 https://docs.unity3d.com/jp/530/Manual/FrustumSizeAtDistance.html Unityのドキュメントに ありました。 (しかも日本語)
  43. 43. カメラの距離の求め方 1 60 (PI * 2) / 360 良い子のみんなは ちゃんとプログラムで 書こう 鏡(板)の大きさ カメラのField of Viewの値
  44. 44. カメラの距離の求め方 良い子のみんなはちゃんとプログラムで書こう 先ほど求めた値をカメラの 距離(Z)に入れる
  45. 45. できたもの
  46. 46. 第三章 美少女でしゃべろう!
  47. 47. 声に合わせて口パク https://developer.oculus.com/downloads/package/oculus-ovrlipsync-for-unity-5/
  48. 48. 声に合わせて口パク とりあえず、全部インポート
  49. 49. 表情の変更方法 ILtanの場合は U_Char_1(頭部分)の Skinned Mesh Render内 BlendSharpsの値を変更すると 表情が変化します
  50. 50. 表情の変更方法 BlendSharpsの名前から判断して、 ここを変更すれば「あ」「い」「う」「え」「お」の口の形に なるのかなぁ?と予想
  51. 51. コンポーネントの設定 【LipSyncInterface】をヒエラルキーに入れる
  52. 52. コンポーネントの設定 【OVR Lip Sync Mic Input】 【OVR Lip Sync Context Morp Target】 【OVR Lip Sync Context】 これらのコンポーネントを入れます (Audio Sourceが勝手に入ります)
  53. 53. コンポーネントの設定 【OVR Lip Sync Mic Input】 Mic Controlを Constant Speakに変更 【OVR Lip Sync Context】 Audio Muteのチェックを外す (実行したら常にマイクONにしたいので) (自分の声をイヤホンで聞きたいので)
  54. 54. コンポーネントの設定 BlendShapesのインデックス値を確認 (上から順番に数えて「あ」「い」「う」「え」「お」のIndex値を求 める) 「あ」 → 27 「い」 → 28 「う」 → 29 「え」 → 30 「お」 → 31 【結果】
  55. 55. Element 0 無音 Element 1 PP Element 2 FF Element 3 TH Element 4 DD Element 5 kk Element 6 CH Element 7 SS Element 8 nn Element 9 RR Element 10 aa ←「あ」(27) Element 11 E ←「え」(30) Element 12 ih ←「い」(28) Element 13 oh ←「お」(31) Element 14 ou ←「う」(29) コンポーネントの設定 【OVR Lip Sync Context Morp Target】を設定しま す
  56. 56. できたもの
  57. 57. 声が美少女じゃない!!
  58. 58. 第四章 美少女の声になろう!
  59. 59. ボイスチェンジャーを探す https://www.assetstore.unity3d.com/jp/#!/content/54963
  60. 60. ボイスチェンジャーの設定 【Voice Changer Filter】を ILtanに入れる Formant 1.6ぐらい Pitch 2.3に設定
  61. 61. できたもの
  62. 62. なんか違う!!
  63. 63. ボイスチェンジャーを探す https://developer.oculus.com/downloads/package/oculus-ovrvoicemod-for-unity-5/
  64. 64. OVRVoiceModのインポート 先ほど入れたOVR LipSyncに同じスクリプトが あるので削除
  65. 65. OVRVoiceModのインポート まだ、怒られるので削除!削除!
  66. 66. ボイスチェンジャーの設定 【OVRVoiceModInterface】をヒエラルキーに入れる
  67. 67. ボイスチェンジャーの設定 前回入れた 【Voice Changer Filter】を削除して 新たに【OVRVoiceMod】を ILtanに入れる そして、パラメータを設定する
  68. 68. ボイスチェンジャーの設定 パラメータの詳細 一つ一つ数字を変えて、 「これかなぁ~」と手作業で設定 (パラメータの詳細はソースに書いて ありますが、意味不明)
  69. 69. できたもの
  70. 70. なんか違う!!!! さらに
  71. 71. 結論 ソフトウェアで処理するには限界 (特にUnity上でボイスをいじるに限界がある) ハードウェアでやればよい!!
  72. 72. ハードウェアの準備 (ここからUnityとは関係ありません) 2chを見て試行錯誤して揃えてみました
  73. 73. 構成図 (ここからUnityとは関係ありません) ¥18,000 ¥17,500(中古) ¥10,800 約¥50,000 ¥29,800 ¥21,000 合計 ¥147,100 ちょっとお高いけど、美少女になるためです。 出費しましょう。
  74. 74. できたもの
  75. 75. 第五章 美少女デビューしよう!
  76. 76. 美少女デビュー! ・このまま動画を撮って流すのも良いですが、 Live配信してみましよう!
  77. 77. 美少女デビュー! ・配信する映像(カメラをどうするか?) 鏡の映像(RenderTexture)を配信映像にしよう! 配信映像にするにはどうすればいいのか?
  78. 78. 方法その1 UnityCam https://github.com/mrayy/UnityCam WindowsにUnityCam用VirtualCam デバイスを登録して、Unityのカメラ映像 をWebcam経由で各種アプリケーション にもっていけるアセット 設定も簡単で便利 ただし、かなり重い!
  79. 79. 方法その2 Windowに表示 鏡で使用しているカメラの映像をその ままWindowに表示 (通常はHMDの映像がWindowに表示 されています) Windowの映像を配信ソフトにキャプチ ャーして配信映像とします。
  80. 80. 鏡の映像をWindowに表示する Window表示用のカメラを作成します Transformの値は鏡で使用した値と同じ Target Eyesを Noneに変更
  81. 81. 配信ソフトを探す https://obsproject.com/ 配信ソフトは色々ありますが フリーで情報も多いOBSを選びま した。 (OBS Studio)
  82. 82. ビルドして実行 Youtube Liveのヘルプより 解像度 1280x720と書いてあるので、 その解像度で実行
  83. 83. 配信ソフトの設定 具体的な方法はググってください。 基本的には、 配信サーバ、ストリームキーの設定 解像度の設定 ビットレート等の設定
  84. 84. 配信開始 OBSの映像ソースにウインドウキャプ チャを追加してUnityのWindowを指定 すれば映像が出ます。 その状態で【配信開始】!!
  85. 85. 実際にやってみた
  86. 86. まとめ ・色々と問題はありますが、VRアイドルになれました ・まばたきや眼球運動、呼吸や足の制御、物理挙動 (髪の毛、スカート)など問題点はまだまだいっぱい ・ゲーム作りたいからUnity始めた方が多いかと思います が美少女になりたいからUnityを始めてもいいのでは?
  87. 87. まとめ 可愛いは作れる!! (要、技術かお金) 今回かかった費用 その他諸々(ケーブル代等も含めて) 約20万円
  88. 88. インフィニットループでは 正社員、アルバイトを募集しています 一緒に楽しいことしましょう!
  89. 89. ご清聴ありがとうございました

×