PBRマテリアルのメタリックとラフネスのパック処理

前回は、主に形状の最適化とピクセル透過のあるテクスチャの最適化の説明を行いました。
今回は、PBRマテリアルの「メタリック」と「ラフネス」「オクルージョン」を他ツールに渡していきます。
Shade3D ver.20のPBRマテリアルをメインとし、
Shade3D ver.19以前の「Shade3Dマテリアル」でも応用できるように説明していくようにします。
Shade3Dから渡す先のツール/対象としては、UnityとglTFフォーマットを想定して記載していきます。
ツールやツール内のモード(実装)により渡せるパラメータが異なるため、その違いを理解する必要があります。

UnityやglTFについてはボリュームがすごく大きくなるため、詳細の解説は省くようにしました。
ナレッジベースの「PBRマテリアルを持った形状情報をエクスポートするには ?」に、UnityにPBRマテリアルを使ったマテリアルを渡す流れを記載していますので、
こちらも合わせてご参照くださいませ。

PBRマテリアルの構成 (ver.20)

PBRマテリアルについては、「[ver.20] PBRマテリアル」もご参照くださいませ。
PBRマテリアルの構成は以下のようになります。

ベースカラー、メタリック、ラフネス、屈折率/スペキュラ、透明度、発光で構成されます。
これに対してテクスチャイメージをマッピングすることになります。
また、マッピングレイヤとして「法線」「オクルージョン」を指定できます。

「PBRマテリアル」をマテリアルとして使用するツールの場合、細かい表現は異なりますがパラメータの意味については同じになります。
そのため、1対1でパラメータを渡すことができる利点があります。

他ツールにそのまま渡せるパラメータ

「ベースカラー」は、他ツールでは「Albedo（アルベド）」と表現する場合もあります。
材質そのものの基本色の指定になります。
テクスチャのピクセルを使って透過や半透明表現を行う場合は、テクスチャのアルファ成分を不透明度(Opacity)として使用する場合が多いです。

「発光」はEmissiveと表現され、材質の発光の指定になります。

「法線」は、材質の凸凹の指定になります。法線マップ(Normal Map)としてテクスチャで与えます。
Shade3Dでの「バンプ」（他ツールではHeight Mapとも呼ばれます）は、法線マップに変換して指定する必要があります。

PBRマテリアルを使うと、他環境にスムーズにマテリアルを渡せる ?

形状をリアルタイム環境などに渡す場合、主にFBXフォーマットを経由します。
FBXフォーマットは、PBRマテリアルを持つことができないフォーマットになります。
この場合、PBRマテリアルを使用した場合でも使用しない場合でも、どの環境に対してもそのまま渡すだけ、というわけにはいきません。
最終的には渡した先でマテリアルを再設定することになります。
これは、PBRマテリアルのツール間のルール付けがまだ整えられていないというのも要因としてあるかもしれません。
そのため、Shade3D ver.20の「PBRマテリアル」を使用/未使用にかかわらず手間は同じくらいかかります。
形状を先にFBX経由で渡し、その次にテクスチャを別途渡して、マテリアルを渡した先の環境で再設定することになります。

一方、PBRマテリアルに対応しているファイルフォーマットとして、
Khronos GroupのglTF( https://github.com/KhronosGroup/glTF )、
PixarのUSD ( https://graphics.pixar.com/usd/docs/index.html )、があります。
このように、すでにPBRマテリアルに対応しているフォーマットを経由すると、PBRマテリアルについては
ほぼ同じマテリアルを再現できるようになります。
しかし、これらに標準対応してインポート/エクスポートできる環境がまだ少ないという問題があります。

次に、PBRマテリアルを渡す際に移行に手間がかかる、「メタリック」と「ラフネス」について説明していきます。

メタリックとラフネス

「メタリック」は、材質の映り込みの強さの指定になります。1.0に近づくほど鏡のように鏡面反射します。
下画像は、左の球からメタリック 0.0、0.3、0.6、1.0を指定しています。

「ラフネス」は、材質の荒さの指定になります。1.0に近づくほど表面がざらついた質感になります。
下画像は、左の球からラフネス 0.0、0.3、0.6、1.0を指定しています。

この「メタリック」と「ラフネス」はグレイスケールで表現（R/G/Bチャンネルは同じ値）され、
他ツール、特にリアルタイム環境に渡すときに「メタリック」と「ラフネス」を1枚のテクスチャでまとめて指定する場合が多いです。
この1枚のテクスチャにまとめる処理を「パック」と呼びます。
パック方法はツール、というよりマテリアルを表現するシェーダーによって異なります。
実際に比較するほうが分かりやすいと思いますので、ここでUnityとglTFフォーマットの場合を例に説明していきます。
なお、「メタリック」と「ラフネス」のテクスチャが存在しない場合は数値で指定することになり、
これはShade3Dのパラメータをそのまま他のツールに指定すれば同じ表現になります。

Shade3Dでは以下のお椀の形状を使用しました。

ブラウザでは以下のように構成しています。

マスターマテリアルとしてPBRマテリアル名を「owan」とし、
「ベースカラー」のテクスチャとして「owan_BaseColor.png」、
「メタリック」のテクスチャとして「owan_Metallic.png」、
「ラフネス」のテクスチャとして「owan_Roughness.png」、
「オクルージョン」のテクスチャとして「owan_Occlusion.png」、
「法線」のテクスチャとして「owan_Normal.png」、を割り当てました。

表面材質の基本設定として、
ベースカラー (230, 230, 230)、メタリック 1.0、ラフネス 1.0、屈折率 1.5、透明度0.0、発光 0.0を指定しています。

メタリックは真っ黒の単色ではあるのですが、説明しやすいようにテクスチャにしました。
以下のようにマッピングを指定しました。

Shade3D上で「パストレーシング+パストレーシング」でレンダリングすると以下のようになります。

このお椀の形状を他ツールに渡す場合、PBRマテリアルの
「ベースカラー」「メタリック」「ラフネス」「法線」「オクルージョン」のテクスチャと、
発光 0.0、透明度 0.0（= 不透明度1.0）、の情報を渡すことになります。

Unityでのマテリアル (Standard Shader)

ここではUnity 2019.3で確認しました。
Unity 2019.3はいくつかモードがあります。
ここでのモードは、内部的なリアルタイムレンダリングの実装の違いを指します。
従来のモードは「Built-in Render Pipeline」と呼ばれるものになります。
ここの「Standard Shader」で一般的なPBRマテリアルの指定ができます。
その他、SRP(Scriptable Render)というのがあります。
お椀の形状をUnityに持って行き、マテリアルを確認します。
ここではすでにマテリアルの各テクスチャは割り当て済みです。

「Albedo」にベースカラーのテクスチャ(owan_BaseColor.png)、
「Normal Map」に法線マップのテクスチャ(owan_Normal.png)、
「Occlusion」にオクルージョンのテクスチャ（owan_Occlusion.png）、を割り当てています。
「Metallic」に対して、メタリックと「Smoothness」のテクスチャをパックしたものを指定しています。
「Smoothness」は「Roughness」の色を逆転したグレイスケールになります。
「Smoothness = 1.0 – Roughness」で計算できます。
つまり、Shade3Dでの「owan_Roughness.png」のラフネスのテクスチャの「階調の反転」を行う必要があります。
UnityのStandard Shaderでは、RGBA成分の「R」に対してMetallicを指定、「A」に対してSmoothnessを指定します。
「G」「B」は未使用です。

このテクスチャのパック処理を行い(R/G/B/AのテクスチャをRGBAに結合する)、1枚のテクスチャを作成します。
Aチャンネルを使用しているため、png形式で保存する必要があります。

このお椀の形状をFBX形式でUnityに渡しマテリアルを調整すると、以下のようになりました。

なお、Unity上でSRP(Scriptable Render)使用時はテクスチャのGチャンネルとして「オクルージョン」を使用することができます。

glTFでのマテリアル

Shade3Dではver.20段階でglTFフォーマットを出力する標準機能はありません。
ここでは凡例として記載しています。

オープンソースのフォーマットである「glTF」 ( https://github.com/KhronosGroup/glTF )は、
PBRマテリアルに対応しています。
WebGLやPBRマテリアルを持つ形状の受け渡し、VRやARでも幅広く使用されるフォーマットです。
「ベースカラー」「法線」「発光」をテクスチャで表現する場合は、Shade3DでのPBRマテリアルのテクスチャをそのまま渡すことができます。

「メタリック」「ラフネス」については、Bチャンネルとして「メタリック」、Gチャンネルとして「ラフネス」が使用されます。
また、Rチャンネルとして「オクルージョン」を割り当てて、「メタリック」「ラフネス」「オクルージョン」を1枚のテクスチャにパックすることもできます。

Aチャンネルは未使用です。
パックする場合の組み合わせがUnityと異なる点に注意してください。
このお椀の形状をglTFに出力し、WebGL(three.js)で表示した場合は以下のようになりました。

glTFの場合はファイルフォーマットになるため、エクスポータ側でこのパック処理が行われることになります。

テクスチャのパック処理をShade3D内で行う

テクスチャのパック処理はペイントツールで行うことができますが、
Shade3D上でスクリプトを使ってテクスチャのパック処理を行う方法については
ナレッジベースの「RGBA要素別のテクスチャイメージを1枚に結合 (Pack) (スクリプト)」をご参照くださいませ。

今回は、PBRマテリアルの「メタリック」と「ラフネス」はリアルタイム環境に渡す際にパックする必要がある、
ということについてでした。
他環境での仕様を理解した上での作業になります。

次回はメッシュの両面表示対応(Double Sided)の指定についてと、
実際にキッチンシーンをUnityに渡していき、Shade3Dと同じシーンを再現する流れについて説明していく予定です。