こんにちは、エンジニアの有吉です。
今回は、弊社サービスであるカタチスペースと、今やすっかり子供たち間で定番の遊び場となったロブロックスを組み合わせれば、現実世界の物品を簡単に仮想空間に表示できる、という技術デモをご紹介します。
目次
ロブロックスとは
ロブロックスは、今や世界中の子どもや若者にとって「遊ぶ場所」であり「作る場所」でもあるオンラインプラットフォームです。
ユーザーは自分でアバターを作り、他のユーザーが作ったワールド（ゲーム空間）を訪れたり、自分自身でオリジナルの体験を公開することもできます。 2020年代以降、特に10代を中心に急速にユーザー数が増え、日本でも小学生〜中高生の間で話題になる機会が増えてきました。
ゲームとして遊ぶだけでなく、アバターを着せ替えて友達と交流したり、写真を撮って共有したりと、SNS的な要素も含む使われ方が広がりつつあります。
カタチスペースとは
カタチスペースは、現実の物品をそのまま3D・ARで再現できるサービスです。
たとえば「このソファはオフィスに収まるだろうか？」「この家電はキッチンに置ける？」といった不安を、説明書や写真ではなく、目の前に置いたかのような体験で解消することができます。
ユーザーは、スマートフォンなどを使って商品の3Dモデルをその場に表示し、サイズ感や質感を直感的に確認可能。 企業にとっては、ARを通じて購入前の確信を高める新しい接客手段として活用できます。
カタチスペースを活用し、３次元空間のロブロックスに商品を配置することができます。
セットアップ
実際にやってみます。まずは環境を整えます。
カタチスペースを App Store からインストールします（iOS環境）。
ロブロックスの開発環境である Roblox Studio をインストールします。 こちらはアカウント登録が必要です。
Roblox Studio のチュートリアル
インストールして起動するとチュートリアルの案内があり、承諾すると簡単なチュートリアル用のシーンが作成されました。
内容は、3D オブジェクトの配置方法、移動、回転、拡大縮小、といったお馴染みのもの。 筆者は Unity を常用していることもあり、すんなり理解できました。
Unity でいうところの Hierarchy はエクスプローラーで、シーン上のオブジェクトはすべてここから参照できるようです
エクスプローラーの下部にはプロパティウィンドウがあり、こちらは、Unity の Inspector に対応するものとなっています
試しにスケールを変更してみました
モデルの用意さえできれば、ゲーム内に表示できそうです。
Roblox Studio のスクリプト
Roblox では、ゲーム内のインタラクションやロジックを記述するために Lua（ルア） という軽量スクリプト言語が使われています。 lua は Unity にも組み込み可能なので、使ったことのある Unity エンジニアの方もいらっしゃるのではないでしょうか。
lua を動かしてみる
エクスプローラーにある ServerScriptService にマウスカーソルをあわせる表示される、+ をクリックすることで新規スクリプトを追加できます
表示タブから出力ウインドウを表示されてゲームを実行すると、スクリプトが期待通りに動作していることが確認できました
体当たりしたら物体が跳ねるようなコードを書いてみます
カタチスペースのデータをダウンロード
カタチスペースは撮影物を gltf フォーマットの 3D モデルとしてダウンロードすることができます。 その 3D モデルを用意します。SS はプレビュー画像です。
モデルのインポート
本旨である 3D モデルのインポートをおこなってみます
モデルのインポートは 3D インポートボタンからおこないます
インポートするオブジェクトを選択すると、インポート設定画面が開きます
無事にインポートできました。
が、サイズが小さいですね。
適当に大きくします。
Roblox x カタチスペース
テストでゲーム内にも表示されることを確認しました。 右側はの看板は、テクスチャを単体で表示することができるか実験したもので、こういったこともできるようです。
結び
以上、現実世界の物品をロブロックスに表示する方法の紹介でした。
カタチスペースとロブロックスを活用し、現実世界の商品をロブロックスの空間に配置することができました。 カタチスペースから、取り込んだモデルをたくさん並べれば、ロブロックス内でのバーチャル展示会や仮想ショールームのようなものも作れそうです。
弊社では Unity や Roblox を用いた 3D 空間の作成を承っております。ご興味があれば、ぜひお気軽にお問い合わせください。
お問い合わせ：[https://kashika.co.jp/contact.html](https://kashika.co.jp/contact.html