glTFのPBR検証用のサンプルglb

  • by

glTFのPBRマテリアルを一目で検証できるサンプルが欲しかったので作りました。

ダウンロード : gltfTest_PBRMaterial.zip

上記の「gltfTest_PBRMaterial.zip」をダウンロードして解凍すると、「gltfTest_PBRMaterial.glb」が展開されます。

これをglTF Viewer ( https://gltf-viewer.donmccurdy.com/ )に持って行くと以下のようになりました。

いくつか検証項目を用意しています。
glTF Viewer(three.js)でのglTFの表現はかなりよいため、これを正しいリファレンスとしています。

地面のタイル

KHR_texture_transformの確認です。
scale (3, 2)を指定しています。

Color (sRGB)

色の確認です。glTFファイルでは、色はすべてsRGBリニア として管理するため(BaseColorやEmissiveマップのテクスチャイメージはsRGB)その検証になります。
※ 表示時にsRGB変換されることになります。

テクスチャを使用しない場合と、テクスチャを使用した場合(baseColorFactor + baseColorTexture)。

Metallic

Metallicの確認です。

上はテクスチャ未使用、下はテクスチャ使用。
中央下は、左から右にグラデーションテクスチャでMetallic 0 ~ 1.0に変化させています。

Roughness

Roughnessの確認です。

上2段はテクスチャ未使用、3段目はテクスチャ使用。
中央下は、左から右にグラデーションテクスチャでRoughness 0 ~ 1.0に変化させています。

Normal map

法線マップの確認です。

左からの法線マップのscale 0.2、0.5、1.0を指定しています。
また、KHR_texture_transformのscaleを指定しています。

Emissive

Emissiveの確認です。
発光を分かりやすくするため、glTFViewerでaddLightsをoff、EnvironmentをNoneにしたのが下の画像になります。

テクスチャなし、ありの比較になります。

Occlusion

Ambient Occlusionの確認です。
分かりやすくするため、glTFViewerでaddLightsをoffにしたのが下の画像になります。

左がオクルージョン指定なし、右がありの比較になります。

Alpha Mask

AlphaModeを「Mask」とした際の確認です。

左は葉のテクスチャを指定、右2つは左から右に白から黒のグラデーションするテクスチャを割り当ててます。
左から、Cutoff 0.5/0.5/0.25の指定です。

Alpha Blend

AlphaModeを「Blend」とした際の確認です。

左はMetallic 1.0でテクスチャ指定なし、Opacity 0.5.
右は、左から右にグラデーションするテクスチャを指定。1.0-0.0のOpacityのグラデーションになります。

Vertex Color

頂点カラーの確認です。

左は四角形の頂点に色を指定したもの。
右は「漢」と描画したテクスチャをOpacityとして指定し、四角形の頂点に色を指定したもの。
glTFの頂点カラーはBaseColorに乗算合成で表現されます。

Double Sided

両面表示の確認です。

左はDouble Sided指定なし(片面表示)。右はDouble Sided指定あり。

Unlit

シェーディングを行わないUnlit表現(KHR_materials_unlit)の確認です。
分かりやすくするため、glTFViewerでaddLightsをoffにしたのが下の画像になります。

左が通常、右がUnlit指定したもの。

参考 : DOKI for Shade3D (OSPRay)で検証した例

以下は、Shade3D上のレンダラプラグイン「DOKI for Shade3D」( http://www.ft-lab.ne.jp/shade3d/DOKI/ )で検証したものです。
このプラグインはIntel社の「OSPRay」のレンダリングを使っています。
上記でダウンロードできるglTFファイルは、このレンダリング結果をもとにglTF出力したものになります。

以下、glTFとの違いです。
glTFでの「Emissive」相当の機能はOSPRayでは別マテリアルの指定が必要なため、挙動が異なります。
glTFでの「Alpha Mask」や「Alpha Blend」は存在しないため、半透明の挙動が異なります。
glTFでの「Occlusion」相当の機能はOSPRayでは存在しません。
glTFでの「Double Sided」「Unlit」相当の機能はOSPRayでは存在しません。

それ以外は、それなりな再現性を確保できてます。

参考 : Adobe Aeroで検証した例

Adobe Aero(v.2.1.1)でARとして表示しました。

Color (sRGB)/Metallic/Roughnessなどの文字をテクスチャとして表示している箇所がつぶれています。
Alpha Maskでできる影がトリミングされていない、Opacityを使用したテクスチャ + Vertex Colorが正しくない、Unlit未対応、が確認できます。

参考 : Windows 10付属の「3Dビューアー」

Windows 10付属の「3Dビューアー」で表示しました。

背景のIBLを画像として指定できないので分かりにくいですが、おそらくglTFとしては再現性が高いです。
glTFの仕様通り再現できています。