概要

three.jsを使って3DモデルをWebブラウザに描画する時にGLTFLoaderを使う場面がありました。具体的には、Webブラウザで出力すると実際にの色合いより濃い色合いに映る問題がありました。その際に、遭遇した色合いが意図しないものになる問題で効果的だった対処法について記します。
この問題は、three.jsのWebGLRendererのデフォルトの色空間が線形色空間を使っているため、モニタで描画した際に色合いが意図していないものになることが原因のようです。詳細は参考文献が大変わかりやすかったです。

対処方法1

three.jsのレンダラー(WebGLRenderer)のテクスチャに対してsRGBEncodingを設定する

// 色合いをディスプレイに合わせてsRGB補正
renderer.outputEncoding = THREE.sRGBEncoding

※他のテクスチャに対してもsRGB補正がかかることを注意。具体的には、カメラ画像などを背景に埋めていた場合に白飛びしたような現象が起きます。

対処方法2

以下のようにモデルのテクスチャのみsRGB空間を適用する方法です。これで、方法１の注意書きで記述したようにレンダラーをsRGB空間に設定すると線形色空間でいい感じの配色だったのに色合いが変わることを防げます。

const gltfLoader = new THREE.GLTFLoader()
gltfLoader.load('./model/xxx.glb', (gltf) => {
  gltf.scene.traverse((child) => {
    if (child.isMesh) {
      child.texture.encoding = THREE.sRGBEncoding
    }
  })
})