More than 1 year has passed since last update.

Blender→PlayCanvasのLightmappingで室内3Dモデルのクオリティを上げよう

Last updated at 2023-05-15Posted at 2020-10-25

この記事はWebGLベースのゲーム開発エンジンPlayCanvasでシーンを構成する前提で書いています。
PlayCanvasアカウントをお持ちでない方はこちら

PlayCanvasアカウントをまだ作成していない場合は、3分でアカウント作成から3Dモデルビュワーまで体験ができるチュートリアルがございますので、まずはこちらから参照ください。
→ https://support.playcanvas.jp/hc/ja/articles/4404199480089

3Dモデルの室内シーンなどで、ライトや環境光の綺麗な入り込み等を表現しようとするとPlayCanvasのビジュアルエディター上でライトや環境光(CubeMap)を生成する必要があります。
しかし、web上でリアルタイムに光や影を表示すると、シーン全体の描画にそれなりの負荷がかかります。フレームレートが30を下回るとかなりカクカクした感じになってしまうので、回避したいですよね。

そこで、ライト(光)情報をテクスチャに焼き付け(ベイク)してしまおう！ということになりますが、デフューズマップ(カラー情報、Albedo)に光源情報を内包したテクスチャを生成すると、その後の変更がとっても面倒なことになります。
例えば、床のテクスチャをタイルから木の模様質感に変えたい、タイリングサイズ変えたい…なんてことが発生した場合、Blenderやその他のDCCツールで再度設定してベイク処理が必要になります。また、シャギーやチラつき、ディテールの再現性を考慮に入れるとテクスチャの解像度もかなりのサイズ(1024とか2048とか)になり、且つそれがオブジェクト毎に必要となると、テクスチャセットだけでもかなりの容量となります。

そこで、シーン全体のライトの情報(間接光と直接光)のみを取り出したテクスチャと、デフューズ等その他テクスチャを別にしてクオリティアップ＆容量の削減＆オブジェクトのテクスチャカスタマイズ性の向上を図っていきたいと思います。

Blenderでのテクスチャ生成とPlayCanvas上での設定方法を解説していきます。

PlayCanvas上でのLightMap ON/OFFシーンを見てみる

このシーンにはライトオブジェクトは配置していません。なので、LightMapがOFFの状態にすると画面がほぼ黒になります。

LightMapがONの状態

LightMapがOFFの状態

エミッシブで照明を表現している部分と、メタル部分はLightMapテクスチャを使用しません。
※照明はエミッシブ(自己発光)100％。メタル部分は環境光を反映させるため。

ここで、LightMapテクスチャをPlayCanvasのfloorマテリアルに適用してみます。

これで、床部分にライト情報が入りました。

この1枚のLightMapテクスチャを各オブジェクト毎に設定していきます。

因みに、PlayCanvas上でライトを設定するとこんな感じです。ポイントライト×1スポットライト×2

法線を内向きにしたPlaneポリゴンの閉じた空間になっているため、ディレクショナルライトは床面にしかあたりません。なので、代わりにポイントライトで全体を照らしていますが、間接光特有の柔らかい光の反射が再現出来ていません。そして処理が重いです。。。

BlenderでのLightmapの生成手順

PlayCanvasに適用させるLightMapの生成手順を説明します。
ここではBlenderをベースに、この3Dモデルに対する設定を解説します。

↓↓↓↓↓↓↓ あなたの記事の内容

室内3Dモデルに対して間接光ポイントライトとサンでライティング。
天井、壁、床のエッジを選択しシームをマークし、エッジを分離しておきます。
作成した3DモデルをスマートUV投影もしくはライトマップパックでUVを展開。
レンダリングのベイク設定を下記画像の様に設定し、ベイクしてください。
───────
室内3Dモデルに対して間接光"ポイントライト"と"サン"でライティング。
天井、壁、床のエッジを選択しシームをマークし、エッジを分離しておきます。
作成した3Dモデルを**"スマートUV投影"もしくはライトマップパック**でUVを展開。
レンダリングのベイク設定を下記画像の様に設定し、ベイクしてください。

↑↑↑↑↑↑↑ 編集リクエストの内容

ベイクタイプを"ディフューズ"に変更。
影響項目の中の Contributions のカラーのチェックを外します。
出力項目の余白の値が大きいと隣接するUV領域同士に影響が反映されてしまうので、小さ目な値に。

レンダリングのサンプル数が少ないと画像に多くのノイズやシャギーが入ります。サンプリング数を上げましょう。
(相対的にレンダリング時間が増えますが、その辺はPCのスペックと要相談ですｗ)

気合でPhotoshopで調整することも可能ですが、ここでは割愛します。
↓↓↓↓↓↓↓ あなたの記事の内容
ベイクが完了すると下記画像の様に出力されますので、画像を保存。
───────

↑↑↑↑↑↑↑ 編集リクエストの内容

サンライトの白系の色味とポイントライトの暖色系の色味が反映された画像になっているのが確認できます。

BlenderのUVチャンネルとPlayCanvasのUVチャンネル

BlenderとPlayCanvasのUVマップのチャンネルを確認しましょう。
BlenderはUVマップのチャンネルをいくつでも作れますが、PlayCanvasは2つのUVマップチャンネルのみ指定できます。
blender上で2つ以上のUVマップチャンネルを保持した状態でFBXへエクスポートするとPlayCanvas上で予期しないUVが適用される場合がありますので、必ずblender上でのUVマップチャンネルを確認してください。
通常、デフォルトのプリミティブ形状からモデリングした際にUVは自動で展開された状態にはなりません。今回はBlendereKit というアドオンを使用し、テクスチャの質感を指定しています。
BlendereKid を適用したオブジェクトには automap というUVマップチャンネルが自動で生成されます。これがPlayCanvas上では UVChannel UV1 に当たります。
LightMap以外(場合によってはアンビエントオクルージョンも)のテクスチャはこの UV1 に設定します。