はじめに
Babylon.jsはブラウザ上でリアルタイムに動作する3Dレンダリングフレームワークの1つです。OSSとなりますので、誰でも無料で使用することができます。
この記事はMastering PBR Materialsを参考に、Babylon.jsにおけるPBR Materialをマスターしようという記事になります。そのその前半部分の説明になります。
概要
の記事紹介したように
PBR Materialの簡易版である
- PBRMetallicRoughnessMaterial
- PBRSpecularGlossinessMaterial
は、PBRの入門用としては最適ですが、詳細の制御はできません。
PBRMaterial自体を活用することで、詳細の制御をできるようになります。
以下の機能を使います。
- 屈折率 (Refraction)
- 標準的な光の減衰(Standard Light Falloff)
- ライトマップ(LightMap)
- 専用画像処理(Dedicated image processing)
例えば、PBRMaterialを活用することによって、このようなDemo Sceneを作ることができます。
この記事では、PBRMaterial本体と簡易バージョンとの違いについて説明します。
MetallicRoughnessからPBRMaterialへ
PBRMaterialを、Metallic/Roughnessモードで設定するためには、以下のプロパティの少なくとも1つを設定する必要があります。
- metallic
- roughness
- metallicTexture
PBRMetallicRoughnessMaterialから大きなPBRMaterialに切り替えるためには、いくつかのプロパティの名前を変更する必要があります。
| PBRMetallicRoughnessMaterial | PBRMaterial |
|---|---|
| baseColor | albedoColor |
| baseTexture | albedoTexture |
| metallicRoughnessTexture | metallicTexture |
| environmentTexture | reflectionTexture |
| normalTexture | bumpTexture |
| occlusionTexture | ambientTexture |
| occlusionTextureStrength | ambientTextureStrength |
また、metallicやroughnessに使用するチャンネルをカスタマイズするために、シンプルなマテリアルにセットアップするためには以下のflagを設定する必要があります。
pbr.useRoughnessFromMetallicTextureAlpha = false;
pbr.useRoughnessFromMetallicTextureGreen = true;
pbr.useMetallnessFromMetallicTextureBlue = true;
このようにMetallic SurfacesをPBRでカスタマイズしたコードサンプルがこちらです。
ここまでがMetallicRoughnessからPBRMaterialへ変換するための知識でした。ここからは、利用可能なカスタムオプションを見てみましょう。
| プロパティ名 | 説明 |
|---|---|
| useRoughnessFromMetallicTextureAlpha | メタリックテクスチャのアルファチャンネルにラフネス情報を含むことができる |
| useMetallnessFromMetallicTextureBlue | メタリックテクスチャのBlueチャンネルにメタリック情報を含むことができる (デフォルトではRedチャンネル) |
| useAmbientOcclusionFromMetallicTextureRed | メタリックテクスチャのRedチャンネルにアンビエントオクルージョン情報を含むことができる |
| useAmbientInGrayScale | ambient textureもしくはmetallic textureのRedチャンネルから、ambient occlusionを読み取るように強制できます |
SpecularGlossinessからPBRMaterialへ
Specular/GlossinessモードでのPBRMaterialの設定は先程とは違う設定が必要です。
以下のプロパティはNULL or undefinedにする必要があります。
- metallic
- roughness
- metallicTexture
PBRSpecularGlossinessMaterialから立地なPBRMaterialに切り変えるためには、いくつかプロパティの名前も変更する必要があります。
| PBRSpecularGlossinessMaterial | PBRMaterial |
|---|---|
| diffuseColor | albedoColor |
| diffuseTexture | albedoTexture |
| specularGlossinessTexture | reflectivityTexture |
| specularColor | reflectivityColor |
| glossiness | microSurface |
| normalTexture | bumpTexture |
| occlusionTexture | ambientTexture |
| occlusionTextureStrength | ambientTextureStrength |
glossinessに使用するチャンネルをカスタマイズするために、シンプルなMaterialに設定するためには、以下のフラグを追加する必要があります。
pbr.useMicroSurfaceFromReflectivityMapAlpha = false;
サンプルコードはこちら
変換が完了したら、利用可能なカスタムオプションを見ていきます。
| プロパティ名 | 説明 |
|---|---|
| microSurfaceTexture | separate textureのRチャンネルにglossinessの値を保存することができます |
| useAlphaFromAlbedoTexture | opacity情報をalbedo textureのアルファチャンネルに含むことができます |
| useMicroSurfaceFromReflectivityMapAlpha | the microSurfaceまたはglossinessの情報をreflectivity textureのアルファチャンネルに含むことができます |
| useAmbientInGrayScale | ambient textureもしくはmetallic textureのRedチャンネルから、ambient occlusionを読み取るように強制できます |
最後に
ここまでが、シンプルなMaterialからPBRMaterialの変換の話でした。
ドキュメントの続きでは、各項目の設定事項などをご紹介しています。こちらについては別記事で紹介予定です。
Discussion