始めに

PlayCanvasには、高品質なPhysical ShaderとレガシーなPhon Shaderが標準で備わっています。
複雑なShadingNetworkはGLSLでカスタムシェーダーを作成するとして、今回は標準のシェーダーを使ってどの程度の事が出来るか見ていきます。また、3DモデルをBlenderで作成し、PlayCanvasへインポートするという前提で、Blender2.8側の標準マテリアル"プリンシプルBSDF"の設定も簡単に見ていきたいと思います。

BlenderとPlayCanvas上での見え方の違い
BlenderのプリンシプルBSDFの設定を簡単に見てみる
PlayCanvasのPhysicalMaterialの各設定を説明
シーン全体の環境マップ/オブジェクト単位での環境マップ設定

今回は特にPlayCanvasでのマテリアルの各スロットルの内容、どんなテクスチャマップをアタッチするとどう3Dモデルに影響を与えるかを説明していきたいと思います。

BlenderとPlayCanvas上での見え方の違い

設定されている環境マップとライト設定が違うので色味やシャドウの濃さが違ってますが、大きく違うのはSpecularとGlossinessの感じですね。Blender側のマテリアルはテクスチャをアタッチしていない項目に関しては全て0.000にしてあります。PlayCanvas側も同じくテクスチャがアタッチされている項目以外はデフォルトの状態です。大きな差異ではないですが、100%同じ質感をPlayCanvas側に持って行くのは難しいです。

BlenderのプリンシプルBSDFの設定を簡単に見てみる

ベースカラー/スペキュラ―/スペキュラ―の粗さ/放射(エミッシブ)/アルファ(透過)/ノーマル(法線マップ)
このへんの基本的なテクスチャをアタッチしてあります。
異方性やクリアコートなんかの設定はPlayCanvas側のマテリアルにはないので、今回は使用してません。
この設定のまま、**".fbx"**にエクスポートして、PlayCanvasのビジュアルエディターにドラッグ＆ドロップしてみると…

.fbxの設定が問題なく行われていると、オブジェクト個数分のマテリアルスロットと使用されているテクスチャがPlayCanvasのASSETE欄に展開されます。
しかし！！Blender上で設定していたエミッシブやアルファテクスチャが反映されてません。どうやらPlayCanvas側に継承できるマテリアルの内容はDiffuse、Specular(Glossiness)、normalmap(法線マップ)だけのようです。Emissiveとアルファに関してはソフト間の処理の違いや設定項目の差異で持って行けない？ようです。
なので、手動でアタッチしていきます。

PlayCanvasのPhysicalMaterialの各設定

上記の画像がPlayCanvaのPhysicalMaterialの項目一覧です。
Diffuse/pecular/Opacity/Normal等、基本的な項目の他に、Ambient(アンビエントオクルージョン)やParallax(視差マッピング)、マテリアル個別に設定可能なEnvironment(環境マッピング)、静的なオブジェクトの場合に使用できるLightmapなんかもあります。
では、今インポートしたモデルのマテリアル設定を一旦剥がして、個々にどんな効果が得られるか見ていきましょう。

シーン全体の環境マップも取り除いてみるとこんな感じ。ちなみに、左下の歯車マークからセッティングに行き、RENDERINGタブ内に環境マップの設定があります。ここではキューブマップをアタッチ出来ます。

環境マップに関しては最後らへんで解説します。

Diffuse(カラー)

まずはキャラクターと乗り物の部分のカラーをアタッチしていってみます。
シーンビュー上で対象のオブジェクトをダブルクリックすると対応しているマテリアルが選択されます。

右側の球マークをクリックするとマテリアルの各設定スロットルへ行きます。DIFFUSEをクリックし、画像をアタッチしてみると

キャラクターの髪とその他ボディと乗り物のマテリアルにDiffuseだけ設定しました。
見えにくいんで、一旦環境マップを設定します。

Ambient(アンビエントオクルージョン)

アンビエントオクルージョンとは、シーン内の環境光（ambient）がどの程度さえぎられている（occlusion）かを計算するレンダリング方法のことです。blender上で生成出来ます。

こんな感じの陰影情報です。blender アドオンの"TexTools"を使うとワンクリックで生成できます。
マテリアルのスロットル欄にドラッグ＆ドロップすると下図のような効果が得られます。

これにより、オブジェクトの凹凸の端々や、キャラクターに遮られた椅子部分などに影効果が追加され立体感と深みが増しました。

SPECULAR(鏡面)

"Speclar＆Glossiness"もしくは"Metalness＆Glossiness"
金属を表現する際に使用します。まず、Glossinessの値をMAXに上げてみます。

環境マップの画像をガッツリ反射してますね。ただし、椅子にもメタル感が出ちゃってます。ここにSpeclar用に作成した白黒テクスチャをアタッチしてみます。黒い部分はメタル感が消えます。

椅子部分のメタル感が消え、乗り物のボディ部分の強すぎるメタル感が緩和されました。ただ、まだ椅子部分や砲身部分の光が気になるので、Specularにテクスチャを入れてみます。

椅子の光沢感が消え、砲身のディテールが見えるようになりました。"Tint"にチェックを入れカラーを入れると、金属の光沢(反射)部分に色味が入ります。

EMISSIVE(放射)

自己発光している部分です。このオブジェクトの場合は光のライン部分を発行させてみます。

ライン部分のカラーを抽出し、その他は黒で。

intencityの数値をMAXにすると上図のように強く発行しているような状態になります。

Opacity(透過)

黒部分を透過します。今回は窓部分を半透明にしたいので、下図のような簡単な白黒テクスチャをアタッチします。

Blend TypeをAlphaにすると黒部分が透過されます。また、透過のタイプも複数あるので、用途によって使い分けることができます。

"intensity"の数値を0に近づけると前面部分が全て透過され、オブジェクトのシルエットのみとなります。
また、"Alpha To Coverage"にチェックを入れると、チラつき防止効果がでます。

Normal(法線マップ)

オブジェクトの表面に疑似的な凹凸を発生させます。

NormalMapはBlenderのベイク機能やアドオン、Photoshopなどで生成可能です。生成方法はまた別の機会に書きたいと思います。

滑らかな金属表面に凹凸が入ることで光の反射が複雑になり、"年期の入った感じ"になりました。

Parallax(視差マッピング)

白黒の画像から高低差を疑似的につくるマッピング方法です。ハイトマップをアタッチします。
今のオブジェクトでは分かり辛いので、地面のひび割れオブジェクトで効果の差異を見てみます。

"Strength"の値を上げ過ぎると高低差を維持出来なくなります。

Environment(環境マッピング)

オブジェクト個々に設定できる環境マッピングで、CubeMapをアタッチします。シーン全体は、左下の歯車マークからセッティングに行き、RENDERINGタブ内から設定しますが、ここで設定した環境マッピングはシーン全体の効果よりも優先的に描画されます。"Sphere Map"と"Cube Map"を使用することができます。

Other

Cull Modeで描画の順番を手前からか、後ろから優先するかを選べます。ライトの効果を切ったり等々。

おまけ　CubeMapの作り方

ここに.pngの画像をドラッグ＆ドロップすると生成してくれます！便利！
Cubemap and TOAST map Generator

ASSETSで作成したフォルダを選択状態にし、ASSETS右横の"+"をクリック、CubeMapを選択すると、空の"New Cubemap"が生成されます。
FACES欄の中に、Cubemap and TOAST map Generatorで生成した各画像をドラッグ＆ドロップして全てのマスを埋めます。

画像を全て配置すると、下部に"PREFILTERING"という欄がでますので、"Prefilter"ボタンを押してください。これで、環境マップに適した状態に変換してくれます。

これでCubeMapの完成です。

まだ、解説しきれてない部分が多々ありますが、PlayCanvasの基本的なマテリアルの設定方法は以上となります。

始めに