المعالجة اللاحقة هي تقنية تستخدم لتطبيق تأثيرات على مشهد بعد أن تم تصييره. يتم استخدام هذا الأمر عادةً لإضافة تأثيرات مثل الضبابية، الإشراق، و تصحيح الألوان.

عند الاستخدام الصحيح، يمكن للمعالجة اللاحقة أن تعزز بشكل كبير الجودة البصرية للمشهد.

هذا هو المشهد الذي سنعمل معه:

وهذا ما سننتهي به:

يبدو الناتج أفضل بكثير، أليس كذلك؟

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 { 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 بتصيير المشهد باستخدام تأثير NormalPass. ولأننا لم نضف أي تأثيرات أخرى، هذا هو الشيء الوحيد الذي نراه.

يمكننا تعطيل هذا عن طريق تعيين الخاصية disableNormalPass إلى true:

Copy
<EffectComposer disableNormalPass></EffectComposer>

الآن أصبح EffectComposer جاهزًا لاستقبال التأثيرات.

يمكن العثور على قائمة التأثيرات المتاحة في وثائق React Postprocessing.

بالنسبة لكل تأثير، يتضمن ذلك عينة من الكود مع الخصائص المختلفة المتاحة لالتخصيص. تأتي بعض التأثيرات أيضًا مع أمثلة CodeSandbox لالتصور و التجربة معها.

لنكتشف معًا بعضها!

الظلال (Vignette)

إذا كنت تمارس التصوير الفوتوغرافي، فقد تكون على دراية بمصطلح الظلال (vignette). هو تغميق الزوايا في الصورة.

الـVignette يساعد على جذب انتباه المشاهد إلى مركز المشهد.

لنقم بإضافته إلى ملف Effects.jsx الخاص بنا: