glb(glTF)で書き出したら真っ白?! 2025/01/29

glbで書き出したデータを3Dビューワーで開いてみると・・・

しかし、よくよく見ると、何故かミントの葉のグリーンだけは色が残っています。
また、全部が白いので分かりにくいのですが、生クリームの白とパンケーキの白は少し色が違っています。
お皿に関しては、色は他と同じで白ですが、ツヤっと感があります。

原因

色が残っているミントの葉のマテリアルは、↓のようになっています。

対して、色がなくなってしまったパンケーキ部分は、↓のようになっています。

ミントの葉はプリンシプルBSDFのみ。
パンケーキは、複雑なノードがゴチャゴチャ。

この2つを比べてみると、プリンシプルBSDFより左にあるノードが反映されていないことが分かります。

glb(glTF)で、プリンシプルBSDFの左側に設定して反映されるノードは、画像テクスチャのみです。
それ以外のノードは何を設定しても反映してくれません。

これを踏まえてお皿のノードを見てみます。

プリンシプルBSDFの左側にノードが繋がれている「ベースカラー」は、何も反映してくれなかった結果、白くなってしまいました。

しかし、プリンシプルBSDFで設定されている「粗さ 0.105」は反映されていたので、ツヤっと感が出ていました。

glb(glTF)で扱えるのは6種類のみ

ではプリンシプルBSDFで設定したものが全て反映されるかというと、そうではありません。

glb(glTF)で扱えるのは下記の6種類のみとなります。

• ベースカラー
• メタリック
• 粗さ
• ノーマルマップ
• アンビエントオクルージョン
• 放射

こちらの内容に関しては、Blenderの公式マニュアルに記載があります。

詳細を確認したい方は、公式マニュアルをご確認ください。
https://docs.blender.org/manual/ja/dev/addons/import_export/scene_gltf2.html

対処法はベイク

真っ白になってしまったパンケーキやお皿のマテリアルを反映させるには、どうしたらいいでしょうか？

画像テクスチャであれば反映してくれるので、マテリアルをベイクして画像にすることで対処します。
ベイクの詳細は、こちらの記事を参考にしてください。

ベイクした画像をマテリアルに反映するとこのようになります。

この状態のオブジェクトをglbとして書き出します。

3Dビューワーで確認してみます。

最初に真っ白になっていたデータとは違い、ちゃんと色が反映されました。

Windowsの3Dビューワーはあまり性能が良くないので、こんなものなのです。
実際に表示させるwebサイト等でどう見えるかに応じて、調整してください。

glb(glTF)データをサイトで見る

これが実際のglbデータの見え方です。
グリグリ回転させたり、アップにしたりして見れます。
データにマウスオーバーすると右下に矢印アイコンが出るんで、それをクリックすると全画面表示に変更もできます。

こちらは、WordPressプラグイン「3D Viewer」を使用して、表示させています。