PBRマテリアルのパラメータをglTFに渡す

  • PBRマテリアルの表現
  • 透視図でリアルタイムにPBRマテリアルを確認
  • 透視図でリアルタイムに影を表示


今回は、glTFエクスポート時の「PBRマテリアル」に注目していきます。
PBRマテリアルについてはチュートリアルの「リニアワークフローとPBRマテリアル」の説明と同じになり、
その知識はglTFでもそのまま活かせます。

以下はShade3Dでの透視図でのリアルタイム表示です(プレビューレンダリングではありません)。

PBRマテリアルの表現

キッチンシーンで使っていたお盆の形状を例に、これをglTFエクスポートしてどのようにglTFにPBRマテリアル情報が渡されているか説明していきます。

1つのポリゴンメッシュで1形状としています。UVは以下のようになります。

この形状は元々PBRマテリアルを考慮して作成されており、テクスチャは他ツールで作成して割り当てています。
glTFでエクスポートしてglTF Viewer( https://gltf-viewer.donmccurdy.com/ )で見ると以下のようになりました。

PBRマテリアルの基本設定は以下を設定しています。

ベースカラー RGB(204,204,204)、メタリック 0.0、ラフネス 1.0、屈折率 1.5、透明度 0.0、発光 0.0を指定しています。
マッピングは「イメージ/ベースカラー」「イメージ/法線」「イメージ/ラフネス」「イメージ/オクルージョン」を指定しました。

「イメージ/ベースカラー」のマッピングは「通常」合成で「適用率」1.0を指定しているため、基本設定のベースカラー色は使用されません。
「イメージ/ラフネス」のマッピングは「乗算」合成としており、基本設定のラフネス 1.0に対して乗算されます。
つまり、「イメージ/ラフネス」の各ピクセルがラフネス値として採用されます。
「イメージ/オクルージョン」は遮蔽になります。角部分など入り組んだ箇所を暗くする効果があります。
オクルージョンテクスチャをベースカラーにマッピングしてレンダリングすると以下のようになります。

gltf形式でエクスポートしてPBRマテリアルの割り当てを確認

では、この形状をテキストの「gltf」の拡張子でエクスポートしてglTFとしての内容を確認していきます。
メインメニューの「ファイル」-「エクスポート」-「glTF(gltf/glb)」を選択します。
glTF Exportダイアログボックスで「出力形式」を「gltf」にします。
それ以外は初期設定のままで問題ありません。

エクスポートすると、以下のような複数のファイルが出力されました。

拡張子がgltfのファイルにシーンの構成やメッシュ/マテリアル情報などがテキスト形式で格納されています。
このgltfファイルをテキストエディタで見ることで、どのような構成で格納されているか確認することができます。
拡張子がbinのファイルには、形状の頂点座標や法線、UVなどのジオメトリ情報がバイナリ形式で格納されています。
それ以外はテクスチャ画像ファイルです(pngもしくはjpeg形式)。
「ベースカラー」は1つのテクスチャファイルのRGBとして表現されます。
透過がある場合はアルファ要素が使用されます。
「オクルージョン」「ラフネス」「メタリック」はグレイスケールのテクスチャとなっており、1つのテクスチャにパックされます。
「オクルージョン」はRチャンネル、「ラフネス」はGチャンネル、「メタリック」はBチャンネル、に割り当てられます。
なお、glTFの仕様上では「オクルージョン」については別テクスチャに分離することもできます。

gltfファイルをテキストエディタで開いて見ていきます。
「materials」でマテリアル情報が記載されています。


"materials": [
    {
        "pbrMetallicRoughness": {
            "baseColorTexture": {
                "index": 0
            },
            "metallicFactor": 0.0,
            "metallicRoughnessTexture": {
                "index": 2
            }
        },
        "normalTexture": {
            "index": 1
        },
        "occlusionTexture": {
            "index": 2
        },
        "name": "盆"
    }
],

“baseColorTexture”の”index”で「ベースカラー」の参照テクスチャ番号が指定されています。
“metallicFactor”はメタリックの値です。
“metallicRoughnessTexture”の”index”で「ラフネス」「メタリック」の参照テクスチャ番号が指定されています。
“normalTexture”の”index”で「法線マップ」の参照テクスチャ番号が指定されています。
“occlusionTexture”の”index”で「オクルージョン」の参照テクスチャ番号が指定されています。
これは、「ラフネス」「メタリック」のときのテクスチャと同じものを参照しています。
“name”はマテリアル名です。

表記のないパラメータとして
ベースカラー値(baseColorFactor) RGBA(1, 1, 1, 1)、
ラフネス(roughnessFactor) 1.0、
が省略されています。
なお、glTFではベースカラー値とベースカラーテクスチャがある場合、各ピクセルは乗算されて表現されます。
“metallicFactor”と”metallicRoughnessTexture”のメタリックテクスチャ、
“roughnessFactor”と”metallicRoughnessTexture”のラフネステクスチャも同様に乗算されます。

これらのglTFでのマテリアルのパラメータは、Shade3Dでの「PBRマテリアル」と同じ値となっています。
細かいフォーマットは理解しなくても問題ありません。
ここでは、「glTFのマテリアル」と「Shade3DのPBRマテリアル」が1対1で対応しているというのを確認しました。

透視図でリアルタイムにPBRマテリアルを確認

Shade3Dの場合は、プレビューレンダリングしてPBRマテリアルの結果を確認するのがマテリアル表現のチェックとして確実です。
別途、透視図のリアルタイム表示である程度PBRマテリアルを確認することができます。
以下はプレビューレンダリングではなく透視図でのリアルタイム表示です。

PBRマテリアルの反映(ベースカラー、法線マップ、ラフネス、メタリック、オクルージョン、発光)に加えて影が反映されています。

分かりやすくするために、お盆に皿や湯呑、箸など配置しました。

マテリアルはすべて「PBRマテリアル」を指定しています。
※ 「Shade3Dマテリアル」では法線マップやラフネスなどリアルタイム表示で反映されません。

上記は「テクスチャ+ワイヤーフレーム」の表示です。
透視図のメニューから「テクスチャ」の表示に切り替えると以下のようになりました。

フォークの映り込みも表現されています。
参考として、パストレーシングでプレビューレンダリングすると以下のようになります。

最終的なレンダリングと、プレビューでのレンダリングはかなり近くなっています。

透視図でのリアルタイム表示をレンダリングに近づける

このように、透視図での表示をレンダリングに近づけるにはいくつか確認することがあります。
順番にチェックしていきます。

映り込み表現のため、背景を指定します。

ここでは、ShadeExplorerより背景を読み込みました。

背景を変更した場合は、図形ウィンドウの透視図のナビゲーションツールのコンテキストメニューより「背景の更新」を選択します。
これで、背景が再計算されます。

内部的には、背景のパノラマ画像をキューブマップに変換する処理が行われます。
また、コンテキストメニューで「表示オプション」の「光沢を表示」「環境マップを表示」をオンにします。
これで、映り込みや光沢がリアルタイムの表示で反映されます。

コンテキストメニューで「全ての光源」を選択します。
これで、実際のシーンの光源情報がリアルタイム表示に反映されます。

また「影を表示」で影を反映します(Professional版)。これは後述します。

透視図でのリアルタイム表示での表現

以下は、透視図のリアルタイム表示における表現になります。
レンダリング時とは異なります。

  • レンダリング結果とリアルタイム表示は、完全に同じになるわけではありません。
  • メタリックによる映り込みは背景のイメージが反映されます。形状同士の相互の映り込みは反映されません。
    これはリアルタイムでの「環境マップ」が行われています。
  • マテリアルでテクスチャマッピングを使用している場合、「イメージ」の指定のみ対応しています。
    チェックや雲などのソリッドテクスチャ(プロシージャルテクスチャ)は対応していません。
  • マテリアルに複数のテクスチャがマッピングされている場合、反映されるのはテクスチャの種類ごとに1つだけです。
  • マテリアルでテクスチャマッピングを使用している場合、「適用率」は常に1.0で扱われます。
  • PBRマテリアルの「透明度」や「αマスク」は反映されません。
  • 面光源は、180度のスポットライトとして表現されます。

透視図での影の反映


透視図のリアルタイムの影表示は、Shade3D Professional Ver.21以降で対応しています。

図形ウィンドウの透視図のナビゲーションツールのコンテキストメニューより「影を表示」をオンにします。

これが選択できない場合は、Shade3D Professional Ver.21以降であるか確認し、
環境設定ウィンドウの「ビュー」タブで「影の表示を有効にする」チェックボックスがオンになっているのを確認します。

なお、リアルタイムの表示はGPUの性能に左右されます。
もし、GPUに影を投影する機能(シャドウマップが使用されます)が使えない場合は、リアルタイムの影は有効になりません。

最後に、このお盆の上に複数の小物が乗っているシーンをそのままglTFとしてエクスポートし、
glTF Viewerで見てみました。

glTF Viewerでは影が出ないですが、Shade3Dの透視図のリアルタイム表示と同じマテリアルになっているのを確認できます。

今回は、Shade3Dのレンダリング、透視図でのリアルタイム表示、glTFエクスポートを行ってglTF ViewerなどでWebGLとして見た場合、
それぞれのPBRマテリアルは同じ表現になり互換性がある、という内容でした。
次回は各エクスポートオプションについて、「陰影付けしない」について解説していく予定です。

カテゴリー: glTFの活用