Babylon.jsのPBRMaterial紹介と簡易版Materialからの変換【ドキュメント和訳+α】

はじめに

Babylon.jsはブラウザ上でリアルタイムに動作する3Dレンダリングフレームワークの1つです。OSSとなりますので、誰でも無料で使用することができます。
この記事はMastering PBR Materialsを参考に、Babylon.jsにおけるPBR Materialをマスターしようという記事になります。そのその前半部分の説明になります。

概要

https://zenn.dev/iwaken71/articles/babylonjs-pbr

の記事紹介したように

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に切り替えるためには、いくつかのプロパティの名前を変更する必要があります。

また、metallicやroughnessに使用するチャンネルをカスタマイズするために、シンプルなマテリアルにセットアップするためには以下のflagを設定する必要があります。

pbr.useRoughnessFromMetallicTextureAlpha = false;
pbr.useRoughnessFromMetallicTextureGreen = true;
pbr.useMetallnessFromMetallicTextureBlue = true;

このようにMetallic SurfacesをPBRでカスタマイズしたコードサンプルがこちらです。

ここまでがMetallicRoughnessからPBRMaterialへ変換するための知識でした。ここからは、利用可能なカスタムオプションを見てみましょう。

SpecularGlossinessからPBRMaterialへ

Specular/GlossinessモードでのPBRMaterialの設定は先程とは違う設定が必要です。
以下のプロパティはNULL or undefinedにする必要があります。

• metallic
• roughness
• metallicTexture

PBRSpecularGlossinessMaterialから立地なPBRMaterialに切り変えるためには、いくつかプロパティの名前も変更する必要があります。

glossinessに使用するチャンネルをカスタマイズするために、シンプルなMaterialに設定するためには、以下のフラグを追加する必要があります。

pbr.useMicroSurfaceFromReflectivityMapAlpha = false;

サンプルコードはこちら

変換が完了したら、利用可能なカスタムオプションを見ていきます。

最後に

ここまでが、シンプルなMaterialからPBRMaterialの変換の話でした。

ドキュメントの続きでは、各項目の設定事項などをご紹介しています。こちらについては別記事で紹介予定です。