Bloom Effect Demo

このデモでは、Three.jsのBloomエフェクトを使用した光の表現方法を示しています。 Bloomエフェクトは、明るい部分から光が滲み出るような効果を作り出します。

Bloomエフェクトについて

Bloomエフェクトは、明るい光源や反射面から光が周囲に広がるように見える現象を再現するポストプロセス効果です。 これにより、夜景や光源のある3Dシーンがより現実的に見えるようになります。

フォグ（霧）効果について

フォグ効果は、遠くのオブジェクトが霧や靄によって徐々に見えなくなる現象を再現します。 これにより、シーンに奥行きや雰囲気を追加することができます。 このデモでは、Bloomエフェクトとフォグを組み合わせて、より幻想的な雰囲気を作り出しています。

Three.jsでの実装方法

Three.jsでは、EffectComposerとUnrealBloomPassを使用してBloomエフェクトを実装できます：

import { EffectComposer, Bloom } from '@react-three/postprocessing'

// Reactコンポーネント内で
<Canvas>
  <Scene />
  <EffectComposer>
    <Bloom 
      intensity={1.0} // 強度
      luminanceThreshold={0.9} // 輝度のしきい値
      luminanceSmoothing={0.025} // 輝度のスムージング
    />
  </EffectComposer>
</Canvas>

フォグの実装方法

Three.jsでは、2種類のフォグを実装できます：

// 線形フォグ - 距離に応じて線形に霧が濃くなる
<fog attach="fog" color="#000033" near={10} far={50} />

// 指数関数的フォグ - より自然な霧の表現
<fogExp2 attach="fog" color="#000033" density={0.05} />

このデモでは、Levaライブラリを使用してフォグのパラメータをリアルタイムで調整できるUIを実装しています。 画面左上のコントロールパネルを使って、フォグの種類や濃さを変更してみてください。

パラメータの調整

Bloomエフェクトの主なパラメータ：

フォグの主なパラメータ：