|
|
@@ -0,0 +1,98 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="ar">
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <base href="../../../" />
|
|
|
+ <script src="list.js"></script>
|
|
|
+ <script src="page.js"></script>
|
|
|
+ <link type="text/css" rel="stylesheet" href="page.css" />
|
|
|
+ </head>
|
|
|
+ <body class="rtl">
|
|
|
+ <h1>كيفية استخدام المعالجة اللاحقة<br/> (post-processing)</h1>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ تعرض العديد من تطبيقات three.js كائناتها ثلاثية الأبعاد مباشرة على الشاشة. ومع ذلك ، في بعض الأحيان ، تريد تطبيق واحد أو أكثر من التأثيرات الرسومية مثل Depth-Of-Field أو Bloom أو Film Grain أو أنواع مختلفة من Anti-aliasing. المعالجة اللاحقة هي طريقة مستخدمة على نطاق واسع لتنفيذ مثل هذه التأثيرات. أولاً ، يتم تحويل المشهد إلى هدف عرض يمثل مخزنًا مؤقتًا في ذاكرة بطاقة الفيديو.
|
|
|
+ في الخطوة التالية ، تقوم واحدة أو أكثر من ممرات ما بعد المعالجة بتطبيق المرشحات والتأثيرات على المخزن المؤقت للصور قبل أن يتم عرضه في النهاية على الشاشة.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ توفر three.js حلاً كاملاً لعملية المعالجة بتوفير [page:EffectComposer] الذي يتولى تنفيذ مثل هذه الأعمال.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h2>سير العمل</h2>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ الخطوة الأولى في العملية هي استيراد جميع الملفات الضرورية من دليل الأمثلة. يفترض الدليل أنك تستخدم الرقم الرسمي [link:https://www.npmjs.com/package/three npm package] من three.js. في العرض التوضيحي الأساسي في هذا الدليل ، نحتاج إلى الملفات التالية.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <code>
|
|
|
+ import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
|
|
|
+ import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
|
|
|
+ import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';
|
|
|
+ </code>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ بعد أن يتم استرداد جميع الملفات بنجاح ، يمكنك إنشاء الملحن الخاص بنا بتمرير نموذج من [page:WebGLRenderer].
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <code>
|
|
|
+ var composer = new EffectComposer( renderer );
|
|
|
+ </code>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ عند استخدام الملحن ، من الضروري تغيير حلقة الرسوم المتحركة للتطبيق. بدلاً من استدعاء طريقة العرض [page:WebGLRenderer] ، نستخدم الآن النظير الخاص بها [page:EffectComposer].
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <code>
|
|
|
+ function animate() {
|
|
|
+
|
|
|
+ requestAnimationFrame( animate );
|
|
|
+
|
|
|
+ composer.render();
|
|
|
+
|
|
|
+ }
|
|
|
+ </code>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ أصبح الملحن جاهزًا الآن ، لذا من الممكن تكوين سلسلة ممرات ما بعد المعالجة. هذه التمريرات مسؤولة عن إنشاء الإخراج المرئي النهائي للتطبيق. تتم معالجتها بترتيب الإضافة / الإدراج. في مثالنا ، تم تنفيذ *RenderPass* أولاً ثم *GlitchPass*. يتم عرض آخر تمرير تم تمكينه في السلسلة تلقائيًا على الشاشة. يبدو إعداد التصاريح كما يلي:
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <code>
|
|
|
+ var renderPass = new RenderPass( scene, camera );
|
|
|
+ composer.addPass( renderPass );
|
|
|
+
|
|
|
+ var glitchPass = new GlitchPass();
|
|
|
+ composer.addPass( glitchPass );
|
|
|
+ </code>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ يتم وضع *RenderPass* بشكل طبيعي في بداية السلسلة من أجل توفير المشهد الذي تم عرضه كمدخل لخطوة ما بعد المعالجة التالية. في حالتنا ، ستستخدم *GlitchPass* بيانات الصورة هذه لتطبيق تأثير خلل جامح. تحقق من هذا [link:https://threejs.org/examples/webgl_postprocessing_glitch live example] لتراها في العمل.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h2>تصاريح مدمجة</h2>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ يمكنك استخدام مجموعة واسعة من تصاريح ما بعد المعالجة التي يوفرها المحرك. يتم الاحتفاظ بها في الدليل [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing].
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <h2>تصاريح مخصصة</h2>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ في بعض الأحيان تريد كتابة تظليل مخصص للمعالجة اللاحقة وإدراجه في سلسلة ممرات ما بعد المعالجة. في هذا السيناريو ، يمكنك استخدام *ShaderPass*. بعد استيراد الملف والتظليل المخصص الخاص بك ، يمكنك استخدام الكود التالي لإعداد المرور.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <code>
|
|
|
+ import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
|
|
|
+ import { LuminosityShader } from 'three/examples/jsm/shaders/LuminosityShader.js';
|
|
|
+
|
|
|
+ // later in your init routine
|
|
|
+
|
|
|
+ var luminosityPass = new ShaderPass( LuminosityShader );
|
|
|
+ composer.addPass( luminosityPass );
|
|
|
+ </code>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ يوفر المستودع ملفًا يسمى [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader] وهو رمز بداية جيد للتظليل المخصص الخاص بك. *CopyShader* فقط ينسخ محتويات الصورة من مخزن قراءة [page:EffectComposer] إلى مخزن الكتابة المؤقت الخاص به دون تطبيق أي تأثيرات.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ </body>
|
|
|
+</html>
|
Hassan Muhamad