r3f-lighting

React Three Fiber のライティング

まず、インストールされている Three.js、Fiber、Drei のバージョンとレンダラーを確認してください。この例は Fiber 9／React 19、Three.js r185、WebGL を対象としています。

意図的なライティング設定から始める

• PBR の反射と補助光には環境ライティングを、方向性とリアルタイムのシャドウには直接光を使用します。アンビエントライトを増やしても、失われた金属反射は復元されません。
• シーンの背景と scene.environment は役割が異なります。Drei の Environment はライティングを設定し、background はシーンの背後に表示する機能も担います。
• 本番環境では、所有権のある HDR／EXR アセットを優先してください。Drei のプリセットはプロトタイピングに便利ですが、外部ホスティングに依存します。新しい形式を選ぶ前に、ローダーの対応状況を確認してください。
• Sky は目に見える空のジオメトリであり、自動的にそれに対応した太陽光や環境光を作るものではありません。見た目の一貫性が重要な場合は、空、直接光、環境光を調整してください。

シャドウのあるシーン

<Canvas shadows="percentage"> の内側にマウントします。Three.js r182 以降では PCFShadowMap はソフトな影になります。Fiber 9 で shadows のみを指定すると、非推奨の PCFSoftShadowMap が選択されます。

export default function Example() {
  return (
    <>
      <ambientLight intensity={0.3} />
      <directionalLight
        position={[3, 5, 3]}
        intensity={3}
        castShadow
        shadow-mapSize={[1024, 1024]}
        shadow-camera-left={-4}
        shadow-camera-right={4}
        shadow-camera-top={4}
        shadow-camera-bottom={-4}
        shadow-camera-near={0.5}
        shadow-camera-far={15}
        shadow-normalBias={0.02}
      />
      <mesh castShadow position={[0, 0.5, 0]}>
        <boxGeometry />
        <meshStandardMaterial color="coral" />
      </mesh>
      <mesh receiveShadow rotation={[-Math.PI / 2, 0, 0]}>
        <planeGeometry args={[8, 8]} />
        <meshStandardMaterial color="silver" />
      </mesh>
    </>
  )
}

上記のバイアスとフラスタムの値は、この小さなシーン向けです。実際の寸法に合わせて調整してください。

シャドウとライトのターゲット

• シャドウマッピングには、レンダラーでのシャドウの有効化、シャドウを投影するライト、シャドウを投影するメッシュ、シャドウを受けるマテリアル／メッシュが必要です。アンビエントライトとヘミスフィアライトはシャドウを投影しません。
• マップの解像度を上げる前に、シャドウカメラを必要な範囲に絞ります。CameraHelper でフラスタムを確認し、シャドウがオブジェクトから離れて見えないようにしながら、シャドウアクネを抑えるバイアスを設定してください。
• ポイントライトのシャドウは 6 方向をレンダリングします。シャドウを投影するライトの数と大きなマップの使用を制限してください。コストはライトの数だけでなく、影響を受けるジオメトリとパスにも左右されます。
• ディレクショナルライト／スポットライトのターゲットを動かすには、ワールドマトリックスが更新されるターゲット Object3D が必要です。カスタムターゲットをシーングラフに追加してください。シーンから切り離されたターゲットの位置だけを変更すると、ワールド変換が古いままになることがあります。
• WebGL では、RectAreaLight は Standard／Physical マテリアルに作用しますが、組み込みのシャドウは投影しません。必要となるネイティブライトの経路で使用する場合は、RectAreaLightUniformsLib を初期化してください。
• WebGLRenderer では、オブジェクト／カメラのレイヤーは、ライトごとにマテリアルを選別する汎用的なマスクではありません。ライトのレイヤーをメッシュに合わせるだけで、選択的な照明が機能するとは考えないでください。

環境とヘルパーのコスト

• Drei の Lightformer は Environment に取り込まれる発光ジオメトリです。通常のリアルタイムライトではなく、直接光のシャドウも投影しません。
• 本当に静的な環境キャプチャや ContactShadows には frames={1} を設定します。オブジェクトやライティングがアニメーションする場合は再キャプチャが必要です。キャプチャを固定すると古い状態のままになります。
• ContactShadows はオフスクリーンで深度とぼかしによる近似をレンダリングします。無料ではなく、すべてのディレクショナルライトのシャドウを置き換えるものでもありません。
• AccumulativeShadows はサンプルを重ねて収束します。シーンを変更すると、リセットや再蓄積が必要になることがあります。BakeShadows は更新を停止するものであり、移植可能なベイク済みライトマップを生成するものではありません。
• SoftShadows は WebGL シェーダーコードにパッチを適用します。特にレンダラーをアップグレードした後は、追加する前に、インストールされている Three.js のシャドウ実装との互換性を確認してください。
• ライトの調整中はトーンマッピング／露出を一貫させてください。現在の物理ベースのライト強度を、古いレガシーライトのチュートリアルと安易に混在させないでください。

確認

シャドウの接地感、アクネ、クリッピング、読み込んだモデルの投影／受影フラグ、移動するオブジェクトを確認してください。静的キャプチャとアニメーションするキャプチャの挙動を比較し、対象デバイスでレンダリングパスの総数を計測してください。

出典

• Drei Environment、ContactShadows。
• Three.js のシャドウ、RectAreaLight、DirectionalLight。
• 移行ガイド — r182 の PCF の変更と、r184 の環境回転の変更。