पोस्ट प्रोसेसिंग एक तकनीक है जिसका उपयोग इफेक्ट्स लागू करने के लिए किया जाता है एक दृश्य को रेंडर करने के बाद। इसे आम तौर पर ब्लर, ब्लूम, और कलर करेक्शन जैसे इफेक्ट्स जोड़ने के लिए उपयोग किया जाता है।

सही तरीके से उपयोग करने पर, पोस्ट प्रोसेसिंग एक दृश्य की दृश्य गुणवत्ता को बहुत हद तक बढ़ा सकता है।

यह वह दृश्य है जिस पर हम काम करेंगे:

और अंत में हमारे पास यह होगा:

परिणाम बहुत बेहतर दिखता है, है ना?

React Postprocessing

React Postprocessing एक लाइब्रेरी है जो पोस्ट प्रोसेसिंग इफेक्ट्स को आपके React Three Fiber प्रोजेक्ट्स में जोड़ना आसान बनाता है।

जबकि अन्य तरीके भी हैं पोस्ट प्रोसेसिंग इफेक्ट्स जोड़ने के लिए Three.js में, React Postprocessing स्वचालित रूप से आयोजित और मर्ज करता है किसी भी दी गई इफेक्ट्स के संयोजन को।

यह अधिक सरल बनाता है इफेक्ट्स जोड़ने के लिए आपके दृश्य में कम से कम प्रदर्शन ओवरहेड के साथ।

आइए लाइब्रेरी को स्थापित करके प्रारंभ करें:

Copy
yarn add @react-three/postprocessing

इसे उपयोग करने के लिए हमें केवल अपने इफेक्ट्स को EffectComposer component में लपेटने की आवश्यकता है।

अपने कोड को संगठित रखने के लिए, एक नई फाइल components/Effects.jsx बनाते हैं और उसमें निम्नलिखित कोड जोड़ते हैं:

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

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

अब हम अपने App.jsx फाइल में इस component को आयात और उपयोग कर सकते हैं:

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;

यदि हम अपने दृश्य को देखें, तो हम देख सकते हैं कि हमारे सभी ऑब्जेक्ट्स meshNormalMaterial का उपयोग कर रहे हैं।

यह इसलिए है क्योंकि डिफ़ॉल्ट रूप से, EffectComposer component दृश्य को रेंडर करेगा NormalPass इफेक्ट का उपयोग करते हुए। जैसा कि हमने कोई अन्य इफेक्ट नहीं जोड़ा है, यह वही एकमात्र चीज़ हमें दिखाई दे रही है।

हम इसे disableNormalPass प्रॉप को true पर सेट करके अक्षम कर सकते हैं:

Copy
<EffectComposer disableNormalPass></EffectComposer>

अब हमारा EffectComposer इफेक्ट्स प्राप्त करने के लिए तैयार है।

उपलब्ध इफेक्ट्स की सूची React Postprocessing documentation में पाई जा सकती है।

प्रत्येक इफेक्ट के लिए, इसमें एक कोड नमूना शामिल होता है जिसमें विभिन्न प्रॉप्स होते हैं कस्टमाइज़ेशन के लिए। कुछ इफेक्ट्स के साथ CodeSandbox उदाहरण भी आते हैं विज़ुअलाइज़ और प्रयोग करने के लिए।

आइए इनमें से कुछ को मिलकर खोजते हैं!

Vignette

यदि आप कुछ फोटोग्राफी करते हैं, तो आप विग्नेट शब्द से परिचित हो सकते हैं। यह एक छवि के कोनों का अंधेरा होता है।

Vignette दृश्य के केंद्र पर दर्शक का ध्यान आकर्षित करने में मदद करता है।

आइए इसे अपने Effects.jsx फ़ाइल में जोड़ें: