2026.03.19
生成AIでつくる、バーチャルスプレー体験制作
AaaS Tech Labの村越です。
AIの発展によって、プログラミング言語の詳細な書き方を知らなくても、テキストで指示するだけでWebアプリを作れるようになりました。さらには「MCP」の登場によって、BlenderやUnityといった3Dツールの操作までAIで可能になりつつあります。しかし、Webアプリ制作と比べると、3D空間の構築をAIにすべて任せるのは、まだ難易度が高いのが現状です。
そこで本コラムでは、「どの範囲までAIに代行させられるのか」を探るべく、AIが得意な部分は任せ、自動化が難しい部分は自ら手を動かして学んでいきました。
今回は、好きな3Dのバーチャル空間(Unity上)に、実際に手で持ったスプレーで自由にグラフィティやステンシルアートを描ける体験型ゲームを制作しました。
制作のきっかけは、旅行でクアラルンプールを訪れた際、街中に描かれたスプレーアートを見て、自分も描きたいと思ったからです。
バーチャルスプレーの作成
スプレーの粒子が飛び出す噴射エフェクトを表現するために、UnityのVFX (visual effect) Graphを用いました。VFX Graphは、ノードベースであるため、AIによる直接編集をすることはできませんでした。スプレー噴射を表現するためのノードのつなぎ方をAIに聞いたとしてもうまくいきませんでした。なので、AIに任せるのはやめ、煙のアセットをもとにして、速度や色、消え方のパラメータを調整することでスプレー噴射を表現しました。このようにしてできた噴射エフェクトがこちらです。
記事画像
バーチャルスプレー缶は、Tripoのimage to 3Dで作成しました。
次に、壁に描画されるインクの表現には、Shaderを用いました。UnityのShader作成には、ノードをつなげていくShader Graphと、HLSLやCg言語で直接コードを記述していくShaderLabの手法があります。試したところ、Shader GraphはノードベースであるためVFX Graphと同様に人間が手を加える必要がある一方で、ShaderLabはコードベースなためAIによる生成と相性が良かったです。そこで簡単なビジュアルはShader Graphを使い、スプレーが塗装される複雑なアルゴリズム(粒子の飛び散り具合など)はShaderLabを使ってAIで記述しました。こうしてできた、スプレーの塗装がこちらです。
記事画像
リアルスプレーの作成
リアルのスプレー缶に必要な、ボタンを押した際のパソコンへの遠隔入力と、スプレーの位置計測について説明します。
遠隔操作をするために、リアルのスプレーに取り付けられるサイズのボタンが必要でした。電子工作も考えましたが、今回はiOSやアンドロイドのスマホにBluetooth接続して、カメラのシャッターを押せる小型リモコンを使用しました。このリモコンをMacに接続してみると音量を上げるボタンとして認識されていました。なので、キー割り当てをSpaceキーに変更することで、スプレーを制御できるようにしました。
次に、手に持っているスプレーの位置とバーチャルのスプレーの位置を同期させるために、リアルのスプレーの位置を計測する必要があります。候補として超音波センサーや深度カメラも検討しましたが、安価で導入が容易なApril Tagを採用しました。April Tagをカメラに映すことで、カメラからのタグまでの距離、方向、角度を算出することができます。今回、パソコンのwebカメラを使っており、タグが近すぎると画面からはみ出し、遠すぎると認識されません。そのため大小異なるサイズの2種類のApril Tagをスプレーに貼り付けることで、どの距離からでも安定して追跡できる工夫を施しました。以下追従している様子の画像です。
記事画像
これらのAprilTagとの同期動作やボタン制御のロジックは、すべてUnityのC#で記述されています。この部分は完全にコードベースの作業であるため、AIによりすべて記述することができました。
3D空間の作成
3D空間を作成するために、テキスト・画像・動画から3Dワールドを生成するマルチモーダルワールドモデルであるMarbleを使いました。たった1枚の画像から3D空間が作れるなんて驚きです。
出力形式はSplat(.plyまたは.spz)とMesh(.glb) の両方が選択可能でしたが、Meshはでこぼこしていたため、今回はsplatを3D空間として用いることにしました。
記事画像
ステンシル画像の作成
最後に、ステンシルアートをつくるためのステンシルマスクの準備です。好きな画像からステンシルマスクをつくるアプリケーションを作成しました。
MetaのSegment Anything Model 3(SAM3)では、テキストでオブジェクトを指定することで、そのオブジェクトをセグメンテーションすることができます。これを用いてステンシル画像にしたい対象のみを取り出せるようにしました。そのあと、切り出した画像をグレースケール化・2値化してUnityへ送ることで、マスクされていない部分にだけスプレーが描かれるという挙動をすべてAIで実装しました。
記事画像
このようにして実装したアプリケショーンのデモ映像がこちらです。今回、モニターにUnityの画面を映して、壁と見立ててスプレーを吹き付けています。
おわりに
リアルのスプレーの見た目は少し不格好になってしまいましたが、「スプレーで塗る」という体験を感じられるアプリケーションを形にすることができたと思います。3D空間を作ったので、周りをプロジェクションマッピングしたらより没入感が増しそうです。
今回の制作を通じて、どの部分をAIで自動化でき、どの部分を人間が手を加えるのかを、実際に実装しながら試してみました。人間が使いやすいようにノードベースにした反面、AIでは実装しづらくなっているのは面白いなと思いました。すぐにVFXやShaderもAIがぱっと自動で作ってくれるようになると思いますが、、、
私たちAaaS Tech Labでは、データサイエンスや最先端AI技術を用いたソリューション開発はもちろんのこと、メディアコンテンツ開発への応用も日々模索しています。興味をお持ちの方がいらっしゃれば、ぜひお気軽にcontactからお問い合わせください。