[JavaScript] Three.js で KHR_materials_pbrSpecularGlossiness の解消方法

はじめに

Three.jsで日々開発・勉強してましたが、よくよくバージョンを見ると古い128を使ってたので最新バージョン 180 へ移行。

その際に、モデルデータの読み込みで　KHR_materials_pbrSpecularGlossiness　の警告が出てAIも解決できなかったのでネットで調べると、Three.jsの公式フォーラムに情報ありました。

GLTF Color & Textures Missing, babylon display works

I am trying to loada file, scene.glb into a sceneand it renders, but without color.When I load this into Babylon, it shows the color Any solutions?

https://discourse.threejs.org/t/gltf-color-textures-missing-babylon-display-works/50424

和訳すると

three.jsエディターにモデルをインポートすると、ブラウザコンソールに次の警告が表示されます：THREE.GLTFLoader.js:395 THREE.GLTFLoader: 不明な拡張機能「KHR_materials_pbrSpecularGlossiness」。このglTF拡張機能のサポートはr147で削除されました。以下のガイドに従って、アセットをメタリック/ラフネスモデルに変換してください。補足：KHR_materials_pbrSpecularGlossiness拡張機能はKhronos Groupによってアーカイブされているため、SketchfabのglTFエクスポーターを更新する必要があります。

との事で、Blenderでモデルデータを読み込んで、修正すれば良いようです。

また備忘録メモで、解決方法をまとめたので記事にしておきます。

1. 警告の解説

three.js は、3Dグラフィックスを描画するための強力なライブラリで、主にWebブラウザ上でのリアルタイムレンダリングに使われます。最近、three.js を使ったプロジェクトでよく見かける警告の一つに、KHR_materials_pbrSpecularGlossiness という拡張に関するものがあります。この警告は、モデルデータに Specular Glossiness モードを使っている場合に発生します。

KHR_materials_pbrSpecularGlossiness 拡張がサポートされていない理由

KHR_materials_pbrSpecularGlossiness は、物理ベースレンダリング（PBR）のマテリアルの一種で、主に スペキュラグロスというマテリアルモデルを使用しています。しかし、three.js の r147 以降、この拡張はサポートされなくなり、代わりに メタリック/ラフネス モデルが推奨されています。

この変更の理由は、メタリック/ラフネスモデルの方が現代のPBRワークフローにより適しているためです。Specular Glossiness モードは、古い形式のPBRで、エンタープライズやゲームエンジンで使われていたものですが、現在では新しい標準である メタリック/ラフネス に置き換えられつつあります。

これがどのような影響を及ぼすのか

警告メッセージは、以下のように表示されることが多いです：

THREE.GLTFLoader: Unknown extension "KHR_materials_pbrSpecularGlossiness".

この警告は、three.js が読み込んだ .glb または .gltf ファイルに、KHR_materials_pbrSpecularGlossiness という拡張が含まれていることを示しています。これにより、three.js はこの拡張を認識できず、モデルの表示に問題が発生することがあります。具体的には、正しくマテリアルがレンダリングされない、もしくは 異常な外観になる といった影響が生じることがあります。

特に、スペキュラグロス方式のマテリアルが 金属感やラフネス（粗さ） を適切に表現できないため、警告が出る原因となります。three.js の最新バージョンでは、メタリック/ラフネスの方が適切にレンダリングされるため、警告が出ることを防ぐためには、これらの設定を新しい形式に変換する必要があります。

2. Blenderでの変換手順

three.js で発生する「KHR_materials_pbrSpecularGlossiness」の警告を解消するためには、モデルのマテリアルを Specular Glossiness モード から Metallic/Roughness モード に変換する必要があります。この変換は Blender を使って簡単に行えます。以下では、具体的な手順を解説します。

2.1. Specular Glossiness モードから Metallic/Roughness モードへの変換方法

Specular Glossiness モードを使っているマテリアルは、金属感（Specular） と 光沢感（Glossiness） を使用して、物体の見た目を調整しますが、これを Metallic と Roughness に変換することで、より現代的なPBRマテリアルを作成できます。three.js では、これが メタリック/ラフネス方式 としてサポートされています。

変換手順：

1. Blenderを開く: Blenderを開き、対象となるモデルをインポートします。

2. シェーダーエディタを開く: Blenderの シェーダーエディタ を開き、マテリアルを設定します。これは Specular Glossiness を Metallic/Roughness に変換するための作業を行う場所です。

3. Specular と Glossiness を分ける:

   • Specular と Glossiness はそれぞれ、金属感と光沢感を示しますが、これを次のように変換します。

     • Specular は Metallic に変換。
     • Glossiness は Roughness に変換。

4. Metallic と Roughness に接続:

   • Specular の値を Metallic に、Glossiness の値を Roughness に変換します。

5. Base Color の確認:

   • Base Color はそのまま使用しますが、必要に応じて調整します。これにより、モデルの色味が保たれます。

2.2. 実際のBlender画面を使ったステップバイステップのガイド

以下に、Blenderでの実際の手順をステップバイステップで示します。Blenderでの作業を視覚的に確認しながら進めるとスムーズに進みます。

手順1: Blenderでシェーダーエディタを開く

1. Blenderでモデルを選択し、右側のプロパティタブから 「シェーダーエディタ」 を開きます。
2. その中で、対象のマテリアルを選択します。

手順2: Specular と Glossiness の値を確認

1. シェーダーエディタ内で Specular と Glossiness の値を確認します。これらの値を Metallic と Roughness に変換します。

手順3: Specular → Metallic へ

1. Specular のノードを選択し、その値を Metallic に接続します。

   • Specular の値は金属感を示すので、これを Metallic ノードに接続します。

手順4: Glossiness → Roughness へ

1. Glossiness のノードを選択し、その値を Roughness に接続します。

   • Glossiness は表面の滑らかさを示すため、これを Roughness に変換します。

手順5: Base Color の確認と調整

1. Base Color（色）はそのまま使用しますが、必要に応じて調整します。通常、Base Color は Diffuse として設定されます。

手順6: Metallic と Roughness の接続

1. 最後に、Metallic と Roughness を Principled BSDF シェーダーに接続します。これにより、モデルのPBRマテリアルが完成します。

2.3. 変換後のエクスポート

変換が完了したら、モデルを GLTF または GLB フォーマットでエクスポートします。これにより、three.js で問題なく表示できるようになります。

Blenderでのエクスポート方法：

1. File > Export > Export as glTF (.glb/.gltf) を選択します。
2. エクスポート設定で、glTF Binary (.glb) を選択し、必要な設定を調整します。
3. 最後にエクスポートを実行します。

3. 最適なエクスポート方法

Blenderでモデルを作成した後、three.js で使用するために適切な形式でエクスポートする必要があります。three.js で最も推奨されている形式は、GLTF と GLB ですが、どちらが最適なのか、そしてエクスポート時に気を付けるべきポイントについて詳しく説明します。

3.1. どの形式（GLTF / GLB）が three.js に適しているか

GLTF と GLB は、どちらも同じフォーマットで、3Dデータを効率的に保存するための標準です。しかし、微妙に異なる点があるため、用途に応じて選択する必要があります。

GLTF (JSON形式)

• 拡張子: .gltf

• 特徴:

  • テキストベースの形式で、JSONファイルとしてモデル情報を保存します。
  • テクスチャやバイナリデータ（ジオメトリデータやアニメーションなど）は別ファイルとして保存されることが多いです。
  • テクスチャやアニメーションを含む複数のファイルを管理できるが、その分読み込み時にファイル数が増えるため、読み込み速度が遅くなる可能性があります。

GLB (バイナリ形式)

• 拡張子: .glb

• 特徴:

  • バイナリ形式で、モデルのデータ（ジオメトリ、マテリアル、アニメーションなど）とテクスチャが1つのバイナリファイルにまとめられます。
  • ファイルサイズが小さく、読み込みが高速になるため、特にウェブアプリケーションやモバイル環境では有利です。
  • 一つのファイルにすべての情報が格納されているため、管理が簡単になります。

どちらを選ぶべきか？

• GLB は、読み込みが高速で、ファイルが1つにまとまっているため、ウェブやモバイル環境で使用するのに非常に適しています。
• GLTF は、複数のファイルを扱うことができるため、拡張性が高く、ファイルを別々に管理したい場合には便利です。ただし、ファイル数が増えるため、ウェブで読み込む際に少し遅くなる可能性があります。

three.js ではどちらの形式もサポートしており、一般的には GLB が推奨されますが、用途やプロジェクトの要件に合わせて選択してください。

3.2. モデルエクスポート時の注意点や設定

BlenderからGLTFまたはGLB形式でエクスポートする際に気を付けるべきポイントや設定をいくつか紹介します。

エクスポート設定の確認

1. エクスポート形式の選択

   • File > Export > Export as glTF (.glb/.gltf) を選択します。
   • GLB 形式にするか、GLTF 形式（JSON）にするかを選べます。推奨は GLB ですが、必要に応じて選択します。

2. エクスポートオプションの確認

   • Apply Transform: エクスポート時にオブジェクトの位置や回転、スケールを適用するオプションです。チェックを入れると、Blenderのトランスフォームがそのままエクスポートされます。
   • Include: エクスポートに含めるデータ（マテリアル、アニメーション、カメラ、ライトなど）を選択できます。通常、Meshes, Materials, Animations を選択します。
   • Animation: アニメーションをエクスポートする場合は、Animation を選択します。three.js でアニメーションを利用する場合、この設定は非常に重要です。

3. メッシュとマテリアルの設定

   • サポートされるマテリアル: three.js でのレンダリングに適した Principled BSDF（金属的な外観や光沢感を持つ）マテリアルを使用することをお勧めします。
   • テクスチャのエクスポート: Blenderの UV展開 や テクスチャ が正しく設定されているか確認し、エクスポート時に テクスチャ が正しく含まれるようにします。
   • スケーリング: Blender内でスケール設定が適切に行われていない場合、エクスポート後にサイズが変わることがあります。Blenderでのモデルスケールをthree.js で使用するスケールに合わせて調整します。

エクスポート後の確認

• GLTF Validation: エクスポートした .glb または .gltf ファイルが正しい形式であることを確認するために、glTF Validator を使って、エクスポートしたモデルが正しくエクスポートされているかを検証します。
• three.js での読み込みテスト: エクスポートしたファイルを three.js で読み込み、警告やエラーが発生しないかをテストします。問題があれば、エクスポート設定やマテリアルを再確認します。

まとめ

• GLTF vs GLB: どちらも three.js でサポートされていますが、GLB 形式はファイルが1つにまとまるため、高速な読み込みが可能で、ウェブやモバイル向きです。
• エクスポート設定: Blenderでのエクスポート時に、必要なオプションを選択して、テクスチャやアニメーションなどを正しくエクスポートします。
• エクスポート後の確認: glTF Validator や three.js で読み込んで、モデルが正しくエクスポートされているか確認します。

4. エラーを防ぐ方法

three.js を使用していると、警告やエラーが発生することがあります。特に、古い形式のモデルや非標準の拡張を使用している場合、警告が表示されることがあります。将来的に新しいモデルを使う際にこれらのエラーを回避する方法や、変換を自動化するためのツールとワークフローについて説明します。

4.1. 将来的に新しいモデルを使用する際の警告回避方法

KHR_materials_pbrSpecularGlossiness のような警告を回避するためには、以下の方法を実践すると良いです。

モデルをエクスポートする際に注意すること

1. Metallic/Roughness モデルを使用する:

   • three.js の最新バージョンでは、Metallic/Roughness モデルが推奨されています。これにより、KHR_materials_pbrSpecularGlossiness に関連する警告を回避できます。Blenderでモデルをエクスポートする際、必ず Metallic/Roughness モードを選んでエクスポートしましょう。

2. GLTF もしくは GLB 形式を使用:

   • three.js で推奨される形式は GLTF か GLB です。これらのフォーマットを使用することで、最新のPBRシェーダーや拡張に対応したモデルを確実に作成できます。

3. エクスポート時に無駄な拡張を避ける:

   • Specular Glossiness や他の非推奨の拡張を使わないようにしましょう。これらは古い形式のPBRモデルであり、現在のWebやアプリケーションでの使用には適していません。エクスポート時に、必要のない拡張を無効にするか、変換を行ってください。

警告を事前に回避するためのプラクティス

• モデルを再エクスポート: 古いモデルを使っている場合、three.js で正しく表示させるために、最新のエクスポーターを使ってモデルを再エクスポートします。
• コンソールを監視: モデルを読み込む際、警告が出た場合はその内容を把握し、次回以降同じ警告が出ないように注意します。

4.2. 変換を自動化するためのツールやワークフローの紹介

大規模なプロジェクトでは、すべてのモデルを手動で変換するのは非常に時間がかかります。そこで、変換を自動化するツールやワークフローを導入すると作業の効率が大幅に向上します。

自動化ツール

1. glTF-Transform

   • glTF-Transform は、glTF モデルを変換・最適化するためのツールです。Specular Glossiness を Metallic/Roughness に変換する機能を持っています。コマンドラインで簡単に使えるため、大量のモデルを一括で変換する際に便利です。

   • インストール方法:

     npm install --save gltf-transform
     

     使用例:

     gltf-transform convert input.glb output.glb --pbr
     

     これで、指定したモデルを自動的に Metallic/Roughness に変換できます。

2. Blenderのスクリプトを使用

   • Blenderには、Pythonスクリプトを使用して一括でモデルを変換することができます。Blender内でのマテリアル変換作業を自動化するためのスクリプトを作成し、複数のモデルを一度に処理できます。

     例えば、以下のようなPythonスクリプトを使って、Specular Glossiness を Metallic/Roughness に変換する処理を自動化できます。

     import bpy
     
     def convert_materials():
         for mat in bpy.data.materials:
             if mat.use_nodes:
                 for node in mat.node_tree.nodes:
                     if node.type == 'BSDF_PRINCIPLED':
                         # Specular to Metallic
                         if 'Specular' in node.inputs:
                             node.inputs['Metallic'].default_value = node.inputs['Specular'].default_value
                             node.inputs['Specular'].default_value = 0.0
     
                         # Glossiness to Roughness
                         if 'Glossiness' in node.inputs:
                             node.inputs['Roughness'].default_value = 1.0 - node.inputs['Glossiness'].default_value
                             node.inputs['Glossiness'].default_value = 0.0
     
     convert_materials()
     

   • このスクリプトは、Specular と Glossiness を自動的に変換してくれるので、大量のモデルを扱う際に非常に便利です。

3. Automated Pipeline for Model Conversion (CI/CD)

   • より高度な自動化を目指すなら、CI/CD パイプラインを使用して、モデルの自動変換を行うことができます。GitHub Actions や Jenkins などの CI ツールを使って、glTF-Transform や Blenderスクリプトを組み込んだパイプラインを作成することができます。

ワークフローの一例

1. モデルのインポート: モデルをBlenderにインポートします。
2. 自動変換: glTF-Transform や Blenderスクリプトを使って、モデルのマテリアルを Metallic/Roughness に変換します。
3. エクスポート: 変換されたモデルを GLTF または GLB 形式でエクスポートします。
4. 自動テスト: 変換したモデルをthree.js で読み込み、表示テストを自動化します。

まとめ

• 警告回避方法: three.js での警告を回避するために、Metallic/Roughness モデルを使用することが推奨されます。これにより、KHR_materials_pbrSpecularGlossiness 拡張に関連する警告を防げます。
• 変換の自動化: モデル変換を手動で行うのは時間がかかりますが、glTF-Transform や Blenderスクリプト、さらにはCI/CDツールを使って自動化することで、大規模なプロジェクトでも効率よく作業が進められます。