Xử lý hậu kỳ là một kỹ thuật được sử dụng để áp dụng các hiệu ứng lên một cảnh sau khi đã được render. Điều này thường được dùng để thêm các hiệu ứng như blur, bloom, và chỉnh màu.

Nếu được sử dụng đúng cách, xử lý hậu kỳ có thể cải thiện đáng kể chất lượng hình ảnh của một cảnh.

Đây là cảnh mà chúng ta sẽ làm việc:

Và đây là kết quả cuối cùng:

Kết quả trông tốt hơn nhiều, phải không?

React Postprocessing

React Postprocessing là một thư viện giúp dễ dàng thêm các hiệu ứng xử lý hậu kỳ vào dự án React Three Fiber của bạn.

Trong khi có các cách khác để thêm hiệu ứng xử lý hậu kỳ vào Three.js, React Postprocessing tự động tổ chức và kết hợp bất kỳ kết hợp hiệu ứng nào.

Nó giúp đơn giản hóa việc thêm hiệu ứng vào cảnh của bạn với tối thiểu chi phí về hiệu suất.

Hãy bắt đầu bằng cách cài đặt thư viện:

Copy
yarn add @react-three/postprocessing

Để sử dụng, chúng ta chỉ cần bao bọc các hiệu ứng của mình vào trong component EffectComposer.

Để giữ cho mã nguồn của chúng ta gọn gàng, hãy tạo một file mới components/Effects.jsx và thêm đoạn mã sau:

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

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

Chúng ta có thể import và sử dụng component này trong file App.jsx của chúng ta:

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;

Nếu chúng ta nhìn vào cảnh của mình, chúng ta có thể thấy tất cả các đối tượng như thể chúng đang sử dụng meshNormalMaterial.

Điều này xảy ra vì theo mặc định, component EffectComposer sẽ render cảnh sử dụng hiệu ứng NormalPass. Vì chúng ta không thêm các hiệu ứng khác, đây là điều duy nhất chúng ta thấy.

Chúng ta có thể tắt điều này bằng cách đặt prop disableNormalPass thành true:

Copy
<EffectComposer disableNormalPass></EffectComposer>

Bây giờ EffectComposer của chúng ta đã sẵn sàng để nhận các hiệu ứng.

Danh sách các hiệu ứng có sẵn có thể được tìm thấy trong tài liệu React Postprocessing.

Với mỗi hiệu ứng, nó bao gồm một mẫu mã với các thuộc tính khác nhau có sẵn để tùy chỉnh. Một số hiệu ứng cũng đi kèm với các ví dụ CodeSandbox để hình dung và thử nghiệm.

Hãy cùng khám phá một số trong số chúng!

Vignette

Nếu bạn có chút kinh nghiệm về nhiếp ảnh, bạn có thể quen thuộc với thuật ngữ vignette. Đây là hiện tượng tối góc của một hình ảnh.

Vignette giúp thu hút sự chú ý của người xem vào trung tâm của cảnh.

Hãy thêm nó vào tệp Effects.jsx của chúng ta: