img

INVISIBLE FORCEの裏側について[HoloLens+Unity]

ご無沙汰しております。小井です。
今回は少し時間が経ってしまいましたが、3月のSXSW2017で提案した「INVISIBLE FORCE」について少しお話をさせてもらいます。
SXSWの記事はこちら「【SXSW2017】HACKist、四度目のオースティンの大地を踏む

この作品は見えない力の表現となっていて、HoloLensをつかい、Unity,Max,IoTといった技術を連動させた作品となっています。
細かい技術要点は多々あるのですが、今回担当した視覚効果の部分について触れていきたいと思います。

体験設計と基本的なパーツの実装

体験の流れとして、HoloLensで見えるMR空間内にバリアを展開。それにユーザーがエネルギー弾を投げてバリアを破壊するという一連の流れの生成と演出になります。このオーダーに対して次の動画のようなデモをいくつか作り、チーム内でイメージの共有を進めました。

このバリア、初めはWebGLでサンプルを作っています。Unityで作るのになぜWebGLをつかってサンプルをつくるのか?という疑問があるかもしれません。
その理由として、INVISIBLE FORCEを作り始めたのが1月中旬。3月上旬のSXSWまで時間がなく一番慣れ親しんだ言語がGLSLだったというのもあります。(余談ですが、この時点でUnityを触り始めて2月半ほどでした・・・)デザイナーさんと詰めていく過程をGLSLでやり、最終的なアウトプットに対してはHLSLで実装したといえばわかりやすいでしょうか。
また、柔らかなイメージのバリアなので、弾が当たった瞬間に弾くようなエフェクトではなく、受け流すような動きを演出として加えています。
これで基本的な部分ができました。

GPGPUをつかってバリア破壊のエフェクトをつくる

次はバリア破壊のエフェクト。イメージしたのは柔らかい球体が割れていく様。シャボン玉や風船が割れる瞬間をスーパースローカメラでとらえたような絵を再現する事にしました。バリアにエネルギー弾が当たったところからゆっくりとバリアが無くなっていくイメージです。

いくつか実装の方法は思いついたのですが、この時は一番シンプルなバリアと弾の接触した座標からの距離を使った3D演算をShader側で行う事で達成しました。いわゆるGPGPUの一種です。
Shaderに処理を委ねたのは、計算内容が3Dによったものだったのでマシンの処理負荷を考慮した結果でした。

INVISIBLE FORCE製作を振り返って

やはり3Dコンテンツの制作は、デザイン先行しての制作になりにくく(いわゆるグラフィックデザインが先行しにくいためです)、全体の体験を設計した後にチーム内のイメージ共有、そしていきなり実装というケースが多いかと思います。今回もまさにその環境だったのですが、イメージにできるだけ合わせた実装を行なった後にチームで細かくすり合わせを繰り返すことで作り込みと完成度を高めていくことができました。コミュニケーションってやっぱり大事ですね!

MRとして今回製作していますが、基本的なことを押さえていればVRコンテンツにもすぐ応用が利き、改めてUnityの汎用性の高さを確認できました。
余談ですが、先日VRを作ってみようと思い、月曜に作り始めたら火曜には簡単なでのレベルのVRゲームができたので改めてご紹介できればと思っています。

Shaderの汎用性

Shader(本記事の中ではGLSL、HLSLといったShader言語で開発)は基本的に3DCGにおいて、陰影処理や模様を作り出す機能の総称なのですが今回はこれに加え3DCGの形状も変化させてみました。これはGPGPUというテクニックの一つで、PCの中でグラフィックを計算する部分を使ってグラフィック以外の計算をさせる事で高速に処理を行う方法です。これはビジュアライズ分野以外にも多く使われており、最近よく耳にする機械学習の分野においてもこのGPGPUの処理方法が使われています。
このようにShaderは非常に多くの汎用性があるため今後より掘り下げた使い方を模索していこうかと思っています。