先に結論だけ
Three.js r155からデフォルトの光度単位が変わりました。PointLightとSpotLightのデフォルトの光度は1カンデラになり、大幅に暗くなっています。
Three.jsを更新してシーン全体が暗くなったり、モデルにハイライトが入らないと感じたら、以下の2点を調整してください。
- PointLightとSpotLightの光度を数百倍に強くする
- それ以外のライトの強度をMath.PI倍にする
はじめに
この記事は、Three.js r155での照明の変更とその対処を共有するためのものです。
対象とする読者
この記事は、すでにThree.jsを利用しているユーザーを対象にしています。Three.jsの解説やインストールガイドは含みません。
対象とする環境
この記事は、Three.js r155以降を前提としています。記事を読む前にお手元の環境をご確認ください。
Three.js r155での変更点
2023年7月にリリースされたThree.js r155からWebGLRenderer.useLegacyLightsのデフォルト値がfalseに変更されました。この情報は、公式フォーラムのトピックでも扱われています。
新しい照明モードでは、座標値1を1メートルとして扱い、PointLightとSpotLightの明るさは距離に応じて減衰します。
なぜ変更するのか？
この変更は、WebGPURendererとWebGLRendererの照明を統一するために導入されました。r155以降では、レンダラーを切り替えても同じシーンが同じ明るさでレンダリングされます。また、距離と光度の単位を国際単位系に統一することで、他の3Dアプリケーションとの互換性を高めます。
useLegacyLightsフラグはいつまで使える？
useLegacyLightsフラグはr165まで維持される予定です。それまでは、ユーザーがWebGLRenderer.useLegacyLights = trueを設定すると古い照明モードが適用されます。r165以降では、このフラグ自体が削除される予定です。
影響
新しい照明モードでは、以下の2点が影響を受けます。
- PointLightとSpotLightの光度単位がカンデラになる
- それ以外のライトの光度が変わる
マイグレーション
それぞれの照明について、新しい照明モードに対応させる方法を解説します。
PointLightとSpotLight
PointLightとSpotLightのデフォルト光量が1カンデラになりました。これはおおよそロウソク1本分の明るさです。メートル単位の空間を照らすには弱いので、この光量を調整してください。これらの照明は、何倍にすれば古い照明モードと同じ明るさになるという基準がありません。レンダリング結果を見ながら調整してください。
PointLightとSpotLightにはdecayプロパティがあります。このプロパティの既定値は2で、これは距離の2乗で明るさが減衰するという設定です。decayを0に設定すると、古い照明モードに近いレンダリング結果を得られますが、物理的にありえない照明になります。decayの変更は注意深く行なってください。
それ以外のライト
AmbientLight、DirectionalLight、RectAreaLightなどの照明は、太陽光を表現するためのものです。太陽は無限遠にあると考えられるので、距離による減衰は起きません。
これらの無限遠にある照明はintensityをMath.PI倍に調整すると古い照明モードと同じレンダリング結果を得られます。
以上、ありがとうございました。