こんにちは、@from2001vrです。
ブラウザ上で、VR空間を制作し、マルチデバイスにクラウド経由で配信することが可能なクリエイティブプラットフォームSTYLYに、実験的な機能としてVTuber機能を実装しましたので、利用方法のチュートリアルを公開いたします。
なお、バーチャルユーチューバー機能に関しては、2018年2月24日現在、本ページで紹介する@from2001vr版と、@afjk版の二種類が存在し将来フィードバックをもとに一部の機能がリリース版に統合される予定です。
PANPRA VR主催の第一回VTuberハッカソン開催に際し、@z_zabaglioneさんの下記のつぶやきに対して、@from2001vrと@afjkがVR好きのいちエンジニアとして、仕事の合間をぬって開発したExperimentalバージョンです。私のバージョンとは別に@afjkバージョンが存在します。
STYLE VRでVtuberを作るのは現状難しい気がしてきた…(アバター設定および自分向きのカメラが見当たらない。見逃している?)
— ザバイオーネ@3月福岡新潟 (@z_zabaglione) 2018年2月7日
3Dスキャンデータの用意
AポーズまたはTポーズの3Dスキャンデータを用意します。弊社でも不定期に3Dスキャン撮影会を開催しています。今回は、フリー素材として公開されているせきぐちあいみさんの3Dモデルデータを元に説明を行います。2月22日に行われたVTuberハッカソン参加者向け3Dスキャン撮影会のデータはこちらのObjファイルと同じ形式のものになります。(下記はSketchfab上でのプレビュー)
MIXAMOで骨を入れてアバターを作る
Adobe社が現在無料で提供するMixamoサービスを利用し、3Dスキャンデータにリグを入れます。Mixamoでのリギングに関しては、こちらの手順書などを参考にして行ってください。
STYLYでVR空間を作る
STYLYは無料でVR空間を構築できるクラウドサービスです。chromeブラウザ上でVR空間を作って、HTC VIVEやOculus riftなどでその空間を利用することができます。アバターになってユーチューブ配信を行うための空間を作成します。
STYLYでのVR空間構築は、マウス操作だけで行うことができます。また、GoogleのPolyから提供される数千種類の3Dモデルを、STYLYから直接呼び出し利用することが可能です。
STYLYのバージョンアップで、Polyの3Dモデルや動くビデオスクリーンなど、サクサクっと使えるようにしました
1分間の間にブラウザ上でVIVE用のVRコンテンツ作って公開するまでする様子を、ノーカット・ノンストップ2倍速にて御覧ください pic.twitter.com/ni8xiH8F8B
— サイキック山口 (@from2001vr) 2018年1月24日
独自の楽しい空間を作りましょう
STYLYにアバターをアップロードする
STYLYウェブエディターのメニューからAssets – 3D Model – Uploadを選択します
先程作成したFBXファイルをアップロードします。
その際、Titleを”VTuber_名前_3dscan”形式で指定することで、アップロードした3Dデータが、バーチャルユーチューバーとして機能するようになります。(先頭に”VTuber_”をつけることでVTuberアバターになり、最後に”3dscan”をつけることでスキャンデータに適したシェーダーが適用されます。スキャンデータ以外のRig入り3Dモデルを利用する場合は”3dscan”の文字列は不要でStandard Shaderが適用されます)
アップロード後、5分ほどでSTYLY上で利用可能になります。
My Modelsタブからアップロードしたデータを選択し空間上に設置します。サムネイルが表示されていないかもしれませんが気にせず選択します。
空間上に追加したアバターは表示が汚く見えるかもしれません。ウェブエディター上ではStandardシェーダーで表示されますが、VRで見た場合にはUnlitシェーダーで表示されますので気にしないでください。
データは自動でセーブされます。
STYLY ExperimentalバージョンをSteamからダウンロードします
まずは、SteamからSTYLYを通常インストールします。その後、BEATSタブから(experimental)styly-vr_vtuber-from2001vr版をインストールします。
VRデバイスを繋いでSTYLYで作った空間を開きます
STYLYはSteam経由でHTC VIVE, Oculus rift, WIndows Mixed Realityの各デバイスで動作します。今回のバーチャルユーチューバー実験版はHTC VIVEで動作検証を行っています。HTC VIVEをPCに接続してSTYLYアプリをSteamから起動します。
右上のSign inからログインして、My Sceneからウェブエディターで作成したVR空間を選択して開きます。
空間上にVTuberからはじまる名称のオブジェクトが有った場合、自動的にバーチャルユーチューバーモードでSTYLY空間が開きます
VRヘッドセットの中からの映像は上記のようになります。ハンディビデオカメラがあり、その上のモニタで撮影画面をプレビューすることができます。ビデオカメラ及びプレビューモニタは、VIVEコントローラーの人差し指トリガーで掴むことができます。
ちなみにカメラはひっくり返すと、オートフォーカス式のカメラとして前方を撮影することも可能です。
左コントローラーでテレポート可能ですが、カメラをもったままテレポートすることも可能です。また、カメラだけでなく、画面上のほとんどのオブジェクトは手でつかむことが可能です。
録画する
STYLYアプリを起動中に Windowsキー+Gキーを押すことでWindowsの機能を用いてウィンドウ画面の録画をすることができます。画面上に下記のようなボタン群が現れたら、赤いログがボタンを押して録画しましょう。”Record mic”をチェックすることでVIVE内臓のマイクの音声も録音することができます。録画されたデータはmp4形式で\Videos\Capturesに保存されます。
あぁ、徹夜明けのテンションであいみんになってしもうた#せきぐちあいみ #VTuberhack #STYLY
作り方もBlogにまとめたよhttps://t.co/zV43wLVCow pic.twitter.com/gNOpOXjYtl— サイキック山口 (@from2001vr) 2018年2月23日
Creative Commons CC-BY Title: 龍 Author: Aimi Sekiguchi https://poly.google.com/view/b93FtJkGNen Title: OIRAN3 Author: Aimi Sekiguchi https://poly.google.com/view/66AA0tC4ZOD