2020年02月09日

MocuMocuDance Ver.0.99

MocuMocuDance Ver.0.99を公開しました。


更新内容は以下の通りです。

  • 設定メニューにHMD瞳孔補正設定を追加しました。
  • スライダーメニューの数値を表示するようにしました。
  • OpenVR 1.9.16に更新しました。

MocuMocuDanceは、Steam VRを用いてMikuMikuDance(MMD)のモデルデータやモーションデータファイルを再生表示して観賞するアプリケーションです。

今回実装したHMD瞳孔補正設定機能は斜視の方向けに実験的に実装したもので、正しく動作するかは未テストとなっています。もし改善されましたらコメントやTwitterのDM等でご報告頂ければ、今後の改良にも役立ちますのでお願いできればと思います。


なお、今回は「Steam VR」のみ対応で「Oculus Rift」には対応しておりませんので、起動時のダイアログで「起動方式」を必ず「Steam VR」にするようお願い致します。

このアプリを使用するのが初めての方もいらっしゃると思いますので簡単に説明致しますと、VRコントローラのメニューボタンまたはキーボードのスペースキーを押すとメニューが表示されます。もう一度押すと閉じられます。なお、VRコントローラのトリガーまたはキーボードのEnterキーで決定、トラックパッドまたは十字キー上下で選択位置を変更できます。


まず、メニューを開き、「キャラクター読み込み」→「ファイル名順」を選択し、「Tda式初音ミク・アペンド_ver1.00」を選択してみてください。目の前にキャラクターが表示されたかと思いますので、メニューを閉じます。

もう一度メニューを開き、「モーション読み込み」→「ファイル名順」を選択し、「StandardMotion」を選択すると、モーションがループ再生されますので、メニューを閉じます。

さてここからが本番ですが、メニューから「設定」を選択し、一番下から2番目の「HMD瞳孔補正設定」を選択します。


左右の目それぞれの水平/垂直ごとの位置/角度を、トラックパッドまたは十字キー左右で設定できます。位置の単位はメートルです。おそらく左目または右目の水平角度を調整することで改善されると思うのですが、個人差もあるかと思いますので、位置も含めて調整してみてください。

posted by 妹尾雄大 at 11:25| Comment(5) | MocuMocuDance | このブログの読者になる | 更新情報をチェックする

2019年11月19日

Unity+VeryAnimationでVRoidモデルを撮影する方法

■はじめに

VRoid Studioでキャラクターモデルを作成し、撮影機能で画像を作成出来るのですが、背景画像の用意に困ったり、ポーズをもっと細かく調整したい場合があります。

そこでUnityを利用して撮影してみようと思います。なお、Unity自体は無料なのですが、ここで紹介するポージングに使用する「Very Animation」というアセットは46ドルと有料になります。


■プロジェクトの作成

「Unity Hub」を起動し、右上の「新規作成ボタン」の右にある「▼ボタン」をクリックして「2019.2.12f1」をクリックします。

2019-11-19 (3).png

テンプレートが「3D」になっていることを確認し、「プロジェクト名」に適当な名前を設定します。ここでは「VRMShot」とします。最後に右下の「作成」ボタンをクリックします。

Unityが起動し、以下のようなウィンドウが表示されたと思います。

2019-11-19 (4).png


■背景モデルの読み込み

Asset Storeタブをクリックします。もしそのタブが開かれていない場合は、最上部のウィンドウメニューからWindow→Asset Storeをクリックします。「アセットの検索」に「NYC Block #6」と入力して検索します。

2019-11-19 (16).png

「NYC Block #6」をクリックし移った画面で「ダウンロード」ボタンをクリックします。ダウンロードが完了したらそのボタンが「インポート」ボタンに変わっているので、それをクリックします。

2019-11-19 (17).png

「Import Unity Package」ウィンドウが表示されますので、右下の「Import」ボタンをクリックします。

しばらく待つと、ProjectタブのAssetsフォルダの下に「OutPost」フォルダが作成されているかと思います。

それからSceneタブをクリックして元の画面に戻し、先ほどのOutPostフォルダの中のResources→Scenesフォルダをたどっていくと「NYC_block_6.unity」ファイルがありますので、それをダブルクリックします。

2019-11-19 (18).png

Hierarchyタブの「NYC_Block_6」の左側の三角をクリックして開き、その中にある「First Person Controller」をダブルクリックすると、ビルの一部が見えると思います。なおこれ自体は不要なので「First Person Controller」の上で右クリックしてDeleteをクリックして削除します。

2019-11-19 (31)_2.png

もう1つ「Environment」の中の「L_sun」をクリックし、Inspectorタブに表示される「Camera」コンポーネントのチェックマークを外します。

ひとまずここでセーブをしておきましょう。最上部のウィンドウメニューからFile→Saveをクリックして下さい。


■UniVRMのインストール


上記のサイトから最新版のUniVRMをダウンロードします。2019/11/19時点ではv0.53.0が最新版です。少し下にある「UniVRM-0.53.0_6b07.unitypackage」をクリックしてダウンロードします。

ダウンロードが終わったら、先ほどのUnityが起動している状態でダウンロードファイルをダブルクリックします。
「Import Unity Package」の子ウィンドウが表示されますので、右下の「Import」ボタンをクリックします。

しばらく待つと、ProjectタブのAssetsフォルダの下に「VRM」フォルダが作成されているかと思います。インストールはこれで成功です。


■VRMファイルの読み込み

VRoidStudioなどで作成したVRMファイルをUnityに読み込ませます。

ProjectタブのAssetsフォルダの中で右クリックし、Create→Folderをクリックします。
フォルダ名はここではひとまず「Chara」とします。

「Chara」フォルダをダブルクリックして中に入ります。もちろんこの段階では中身は空っぽです。そこに、VRMファイルをドラッグ&ドロップします。ここでは「Mocuko.vrm」ファイルをドラッグ&ドロップします。

少し待つと「Chara」フォルダの中に「Mocuko.prefab」ファイルといくつかのフォルダやファイルが作成されたかと思います。


■VRMモデルの配置

2019-11-19 (23)_2.png

その「Mocuko.prefab」をHierarchyタブの下の空いている辺りにドラッグ&ドロップします。

すると、「NYC_Block_6」の中に「Mocuko」が追加されているのが確認できると思います。ただ、ビル群からだいぶ離れた箇所に配置されているので、良い感じの場所に移動します。頭と足元の2カ所に矢印が表示されていると思いますが、足元の方をドラッグして移動させます。

ひとまずここでセーブをしておきましょう。最上部のウィンドウメニューからFile→Saveをクリックして下さい。


■カメラの配置

次にカメラを設置します。Hierarchyタブのすぐ下にある「Create」ボタンをクリックし、「Camera」をクリックします。

これも移動と回転をおこなって良い感じの場所に移動します。

2019-11-19 (25)_2.png

また、Hierarchyで「Camera」を選択した状態でInspectorタブの中に表示される「Camera」コンポーネントの「Field of View」の数字も小さく調整しています。

ここでGameタブをクリックします。もし表示されていなければウィンドウメニューのWindow→General→Gameをクリックすると表示されます。

2019-11-19 (26)_2.png

それから「Free Aspect」と書かれているボタンをクリックし、一番下の「+」ボタンをクリックし、「Label」に「1920x1080」と書き、「Width&Height」をそれぞれ「1920」「1080」と半角数字で入力し「OK」ボタンを押します。これを最終的なレンダリング解像度とします。なお、より大きな数値を設定しても構いません。


■撮影する

ウィンドウメニューのWindow→Package Managerをクリックします。Packagesウィンドウが表示されるので、画面上部中央にある「Advanced」ボタンをクリックし、「Show preview packages」をクリックします。その右側にあるテキストボックスに「Recorder」と入力します。

2019-11-19 (28).png

「Unity AOV Recorder」と「Unity Recorder」の2つが表示されると思いますが、後者をクリックし、右下の「Install」ボタンをクリックします。インストールが終わったらそのボタンが「Remove」という名前に変わっていると思いますので、右上の「×」ボタンをクリックしてPackagesウィンドウを閉じます。

2019-11-19 (30).png

ウィンドウメニューのWindow→General→Recorder→Recorder Windowをクリックします。Recorderタブが表示されるので、そのタブを画面下のProjectタブがある場所にドッキングさせます。

「+ Add New Recorders」ボタンをクリックし、「Image Sequence」をクリックします。「Format」を「PNG」に変更し、「Output Resolution」を「FHD - 1080p」に変更します。「Record Mode」を「Single Frame」に変更します。

この状態で画面上の再生ボタンをクリックして実行し、Recorderタブの「START RECORDING」ボタンをクリックします。

image_0000.png

すると、プロジェクトフォルダの下に「Recordings」フォルダが作成され、その中に「image_0000.png」という画像ファイルが作成されたと思います。

なお、再度「START RECORDING」ボタンをクリックすると画像ファイルが上書きされてしまいますので、次に撮影する場合は「Frame」の右側の「0」と書いているところを「1」に変更します。その後は数値を1つずつ増やしていくといいでしょう。
ひとまず再生ボタンをクリックして元の画面に戻します。


■Very Animationの準備

2019-11-19 (32).png

Asset Storeタブを開き「Very Animation」を検索します。2019/11/19現在では46ドルですが、たまにセールなどがおこなわれていたりします。これを購入し「インポート」ボタンをクリックします。

2019-11-19 (33).png

ウィンドウのレイアウトが標準のままだと少し使いづらいので、ウィンドウメニューのWindow→Layouts→4 Splitに変更します。

この状態から左上と左下のSceneタブを右クリックし「Close Tab」をクリックして削除します。ウィンドウメニューのWindow→General→GameをクリックしGameタブを表示し、左上のSceneの横にドッキングし、元のSceneタブを削除します。
Window→Very Animation→Mainをクリックし、Inspecterタブの右側にドッキングさせます。Window→Animation→Animationをクリックし、Projectタブの右側にドッキングさせます。

2019-11-19 (34).png

最終的にこのようになったかと思いますが、マルチディスプレイ環境など好みで調整してもらっても問題ありません。ただし、Scene,VeryAnimation,Animationタブは同時に表示されるようにしておく必要があります。

Window→Layouts→Save Layoutsをクリックし、「Very Animation」と入力して保存しておきます。


■アニメーションの準備

ProjectタブのAssetsフォルダの中に「Anim」という名前のフォルダを作成し、その中で右クリックしCreate→Animator Controllerをクリックします。

2019-11-19 (35)_2.png

次にHierarchyタブのキャラクターをクリックし、Inspectorタブの「Animator」コンポーネントの「Controller」のところに作成した「New Animator Controller」をドラッグ&ドロップして設定します。

2019-11-19 (37).png

Hierarchyタブでキャラクターが選択されている状態のままVery AnimationタブとAnimationタブをクリックします。
Animationタブの右側の「Create」ボタンをクリックします。先ほど作成した「Anim」フォルダを選択し保存します。


■モーション編集

VeryAnimationタブの「Edit Animation」ボタンをクリックします。

2019-11-19 (42)_2.png

Gameタブでそれまで表示されていたキャラクターがどこかに行ってしまったかと思いますので、VA Editorウィンドウの「Prefab」ボタンをクリックします。これでいわゆるTポーズに戻ったと思います。

次にHierarchyタブに切り替え、キャラクターをダブルクリックすると、Sceneタブの中央にキャラクターが表示されたと思います。VA Controlタブをクリックして元に戻します。

2019-11-19 (45).png

ここからポージングをおこなうのですが、VA Controlタブの例えば首の丸マークをクリックして選択状態にすると、Sceneタブで首を中心に円が3つ表示されるので、そのどれかをドラッグすると回転します。

VA Controlタブの人型以外の箇所をクリックすると選択が解除されます。

2019-11-19 (46).png

両手足のIKと書かれているところのチェックマークをオンにすると、その箇所のみ回転ではなく移動で調整することが出来ます。位置を調整したあとチェックマークを外すことで、各関節の回転調整をおこなえます。

2019-11-19 (47).png

両足のIKのチェックマークをオンにした状態で、足元の楕円を選択状態にして上向き矢印を下に移動させると腰を落としたり出来ます。

2019-11-19 (48).png

また、手のポーズなどは、VA Editorウィンドウの「Muscle Group」内の「Finger Open Colose」の「Left Finger」などや、「Finger In Out」から調整出来ます。

2019-11-19 (49).png

表情は、その下の「Blend Shape」の「Face」の中になります。名前が長くて分かりづらいですが「BRW」が「眉毛」、「EYE」が「目」、「MTH」が「口」を意味しています。

すべて調整を終えたら、VA EditorでIKチェックマークを全て外し、何も選択されていない状態にします。

2019-11-19 (51).png

それからAnimationタブをクリックし、60フレーム目(1:00)の一番上の菱形をクリックして縦列が全選択された状態になったことを確認しDeleteキーを押して削除します。

VA Editorウィンドウの右上の「X」ボタンをクリックして終了します。

2019-11-19 (52)_2.png

ProjectタブのAssets/Anim/New Animationをクリックし、InspectorタブのRoot Transform RotationのBased Upon (at Start)をOriginalに変更し、Root Transform Position (XZ)のBased UponもOriginalに変更します。

2019-11-19 (54).png

この状態で実行してGameタブ内でポージングされていれば成功です。


■ポージング状態で撮影する

Window→Layouts→Defaultをクリックして元のウィンドウレイアウトに戻します。

HierarchyタブのキャラクターをダブルクリックすればSceneタブ内の中央にキャラクターが表示されると思います。

2019-11-19 (55).png

もう一度Recorderタブを表示してから実行して撮影してみます。

image_0002.png


■まとめ

ひとまず最低限はこれで完了ですが、ライティング等の設定を調整していくことで、よりイメージに近い絵を作れるかと思います。

なお、上記のキャラクター「妹尾もきゅ子」は僕が作成したモデルですが、着ている服は、Vtuberの星井まゆきさんが作成した、


にて公開されているものを利用させて頂きました。
posted by 妹尾雄大 at 23:29| Comment(0) | Unity | このブログの読者になる | 更新情報をチェックする

2019年09月22日

VTuberファンアート動画の作り方入門



星井まゆきさんのゲームOP風ファンアート動画を作ったのですが、その作り方を簡単に解説したいと思います。

以前、星井まゆきさんがSHOWROOM配信中に「自分のファンアートを作ってくれたら嬉しい」といった内容のことを話されていたのですが、僕の絵画能力は幼稚園児の頃から成長していなくて絵が描けないですし(笑)、何が作れるかなぁと考えた結果が動画作成でした。

絵心にあまり自信がない方でも、トライ&エラーを繰り返すことで同様のものが作れるのではないかと思います。


■3Dキャラクターモデル

まずは3Dキャラクターモデルを作らないと始まらないのですが、今は便利なツールがあって、


という無料のアプリなのですが、最初から用意されている3Dモデルをカスタマイズしていく形で目的とするキャラクターを作っていくことが出来ます。

VRoidMaking.png

まあそれでもなかなか思い通りに作っていくのは難しいのですが、少し調整しては別名保存してスクリーンショットを撮っておき、前回からイメージがズレているなと思ったら1つ前のプロジェクトファイルに戻してやり直すのを繰り返していけば、ゴールに近づいていくかと思います。

なお、服装などはテクスチャを差し替える方法になりますので、既存モデルから大きく異なるものは作ることが出来ません。

2019-09-16.png

ちなみに今回は、星井まゆきさん本人がBOOTHにて公開されている


この衣装テクスチャを利用しています。

そして、完成したら後述するUnityで読み込ませるために、VRMというファイルフォーマットでエクスポートします。


■Unity


元々はゲーム開発のためのゲームエンジンなのですが、今では映像制作や建築設計、VRアプリ開発などにも用いられているツールです。今回はこれを映像制作のメインツールとして使用します。


■UniVRM

Unity上にVRMファイルを3Dモデルとして読み込むためのアセットで、上記サイトで無料公開されており、インポート方法などの解説が載っています。


■UTS2.0

VRMのモデルをそのまま表示しても構わないのですが、アニメ調に調整するのに便利なので、

のアセットを利用しています。


■モーション作成

モーションのほとんどは手付けで作成したのですが、Unityアセットストアで販売されている


を利用しました。

VeryMotion.png

Unity上でモーション作成・編集がおこなえ、また開発者が日本の方なので、詳しい日本語マニュアルも付いています。


■モーションキャプチャ

snapshot1.png

「自販機」と「ダンス」のシーンのモーションだけは手付けではリアルな感じが出せないので、自作のモーションキャプチャシステムを使用しました。

vive.png

ハードウェアとしては、
  • HTC Vive Pro(初代でも問題ないです)
  • Viveコントローラ×2(上記に同梱)
  • Vive Tracker×3
を使用し、Trackerは腰と両足に使用しています。

モーションキャプチャシステムの作り方を解説し始めると膨大になりますので、ここでは省略させて頂きます。

なお、キャプチャしたモーションは、

この無料で公開されているアセットで保存してUnity上で利用できる形式に変換し、前述のVery Animationでカットしたり、手のポーズや表情アニメーションを追加したりしています。


■背景や小物の3Dモデル

には、背景や小物に使える3Dモデルが有料無料で公開されています。今回は、

などを使用しています。


■シーン作成

1つ1つのシーンごとは、Unityの

という機能を使って作成しています。

timeline.png

主にカメラの移動回転などのカメラワークのために使用しています。


■レンダリング

Unity公式で公開されている

このアセットを使用して、シーンごとに連番PNGとして出力します。mp4などで直接動画ファイルを出力することも可能なのですが、後述する動画編集ソフトで再圧縮がかかると画質が落ちますので、劣化しないPNGで出力します。

それを、


で、読み込んで無圧縮AVIファイルに変換します。


■BGM

BGMは以下のサイトで公開されている

を、使用させて頂きました。


■ボクセルモデル

2019-09-22 (2).png

2019-09-22 (3).png

一部のシーンで登場するボクセルキャラクターモデルは、


こちらの無料ソフトで作成し、OBJフォーマットでエクスポートします。

出力するとobj,mtl,png形式の3つのファイルが作成されますので、それをまとめてUnityに読み込みます。


■タイトルロゴ

snapshot.png

ロゴは、


を、使用して作成しました。

文字は1文字ずつ拡大変形させて多少ずらして並べると、それっぽくなります。


■動画編集ソフト

シーンごとに出力した動画は、

このソフトで編集していきます。無料版もあるのですがfilmoraのロゴ透かしが入るため、有料版を購入します。なお、購入の際に1千円割引されるクーポンコードを公開されているブログなどがありますので、「filmora クーポン」などでググるといいでしょう。


■動画編集

filmora上でBGMやAVIファイルを読み込み、並べていきます。

2019-09-22 (1).png

各シーンのつながりには「トランジション」を設定していき、シーンごとの色味やフィルタは「エフェクト」から設定していきます。

filmoraは「70年代」とか「VHSのゆがみ」といったエモいエフェクトが多くて最高です(笑)。

最後はこのアプリからMPEG4ファイルで出力して完成です。


■さいごに

この完成した動画は、さっそく星井まゆきさん本人に見て頂けたのですが、喜んで頂けたようで幸いです。こちらこそいつも楽しそうにお喋りする配信を見られて幸せです。ありがとうございます。

ラベル:星井まゆき
posted by 妹尾雄大 at 13:29| Comment(0) | Unity | このブログの読者になる | 更新情報をチェックする