add-postprocessing

R3F シーンにポストプロセッシングを追加する

ポストプロセッシングを使うと、平坦なレンダリングを高品質な見た目に仕上げられます。ただし、パスを追加するたびにフレーム時間が増加します。目的を持って追加し、パフォーマンス予算を守ってください。

ステップ 1 — インストール

npm i @react-three/postprocessing postprocessing

ステップ 2 — EffectComposer を追加する

<Canvas> の内側（シーンコンテンツの後）に追加します。

import {
  EffectComposer, Bloom, DepthOfField, Vignette,
  Noise, ChromaticAberration, ToneMapping, SMAA,
} from '@react-three/postprocessing'
import { BlendFunction, ToneMappingMode } from 'postprocessing'

function Effects() {
  return (
    <EffectComposer multisampling={0} disableNormalPass>
      <Bloom
        intensity={0.6}
        luminanceThreshold={0.85}
        luminanceSmoothing={0.2}
        mipmapBlur
      />
      <DepthOfField focusDistance={0.01} focalLength={0.08} bokehScale={3} />
      <ChromaticAberration offset={[0.0008, 0.0008]} />
      <Noise opacity={0.04} blendFunction={BlendFunction.OVERLAY} />
      <Vignette eskil={false} offset={0.2} darkness={0.9} />
      <ToneMapping mode={ToneMappingMode.ACES_FILMIC} />
      <SMAA />
    </EffectComposer>
  )
}

ステップ 3 — 見た目を調整する

• ブルーム：luminanceThreshold を上げて、明るい部分だけが光るようにします。mipmapBlur を使うと、柔らかく、負荷の低い光になります。ブルームを発生させるには、発光マテリアル（または 1 を超える値）を使います。
• DOF：focusDistance は正規化された値（0～1）です。フォーカス送りにはアニメーションを付けます。負荷が高いため、モバイルでは無効にします。
• トーンマッピング：シネマティックな色には ACES_FILMIC を推奨します。gl={{ toneMapping }} を一貫して設定してください。
• グレイン／色収差：控えめにします。強すぎると安っぽく見えます。
• 調整中は leva で値を公開し、その後、値をコードに直接記述します。

ステップ 4 — パフォーマンス予算

• 各パスで画面全体の描画コストが発生します。ミドルレンジ以下のデバイスでは、条件に応じて適用するエフェクトを減らします（例：DOF と CA を無効にし、ブルームとトーンマッピングは維持します）。
• エフェクトが法線を必要とする場合（SSAO／SSR など）を除き、disableNormalPass を使用します。
• 解像度を半分にしたエフェクトや、動的にスケールを調整する <PerformanceMonitor> の使用を検討します。
• スタックを追加した後、FPS を再確認します（目標を下回る場合は webgl-perf-auditor に引き継ぎます）。

ステップ 5 — カスタムエフェクト

独自の見た目にするには、postprocessing の Effect／wrapEffect でフラグメントシェーダーをラップしてカスタムエフェクトを作成します。GLSL の作成は shader-artist エージェントに引き継ぎます。

ステップ 6 — 確認

• エフェクトを有効にした状態で、シーンが目標 FPS でレンダリングされることを確認します。
• 可能であれば変更前後を表示し、有効なパスとそのコストを報告します。