threejs-lighting

Three.js のライティング

光源の選択、シャドウの動作、イメージベースの照明には、このスキルを使用します。PBR サーフェスの設定は threejs-materials に、HDR／環境アセットの設定は threejs-textures に、スクリーンスペースエフェクトは threejs-postprocessing に振り分けてください。

このスキルを使用する場面

• 物理的に意味のある直接光と環境光の寄与でシーンを照らす
• 品質への影響を制御しながら、ディレクショナルライト、ポイントライト、スポットライトのシャドウを設定する
• PBR の反射と拡散照明のために HDR 環境を設定する
• 黒つぶれ、平坦さ、白飛び、シャドウアクネ、またはパフォーマンスへの負荷が大きいライティングを診断する

手順

ステップ 1：マテリアルと露出の状態を確認する

1. メッシュに MeshStandardMaterial などの光に反応するマテリアルが使われていることを確認します。ライティングの変化を表現できない、非ライティングの MeshBasicMaterial は使用しないでください。
2. 任意のライト値で補正する前に、レンダラーのカラー設定とトーン設定を整えます。
3. シーンに直接光、イメージベースのライティング、またはその両方が必要かを判断します。アンビエントライトを 1 つだけ使うと形状が見えにくくなるため、万能な解決策としてではなく、フィルライトとして控えめに使用します。

ステップ 2：要件を満たす最小限のライトモデルを選ぶ

視覚的な要件	デフォルト
太陽や月のような指向性の光源	DirectionalLight
局所的な電球や小型の発光体	PointLight
フォールオフのある円錐状の光／プロジェクター	SpotLight
柔らかな空／地面からのフィルライト	HemisphereLight
大型のスタジオ用パネル	RectAreaLight
PBR の反射と環境応答	環境マップ／IBL

const key = new THREE.DirectionalLight(0xffffff, 3);
key.position.set(4, 6, 3);
key.castShadow = true;
scene.add(key);
scene.add(new THREE.HemisphereLight(0xcfe8ff, 0x223344, 1));

セットアップ中はヘルパーを使用し、本番ビューでは削除するか無効化してください。

ステップ 3：シャドウを意図的に設定する

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

mesh.castShadow = true;
mesh.receiveShadow = true;
key.shadow.mapSize.set(1024, 1024);
key.shadow.camera.near = 0.5;
key.shadow.camera.far = 30;

実際のキャスターとレシーバーに合わせて、シャドウカメラ／フラスタムを絞り込みます。マップサイズ、シャドウを生成するライトの数、更新頻度を増やすのは、対象ハードウェアでプロファイリングを行った後にしてください。シャドウアクネやピーターパンニングは、値をむやみに上げてアーティファクトを反転させるのではなく、ジオメトリのスケール、バイアス、法線バイアスを確認して対処します。

ステップ 4：PBR で必要な場合はイメージベースのライティングを追加する

インストール済みの Three.js のバージョンに適したローダー／PMREM の手順を通じて、HDR／正距円筒図法のアセットを読み込み、前処理します。マテリアルの反応には scene.environment を設定し、環境も表示する場合は scene.background を別途設定します。

ステップ 5：見た目と予算を確認する

• シャドウをオフ／オンにした状態、直接光のみ、IBL のみでマテリアルの反応を比較します。
• シャドウのエッジ、移動するキャスター、ライトのシャドウ範囲付近にあるオブジェクトをテストします。
• 品質レベルを上げる前に、実際のシーン密度で対象デバイスのプロファイリングを行います。
• テクスチャ読み込みを担当する所有元を通じて、終了処理時に機能が所有する環境／レンダーリソースが破棄されることを確認します。

例

小規模な製品プレゼンテーション

キーライトとしてディレクショナルライトまたはエリアライトを使い、低強度のフィルライトと環境マップを組み合わせます。多数のシャドウ付きポイントライトでスタジオ内のすべてのバウンスを再現しないでください。PBR の環境ライティングのほうが、通常は安定性に優れ、低コストです。

屋外シーン

ディレクショナルライトの太陽光を 1 つ使い、空／地面からのヘミスフィアライトを加えます。必要な場合にのみ、表示されているプレイ／ビュー領域に追従する、範囲を限定したシャドウカメラを使用します。

ベストプラクティス

1. 明るいスクリーンショットを撮るためだけでなく、マテリアルの反応を考慮してライティングします。
2. シャドウキャスター／レシーバーとシャドウフラスタムは、視覚的な要件を満たす範囲でできるだけ小さく保ちます。
3. アンビエントライトを重ねる代わりに、PBR には環境マップを使用します。
4. すべてのライトの値を不自然に調整する前に、レンダラーレベルでトーンマッピング／露出を調整します。
5. シャドウ品質を上げるたびに、パフォーマンスへの影響を測定します。

参考資料

• Three.js ライティングのソースカバレッジ
• ライトのドキュメント
• Three.js マニュアル：シャドウ