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

STYLY VTuber機能(afjk実験版)

こんにちは。@afjkです。

PANORAさん主催のVTuberハッカソンに向けて、STYLYに実験的にVTuber機能を実装してみました。

きっかけはこちらのツイート。

 

無いので作りました。

 

ちなみに、私と@from2001vrとでそれぞれVTuber機能を開発しています。

from2001vrバージョンはこちら

私が作ったのは

・自撮りカメラ(複数配置出来て切り替え出来る)

・体にオブジェクトをくっつける機能

・Humanoidリグの人体モデルを”着る”機能

 

 

人体モデルのSTYLYへのアップロードと配置

UNITY PLUGIN FOR STYLY を使います。
こちらからダウンロードしてください。

Unityへインポートしたら、メニュー>STYLY>Asset Upload Settingより、Email/API Keyを設定します。

※API Keyはこちらから取得

plugin

3Dモデルをアップロードする。

アップロードするモデルのRigはhumanoidにします。

 

rig

プレファブを作成し、名称の先頭に「STYLYAvater」をつける。

プレファブ右クリック→STYLY→Upload prefab to STYLYを選択すると、ビルド&アップロードが実行されます。

 

upload

アップロードに成功すると、「Upload successful」とダイアログ表示される。

ブラウザのエディタでアセット選択>3D Model>MyModelsに追加されています。

mymodel

あとは空間に配置するだけ。

STYLY VTuberバージョンを使う

Steamのライブラリ>VRから「STYLY」を右クリック→プロパティ選択。

styly

ベータタブから「(experimental)styly-vr_vtuber-afjk」を選択すると、インストールされます。

beta

シーンパネルのエンピツマークをクリックしてシーンに遷移するとVTuberモードになります。

vtuberモード

通常のSTYLY VRに加え、以下の操作が可能です。

基本操作

物をつかむ:コントローラで物体に触れてトリガーを引く

物をコピーする:掴んだ状態でコントローラのパッドを押し込む(Riftの場合はレバー押し込み)

物を消す:コントローラで物体に触れてパッドを押し込む(Riftの場合はレバー押し込み)

物を拡大縮小する:掴んだ状態で、もう一方のコントローラのトリガーを引くと、コントローラ同士の距離に応じてサイズが変わります。

体に取り付ける

STYLY VRをVTuberモードで起動すると、頭と腕にオレンジの立方体が表示されます。

ここに、物体を掴んで取り付けることが出来ます。

attachpoint

人体モデルには、頭と腕に青い球体が表示されます。

この青い球体を掴んで体に取り付けることで、人体モデルが自分の動きに追従するようになります。

moteru

 

自撮りカメラを使う

VTuberモードでは、自撮りカメラが空間にあらかじめ表示されます。

camera

この自撮りカメラを掴んで好きなところに配置したり、コピー、削除ができます。

カメラの切り替えは、
・0~9番までは数字キーに割り当て
・矢印キー左右で切り替え
・掴んだカメラがアクティブになる

 

是非使ってみて、「もっとこんな機能が欲しい!」など、Twitterでつぶやいてください。

面白い機能はこれからも追加していきます。

 

追記:
複数キャラクターを配置してポーズをつけて遊ぶこともできます。

さらに追記:
ザバイオーネさんに、実際にVTuberハッカソンで使っていただきました。
ありがとうございます!!!!!めっちゃうれしいです。

カテゴリー: 3D, STYLY, Unity, VR

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

 

 

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

せきぐちあいみさん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.

Shader "Unlit/TextureFixed"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }
		LOD 100

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			// make fog work
			#pragma multi_compile_fog
			
			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

			struct v2f
			{
				float2 uv : TEXCOORD0;
				UNITY_FOG_COORDS(1)
				float4 vertex : SV_POSITION;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			
			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				UNITY_TRANSFER_FOG(o,o.vertex);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				// sample the texture
				fixed4 col = tex2D(_MainTex, i.uv);
				// apply fog
				UNITY_APPLY_FOG(i.fogCoord, col);
				return col;
			}
			ENDCG
		}
	}
	Fallback "Diffuse"  // <= Add this line
}

Whole project download link

 

 

 

カテゴリー: Unity

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

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

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

   /// <summary>
    /// targetGameObject以下の子オブジェクト群のシェーダーをShaderName_toに変更する。ShaderName_fromが指定されていない場合はすべてのShaderを変更
    /// </summary>
    /// <param name="targetGameObject">対象GameObject。子要素も変更されます。</param>
    /// <param name="ShaderName_from">変更後のShader名</param>
    /// <param name="ShaderName_to">対象Shader名。未設定時は全てのShaderを変更</param>
    public static void changeShader(GameObject targetGameObject, string ShaderName_to, string ShaderName_from = "")
    {
        //List<GameObject> ret = new List<GameObject>();
        foreach (Transform t in targetGameObject.GetComponentsInChildren<Transform>(true)) //include inactive gameobjects
        {
            if (t.GetComponent<Renderer>() != null)
            {
                var materials = t.GetComponent<Renderer>().materials;
                for (int i = 0; i< materials.Length; i++)
                {
                    Material material = materials[i];
                    if (ShaderName_from == "")
                    {
                       material.shader = Shader.Find(ShaderName_to);
                    }
                    else
                    {
                        if (material.shader.name == ShaderName_from)
                        {
                            material.shader = Shader.Find(ShaderName_to);
                        }
                    }
                }
            }
        }
    }

利用方法

        //   StandardをすべてUnlit/STYLYに変更
        changeShader(TargetObject, "Unlit/Texture", "Standard");

        //   すべてのShaderをUnlit/STYLYに変更
        changeShader(TargetObject, "Unlit/Texture");

 

 

カテゴリー: 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

HOME / Coporate Site

© Copyright 2018 STYLY..