エンターテインメント分野だけでなく産業分野での活用が進むUnity。WOW inc.（以下、WOW）が手がけた「AIR HUB TOKYO」のプロジェクトにおいては、気流や温湿度といった環境データの可視化システムの大部分がUnityで構築されている。なぜ「ほぼUnity」で完結させたのか？ その開発プロセスにおけるメリットや、Houdiniを用いた高度なデータビジュアライゼーションの手法について、WOWでプログラマーとして活躍する梅田優弥氏に詳しく話を伺った。

※本記事では、12/15（月）に開催したオンラインセミナー「【Unity Industry 活用事例】目に見えない気流・空気質を可視化したデジタルサイネージ」のレポートをお届けします

プロフィール

――まずはWOWの事業内容と、「AIR HUB TOKYO」について教えてください。

梅田優弥氏（以下、梅田）：WOWは東京、仙台、ロンドンに拠点を置くビジュアルデザインスタジオです。企業の世界観を描くブランド・コンセプト映像、商業施設や都市空間におけるインスタレーション、アプリケーションの設計やUIデザインなど、既存のメディアやカテゴリーにとらわれない幅広いデザインワークを行なっています。特にアプリケーション開発やインスタレーションでは積極的にUnityを採用しています。

今回ご紹介するのは、パナソニック株式会社 空質空調社の実験施設である「AIR HUB TOKYO」の事例です。ここは公共空間や商業施設における「空気質」に焦点を当てた施設なのですが、ご依頼いただいたのは、その空間の環境可視化とデータ表現でした。

――「空気」という目に見えないものを可視化するのは難易度が高そうです。

梅田：おっしゃる通りです。このプロジェクトでは温度、湿度、清浄度、気流など7つの要素を扱いましたが、いずれの要素も肌で感じることはできても、目で明確に捉えることはできません。そこで、これらを映像で視覚的に把握できる「ビジュアルサイネージ」と、空調機器の状態確認や制御ができる「タブレットアプリ」を制作しました。専門的な機器を、私たちのような一般のユーザーでも直感的に理解・操作できるようにデザインすることがミッションでした。

――どのようなシステム構成になっているのでしょうか？

梅田：システムは大きく分けて3つで構成されています。「センサー計測・空調管理API」「ビジュアルサイネージ」「タブレットアプリ」です。PM2.5や匂いのセンサーなどは電子工作で自作したものも含め、APIやアプリ間の通信など、外部サービス以外はほぼ全部Unityで開発しています。

フロントからバックエンドまで「ほぼUnity」で完結させるメリット

――APIやセンサー周りを除いて、バックエンド機能までUnityで実装されたというのは驚きです。

梅田：通常はフロントエンドはUnity、バックエンドはNode.jsなどのサーバーサイド言語が一般的です。しかし今回のプロジェクトでは、共有すべき計測値や設定値が約百項目に及びました。言語やフレームワークが異なると、それぞれの定義を二重に実装する必要があり、整合性チェックやメンテナンスの工数が膨れ上がります。「また同じ変数を定義するのか……」という心理的な負担も無視できません。

そこで、今回はローカル環境で動作するサーバで十分だったこともあり、サイネージアプリ内にサーバ機能を内蔵し、Unityだけですべて完結させる決断をしました。

――開発効率や管理面でのメリットは大きそうですね。

梅田：非常に大きかったです。Netcode for GameObjectsやHTTPサーバ機能を使い、JSON、YAML、CSVなどの形式でデータをやり取りしましたが、すべてC#で記述できるためソースコードを共有できます。Unityプロジェクトを渡すだけで環境構築が完了し、Unity Editor上でサーバ、サイネージ、タブレットの挙動をすべて再現できる点は強力でした。

――開発プロセスにおいて、具体的にどのような工夫をされましたか？

梅田：「マルチシーン編集機能」をフル活用しました。開発環境ごとに「サーバーシーン」「サイネージシーン」「タブレットシーン」を作成し、これらを同時に読み込んで再生することで、1台のPC上で通信テストや動作確認が完結します。

梅田：ビルド時も、プラットフォームごとにシーンを割り当てるだけなので管理が容易です。

梅田：また、今回は3名のプログラマーで開発を進めましたが、それぞれ「バックエンド（C#ロジック）」「フロントエンド（UI構築）」「3Dビジュアル（表現・演出）」と得意分野が異なりました。

梅田：そこで、作業のコンフリクトを防ぐ目的で機能ごとにプレハブ（Prefab）を作成し、シーンはその組み合わせのみで構成するルールを徹底しました。Gitなどのバージョン管理においても、担当箇所のプレハブのみを更新すればよいため、スムーズに並行作業が進められました。

直感的なツール活用と、データドリブンのUIデザイン

――フロントエンド、特にUI周りの制作フローについてお聞かせください。

梅田：UIはUnityのCanvas機能を中心に構築していますが、ゲームエンジンならではの表現として、3Dモデルやシェーダを積極的に取り入れています。例えば、円がゆらぐようなグラフィックは動画素材ではなく、Shader Graphを使ってノイズ関数で描画しています。これにより、解像度に依存しない滑らかな表現が可能になります。

梅田：また、PM2.5の量に応じてパーティクルの密度が変わるといった表現には、3D空間上のパーティクルをカメラで撮影し、Render TextureとしてUIに焼き込む手法を採りました。2DのUIパーツだけでは表現しきれない動的なデータ表現も、Unityなら3D機能をシームレスに組み込めます。

――データの可視化、特に「気流・快適度」の表現はどのように調整されたのでしょうか。

梅田：「アートディレクション」「デザイン」「プロトタイプ」「開発」のサイクルをすべてUnity上で回しました。例えば、快適度（0〜100）に応じた空間の色やパラメータの変化は、ScriptableObjectを使って管理しています。これはデータをアセットとして保存できる機能で、複数の配色パターンを作成してInspector上で瞬時に切り替えて比較検討するのに役立ちました。

梅田：データの変化も単純な直線（リニア）ではなく、アニメーションカーブを用いて「あるしきい値から急激に変化する」といった感覚的な調整を行なっています。

梅田：空間のモデルにはShader Graphでフレネル表現（エッジの発光処理）を適用し、気流の煙や炎の表現にはAsset Storeの既存アセットを活用して効率化を図りました。

Houdini × Unity VFX Graphによる高度なビジュアル表現

――もうひとつの事例、「消費電力の可視化」では非常にリッチな植物の表現が印象的です。

梅田：ここでは「消費電力が少ない＝環境負荷が低い＝良いこと」と定義し、電力が少ないほど植物が大きく成長し、花が咲くというビジュアルに落とし込みました。逆に電力が多ければ植物は小さくなります。単にグラフの大小で表現するよりも、環境への貢献度が直感的に伝わる表現を目指しました。

梅田：この複雑な植物の成長アニメーションにはHoudiniを使用しています。ボーンアニメーションでは表現しきれない数のメッシュを動かすため、Houdiniで頂点ごとの動きをテクスチャに焼き込む手法、VAT（Vertex Animation Texture）を採用しました。

――Unity側ではどのように実装されているのですか？

梅田：VATを使うことで、頂点計算の負荷をGPUに逃がすことができ、大量の植物を配置しても60fpsで滑らかに動作します。これに加えて、空間を漂うオーブや気流の表現にはVisual Effect Graph（VFX Graph）を使用しています。

梅田：特にこだわったのが、気流が部屋の形状に沿って流れる表現です。ここでは「SDF（Signed Distance Field：符号付き距離場）」という技術を使っています。空間モデルからSDFデータを生成（ベイク）し、VFX GraphのConform to SDFというブロックを使うことで、パーティクルを部屋の形状に引き寄せつつ、指定したコースに沿って流すことができます。これにより、実際の空間内を空気が循環しているようなリアリティのある表現が可能になりました。

引用元 左図：パーティクルエフェクトが超進化する！ Visual Effect Graph の基礎と応用 - Unite Tokyo 2019 https://youtu.be/Xwmdl4sbsjY?si=pLHAx6YOmXYWmb8r&t=1831 右図：Visual Effect で複雑な形状を表現する | Visual Effect Graph | 10.7.0 https://docs.unity3d.com/ja/Packages/com.unity.visualeffectgraph@10.7/manual/representing-complex-shapes.html

――Houdiniや高度なグラフィックス技術の選定も、プログラマー視点で行われているのですね。

梅田：そうですね。当社にはHoudiniを使えるデザイナーも多いので、「こういう表現がしたい」という相談があれば、「VATを使おうか、それともAlembicにしようか」といった技術選定をスムーズに行えるのが強みです。

産業分野でも活きる「ゲームエンジンの思想」

――最後に、産業分野やプロトタイピングでUnityを採用するメリットを改めて教えてください。

梅田：大きく4つのメリットがあると考えています。1つ目は、環境構築からビルドまでの速さです。OS間の差異を吸収してくれるため、「とりあえず動くもの」をつくるプロトタイピングには最適です。

2つ目は、C#資産の活用です。UniTaskのような非同期処理ライブラリや、.NETの標準ライブラリなど、既存のC#エコシステムをそのまま利用できます。

梅田：3つ目は、直感的なツール群です。Shader GraphやVFX Graphのように、ノードベースで結果を見ながら試行錯誤できる環境は、クリエイティブの質と速度を両立させます。

4つ目は、圧倒的な情報量です。ゲーム開発の文脈だけでなく、近年は産業利用の知見もWeb上に多く共有されており、技術的な判断材料に事欠きません。

――これからUnityを産業用途で使ってみたい方へアドバイスをお願いします。

梅田：最初からすべてをUnityでつくる必要はありません。「シミュレーション結果の可視化だけ」など、一部分から導入するだけでも十分な効果が得られます。

梅田：また、機能の探し方で迷ったときは、ゲーム用語で検索してみることをお勧めします。例えば「当たり判定」ならColliderやRaycast、「ランダム」ならRandomクラスやノイズ関数、「CPU（AI）プレイヤー」ならNavMeshといった具合に、ゲーム用語とUnityの機能は1対1で対応しています。日常的な言葉やゲーム用語を切り口に調べていけば、豊富なドキュメントやコミュニティの知見にたどり着けるはずです。ぜひ、そこを入り口にUnityの世界に触れてみてください。