2015年5月23日土曜日

[Unity3D] クエリちゃんの二重あご説という誤解を解く

Querychan is not fat at all
2015年5月、クエリちゃんがこんなツイートをしました。
クエリちゃんはポケット・クエリーズ社のマスコットキャラクターです。ゲーム開発ツールのUnity3Dのアセットストアでクエリちゃんのアセットが無料で公開されています。
ファンクラブもあります。
http://www.query-chan.com/
なぜクエリちゃんの二重あご説が出回ってしまったのか検証しました。


環境

・Windows 8.1
・Unity 5.0.1


3次元CGが表示される仕組み

Unity3DだけでなくMikuMikuDance(MMD)で使われる3次元CGは頂点の座標とその順番のデータの集合です。画面に表示するときは各頂点を順番に結び合わせて線や面を表現します。
面は質感を表現するため単なる塗りつぶしではなく画像を表示することが多いです。面に画像を表示する機能をテクスチャと言います。
下の画像はUnity3Dのマスコットキャラクター・ユニティちゃんです。ユニティちゃんもまたUnity3D用のモデルデータなどが公開されています。
青い線が各頂点を結ぶ線です。
次の画像は怒った顔のユニティちゃんです。
目・眉・口の頂点を移動し、それに付随する面を伸縮することで表情を表現しています。
表情などの表現のために頂点を移動することをモーフと言います。


クエリちゃんの表情はモーフではなくテクスチャ

クエリちゃんも無数の頂点とテクスチャの組み合わせで出来ています。
ですが、ユニティちゃんとの大きな違いは表情をモーフではなくテクスチャの画像で表現している点です。

クエリちゃんは表情毎にテクスチャ画像が用意されています。
口を結んでいるときと開けているときとではあごの形が変わるわけですが、これもモーフではなく顔のパーツが2種類用意されています。
クエリちゃんは表情に合わせてテクスチャの画像を差し替えたり顔のパーツを表示・非表示する仕様です。
2種類の顔のパーツを同時に表示するとわずかにずれて重なって表示されるため、二重あご説が拡散されたようです。
クエリちゃんは二重あごではありません

ユニティちゃんも二人重ねれば二重あごになります。(重ねることはないと思いますが)


ユニティちゃん方式(モーフで表情をつける)のメリット

モーフは頂点の移動量を混ぜる(ブレンドする)ことができます。
例えば口を結んでいるモーフとあんぐり開けてるモーフを半分ずつブレンドすれば口を半開きにできます。


クエリちゃん方式(テクスチャで表情をつける)のメリット

テクスチャはあらかじめ用意した画像を面に表示する機能なので、モーフのようにブレンドすることが出来ません。
ですが、2次元の画像編集ソフトを使えば比較的簡単にオリジナルのテクスチャ画像を作ることができます。
下の画像はクエリちゃんの表情のテクスチャを自分で作ったものです。
新しいモーフを追加するとなると3次元のCG編集ソフトを使いこなす必要があるのでそれなりに難しいです。
テクスチャなら元の画像を改変するだけなのでモーフの追加ほど難しくありません。


クエリちゃんの手のパーツは3種類

クエリちゃんは手首や指の関節が曲がらない代わりにグー・パー・半開きの3種類のパーツがあります。
使いたい手の形だけを表示して使う仕様です。


クエリちゃんモデルのFBX

クエリちゃんのアセットはFBXファイルが付属します。FBXは3次元CGで広く使われているフォーマットです。
FBXの読み込みに対応しているCLIP STUDIO COORDINATEを使ってみたところ、クエリちゃんのFBXファイルを読み込むことが出来ました。
テクスチャの画像ファイルは自分で指定する必要がありました。
2つの顔が重なったまま表示されます。
手も3種類全て表示されています。



クエリちゃんについて詳しいプロ生の動画があります


勉強会は動画で見るより会場に行った方が情報量が圧倒的に多いです。


関連ブログ

[Unity3D] サイドバイサイドで立体視できるゲームを作るには [クエリちゃん][ユニティちゃん]
[Unity3D] Unity5のアプリをAndroid Studioにインポートする方法
[Unity3D] Unity4からUnity5へのバージョンアップでの変化
[Unity3D] ゲーム画面をキャプチャしてMovie Studioで動画に編集する
[Unity3D] Visual Studio Community 2013を日本語化してUnityアプリを作る
CLIP STUDIO COORDINATE でプロ生ちゃんを使ってみる
[Android] OpenGLで頂点の多いポリゴンを扱うには



以上、参考になれば幸いです。

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。