Pemrosesan pasca adalah teknik yang digunakan untuk menerapkan efek ke sebuah scene setelah dirender. Ini umumnya digunakan untuk menambahkan efek seperti blur, bloom, dan color correction.

Penggunaan yang tepat, pemrosesan pasca dapat sangat meningkatkan kualitas visual dari sebuah scene.

Ini adalah scene yang akan kita kerjakan:

Dan hasil akhirnya:

Hasilnya tampak jauh lebih baik, bukan?

React Postprocessing

React Postprocessing adalah sebuah library yang memudahkan untuk menambahkan efek pemrosesan pasca ke dalam proyek React Three Fiber Anda.

Meskipun ada cara lain untuk menambahkan efek pemrosesan pasca ke dalam Three.js, React Postprocessing secara otomatis mengatur dan menggabungkan berbagai kombinasi efek.

Ini membuatnya lebih sederhana untuk menambahkan efek ke scene Anda dengan beban kinerja sekecil mungkin.

Mari mulai dengan menginstal library ini:

Copy
yarn add @react-three/postprocessing

Untuk menggunakannya, kita hanya perlu membungkus efek kita ke dalam komponen EffectComposer.

Untuk menjaga kode kita tetap terorganisir, mari buat file baru components/Effects.jsx dan tambahkan kode berikut:

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

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

Sekarang kita bisa mengimpor dan menggunakan komponen ini di dalam file App.jsx kita:

Copy
import { Effects } from "./components/Effects";

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;

Jika kita melihat ke dalam scene kita, kita dapat melihat semua objek kita seolah-olah mereka menggunakan meshNormalMaterial.

Ini karena secara default, komponen EffectComposer akan merender scene menggunakan efek NormalPass. Karena kita belum menambahkan efek lain, ini adalah satu-satunya yang kita lihat.

Kita bisa menonaktifkan ini dengan mengatur prop disableNormalPass menjadi true:

Copy
<EffectComposer disableNormalPass></EffectComposer>

Sekarang EffectComposer kita siap untuk menerima efek.

Daftar efek yang tersedia dapat ditemukan di dokumentasi React Postprocessing.

Untuk setiap efek, terdapat contoh kode dengan berbagai prop yang tersedia untuk kustomisasi. Beberapa efek juga dilengkapi dengan contoh CodeSandbox untuk memvisualisasikan dan bereksperimen.

Mari kita temukan bersama beberapa di antaranya!

Vignette

Jika Anda melakukan fotografi, Anda mungkin akrab dengan istilah vignette. Ini adalah penggelapan pada sudut-sudut gambar.

Vignette membantu menarik perhatian pemirsa ke tengah adegan.

Mari tambahkan ke file Effects.jsx kita: