STYLY 開発者ブログ -STYLY Developer's Blog-

STYLYで3Dスキャンデータを使ったバーチャルユーチューバー配信(from2001vr実験版)

こんにちは、@from2001vrです。
ブラウザ上で、VR空間を制作し、マルチデバイスにクラウド経由で配信することが可能なクリエイティブプラットフォームSTYLYに、実験的な機能としてVTuber機能を実装しましたので、利用方法のチュートリアルを公開いたします。

なお、バーチャルユーチューバー機能に関しては、2018年2月24日現在、本ページで紹介する@from2001vr版と、@afjk版の二種類が存在し将来フィードバックをもとに一部の機能がリリース版に統合される予定です。

PANPRA VR主催の第一回VTuberハッカソン開催に際し、@z_zabaglioneさんの下記のつぶやきに対して、@from2001vrと@afjkがVR好きのいちエンジニアとして、仕事の合間をぬって開発したExperimentalバージョンです。私のバージョンとは別に@afjkバージョンが存在します。

 

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にアバターをアップロードする

STYLYウェブエディターのメニューからAssets – 3D Model – Uploadを選択します

1

2

4

先程作成したFBXファイルをアップロードします。

その際、Titleを”VTuber_名前_3dscan”形式で指定することで、アップロードした3Dデータが、バーチャルユーチューバーとして機能するようになります。(先頭に”VTuber_”をつけることでVTuberアバターになり、最後に”3dscan”をつけることでスキャンデータに適したシェーダーが適用されます。スキャンデータ以外のRig入り3Dモデルを利用する場合は”3dscan”の文字列は不要でStandard Shaderが適用されます)

アップロード後、5分ほどでSTYLY上で利用可能になります。

5

My Modelsタブからアップロードしたデータを選択し空間上に設置します。サムネイルが表示されていないかもしれませんが気にせず選択します。

6

空間上に追加したアバターは表示が汚く見えるかもしれません。ウェブエディター上ではStandardシェーダーで表示されますが、VRで見た場合にはUnlitシェーダーで表示されますので気にしないでください。

データは自動でセーブされます。

STYLY ExperimentalバージョンをSteamからダウンロードします

まずは、SteamからSTYLYを通常インストールします。その後、BEATSタブから(experimental)styly-vr_vtuber-from2001vr版をインストールします。

8

VRデバイスを繋いでSTYLYで作った空間を開きます

STYLYはSteam経由でHTC VIVE, Oculus rift, WIndows Mixed Realityの各デバイスで動作します。今回のバーチャルユーチューバー実験版はHTC VIVEで動作検証を行っています。HTC VIVEをPCに接続してSTYLYアプリをSteamから起動します。

9

右上のSign inからログインして、My Sceneからウェブエディターで作成したVR空間を選択して開きます。

空間上にVTuberからはじまる名称のオブジェクトが有った場合、自動的にバーチャルユーチューバーモードでSTYLY空間が開きます

11

VRヘッドセットの中からの映像は上記のようになります。ハンディビデオカメラがあり、その上のモニタで撮影画面をプレビューすることができます。ビデオカメラ及びプレビューモニタは、VIVEコントローラーの人差し指トリガーで掴むことができます。

12

ちなみにカメラはひっくり返すと、オートフォーカス式のカメラとして前方を撮影することも可能です。

左コントローラーでテレポート可能ですが、カメラをもったままテレポートすることも可能です。また、カメラだけでなく、画面上のほとんどのオブジェクトは手でつかむことが可能です。

録画する

STYLYアプリを起動中に Windowsキー+Gキーを押すことでWindowsの機能を用いてウィンドウ画面の録画をすることができます。画面上に下記のようなボタン群が現れたら、赤いログがボタンを押して録画しましょう。”Record mic”をチェックすることでVIVE内臓のマイクの音声も録音することができます。録画されたデータはmp4形式で\Videos\Capturesに保存されます。

13

 

 

せきぐちあいみさん3Dモデル

 

カテゴリー: STYLY, VR

How to fix incompatibility bug between Unlit shader and Depth of Field

Unity Unlit doesn’t work correctly with DoF of Post Processing Stack.

The issue is reproducible with
Unity 2017.3.0p1
Post Processing Stack 1.04

Three cubes with Unlit shader, Standard shader and Unlit fixed shader with Depth of field.

As shown above, unlit textures are not focused correctly with DoF.

Thank you for the post on Stack Overflow
In order to solve this issue, Unlit shader should be modified with fallback function.
Adding Fallback “Diffuse” at the end of the shader fixed the problem.

Whole project download link

 

 

 

カテゴリー: Unity

UnityのGameobjectのShaderを一括で変換する関数

Unityで全てまたは一部のシェーダーを一括で違うものにするための関数

・指定したオブジェクトの子要素全てを一括で変換
・Gameobjectに複数のMeshが張ってある場合でも正常に動作します

利用方法

 

 

カテゴリー: Unity

uMMOアセットを用いてコード不要でネットワーク同期

Unityを用いて、Gameobjectをネットワーク越しに同期するにはUnityが提供する機能であるUNETを用います。UNETを用いるにはコードを色々書く必要があるので、便利なアセットがないかと思い調べてみたところ良さそうなアセットuMMOを見つけたため利用してみました。

uMMOアセット

ただ、公式のマニュアルや日本語の情報が見当たらなかったので、利用メモを残しておきます。

Cubeを同期する

まずは、極めてシンプルな動作を実現させてみることで、基本概念を学びましょう。同一マシン上で、ネットワーク経由で2つのアプリケーションのCubeを同期させます。1つのプロジェクトで開発を行い、コピーしたプロジェクトを別Unityで開いてテストをします。

1, 同期(Sync)対象オブジェクトの設定

 

・Cubeを作って名前をCubeToSyncに変更
・Net Objectスクリプトをアタッチ
・Synchronization MethodsをuMMO_PLUGINに変更
SyncUsing_DEFAULT_NATIVE_COMPONENT: バックエンドでUNETのNative機能を利用
SyncUsing_DEFAULT_uMMO_PLUGIN: バックエンドでuMMO独自のPluginを利用。データが圧縮されるなど効率がいいようです。同期もUNET Nativeより滑らか。
・Object TypeをNon Player Objectに設定

・設定の終わったCubeToSyncゲームオブジェクトをPrefab化する。次の設定で利用する。

uMMO2

2, uMMOネットワークマネージャーの設定

・/Assets/uMMO/Extension/prefabs/uMMO をヒエラルキーに追加
・uMMOの子オブジェクトのPL_UNETNetworkManagerの設定を変更
Auto Create Playerのチェックを外す(チェックONの場合は、Player Prefabで設定されたGameobjectが起動時にインスタンス化されます)
Registered Spawnable Prefabsに同期対象のPrefabを登録する

uMMO3

3, Unityプロジェクトをコピーして、同一マシンで2つのプロジェクトを開く

uMMOは一つのプロジェクトがサーバーとしてもクライアントとしても動作できるようになっています。
デフォルトでは、
・サーバーになるかクライアントになるかを起動時にユーザーが選択する
・Clientの接続先サーバーはLocalhost
・ポート7777を利用

uMMO4

起動後
右のUnityエディタでDedicated Serverを選択する
左のUnityエディタでClientを選択する

右のUnity(サーバー)のCubeをSceneビューで上下に動かすと、左(クライアント)のCubeも同期されて動きます。

uMMO5

 

Unity-chanを同期する(Mechanimキャラクターの同期)

では次に、Animatorを使って動いている、キャラクターのアニメーションを同期させてみます。

ユニティちゃん 3Dモデルデータをダウンロードしてプロジェクトに追加しておきます。
・/Assets/UnityChan/Scnes/ActionCheck をベースに改造します

1, 同期(Sync)対象オブジェクトの設定:UnityChan

Cubeの場合と同様に、同期対象であるUnityChanにNet Objectスクリプトをアタッチして設定します。

・Synchronization MethodsをuMMO_PLUGINに変更
その際、Animatorに設定されたNextとBackにもチェック
・Object TypeをNon Player Objectに設定
・自動的に追加されるNetwork AnimatorスクリプトのAnimatorの設定
unitychanプレファブを選択。その際、Animatorに設定されたNextとBackにもチェック

unity4

unity5

unitychanにアタッチしたスクリプトを設定し終わったら、忘れずにApply Changes To Prefabを実行して、Prefabに変更を反映させます。

unity2

2, uMMOネットワークマネージャーの設定

・/Assets/uMMO/Extension/prefabs/uMMO をヒエラルキーに追加
・uMMOの子オブジェクトのPL_UNETNetworkManagerの設定を変更
Auto Create Playerのチェックを外す(チェックONの場合は、Player Prefabで設定されたGameobjectが起動時にインスタンス化されます)
Registered Spawnable Prefabsに同期対象のunitychanプレハブを登録する

unity3

3, 実行して確認

サーバー側でアニメーションを変更すると、クライアント側も動悸して変更されます

 

imageLicenseLogo

この作品はユニティちゃんライセンス条項の元に提供されています

カテゴリー: Unity

クリエイターのためのVR制作・配信プラットフォーム『STYLY』のパブリックβ版をリリース

バーチャルリアリティー(以下VR)技術を用いたファッションVRサービスを手がける株式会社Psychic VR Lab(本社:東京都新宿区、代表取締役:山口征浩)は、すべてのクリエイターがクラウド上でVR空間を制作、配信をすることを可能にするプラットフォーム 『 STYLY 』のパブリックβ版を8月4日リリースいたしました。 すべての機能は無料で利用可能です。
 今後取り込み可能なアプリケーション及び、対応端末の拡充を順次行い、様々なクリエイターが空間を用いたプレゼンテーションを行っていただけるように機能拡張を行ってゆく予定です。

STYLY によるVR空間編集画面

■STYLYについて

『 STYLY 』はWebブラウザのみで稼働するVR制作、配信クラウドサービスです。Mac、Windowsに対応し、VR対応ではない普及型パソコンでも稼働いたします。
STYLY で制作、配信した作品をVRで閲覧するアプリケーションの配信も開始いたします。
(まずはHTC Vive対応版を専用サイトで配布開始。今後SteamやOculus Store にて配信予定)

これまで弊社は、VRを使った店舗施策として伊勢丹様、PARCO様等と、数多くの展示を行わせていただきましたが、これは全てSTYLYを使って製作されたものです。そして、2017年3月に米国オースティンで開催されたSXSW2017にてプライベートβ版を公開し、現在500人の先行ユーザ様にご利用頂いております。そしてのユーザコミュニティにて機能改善要望を収集し、改善を行ってまいりました。
また、スタートアップ支援プログラムMicrosoft BizSpark Plusに採択され、日本マイクロソフト株式会社の支援のもとAzureクラウドを用いた高品質なサービスを提供しております。

■STYLY の機能について

1.Webブラウザのみで稼働するクラウドサービス
STYLY はWebブラウザのみで稼働するため、アプリケーションや拡張機能のダウンロードの必要がなく、MacでもWindowsでも稼働します。
PCのスペックも一般的な普及型PCでの利用を想定しており、多くのPCユーザがVR空間の制作を作成することが可能となります。

2.様々なクリエイティブツールと連携
MAYA, Blenderなどの定番3DソフトやYouTube, Instagramといったサービスをプログラミングの必要なく取り込むことが可能となっており、多くのクリエイターがすぐにVR空間構築して活用可能です。 対応ソフトやサービスは順次拡大してゆく予定です。

3.様々なデバイスに対応、特別な処理を必要とせず、即時配信可能。
STYLYは製作している空間を、閲覧用VRアプリケーションを使ってほぼリアルタイムに空間にアクセスし閲覧することがが可能です。VR空間のデータはストリーミング配信し、ユーザのストレスをを極力排除いたします。
閲覧用VRアプリケーションは、HTC Vive版よりリリースし、今後Oculus Rift版, Daydream版, Gear VR版等、様々なデバイス対応版をリリース予定です。
クリエイターはデバイスを気にせず空間の制作が可能となります。

※現在はHTC VIVEのみ。各デバイスには順次対応予定。

STYLYは今後、様々なクリエイティブツールとの連携を展開し、すべてのクリエイターにVR,MRの構築が可能となるプラットフォームへと発展させて行きます。

教育機関様用に特別プランもご用意しておりますので、ご興味ある方はお問い合わせください。また、対応サービス、ソフト、デバイスについては順次発表して参ります。

VR空間内のホーム画面

■関連URL
STYLY http://suite.styly.cc/

■会社概要

 
社名              株式会社Psychic VR Lab
本店所在地   〒160-0022  東京都新宿区新宿 1-34-2 MORIAURA 2F
代表取締役     山口征浩
設立          2016年5月19日
ウェブサイト   http://psychic-vr-lab.com/

<本件に関するお問い合わせ先>
株式会社Psychic VR Lab   担当  渡邊
Mail :  info@styly.cc

カテゴリー: STYLY, VR

HOME / Coporate Site/ Careers

© Copyright 2018 STYLY..