2020年02月13日 - WebVR・Three.js

glTF2.0のマテリアルについて

Blenderで制作した3DCGデータを、glTFに綺麗に出力するため、glTF2.0のマテリアルについて調べてみました。

glTFについて

glTF (GL Transmission Format)は、Khronos Groupによって提唱されたJSON形式の3Dファイルフォーマットです。もともとOpenGL（特にWebGL）での利用が想定され、現在では様々なプラットフォームで使用できます。現在のglTFのバージョンは2.0です。

glTF Overview　- The Khronos Group Inc

● glTF2.0

glTF2.0について

glTF2.0は、JSONファイルとバイナリファイル、テクスチャ画像から構成されます。必要なファイルをバイナリデータに統合したglbフォーマットもあります。

・JSONファイルには、シーン、カメラ、メッシュ、マテリアル、テクスチャ、アニメーションなどが含まれます。
・PBR（物理ベースレンダリング）マテリアルをサポートしています。
・GoogleのDraco圧縮によるデータサイズの削減が可能です。
・Y軸が上方向に定義されています。
・角度はラジアンです。
・反時計回りが正の回転です。
・単位はメートルです。

● glTF2.0のマテリアル

glTF2.0のマテリアルは、PBRの「メタリック・ラフネスモデル」で定義されています。使用できるパラメーターは、ベースカラー、メタリック、ラフネス、ノーマル、オクルージョン、放射などです。

※メタリック・ラフネスモデル - 現実世界の物体の質感は、金属っぽさ（Metallic）と粗さ（Roughness）の2つの尺度で表現できるという考え方。

glTF2.0の仕様 (マテリアル)

Blenderのマテリアル設定について

Blender2.8でglTFを出力するさいは、glTF2.0の仕様を考慮してマテリアルを設定する必要があります。※マテリアルの基本的な設定方法は「Blender2.8でマテリアルを設定」を参照ください。
また、レンダリングエンジンをEeveeにして、ルック開発ビューにすると、出力するglTFに近いイメージで作業することができます。

Blender glTF 2.0 Importer and Exporter

● ベースカラーとテクスチャ画像

マテリアルはプリンシプルBSDFで設定します。カラーは、プリンシプルBSDFのベースカラーで設定します。

テクスチャは、ベースカラーにテクスチャ画像を接続して設定します。テクスチャの幅と高さは、WebGLの仕様上512px、1024px、2048pxなど2のべき乗にする必要があります。

● メタリックと粗さ

メタリックは金属質かどうかを設定します。1.0で金属質、0.0で非金属質です。粗さはオブジェクトの表面のつやや映り込みを設定します。1.0だとつや消しになり、0.0だと光源や背景が強く映り込みます。

メタリックを1.0、粗さを0.1に設定しました。メタリックと粗さは、メタリックの値をブルーに、粗さの値をグリーンにエンコードしたテクスチャ画像（メタリック・ラフネス）を使用して設定することもできます。

● ノーマルマップ

ノーマルマップはポリゴン数を増やすことなく、オブジェクトの凸凹を表現できます。

色空間をNon-Colorにしたテクスチャ画像を、ノーマルマップにつなげて、プリンシプルBSDFのノーマルに接続して設定します。

● UVマップ

UVマップはテクスチャのサイズや位置を調整できます。マッピングで調整できるのは、位置はX軸とY軸、回転はZ軸のみで、拡大縮小はX軸とY軸です。※マッピングを使用してglTFに出力すると、three.js r117からglTFの読み込み時にエラーになります。（2020年6月2日）

● 透過と背面処理

マテリアルの設定パネルのブレンドモードをアルファブレンドにすると、マテリアルを透過させることができます

マテリアルの設定パネルのブレンドモードをアルファブレンドにして、クリップのしきい値を設定すると、マテリアルを透過させることができます。また、背面処理をすることも可能で、表面のみ表示させたい場合は、裏面の非表示にチェックを入れます。

● アンビエントオクルージョン

glTF2.0はアンビエントオクルージョンに対応しています。ただし、現在Blenderには対応したノードはありません。glTF Settingsという名前のカスタムノードグループを作成することで、glTFに出力できるようです。

● 放射

glTF2.0は放射に対応しています。ただし、現在プリンシプルBSDFの放射はglTFへの出力には対応していません。テクスチャ画像を使用して設定する方法はあるようです。

Blender2.81からglTF2.0にエクスポート

出力したいオブジェクトを選択して、トップバーの「ファイル > エクスポート > glTF2.0(.glb/.gltf)」をクリックします。glTF2.0をエクスポートする画面が表示されるので、選択したオブジェクト、+Yが上、モディファイアーを適用、UV、ノーマル、頂点カラー、マテリアル、圧縮をチェックして、glTF2.0をエクスポートをクリックして出力します。

フォーマットをglTFバイナリ(.glb)にして、glbに出力すると読み込むさいに便利です。

Three.jsで読み込む

● Draco圧縮

Dracoは、Googleが開発したオープンソースのデータ圧縮ライブラリです。BlenderからglTFに出力するさい、圧縮にチェックを入れるとDraco圧縮することができます。出力したglTFは、GLTFLoaderで読み込むことができますが、Draco圧縮した場合は、DRACOLoaderを設定する必要があります。

GLTFLoader

//glTFの読み込み
const gltfLoader = new GLTFLoader().setPath('./data/');

const dracoLoader = new DRACOLoader();

//ライブラリデータの場所を設定
dracoLoader.setDecoderPath('./js/lib/three_jsm/draco/');
gltfLoader.setDRACOLoader(dracoLoader);

gltfLoader.load('jewelry.glb', function (gltf) {
        const obj = gltf.scene;
        scene.add(obj);
});

//読み込んだシーンが暗いので、明るくする
renderer.outputEncoding = THREE.sRGBEncoding;