ポストプロセッシングは、シーンがレンダリングされた後にエフェクトを適用するための技術です。これは一般的に、ぼかし、ブルーム、カラーコレクションのような効果を追加するために使用されます。

ポストプロセッシングを適切に使用すると、シーンの視覚的品質を大幅に向上させることができます。

これが私たちが作業するシーンです:

そして、最終的な結果がこちらです:

結果ははるかに良く見えますね？

React Postprocessing

React Postprocessing は、React Three Fiberプロジェクトにポストプロセッシングエフェクトを簡単に追加するためのライブラリです。

Three.jsにポストプロセッシングエフェクトを追加する他の方法もありますが、React Postprocessingは任意のエフェクトの組み合わせを自動的に整理し、統合します。

これにより、シーンにエフェクトを追加することが、最小限のパフォーマンスオーバーヘッドで簡単になります。

まず、ライブラリをインストールしましょう:

Copy
yarn add @react-three/postprocessing

これを使用するには、単にEffectComposerコンポーネントにエフェクトをラップする必要があります。

コードを整理するために、新しいファイルcomponents/Effects.jsxを作成し、次のコードを追加しましょう:

Copy
import { EffectComposer } from "@react-three/postprocessing";

export const Effects = () => {
  return <EffectComposer></EffectComposer>;
};

このコンポーネントをApp.jsxファイルにインポートして使用できます:

Copy
import { Canvas } from "@react-three/fiber";
import { Effects } from "./components/Effects";
import { Experience } from "./components/Experience";

function App() {
  return (
    <>
      <Canvas camera={{ position: [-1, 0.225, 5.91], fov: 42 }}>
        <color attach="background" args={["#333333"]} />
        <Experience />
        <Effects />
      </Canvas>
    </>
  );
}

export default App;

シーンを見てみると、すべてのオブジェクトがmeshNormalMaterialを使用しているように表示されます。

これはデフォルトで、EffectComposerコンポーネントがNormalPassエフェクトを使用してシーンをレンダリングするためです。他のエフェクトを追加していないため、これだけが表示されます。

これを無効にするには、disableNormalPassプロップをtrueに設定します:

Copy
<EffectComposer disableNormalPass></EffectComposer>

これで私たちのEffectComposerはエフェクトを受け取る準備ができています。

利用できるエフェクトの一覧はReact Postprocessingのドキュメントにあります。

各エフェクトには、カスタマイズできる異なるプロップを持つサンプルコードが含まれています。一部のエフェクトには、CodeSandboxの例もあり、視覚化や実験ができます。

いくつかのエフェクトを一緒に発見しましょう！

ビネット

写真撮影をする場合、ビネットという用語に馴染みがあるかもしれません。これは画像のコーナーの暗化です。

ビネットは、シーンの中心に視聴者の注意を引くのに役立ちます。

Effects.jsx ファイルに追加しましょう：