オンライン展示会場をPlayCanvasで作る際の3Dモデル作成について

この記事では3Dデザイナー視点で、PlayCanvasを使用しオンライン展示会場を作成した際の、3Dオブジェクトの作成内容と作成方法を解説します。
使用ソフト
blender2.8.0/photoshopを使用

作成物
1.会場モデル
2.ブースモデル
3.ブース内オブジェクト
4.publish&builds

会場モデル

メイン会場となる大型の室内ホールと言った感じのもの。会場内には複数の展示ブースやアバターが動き回れるだけの広さが必要となります。そのため、リアルタイムライティングではシーン事態の負荷が高くなる。通常のテクスチャーマッピングでは画像データのサイズが大きくなり過ぎる等の問題が出てきます。これらを回避するために、Blenderのベイク機能とUVレイヤーを使い、なるべくデータ容量を抑えた構成にします。

会場モデルのオブジェクト分け

1つのオブジェクトとして展開するとテクスチャのサイズがかなり大きくなってしまうので、いくつかのパーツに分けました。また、床やコンクリートの打ちっぱなしの様なパターンの部分に関してはPlayCanvasのマテリアル設定で可能なタイリング機能とLightMap機能を併用して容量の削減を行っています。

UV展開

メイン会場用のUVはLightMap用のUVのみ展開し、タイリング用の床や壁はマテリアル上の設定で対応しています。
タイリング様に用意したテクスチャは以下のモノです。
Colormap
Normalmap
AO
Roughness
LightMap用のテクスチャは会場ベース、階段の2つのみです。

階段と2階部分、天井のダクトや照明オブジェクトを含む会場全体をテクスチャーとして用意します。

UVレイヤー

BlenderのUVマップを複製し、タイリング用のUVとLightMap用のUVを作成します。

"UVマップ"はタイリング用のUV、"lightmap"は放射(ライト)用のUVマップです。
これをPlayCanvasのマテリアル、UVChannelで使用します。

Blender上のUVマップはPlaycanvas上のUVChannelではUV0。lightmapはUV1となっています。

Blender マテリアル

プリンシプルBSDFで設定していきます。後でベイク処理をしていくので、無料のアドオン[BlenderKit]でコンクリートの壁や床のタイルなどの設定をしていきます。
https://www.blenderkit.com/oauth-landing/

ベイク処理

BlenderのCycleRenderでベイク項目内のベイクモード[統合]。影響を照明の直接照明、間接照明にチェック。Contributionの放射にチェックを入れ、ライトのカラーや光源影響のみをレンダリングします。この際、Shadingシーンから各マテリアルにベイク用の画像テクスチャを1枚新規に作成しておきます。(ノードは繋がないで置いておきます)

サンプリング値を2000まで上げてますが、レンダリングにかなり時間が掛かります。サポートでレンダーデノイズにOpenImageDenoiseを設定しています。これでかなりチラつきを抑えられます。

出力設定の余白はデフォルトで16pxになっていますので、UV上でのオブジェクト間の余白が狭い場合レンダリング結果が重なってしまいますので、任意で数値を下げます。

室内用cubemap

PlayCanvasのマテリアル設定の中で、Environment(環境光)を設定し、各ブースに建物内部の反射を投影させます。Blenderのカメラ設定で前後左右上下のレンダリング画像をPhotoshopで加工します。

Blenderでシーンの中心から前後左右上下をレンダリングし、PlayCanvasにインポートします。

Assets欄からNew Asset→CubeMapを新規で作成します。

新規で作成したCubeMapに各画像をdrag＆dropで張り付け。最後にPREFILTER CUBEMAPのボタンをクリック。
これで、CubeMapとして、使用可能となります。

Blenderエクスポート&PlayCanvasインポート

FBX化したいオブジェクト毎に選択し、下記の設定でエクスポートします。

赤枠部分は初期設定からの変更箇所です。パスモードが初期設定のままだと、オブジェクトとマテリアルがセットにならないので注意してください。
PlayCanvasへのインポートはAssete欄にdrag＆dropするか、UpLoadボタンから行います。

ブースモデル

同じブース形状だが、展示内容の異なるブースを複数作成する必要があったのでPlayCanvasのTemplate機能を使用し、1つのブースモデルを流用する形で作成しました。

ブース3Dモデル

通常のモデリングで形状を作成し、UV展開、室内にライトがある場合はライティングし、ベイク[総合]でテクスチャを生成します。

ブースモデルとテクスチャをPlayCanvasにインポートし、別々のシーンで設定をします。

PlayCanvas Template機能

別々のシーンで作成したブースモデルをメインシーンで再利用します。3Dモデルはそのままにマテリアルや展示物を各商材ブース毎に変更します。

ブース内オブジェクト

パンフレットの表示にはシンプルなPlaneオブジェクトを使用しています。3Dロゴに関しても、Blenderによるベーシックなモデリングで作成しています。また、ムービーデータ(mp4)をPlaneポリゴンに張り付け再生させています。

パンフレット(赤枠C/D)

解像度と縦横の比率に注意し、PlayCanvasにデフォルトで入っているPlaneにマテリアルを設定します。マテリアルには　diffuseとEmissiveにパンフレット画像を入れます。少々自己発光で明るくしておくと可読性が上がります。

3Dロゴ(赤枠B)

ロゴマークの画像データをPhotoshopで.svgに変換し、Blenderで.svgを3D化します。各種マテリアルを設定します。回転アニメーションはPlayCnavasのCodeEdeitorから簡単なスクリプトで制御しています。

ムービーデータ(赤枠A)

モニター用の3Dモデルに映像を表示するように独立したplaneを用意し、映像用のマテリアルを設定します。スクリプトでmp4のムービーデータを再生しています。

publish&builds

PlayCanvasではプロジェクト公開用のURLを簡単に生成することができます。手順は以下の通りです。
シーンビュー上部にある"Manage Scenes"をクリック

シーンを選択するポップアップが出ます。赤枠の"PUBLISH"をクリック。

赤枠の"PUBLISH TO PLAYCANVAS"をクリック。download .zipはプロジェクトそのものをZIPでローカルに保存できます。

"PUBLISH TO PLAYCANVAS"をクリック後"PUBLISH NEW BUILD"という画面に切り替わります。タイトルやディスクリプション、バージョン情報等を記入できます。一番下部の"PUBLISH NOW"をクリック。

公開用のURLが生成されます。

このURLを共有することで、誰でもこのコンテンツに入ることができます。

まとめ

PlayCanvasの利点は…

1. ゲームエンジンがブラウザ上で作動し、オーナーがアサインしたメンバーと、同じプロジェクトに入り、共同作業が出来る点。
2. かなりのポリゴン数やテクスチャサイズでも、インポートした時点でかなり圧縮され軽くなる。(最新の.gltに自動で変換してくれる！)
3. マテリアルが結構本格的。突き詰めればフォトリアルなシーンも作れます。
4. デバイスに依存せず、ブラウザが起動できればどんなデバイスでもURLにアクセスすれば動作します。

今回は3Dデザイナー目線から、PlayCanvasで作るオンライン展示会場をご説明しました。unityでのコンテンツ開発とは違い、エンジニア、デザイナーが共通のプロジェクト内で一緒に作業できる環境は、かなり効率良く進みました。トライ＆エラーがリアルタイムに確認できるので、意思の齟齬は少なく、問題点や進行状況が分かり易かったです。また、バージョン管理機能も搭載していますので、ブランチを切って別シーンで編集し、マージするということもPlayCanvasでは可能です。何よりも、お手軽にモックやサンプルプロジェクトが作れて、即確認、即共有できる点は、他のゲームエンジンには無い特徴だと思います。
皆さんも、是非PlayCanvasで色々なコンテンツやゲームを作成してみてください。

【PlayCanvas 公式サイト】
https://playcanvas.jp
【Twitter】
https://twitter.com/playcanvasJP
【日本 PlayCanvas ユーザ会 - Slack】
日本の PlayCanvas 開発者が集まったコミュニティがございます。
PlayCanvas での開発に興味がある方はぜひこちらご参加ください。
参加には Slackが必要となります。
https://playcanvas.jp/joincommunity