先日バーチャル上のSNS cluster上に、私が勤務する株式会社 たき工房のバーチャルオフィスを作成しました。なんで作ったのか、どうやって作ったのかの記録を残したいと思います。

↓よろしければ遊びに行ってみてください。

リアル写真と比較

バーチャル空間上で出来る限りローポリで仕上げなければいけないのでディテールは端折ったりしてますが、そこそこ再現されたんじゃないかと思ってます。

作った経緯

株式会社 たき工房は簡単に言うと広告制作会社です。その中で、私が所属するTech Labという部署の業務は、受託業務ではなく次の事業を作っていくための自社開発になります。
また230名超の社員の中でデザイナーが大半を占めていますが、Tech Labは少数精鋭のエンジニアに特化した構成です。

元々は屋外や展示会場での体験型インタラクティブコンテンツに特化した開発を目的に行っていましたが、新型コロナウィルスの影響で世の中的に需要が減ってきています（たぶん）。

そこでオフラインとオンラインを横断できるコンテンツ開発ができないかなという事でAR/VRコンテンツの開発に取り掛かることにしたのが経緯です。

（この状況下で、制作会社なら当たり前のようにAR/VRコンテンツに着手してますね。）

作り方

工程は大きく分けて以下の通りです。一つずつ見ていきましょう。

・図面の入手
・採寸＆撮影
・モデリング
・テクスチャリング
・Unityオーサリング
・clusterへアップロード

・図面の入手
これが無いとなかなか難しいのですが、私の場合社内の引っ越しで席を決める必要があり、たまたま平面図だけ所持していました。（今無い場合は総務部に聞いてみましょう）
ただその平面図は寸法が記載されておらず、実際の寸法を知るのはなかなか難しい状況でした。

・採寸＆撮影
図面はあるもののどうやって実寸を図っていくか。これはメジャー（定規）を使って図っていくしかないですね。
↓下図のように図面には柱やデスク、キャビネット等も記載されていたため、採寸しやすいキャビネットから始めて、図面上で比率換算してフロア全体の寸法を割り出しました。

また、画像はかなりの枚数を撮影する必要があります。モデリングでは細部がわからないと再現性が薄れるため、家具は上下左右前後、普段あまり見ない天井や床の隅、机の下に潜り込んで足を撮影したりします。

ちなみに今たき工房は全社員が基本在宅勤務中で人があまりいないため、撮影自体はかなりスムースに行えました。今の時期じゃないとなかなかできないコンテンツかもしれませんね。

・モデリング
私の職業はエンジニア/テクニカルディレクターですが、もともとはデザイナーで、かなり昔にモデリングも経験があります。今回はその記憶を呼び覚ましてモデリングをしました。使用ソフトはCinema4Dです。

ブランクを埋めるためにいくつかチュートリアル動画をこなしてから実際のモデリングに挑みました。以下参考にした動画です。

ローポリのモデリング

C4Dのツールの使い方

あと、以前の上司からキャラクターモデリングをするのが一番モデリングが上達すると教わったのでキャラクターモデリングもいくつかやりました。それと3DCG制作では、ショートカットはかなり重要です。

・テクスチャリング
モデリングだけ出来ても、最終的な見た目に影響するテクスチャーがちゃんとはれていないと台無しです。基本的には会社でそのものの撮影を行い、画像をテクスチャとして使いますが、簡易撮影のため使い物のにならないものもありました。
そんな時はオンラインでテクスチャを販売（または配布）しているサービスを利用して最適なテクスチャを用意します。住居や建造物なんかに使われる素材はテクスチャが豊富なのであまり時間をかけず探すことができました。

画像が用意出来たらあとは3Dモデルに貼っていきますが、ちゃんとした見た目にするにはUV展開をしないといけません。UV展開は以下のチュートリアル動画がわかりやすかったです。

UV展開したデータをpsdに書き出し、Photoshop上でテクスチャを調整して再度3Dモデルに反映していきます。

今回作ったもので、自動販売機や鍵穴のあるキャビネットの扉、木目の方向があるデスク＆ソファはちゃんとUV展開してテクスチャをはらないとグチャグチャになってしまいます。

・Unityオーサリング
作成した3DモデルをUnityで使うにはFBX形式で書き出します。その際マテリアルとテクスチャを含める書き出しオプションにチェックを入れておく必要があります。

Unityにインポートする際には、マテリアルとテクスチャを再設定する必要がありますが以下の手順で行えばそれほど大変じゃありません。
※透明のマテリアルはUnity側で設定する必要がありました。

あとはcluster公式にあるチュートリアルにそってcolliderとspawn pointなんかを設定すれば完了です。Unityに慣れている人であればそれほど難しいことはないと思います。

見栄えを良くするための工夫

最後に見栄えを良くするための工夫です。モデリング、テクスチャリングをちゃんとやるのは当然ですが、最後に「ポストエフェクト」をかけると結構違ってきます。今回は最終的にBloom、Ambient Occlusion、Depth Of Fieldを入れてみました。
最終的なクオリティーがぐんと上がりました。比較的簡単に実装できて効果が高いので、かなりおススメです。

↓ポストエフェクトあり

↓ポストエフェクトなし

以上、バーチャルオフィスを作ってみた話でした。見慣れた環境がバーチャル空間に再現され、会社の仲間たち（特に上層部の方々）には好評です。さらに退職した元仲間にも好評だったので割とおススメです！