【ITニュース解説】High Roughness, Sharp Highlights: Auditing a glTF Material in Three.js

ウェブブラウザで3Dグラフィックスを表示するThree.jsを用いたプロジェクトで、車の3Dモデルの質感設定にまつわる問題が発生した。具体的には、「Matte」（つや消し）プリセットを適用したにもかかわらず、車のボンネットなどに鋭い光の反射（ハイライト）が残ってしまったのだ。この現象に対し、マテリアル（質感）設定の詳細な調査が行われた。

この調査は、Three.jsのr186バージョンを使用し、固定されたカメラと照明設定のもと、厳密な条件下でスクリーンショットを撮影することで実施された。ボディカラーは2種類、質感プリセットは「Gloss」「Satin」「Matte」の3種類が用いられ、計6種類の組み合わせが検証された。元の状態に戻すキャプチャも含め、計8枚のスクリーンショットが取得された。検証中の操作ミスがないよう厳密な比較が行われたが、これはアプリケーションレベルの挙動比較であり、異なるデバイス間での完全な再現性を保証するものではない。

まず、各プリセットがどのようなマテリアルパラメータを変更しているのかが調査された。ブラウザのスクリプトを確認したところ、これらのプリセットは「Base roughness」（基本粗さ）と「Metalness」（金属度）という2つのプロパティを調整していることが判明した。粗さは表面のざらつき、金属度は金属らしい反射を示す値である。「Matte」への切り替えでは、基本粗さだけでなく金属度も変化していたため、プリセットは粗さだけでなく金属度も同時に影響を与えているとわかった。Three.jsではこれらは異なるプロパティであり、プリセット値はアプリケーション独自の便宜的な設定である。スクリーンショット間のピクセルごとの色の差を比較した結果、プリセット変更で画像が視覚的に変化し、元のプリセットに戻ることも確認され、検証の正確性が裏付けられた。

調査を進める中で、インポートされたglTF形式の3Dモデルデータ（GLBファイル）の内部に、問題の根本原因となりうる情報が見つかった。glTFファイルには、「KHR_materials_clearcoat」という拡張機能が組み込まれており、これによりベースマテリアルの上に「クリアコート（透明な上塗り層）」が存在することが示されていた。このクリアコートは、それ自体が「clearcoatFactor」（強度）と「clearcoatRoughnessFactor」（粗さ）という独立したパラメータを持っている。これにより、下地のマテリアルが粗く設定されていても、その上にあるクリアコートが滑らかであれば、全体として光沢のある見た目になることが可能となる。Three.jsのglTFローダーは、このクリアコート拡張が存在する場合、高度な「MeshPhysicalMaterial」タイプを選択し、glTFのクリアコートパラメータをThree.jsのプロパティにマッピングする。さらに、アプリケーションがマテリアルを複製し、ベースの粗さなどを設定し直す際、クリアコートのプロパティはリセットされずにそのまま引き継がれていることがThree.jsのコードから判明した。このため、ベース粗さが0.86と粗く設定されていても、クリアコート粗さが0.04という滑らかな状態が共存する可能性が出てきた。この発見は、「Matte」設定にもかかわらず鋭いハイライトが残っていた現象に対するもっともらしい説明となる。ベースマテリアルが粗く設定されても、その上の滑らかなクリアコート層が光を反射し、ハイライトを生み出していたと考えられるのだ。ただし、これはまだ仮説であり、実験的な証明はなされていない。最終的なマテリアルパラメータの直接検査は行われておらず、「Matte」というプリセットが反射を完全に無くすことを意味するわけでもない。

この仮説を検証するためには、追加の比較実験が必要となる。今後の診断ステップとしては、モデル、カメラ、色、ベースの粗さ、金属度、環境を固定した状態で、クリアコートの有無や粗さだけを変化させる比較を行うことが提案されている。「クリアコートを維持する条件」と「クリアコートのみを無効にする条件」を比較することで、クリアコートが画像に与える影響を分離して調べることができる。また、「クリアコートの粗さのみを増加させる条件」と比較することで、その粗さがどのようにハイライトに影響するかを確認できる。このような詳細な調査を行う上でのヒントとしては、使用されているマテリアルタイプやglTF拡張機能を正確に記録すること、UI操作によって変更されるプロパティを全てリストアップすること、ベース層とクリアコート層をそれぞれ独立して検査すること、そしてカメラや環境、露出などの設定を固定し、一度に一つの診断変数のみを変更して比較することが挙げられる。Three.jsでは色の入力、作業空間、出力が区別されるため、カラーパイプラインの一貫性も重要である。

今回の検証で、色の変化やプリセットの適用によって画像が変化し、元の状態に復元できることが確認された。また、glTFモデルのクリアコート拡張がThree.jsのローダーとマテリアルコピーの仕組みを通じて、プリセット変更後も維持される経路が文書として確立された。この維持されたクリアコートが、観測された鋭いハイライトの具体的な原因であるかどうかは、今後の厳密な比較実験によって明らかにされるだろう。