2020年02月13日

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

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

glTFについて

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

● glTF2.0

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

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

● glTF2.0のマテリアル

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

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

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

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

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

マテリアルはプリンシプル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軸です。

● 透過と背面処理

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

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

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を設定する必要があります。

//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;

● キューブ環境マッピング

マテリアルの粗さを0.0に近づけた場合、「Three.jsでキューブ環境マッピング」でやったように、マテリアルに環境マップを設定した方が綺麗になります。

マテリアルを調整したデモになります。中央の3つは環境マップを設定しています。マテリアルの設定は、左から「赤色、粗さ0.9」、「青色、粗さ0.1」、「白色、メタリック1.0、粗さ0.1」、「緑色、メタリック1.0、粗さ0.1、透過」、「テクスチャ、ノーマルマップ」です。

  • このエントリーをはてなブックマークに追加

関連記事

前の記事へ

Blenderで部屋を制作

次の記事へ

Blenderで360度パノラマ画像にレンダリング