VRChatパブリックログ

VRChatでの体験を紹介します

伸縮するワイヤーの表現方法(&物置きの応用)【VRChat技術情報】

のびのびワイヤー

上から糸で吊られている操り人形、電磁力で引き寄せる武器、油圧ロボットの間接部分。伸縮し、アバターの動きに追従する糸状の物体を表現したい場面はしばしばあります。

今回は以前紹介した「物を置く方法」を応用して、指で触ったらねばーっと粘液がくっついてくる表現を作ってみます。

f:id:mekokka:20180804024437p:plain

まずは物を置く方法について参照

今回はこの記事で作成したアバターを改造します。記事に従って作成する場合、上記の記事のアバターをまず作成して下さい。

ワイヤーのモデルデータ作成

Blenderの画面で説明します。

平面を細長くしたものを二つ、十字に並べます。シェーダーで両面表示にすればいいので、頂点は全てで8つのデータになるはずです。私はなんとなく中央でループカットしましたが、基本的にはゆがみやすくなるだけで特に意味はありません。

f:id:mekokka:20180804022202p:plain

そして図のように両端にボーンを配置します。ボーンの長さは今回意味がないので適当に見やすい長さにして下さい。それぞれのボーンには親子関係が無いようにしています。それぞれ独立して位置を操作する使い方をするので、これが一番スマートです。

f:id:mekokka:20180804022705p:plain

ここまで書けば言うまでも無いですが、それぞれの末端の頂点を対応するボーンに対して1でウェイトを塗ります。

f:id:mekokka:20180804022902p:plain

f:id:mekokka:20180804022921p:plain

テクスチャのためのUV展開をすればモデルデータは完成です。

Unity上の設定

Unity上の作業に移ります。上の記事で作成したアバターを改造していきます。

最初に「Release_Object」の下のCubeは不要なので削除します。

f:id:mekokka:20180804023157p:plain

次に、先ほど作成したモデルをインポートし、アバターのオブジェクトの中のアーマチュアの外側に置きます。実際は置く位置はどこでも良いです。たくさん配置する場合は空のオブジェクトを作ってフォルダがわりとし、中に入れて整理してもいいでしょう。

水色になっている「spark」というオブジェクトはメッシュデータです。このオブジェクト無効化することでデフォルトで非表示にします。ワイヤーのオブジェクト全体を無効化すると、表示だけで無く位置座標の計算も止まってしまうため、再度表示したときに表現が破綻してしまうので注意して下さい。

f:id:mekokka:20180804025516p:plain

アーマチュアの中に入っている「start」と「end」がBlender上で配置した二つのボーンです。これを人さし指の先端あたりにくるように配置します。完全に重なるように二つのボーンを同じ位置に配置して下さい。*1

次にワイヤーのアーマチュアコンポーネントを追加します。

f:id:mekokka:20180804030956p:plain

f:id:mekokka:20180804031011p:plain

「L.Hand-Grab_Sistem」の名前が「Index-Grab_Sistem」に名前が変更されていますが。名前の通り、該当のオブジェクトは人さし指のボーンの下に配置し直しました。

再生ボタンを押して、ワイヤーのメッシュを有効化して表示状態にし、Release_Objectの位置を動かして動作確認しましょう。テクスチャが伸縮していれば設定完了です。

あとは上の記事で実装した物を置くアニメーションに、ワイヤーのメッシュの有効化するキーを追加すれば実装完了です。

初期状態では何も持っていませんが、作成したアニメーションをアニメーションオーバーライドで呼び出すと、その時点の人さし指の位置が粘液の始点となり、指をひくと糸を引くようになります。

常に糸に繋がれているキャラクターを表現するならば、表示/非表示のアニメーションはそもそも必要ありません。その場合は初期状態ででメッシュを有効にして表示する設定にして下さい。

f:id:mekokka:20180804031946p:plainf:id:mekokka:20180804032005p:plainf:id:mekokka:20180804032042p:plainこれは退席状態で脱力している姿がかっこよすぎる人

*1:今回は伸びる粘液なのでこうなりますが、肩と手が糸で繋がっているキャラクターにしたいなら肩と手それぞれつなげます。編集画面での位置関係が保持されるのように動くので、表現によって配置は換わります