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

584 Views

October 19, 17

#vr #unity #unity3d #idle #unity道場 #unitydojo #VR #Infinite Loop Corporation #HTC Vive #VR Idol #Virtual Reality Development

スライド概要

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

Unity Technologies Japan

@UnityJapan

スライド一覧

リアルタイム3Dコンテンツを制作・運用するための世界的にリードするプラットフォームである「Unity」の日本国内における販売、サポート、コミュニティ活動、研究開発、教育支援を行っています。ゲーム開発者からアーティスト、建築家、自動車デザイナー、映画製作者など、さまざまなクリエイターがUnityを使い想像力を発揮しています。

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

ダウンロード(pdf - 1.94MB)

関連スライド

UnityのVR開発環境の現状整理 2022

unity unitysync

Unity Technologies Japan 158.1K

UIもshaderで盛る！〜 shaderとanimationで作るリッチなUI演出

unity unitysync

Unity Technologies Japan 116.5K

オープンソース自動運転シミュレーター「AWSIM」のご紹介と実装事例

unity unitysync

Unity Technologies Japan 83.2K

トゥーンシェーダー応用編～楽して破綻のないアウトラインを目指して～

unity unitysync

Unity Technologies Japan 76.8K

モバイル向け大量描画テクニック

unity unitysync

Unity Technologies Japan 71.2K

【Unity道場 2月】シェーダを書けるプログラマになろう

gpu unity unity3d shader unity道場 unitydojo unity道場 2月~シェーダを書けるプログラマになろう~

Unity Technologies Japan 48.7K

各ページのテキスト

おっさんでも美少女になれる？！ VRアイドルの作り方株式会社インフィニットループシステム開発部山口直樹

対象者・VRの開発をやったことない人・VRの開発って難しいって思ってる人・美少女になりたい人 VR機材はHTC Viveを想定しています昨年同様ノーコーディングで進行します

株式会社インフィニットループとは・ゲーム開発・モバイルアプリ開発・Webアプリ開発・Linuxサーバ構築運用サーバのことなら任せとけって会社です

そんなサーバな会社がなぜVR？去年エイプリールフールのネタが軽くバズったからですちなみに今年はそうでもなかったです

自己紹介（１）山口直樹札幌のソフト会社で２０年ほど低レイヤーのネットワーク管理に従事その後、インフィニットループに転職得意な言語そもそもプログラムなんてやってない特技 UTPケーブルの８字巻き

自己紹介（２）会社でVRのコンテンツをはじめて見て「これ出来ればあんなことやこんなこともできるじゃん！！」と思って覚え始めた2年前の１２月あいえるたんさわさわ Vive あいえるたんお姫様だっこせかいぬりえ

どんなことやってるのか？

10.

VRアイドルって何？定義が不明たぶん３Dのモデルキャラを動かしたら VRアイドルになれるのではないか？ FaceRigやKinectを使ってVRアイドルと言ってる人たちもいるので・・・

11.

VRアイドルやってました今の定義がVRアイドルでしたら個人的に4年以上前からやってましたもしかして今ブーム？？？

12.

VR Live Studio ・多人数での空間共有・コメントAPIにフックしてコメントの可視化（Youtube ニコ生 Twitter等）・描画クライアントはなんでもOK ・ライブ配信に特化したシステム（字幕機能やダンス等）・画面共有、カメラ切り替えディスクトップキャプチャー機能その他いろいろ

13.

第一章美少女を動かしてみよう！

14.

美少女の用意弊社マスコットキャラクターの「あいえるたん」を使用しますホームページからUnityアセットがダウンロードできます http://www.infiniteloop.co.jp/special/iltan/3d-dl.php

http://www.infiniteloop.co.jp/special/iltan/3d-dl.php

15.

美少女の用意アセットをインポート後、アセットの中に【ILtan】プレファブがあるので置いてみる

16.

美少女の用意美少女ではなく、社長になりたい方はアセットの中にうちの社長が入ってるのでこちらをどうぞ

17.

IKコンポーネントの用意キャラクターを動かすためのコンポーネントです。（定番）ちょっとお高いけど、美少女になるためです。出費しましょう。

18.

IKコンポーネントの用意 IKコンポーネントの中の【VRIK】コンポーネントを ILtanに入れます

19.

IKコンポーネントの設定 1.適当なオブジェクト作成（ここではCube 大きさは0.1に) 2.作成したオブジェクトをVRIKの Left Arm→Targetへ

20.

できたもの

21.

ということは・・・ TargetのところをHTC Viveコントローラにすれば両手を自由に動かせれるのでは？（ついでに頭のところをHMDにしちゃう）

22.

第二章美少女になろう！

23.

SteamVR Pluginのインポート UnityでHTC Viveを使うには、とりあえずこれがないとはじまりません。（なくても使えるけど・・・ってツッコミはなしの方向で）

24.

HTC Viveを使えるようにするいらない１. [CameraRig]プレファブをヒエラルキーに置く 2. カメラが二つになるので最初にあるカメラを削除

25.

VRIKの設定 [CameraRig]の中の Controller(right) → Right ArmのTarget Controller(left) → Left ArmのTarget Camera(eye) → Head Target IKポイントを設定します

26.

できたもの

27.

大失敗失敗１．美少女の背丈とリアルの背丈があっていない（そのため目線が頭の上）解決策その１ IKの基準が地面なのをやめて無条件にHMDが頭にくるようにする（美少女が宙に浮くけど、美少女だから問題なし）失敗２．目線が頭の中なので、頭の中(顔の裏）しか見えない解決策その２顔の描画をやめる

28.

解決策その１ここのチェックを外す以上

29.

解決策その２顔の部分のレイヤーを Default以外にする

30.

解決策その２ CameraのCulling Maskで顔のレイヤーを外す（これで描画しない）

31.

できたもの

32.

自分の姿が見えない！！

33.

第２．５章鏡の作成

34.

鏡の作り方・板を作って、そこにカメラを置いてカメラの映像を板に映せば出来るんじゃない？（Render Texture）

35.

やってみる鏡用のRenderTextureとマテリアルの作成テクスチャサイズを 1024x1024に ShaderをUnlit/Textureにテクスチャを作成したRenderTextureに

36.

やってみる適当に板作成（Quadで作成）作成した板のマテリアルを先ほど作成したマテリアルに設定

37.

やってみるその板に、カメラを追加カメラの向きが反対なので y=180に設定 TargetTextureは作成した RenderTextureを設定カメラ以外は使わないので Audio Listener等余計なものは削除

38.

できたもの

39.

自分の姿は見えたけど・・・鏡なのに左右が変鏡なのになんか比率？が変（近づいたら巨大）全体的に変で鏡ではない！！

40.

鏡なのに左右が変鏡の板のScaleを変更（xをマイナスに）

41.

鏡なのになんか比率？が変間違いカメラの画角にぴったり合わさるようにカメラを後ろに配置する必要あり正解

42.

カメラの距離の求め方 Unityのドキュメントにありました。（しかも日本語） https://docs.unity3d.com/jp/530/Manual/FrustumSizeAtDistance.html

https://docs.unity3d.com/jp/530/Manual/FrustumSizeAtDistance.html

43.

カメラの距離の求め方 1 鏡（板）の大きさ 60 カメラのField of Viewの値 (PI * 2) / 360 良い子のみんなはちゃんとプログラムで書こう

44.

カメラの距離の求め方先ほど求めた値をカメラの距離（Z)に入れる良い子のみんなはちゃんとプログラムで書こう

45.

できたもの

46.

第三章美少女でしゃべろう！

47.

声に合わせて口パク https://developer.oculus.com/downloads/package/oculus-ovrlipsync-for-unity-5/

https://developer.oculus.com/downloads/package/oculus-ovrlipsync-for-unity-5/

48.

声に合わせて口パクとりあえず、全部インポート

49.

表情の変更方法 ILtanの場合は U_Char_1（頭部分）の Skinned Mesh Render内 BlendSharpsの値を変更すると表情が変化します

50.

表情の変更方法 BlendSharpsの名前から判断して、ここを変更すれば「あ」「い」「う」「え」「お」の口の形になるのかなぁ？と予想

51.

コンポーネントの設定【LipSyncInterface】をヒエラルキーに入れる

52.

コンポーネントの設定【OVR Lip Sync Mic Input】【OVR Lip Sync Context Morp Target】【OVR Lip Sync Context】これらのコンポーネントを入れます（Audio Sourceが勝手に入ります）

53.

コンポーネントの設定【OVR Lip Sync Mic Input】 Mic Controlを Constant Speakに変更（実行したら常にマイクONにしたいので）【OVR Lip Sync Context】 Audio Muteのチェックを外す（自分の声をイヤホンで聞きたいので）

54.

コンポーネントの設定 BlendShapesのインデックス値を確認（上から順番に数えて「あ」「い」「う」「え」「お」のIndex値を求める）【結果】「あ」「い」「う」「え」「お」 → → → → → 27 28 29 30 31

55.

コンポーネントの設定【OVR Lip Sync Context Morp Target】を設定します Element 0 Element 1 Element 2 Element 3 Element 4 Element 5 Element 6 Element 7 Element 8 Element 9 Element 10 Element 11 Element 12 Element 13 Element 14 無音 PP FF TH DD kk CH SS nn RR aa E ih oh ou ←「あ」（27） ←「え」（30） ←「い」（28） ←「お」（31） ←「う」（29）

56.

できたもの

57.

声が美少女じゃない！！

58.

第四章美少女の声になろう！

59.

ボイスチェンジャーを探す https://www.assetstore.unity3d.com/jp/#!/content/54963