【Three.js】LightProbeでライティングする

Three.jsでLightProbeを使う方法について解説します。
LightProbe – three.js docs

デモ: https://aadebdeb.github.io/three-lightprobe-demo/
ソースコード: https://github.com/aadebdeb/three-lightprobe-demo

検証に使用したThree.jsのバージョンはr154です。

LightProbeは球面調和関数を用いて少ない数の係数で環境マップを表現し、ライティングを行います。私も理論部分を全然理解できていないですが、AmbientLight(HemisphereLight)と同じようなライティングを環境マップを用いてよりいい感じにできるという認識です。
球面調和関数変換の理論と実装 - Qiita
docs/CGのための球面調和関数.pdf at master · mebiusbox/docs · GitHub

LightProbeはLightProbeGeneratorを使って環境マップから作成できます。
LightProbeGenerator – three.js docs

Equirectangular形式の全天球画像からLightProbeを生成すると以下のようになります。

// Equirectangular形式の全天球画像をTextureとして読み込む
const texture = await new TextureLoader().loadAsync('/environment.jpg')
texture.colorSpace = SRGBColorSpace
// TextureをWebGLCubeRenderTargetに変換する
const cube = new WebGLCubeRenderTarget(256).fromEquirectangularTexture(renderer, texture)
// WebGLCubeRenderTargetからLightProbeを生成する
const lightProbe = LightProbeGenerator.fromCubeRenderTarget(renderer, cube)
// LightProbeをSceneに追加する
scene.add(lightProbe)

LightProbeは毎回クライアント側で全天球画像から生成する必要はなく、変換した結果の係数をコピペしてSphericalHarmonics3を直接作れば生成の負荷を減らすことができます。

// 全天球画像から生成したLightProbeから係数をコピペする
console.log(originalLightProbe.sh.toArray())

// コピペした係数からLightProbeを生成する
const lightProbe = new LightProbe(new SphericalHarmonics3().fromArray([
  0.8857463624727963, 0.6460947316933959, 0.8268657476568466,
  ...
  0.15054100688032032, 0.03475026485176827, -0.05928848411398983
]))
scene.add(lightProbe)