ポストプロセッシング

Starter pack

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

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

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

未処理のスタートプロジェクト

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

処理されたシーン

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

React Postprocessing

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

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

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

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

yarn add @react-three/postprocessing

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

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

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

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

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

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に設定します:

<EffectComposer disableNormalPass></EffectComposer>

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

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

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

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

ビネット

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

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

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

End of lesson preview

To get access to the entire lesson, you need to purchase the course.