夜風のMixedReality

xRと出会って変わった人生と出会った技術を書き残すためのGeekなHoloRangerの居場所

SFチックのUIボードを作る その① ~シェイプキーでボタンの形状を変化させる~

HoloLensの開発ツールであるMixedRealityToolkitではサンプルとして配置するだけで使用できるボタンやスライダーなど数多くのUIが同梱されています。

 開発者はプレファブとして提供されているこれらをシーンに配置し、Eventを指定するだけでUIとして機能します。

 ここではBlenderを用いてSF映画や近未来を描いたアニメ作品に登場するようなFUI(Fictional User Interface)を基にHoloLens用のオリジナルデザインのUIボードを作ります。

 今回は第2回目です。 5~10つほど作品が完成したタイミングでGitHubにて公開します。

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

 

redhologerbera.hatenablog.com

f:id:Holomoto-Sumire:20200131090611j:plain

〇デザイン

 www.saji8k.com

 こちらのサイトを参考にイメージを膨らませました。「Kit FUI」は様々なFUIをコレクションしたデータベースサイトです。

 今回作成するボタンはシンプルでありながらSFに出てくるようなイメージを持って製作します。

Blenderで形を作る

 Blenderはフリーで3Dモデルを作成できるツールです。

 今回はBlenderでメッシュを作成します。

f:id:Holomoto-Sumire:20200201094822j:plain

 六角形を作成し横に引き延ばし、少し離して括弧のようにアクセントを付けました。

〇シェイプキーを使う 

 シェイプキーはキャラクター3Dモデルの表情などで多く使用されるその名の通りメッシュの形状を記録し、複数のキーを作成することでメッシュを変化させる機能です。

blender-cg.net

こちらのサイトでシェイプキーに関して解説がされています。(ここでは2.77のバージョンが使用されています。)

bluebirdofoz.hatenablog.com

こちらの記事で実際のキャラクターでの使用が解説されています。

実際に作成したメッシュにシェイプキーを作成します。 [オブジェクトモード]でサイドバーより[コンテキスト]ウィンドウを開き[シェイプキー]で[+]を選択します。

ベースとなる[Basis]がシェイプキーとして作成されます。もう一度[+]キーを押し[Key1]を作成します。

f:id:Holomoto-Sumire:20200201095509j:plain

キーを作成した状態で[Key1]を選択し[編集モード]へと切り替えメッシュを変形させます。

f:id:Holomoto-Sumire:20200201100605j:plain

この状態が[Basis]からの変形後の形状になります。[オブジェクトモード]に切り替えることで[Basis]のメッシュの形状へ戻ります。

f:id:Holomoto-Sumire:20200201100926j:plain

これでシェイプキーの設定が終わりました。 実際にメッシュの変化を確認するためにはシェイプキーの下部の[相対]にある[]を変化させることで行えます。

f:id:Holomoto-Sumire:20200201101302g:plain

 以上でシェイプキーの完成です。 ユーザーがボタンを見る、選択するなどのアクションを行った際に形状が変わるボタンになります。

 シェイプキーと似たような機能としてアニメーションがありますが、アニメーションではあくまでメッシュ自体のトランスフォームを変化させることができるのみで、リグ(骨)を使用しない場合メッシュ自体の頂点や辺の形状を変化させることはできません。

 次回はUnityでシェイプキーの動きを確認します。

redhologerbera.hatenablog.com