※このページではアフィリエイト広告を紹介しています

unityからSTYLYに、VRoidで作ったVRMモデルをアニメーション付でアップロードしてみた!瞳のハイライトが消える問題も解決

STYLY

バーチャル3Dクリエイター神部まゆみです(*^-^*)

 

この記事では、unityからSTYLYにアップロードしていきます。

シーンを全部作成するところまでやろうかと思ったけど、長くなりそうだから私のVRMモデル(VRoid製)をアニメーション付でアップロードして動作確認するところまでやります。

あとVRoidキャラの瞳のハイライトやHairBackが映らない問題があったから、その解決策も書きました。

 

前回までの記事はこちら。

STYLYでシーンを作成してPublishしてみた!これでまゆみの部屋(試作)が完成?
バーチャル3Dクリエイター神部まゆみです(*^-^*)今日はSTYLYでシーンを作成してPublish(公開)していくよ。STYLYっていうのは、VR空間をブラウザだけで手軽に作成できるサービス。前回の記事はこちら。STYLYに興味がある人...
STYLYに登録してみた!登録からチュートリアル終了まで
バーチャル3Dクリエイター神部まゆみです(*^-^*)今回はSTYLYに登録して、チュートリアルまで終わらせてみた記事です。STYLYについて調べている人は参考にしてね。STYLYとは?自分のVR空間を作れるサービスで、VRChatのコミュ...
■PR■

現在200個以上の新規unityアセットが最大50%オフで買える New Releaseセールをやっているみたいです。

unityアセット New Release割引 最大50%OFF

欲しいアセットはこの機会に買っておくと良いかも。

 
 

 

 

  1. やりたいこと
  2. STYLYにアップロードする前の準備
    1. 手順1:unity2019.3.6f1と、必要モジュールをインストールする
      1. 2022/01/14追記:今は2019.4.29f1が推奨バージョンみたい。2019.4.31f1でもアップはできたけど…
    2. 手順2:STYLY Plugin for Unityを入れる
      1. あれ、エラー出た( ̄▽ ̄;)
    3. 手順3:APIキーを設定してunityとSTYLYを接続
    4. 手順4: アップロードしたいプレハブかシーンを右クリック → STYLY → Upload prefab or scene to STYLY を選ぶだけ! ※1プレハブ20MB以下推奨
  3. VRMモデルをアニメーション付きでアップロードするには?
    1. なんか思いのほか簡単にできそう
  4. VRoidで作ったVRMモデルをアニメーション付でSTYLYにアップロードした手順
    1. 1,uniVRMでunityにモデルを読み込んでシーンに配置
    2. 2,モデルのプレハブのanimator以外のコンポーネントを消す
    3. 3,アニメーターコントローラーを作成してモデルに適用、アニメーションクリップを読み込む
      1. アニメーションを用意するか作る
    4. 4,ヒエラルキーからプロジェクトにモデルをD&Dしてプレハブ化
    5. 5,プレハブ化したモデルを右クリック → STYLY → Upload prefab or scene to STYLY を選んでアップロード
  5. 動作チェック!さて動くかな?
    1. 目のハイライトが消えてヤンデレみたいになってるΣ( ̄ロ ̄lll)ガーン
      1. ハイライトをVRM/UnlitTransparentにしたら表示されたが…
      2. しかしMeta Quest2で見たらまたハイライトが無くなっていた…なんでだろう?(-_-;)
    2. あと細かいけど、髪の毛の生え際のあたり(HairBack)が表示されずにハゲてる(-_-;)
      1. シェーダーの問題なのか、近づいてメッシュが消えてるだけなのか問題を切り分ける
      2. シェーダーのレンダリングをcutoutにしたら解決した
    3. 目のハイライトは、MToonのレンダリングタイプをcutoutにしたら解決した
  6. STYLYではアニメーション遷移はちゃんと動くのか?
    1. ちゃんと遷移した!OK
  7. 長くなったので続く

やりたいこと

せっかくだから私のモデルをアップして、アニメーションクリップを再生できるようにしたい。

PlayMakerを使えば、条件を満たしたらアニメーションを切り替えたりもできるみたい?だけど、とりあえずは動けばいいかな。

キャラを動かすにはこの記事が参考になりそう。

VTuberの3DモデルをSTYLYにアップロードする | STYLY
今回はVTuberの3Dモデル(FBXやVRM)に動きを付けて、STYLYにアップロードする方法を紹介します。STYLYのUnityプラグインを使えば、3Dモデルの質感や動きを保ちつつ、Unityから簡単にアップロードできます。自作モデルのVR展示会など色々なことに応用できるので、ぜひ活用してみてください。

 

できればたくさんのかわいい女の子や猫とかを配置して、癒しの空間を作ってみたいね( *´艸`)

重くなりそうだから、どこまでできるかわからないけど…。

理想としては空間内でブラウザ埋め込んで見れる…ハーレム空間で作業できる…とかやってみたいけど、そこまでは無理かな?

unity内ではできるみたい?だけど、STYLYはスクリプト動かないみたいだから無理そう。

STYLYにアップロードする前の準備

参考にするのはこちら。

UnityからSTYLYにプレハブとシーンをアップロードする方法 | - STYLY
本記事では、Unityで作成した「プレハブ」と「シーン」をSTYLY上で使用するための方法をご紹介します。STYLYでは、3DModel、ParticleSystem(Shuriken)、Light、UI要素、Shader(AmplifedShaderを使ったものなど)、PlayMaker、インタラクションSDKなどを...

手順1:unity2019.3.6f1と、必要モジュールをインストールする

これを書いている2021/04/10現在、2021/01/14更新のSTYLYの記事によると、

STYLYは「Unity 2019.3.6f1」に対応しています。
さらに、以下のモジュールがインストールされているか確認してください。

  • Windows Build Support (Windowsをお使いの場合、デフォルトでインストールされます。)
  • Mac Build Support (Macをお使いの場合、デフォルトでインストールされます。)
  • Android Build Support
  • WebGL Build Support
  • iOS Build Support

出展元:https://styly.cc/ja/manual/unity-asset-uploader/

あーそうか、STYLYは複数デバイス対応だから、これらのモジュールを入れないといけないのか。

unityの過去バージョンはここから探して、unityhubで開けばインストールできるよ。

Download Archive
DownloadArchive

 

インストールできたら、適当な名前で2019.3.6f1のプロジェクトを作成すればOK。

styly unity

2022/01/14追記:今は2019.4.29f1が推奨バージョンみたい。2019.4.31f1でもアップはできたけど…

久々にSTYLYをいじってみようとしたら、unityの推奨バージョンが2019.4.29f1になってました。

UnityからSTYLYにプレハブとシーンをアップロードする方法 | - STYLY
本記事では、Unityで作成した「プレハブ」と「シーン」をSTYLY上で使用するための方法をご紹介します。STYLYでは、3DModel、ParticleSystem(Shuriken)、Light、UI要素、Shader(AmplifedShaderを使ったものなど)、PlayMaker、インタラクションSDKなどを...

でも自分のunityに入ってたのが2019.4.31f1だったのでダメ元でやってみたら、プレハブのアップロードと配置はできました。

ちょっと前に作ったベッドをアップしてみた。

同じ2019.4x系だからかな?まぁ推奨バージョンから外れてるので不具合がある可能性もあるけど(;^_^A

一応参考までに追記してみました。

手順2:STYLY Plugin for Unityを入れる

ダウンロードはここから。

STYLY VR APP/STYLY Plugin for Unity DOWNLOAD | STYLY
STYLYには、ファッションや音楽、映像、グラフィックなど、現代のカルチャーを体現する世界中のアーティスト/クリエイターが作成した個性豊かなVRシーンが10,000以上投稿されています。これらシーンに全て無料でアクセスすることができます。

ダウンロードしたunitypackageをインポートします。

styly unity import

あれ、エラー出た( ̄▽ ̄;)

Copying assembly from ‘Temp/com.unity.multiplayer-hlapi.Runtime.dll’ to ‘Library/ScriptAssemblies/com.unity.multiplayer-hlapi.Runtime.dll’ failed

ってエラーが出ました。

インポート成功すれば上のメニューに「STYLY」ってのができるはずだけど、できなかった。

とりあえず再インポートしてみるか…。

 

インポートしたファイルを削除して再インポートしてみたら行けました。

登録したメールアドレスとAPIキーを入れればいいらしい。

手順3:APIキーを設定してunityとSTYLYを接続

STYLYにログインして、向かって右上の自分のアイコン画像をクリックして、ACCOUNTを選ぶ。

出てきたメニューのACCOUNTタブを選ぶと、APIキーが表示されるのでコピーする。

styly apikey

メールアドレスとAPIキーを入れればOK。

これ入力だけしておけば、特にボタンを押さなくてもいいっぽい?

というか保存とかのボタンがない( ̄▽ ̄;)

手順4: アップロードしたいプレハブかシーンを右クリック → STYLY → Upload prefab or scene to STYLY を選ぶだけ! ※1プレハブ20MB以下推奨

えー!こんな簡単なのか( ̄▽ ̄;)

スクリプトが使えないとか細かい制限はあるけど、プレハブ化してあれば大抵大丈夫みたい?

シーンも3Dモデルアセット内に読み込まれるみたいだから、シーンって言ってもまとめてプレハブをアップロードするような感じに近いのかな?

ただシーンはSTYLY STUDIO上で移動や回転、拡大縮小ができないみたい。

STYLY STUDIO上で配置とかを編集したいなら、プレハブを個別にアップしたほうがいい感じかな?

 

なんかすごい手軽にできそうだね。

でもまだ何も作ってないから、アップするものを用意しなきゃ。

VRMモデルをアニメーション付きでアップロードするには?

一番やりたいのはこれ!

私のモデルをアップして、部屋でダラダラしてる感じのアニメーションをさせて、「まゆみの部屋で一緒に過ごそう」みたいな空間を作ってこのブログに埋め込みたい(笑)。

できれば空間内でブラウザ埋め込んだりできたら理想だけど……とりあえず一緒に動画でも見れればいいか。

なんか思いのほか簡単にできそう

このページを参考にしました。

VTuberの3DモデルをSTYLYにアップロードする | STYLY
今回はVTuberの3Dモデル(FBXやVRM)に動きを付けて、STYLYにアップロードする方法を紹介します。STYLYのUnityプラグインを使えば、3Dモデルの質感や動きを保ちつつ、Unityから簡単にアップロードできます。自作モデルのVR展示会など色々なことに応用できるので、ぜひ活用してみてください。

手順としては、

1,いつも通りuniVRMでunityにモデルを読み込んでシーンに配置

2,モデルのプレハブのanimator以外のコンポーネントを消す

3,アニメーターコントローラーを作成してモデルに適用、アニメーションクリップを読み込む

4,ヒエラルキーからプロジェクトにモデルをD&Dしてプレハブ化

5,プレハブ化したモデルを右クリック → STYLY → Upload prefab or scene to STYLY を選んでアップロード

って感じ。

スクリプト消すところ以外は特に難しいところもなさそうだし、なんかすぐできそう。

アニメーターコントローラー使えるなら、遷移させて複数のアニメーションもできるのかな?スクリプト使った制御はできないけど…。

VRoidで作ったVRMモデルをアニメーション付でSTYLYにアップロードした手順

なんか簡単にできそうだけど、私のモデルで手順を書いておこうかな。

いつもの露出多いスケベメイド服みたいなやつだと消されそうだから(笑)、露出の少ない服に着替えておく。

VRoidStudioからエクスポートしたての状態からやります。

1,uniVRMでunityにモデルを読み込んでシーンに配置

uniVRMはこれ。

Releases · vrm-c/UniVRM
UniVRMisagltf-basedVRMformatimplementationforUnity.Englishishere.日本語はこちら-vrm-c/UniVRM

unityバージョンとの相性でエラーが出たことは今のところないから、とりあえず最新版入れておけば大丈夫かな。

uniVRMをダウンロードして、unitypackageをインポートしておく。

 

その後VRoidStudioからエクスポートしたモデルをプロジェクトファイルにD&Dしてインポートして、シーンに配置すればOK。

2,モデルのプレハブのanimator以外のコンポーネントを消す

赤線を引いたところは全部コンポーネント削除します。

VRoidは揺れもの設定とかが入ってるsecondaryも消さないといけないみたい。

ただプレハブを解凍してからじゃないと削除できないので、先にプレハブをすべて解凍しておく。

揺れ物が使えないのはちょっと痛いけど、スクリプトだから仕方ないか…。

3,アニメーターコントローラーを作成してモデルに適用、アニメーションクリップを読み込む

プロジェクト内で右クリック→新規作成 でアニメーターコントローラーを選んで適当な名前をつけて作成、モデルのAnimatorコンポーネントのコントローラーのD&Dして適用しておく。

アニメーションを用意するか作る

用意するならMixamoが楽で良いと思う。

STYLYさんも推奨してるし。

Mixamoのアニメーションをunityに持って行ったメモ。VeryAnimationで簡単に編集できた
バーチャル3Dクリエイター神部まゆみです(*^-^*)この記事は、Mixamoでアニメーションをダウンロードしてunityに持っていき、ヒューマノイドのキャラに適用させたメモ。実はこの記事は、三か月くらい前?に下書きのまま書いておいたやつな...

 

でもせっかくだから私はVeryAnimationでやってみようかな。

これMMDみたいに簡単に作れるからおススメ。

 

以前寝るポーズ作ってあったから、ちょっと編集したらできた。

こうやってダラダラしながら、あなたと一緒にVR空間で動画とか見れたらいいな( *´艸`)

4,ヒエラルキーからプロジェクトにモデルをD&Dしてプレハブ化

5,プレハブ化したモデルを右クリック → STYLY → Upload prefab or scene to STYLY を選んでアップロード

ちゃんとアニメーション付きでアップできるのかな?

あれ、これ結構時間かかるな…5分くらいかかった( ̄▽ ̄;)

でもなんとかアップロード成功したみたい。

動作チェック!さて動くかな?

おお!いた!いた!動いた!( *´艸`)

あれ、でもループしてないっぽい?

よく見たら、アニメーションクリップのループにチェック入れてなかった…。

チェックしてまたアップロードやり直しだね( ̄▽ ̄;)

目のハイライトが消えてヤンデレみたいになってるΣ( ̄ロ ̄lll)ガーン

あれ、ループできたけど、なんか目のハイライトが消えてる…。

ヤンデレっぽいのは大好きだけど…なんだろ、透過の問題?unityではちゃんと表示されてるけど…。

ハイライトをVRM/UnlitTransparentにしたら表示されたが…

調べたらシェーダーを変えれば直るっぽい。

VRM/UnlitTransparentにしたら大丈夫でした。

おお!いけた!目に光が戻った( *´艸`)

冷静になって見ると、後ろのYour Positionさんがツボるw

しかしMeta Quest2で見たらまたハイライトが無くなっていた…なんでだろう?(-_-;)

シェーダーの問題だということは分かったから、別のシェーダーを試すしかないか…。

UTS2とかならいけるか?

あと細かいけど、髪の毛の生え際のあたり(HairBack)が表示されずにハゲてる(-_-;)

恐ろしく細かい部分…私じゃなきゃ見逃しちゃうね(ニチャア

ただもしかして微妙に表示されてる?カメラが動くと微妙に消えたり現れたりしてるような?

unityでの表示はこんな感じ。

近づくとメッシュが消えるっていうのはunityでもある問題なんだけど、それはBounds Box?とかいう機能?らしく、中心0にして「オフスクリーン時に更新」で対応してる。

いつも参考にさせてもらってるkan-kikuchi先輩のブログが詳しいです。

カメラが近づくと消えるメッシュの原因と対処法【Unity】【トラブルシューティング】 - (:3[kanのメモ帳]
この記事でのバージョンUnity2017.4.7f1はじめに今回はカメラが近づくと消えてしまうメッシュの話!なお、本記事に出てくるキャラクターは以下のアセットを使っています。UnityMaskMan|3DHumanoids|UnityAssetStore原因

 

これやらないと、STYLYでも近づくと髪の毛が消えたりした。

まさかこれが機能せずに近づくと消えてるとか?

シェーダーの問題なのか、近づいてメッシュが消えてるだけなのか問題を切り分ける

ために、HairBackマテリアルをstandardに変えて黒くしてみよう。

これでダメなら、transparentシェーダーが悪さしてそう。

 

あれっ、消えない!

やっぱtransparentが問題かな?

シェーダーのレンダリングをcutoutにしたら解決した

こういうの、とりあえずstandardシェーダー使っとけばちゃんと表示される気がする。デフォルトだし。

ちょっと黒いけど、影が当たってる感じっぽくてこれでも良いかな。

というか、MToonのレンダリングをcutoutにすればいいのか。

あっいけた!やっぱTransparentが原因だったのかな?

これ、目のハイライトが消えるのもtransparentの問題なのでは…?

ただ、まつげ部分とかのマテリアルのtransparentはちゃんと動作してるんだけどね。

目のハイライトは、MToonのレンダリングタイプをcutoutにしたら解決した

こっちもこれで解決した。

ただ、ハイライトの境目を若干ぼかしていたんだけど、ぼかしがなくなった。

でもそんなに重要じゃないし良いかな。

 

胸の部分のTシャツが破れてるように見えるのは、単に腕と肩ボーンの問題なので後で直す。これ曲げすぎるとなる。

STYLYではアニメーション遷移はちゃんと動くのか?

アニメーターコントローラーが使えるんだから、アニメーションの遷移もできるでしょ。

キー入力で切り替えて…とかはスクリプト使えないから無理かな。

 

こんな感じのアニメーションをunityで作った。

アニメーションが終了したら次のアニメーションへ…っていう単純な遷移。

ちゃんと遷移した!OK

STYLY アニメーションクリップ 遷移

 

Oculus Quest2でもちゃんと遷移しました。

あとは近付いたら赤面するとか、パンツが見える座標に来たら隠す動作をするとかもできたら良いけど(笑)、スクリプト使わないと無理かな?

PlayMaker使えばいけるか?

こちらの行動に対するリアクションがあると人間味が出て良さそう。

でもあんまり卑猥なものをアップしたら消されそう( ̄▽ ̄;)

長くなったので続く

この後は部屋っぽいのを作って、動画を一緒に見れる感じの空間にしたい。

でもyoutubeから埋め込む場合、他人様の動画を貼ってもいいものか…。著作権フリーとか転載OKと謳ってるやつならリンク貼れば大丈夫かもしれないけども。

VRChatだとURL入れてユーザーが指定した動画見れる感じのワールドがなかったっけ?ああいうのが理想だけど。

というかSTYLYでどこまでできるのかまだ把握してないので、もう少し調べてみる必要がありそう。

 

でも手軽にVR空間作れるのはすごく良いね(*^-^*)

楽しみながらいじっていこうと思います。


追記:続きを書きました(*^-^*)

STYLYでまゆみ達とのVR添い寝部屋を作った!二次元に行く方法はSTYLYにあった…?
3Dだから三次元だけどね(笑)。バーチャル3Dクリエイター神部まゆみです(*^-^*)今日はSTYLYでまゆみ達と添い寝できるVR部屋を作るよ。unityを使ってSTYLYにアップしていって、STYLYStudioで配置していきます。前回の...

 

タイトルとURLをコピーしました