こかげむら

ゲーム好きな理系大学生のお話

Unity上のHumanoidアバターで姿勢を判定(採点)しようとして苦労した話

まえがき

大学の研究でPerceptionNeuron2.0とUnityを使用して、とあるアプリケーションを開発しているのですが、開発していて苦労した(している)、Unity上のHumanoidアバターで姿勢の判定を行う手法の話をしたいと思います。

f:id:agry:20181117191157p:plain

それとはあまり関係ありませんが最近Viveとトラッカーを購入し、フルトラVRChatにドハマりしていて、VR世界に自分の体を入れられる!!モーキャプってすげー!!ってなっています。

やろうとしたこと

PerceptionNeuronでUnity上のHumanoidアバターを動かし、姿勢を判定(採点)しようとした。

例えば、下の図のような女の子座りをお手本の姿勢とします。PerceptionNeuronを使って自分の体でHumanoidアバターを操作して、下の図と同じ女の子座りの姿勢をとることができているか、アバウトに判定(関節の曲がり具合などが同程度か判定)がしたいという感じです。

f:id:agry:20181117173508p:plain

試してみて上手くできなかった手法

いくつかの手法を試しました。

3DCGの世界では姿勢の計算などにクオータニオンという四元数が良く使われるらしいので、模範姿勢の各関節のクオータニオンを計算してそれに近い値を取れていたらOKとしてみたり。UnityのInspectorから弄れる値localEulerAngleなどのオイラー角を使ってみたり(ジンバルロックさん...!?)。

とにかく閾値の設定が面倒だし、プログラムは汚く複雑になるし、デバッグとか細かい調整とか絶対やりたくない。

(ここに書かれているのは僕が技量不足のために実現できていないだけかもしれません。)

Unity初心者の独断と偏見での結論

ここに書く結論はUnity初心者の考えであり、もっと良い方法があるかもしれませんし、もしあるのであれば教えてほしいです。切実に。

アバウトに姿勢を判定したいのであれば、アバターのHipなどの子オブジェクトとして、Colliderを設置してあげて、そのColliderに指定した関節が入っているか(下の図のような感じ)で判定するのが良いのではないかという結論に至りました。

f:id:agry:20181117180233p:plain

例えば、HeadCheckというオブジェクトは模範姿勢を真似する上で、アバターのHeadがあるべき位置に設置されています。ほかのColliderObjectも同様に設置されています。

f:id:agry:20181117181548p:plain

従って、上の図のようにColliderObjectの位置に指定された関節部位を入れることで、模範姿勢と同じ姿勢をとることができます。

末端の関節(手先や足先、頭など)まで完璧に同じ姿勢が取れているか判定することはできないかもしれませんが、アバウトに判定したいのであればこの方法が使えるかと思います。

もし判定を厳しくしたり、末端の関節の判定まで完璧に行いたいのであれば、ColliderObjectをさらに小分けにして、細かく判定してあげれば良いのではないかと思います。逆にColliderを大きくすれば判定を甘くすることもできますね。

ちなみにColliderに指定された部位が入っているかどうかの判定を行うのはC#であればOnCollisionStay()を使えばできます。(RigitBodyとIsTrrigerを忘れずに)

marunouchi-tech.i-studio.co.jp

まとめ

姿勢判定を行うことができれば、「あるポーズをとったら変身!」とか、「両手を腰の右隣に持ってきたらかめ◯め波をチャージ!」とか、色々なことができます。

今回はColliderはHumanoidアバターの姿勢を判定するのにも使うことができるという話でした。時間があれば何か面白いゲームでも作ってみたいです。

f:id:agry:20181117185447p:plain

あとがき

今回いろいろやってみて分かったことはこれです。

スクリプトで姿勢を判定するよりも、当たり判定を使って実現した方が目で見てわかりやすいですし、細かい調整もかなり楽です。

なかなかいい方法が思いつかなくて苦労しましたが、その過程でクオータニオンのことや、Unityの細かい機能のことなど、様々なことを勉強できたので良しとします。

www.f-sp.com

© Unity Technologies Japan/UCL

VRChatで長いアニメーションを実装する方法【VRChat】

VRChatのアップデートでLegacyAnimationが使用できなくなったため、この手法は使用できなくなりました

f:id:agry:20180901224731p:plain

今回はVRChatでオブジェクトに長いアニメーションを持たせる方法を紹介したいと思います。

通常、VRChatでアニメーションオーバーライドに2フレーム以上のアニメーションを割り当てるとおかしな挙動になってしまいます。 

ですがこの方法を使えば、おかしな挙動になってしまうのを回避することができます。

 

以下VRCSDKなどが導入済みであることを前提に話を進めていきます。

VRChatにアバターを一度もアップロードしたことがない人は下の記事を参考にしてください

前提知識

 

f:id:agry:20180901215647p:plain

www.moguravr.com

shiasakura.hatenablog.com

 

 

1.アニメーションを導入したいオブジェクトを用意する

今回はこのゴスロリ風洋傘を使用し、この傘に対してアニメーションを割り当てていきます。

a-lapin.booth.pm

 

ダウンロードした洋傘モデルをUnityに入れ、Hierarchyに持ってくる。

f:id:agry:20180901211422p:plain

2.傘を開く、閉じるアニメーションを作成する

導入が終わりましたら、ここから長いアニメーションを作成していきます。

長いアニメーションは、アニメーションオーバーライドで再生するのではなく、オブジェクトがIs activeになった時に自動的に再生させる方法で再生させます。

実際に作っていきましょう。

1 洋傘を選択

2 animationウィンドウで新たに「傘開く」「傘閉じる」という名前のアニメーションクリップをcreateします。

f:id:agry:20180901212152j:plain

 

2-1.「傘開く」アニメーションの作成

傘が閉じた状態から、開いた状態にするアニメーション「傘開く」を作成していきます。

洋傘をctl+Dで複製し、「洋傘閉じてる」という名前に変更します。

f:id:agry:20180901213214p:plain

次に、「洋傘閉じてる」を選択し、InspectorでSkinned Mesh RendererのBlendShapesを開き、"開閉"の値を100にします。

f:id:agry:20180901213452p:plain

これで閉じた状態の傘が完成しました。

そうしたら傘が開くアニメーションを作成します。

1 animationウィンドウで録画ボタンを押す。

2 0秒のところでSkinned Mesh RendererのBlendShapes開閉の値に100を入力。

3 3秒のところで開閉の値に0を入力。

f:id:agry:20180901213916p:plain

これで3秒かけて傘が開いた状態になるアニメーションクリップを作成することができました。

次に「傘開く」アニメーションクリップを選択し、Inspectorの右上(鍵マークの右隣)のアイコンをクリックし、Debugモードを選択します。

f:id:agry:20180901214612j:plain

Debugモードに入ったら、Legacyにチェックを入れます

f:id:agry:20180901214840p:plain

下の図のように「傘開く」アニメーションクリップのInspectorがWrap Modeと表示されていたら。「傘開く」が完成です。

完成したら、DebugモードからNormalモードに戻しておきましょう。

f:id:agry:20180901215508j:plain

2-2.「傘閉じる」アニメーションの作成

「傘閉じる」は傘が開いた状態から閉じた状態にするアニメーションです。作り方は「傘開く」とほとんど同じです。

区別のために「洋傘開いてる」オブジェクトを作成します。

f:id:agry:20180901215618p:plain

「傘開く」と同じように

1 「傘閉じる」に対して、animationウィンドウで録画ボタンを押す。

2 0秒のところでSkinned Mesh RendererのBlendShapes開閉の値に0を入力。

3 3秒のところで開閉の値に100を入力。

f:id:agry:20180901220221j:plain

これができたら、「傘閉じる」のアニメーションクリップを選択し、DebugモードでLegacyにチェック。

f:id:agry:20180901220345p:plain

Legacyにチェックしたら、Normalモードに戻しておきましょう

これで「傘開く」「傘閉じる」の2つのアニメーションクリップが完成しました。

3.Animationコンポーネントをセットする

Hierarchyから「洋傘閉じてる」オブジェクトを選択し、InspectorでAdd ComponentからAnimationコンポーネントを入れます。

f:id:agry:20180901220950j:plain

AnimationコンポーネントのAnimationの欄に、先ほど作成した「傘開く」アニメーションクリップをドラッグ&ドロップします。

f:id:agry:20180901221233j:plain

これを「洋傘開いてる」オブジェクトに対しても、同じようにして「傘閉じる」アニメーションクリップを入れてあげます。

f:id:agry:20180901221812j:plain

これでセット完了です。

4.アニメーションオーバーライドでオブジェクトを取り出す

ここまでくれば後は簡単です。

「洋傘開いてる」「洋傘閉じてる」を持たせたい部位に入れて、2つとも同じ位置になるよう調整します。今回は右手に入れたいと思います。

f:id:agry:20180901222417j:plain

f:id:agry:20180901222530j:plain

そうしたら「洋傘開いてる」「洋傘閉じている」の表示を消して

f:id:agry:20180901222747p:plain

使用したいアバターを選択して、animationウィンドウで「傘閉じてる発生」「傘開いてる発生」の2つのアニメーションクリップを作成。

f:id:agry:20180901223036p:plain

「傘閉じている発生」では「傘閉じてる」をIs activeにするアニメーションを0フレーム目と1フレーム目に設定

f:id:agry:20180901223330p:plain

「傘開いてる発生」では「傘開いてる」をIs activeに

f:id:agry:20180901223407p:plain

これで完成です。

5.アニメーションオーバーライドの設定

4で作成した「傘開いてる発生」「傘閉じてる発生」をアニメーションオーバーライドに割り当てます。

f:id:agry:20180901223619p:plain

これでアバターをアップロードすれば、傘を召喚したときに、開く閉じるの動作が勝手に再生され、長いアニメーションをアニメーションオーバーライドで呼び出せた(?)ことになりました。

6.まとめ

今回はVRChatで2フレーム以上の長いアニメーションを実装する方法を紹介しました。

このブログで使用している、ポンデロニウム研究所のフェンサーちゃんや、クレリックちゃんのアバターには、最初からクオリティの高いアニメーションが付属されてくるのですが、それに感動して、自分でも作ってみたくなり、情報を集めて実装してみました。

説明が長くなってしまいましたが、実装できましたでしょうか。この方法を使えば、傘の開閉以外にも様々なオブジェクトに対して長いアニメーションを持たせることができると思います。

皆様もよきVRChat生活を!

GPUパーティクルの導入方法【VRChat】

今回はVRChatで最近流行っている(?)GPUパーティクルの導入方法を紹介します。

GPUパーティクルを導入すると下のような魔法のようなものをVRChatに召喚することができます。

以下VRCSDKなどが導入済みであることを前提に話を進めていきます。

VRChatにアバターを一度もアップロードしたことがない人は下の記事を参考にしてください

www.moguravr.com

 

1.GPUパーティクルのダウンロード

GPUパーティクルはQuantum氏が制作したものが配布されているのでそちらを使わせていただきます。こちらのDiscordサーバの#downloadsチャンネルからGPU_Particles_v2.unitypackageをダウンロードします。

discord.gg

 

 2.Unityにパッケージをインポート

Unityを開きAssets->Import Package->Custom Packageから先ほどダウンロードしてきたGPU_Particles_v2.unitypackageをインポート

f:id:agry:20180809125137p:plain

f:id:agry:20180809125437p:plain

下のようにGPU Particlesが導入されていればOKです。

f:id:agry:20180809130040p:plain

 

3.アバターGPUパーティクルを入れる(VRモード)

 VR機器を使用してVRChatを遊ぶ人向けです。 

1.GPU Particlesの中にあるVR 2-HandedをHierarchyに入れてください

f:id:agry:20180809130711p:plain

 

2.VR 2-Handedの中にあるParticlesを、導入したいアバターのArmatureと同じ階層に入れます

f:id:agry:20180809131306p:plain

このとき、このような表示がでると思いますが、Continueを押してください。

f:id:agry:20180809131516p:plain

 

3.VR 2-Handedの中にあるCamera1を左手首へ、Camera2を右手首へ

f:id:agry:20180809131907p:plain

f:id:agry:20180809132005p:plain

下のようにCamera1,Camera2を入れることができていればOKです。

f:id:agry:20180809132342p:plain

 

 4.Camera1,Camera2のポジションをそれぞれ左手、右手の位置に合わせます。(Camera2も同じようにやってください)

f:id:agry:20180809132728p:plain

 

3.アニメーションを作成する

 GPUパーティクルをアバターに入れることができたので、それを表示するアニメーションを作成していきます。

まずAnimationウィンドウで、activate、push、pause、resetの4つのアニメーションクリップ(名前はなんでもいいです)を作成します。

f:id:agry:20180809210854p:plain

 

activate 

acitivateから弄っていきます。Animationウィンドウの赤い丸(録画ボタン)を押してアニメーションを録画します。そうしたら、下の画像のようにParticle、Camera1、Camera2の赤丸で囲まれた部分をクリックしてアニメーションを作成します。

f:id:agry:20180809211653p:plain

f:id:agry:20180809212208j:plain

f:id:agry:20180809212220j:plain

 

合計5つのアニメーションが出来たと思うので、それらすべてを2フレーム目にコピーします。これでactivateクリップは完成です。

f:id:agry:20180809212608p:plain

 

push 

次にpushです。activateと同じように録画ボタンを押して、Camera1の子のSimulator1を選択、InspectorのSimulator1 vrシェーダーを▷を押して開きます。

f:id:agry:20180809213133p:plain

 

Simulator1 vrのAttractionの値を-0.01に変更します。これと同じ操作をCamera2のSimulator2に対しても行ってください。

f:id:agry:20180809213351p:plain

 

作成した2つのアニメーションを2フレーム目にもコピーしてあげて、pushも完成です。

f:id:agry:20180809213649p:plain

 

pause

pauseです。録画ボタンを押してから、下の画像の赤丸部分を押して、Camera1の子のSimulator1とCamera2の子のSimulator2を非表示にするアニメーションを作成します。

f:id:agry:20180809214450p:plain

 

作成した2つのアニメーションを2フレーム目にもコピーして完成です。

f:id:agry:20180809214540p:plain

 

reset

最後にresetです。録画ボタンを押してから、Simulator1の、下の画像の赤丸部分(Element0)にGPU Particles/ResourcesのResetマテリアルをドラッグアンドドロップします。

f:id:agry:20180809215326p:plain

これをSimulator2に対しても行ってください。

 

作成した2つのアニメーションを2フレーム目にもコピーしてresetも完成です。

f:id:agry:20180809215615p:plain

 

4.アニメーションオーバーライドの設定

アニメーションオーバーライドの設定は下の記事も参考になると思います。

shiasakura.hatenablog.com

作成したアニメーションをアニメーションオーバーライドの任意の場所に入れます。

f:id:agry:20180809220052p:plain

 

これでアバターをアップロードすればGPUパーティクルが使えるようになっているはずです。

GPUパーティクルはCameraを使用しているため、フレンドにしか見せることができません。これを口実にフレンドを増やしましょう(笑)

 

5.GPUパーティクルの使い方

reset->activateの順にアニメーションを再生してください。すると手の位置(Camera1、Camera2の位置)に粒子が集まってくるはずです。花火のように粒子を広げたいときはpushアニメーションを再生してください。

 

6.まとめ

GPUパーティクルの導入方法を紹介しました。なかなか複雑な手順でしたが、一度導入してしまえばGPUパーティクルで無限に遊んでられるので、頑張ってください。みなさんもよきVRChatライフを!