You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
5.4 KiB
97 lines
5.4 KiB
<!DOCTYPE html>
|
|
<html lang="ar">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<base href="../../../" />
|
|
<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/addons/postprocessing/EffectComposer.js';
|
|
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
|
|
import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
|
|
</code>
|
|
|
|
<p>
|
|
بعد أن يتم استرداد جميع الملفات بنجاح ، يمكنك إنشاء الملحن الخاص بنا بتمرير نموذج من [page:WebGLRenderer].
|
|
</p>
|
|
|
|
<code>
|
|
const composer = new EffectComposer( renderer );
|
|
</code>
|
|
|
|
<p>
|
|
عند استخدام الملحن ، من الضروري تغيير حلقة الرسوم المتحركة للتطبيق. بدلاً من استدعاء طريقة العرض [page:WebGLRenderer] ، نستخدم الآن النظير الخاص بها [page:EffectComposer].
|
|
</p>
|
|
|
|
<code>
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
composer.render();
|
|
|
|
}
|
|
</code>
|
|
|
|
<p>
|
|
أصبح الملحن جاهزًا الآن ، لذا من الممكن تكوين سلسلة ممرات ما بعد المعالجة. هذه التمريرات مسؤولة عن إنشاء الإخراج المرئي النهائي للتطبيق. تتم معالجتها بترتيب الإضافة / الإدراج. في مثالنا ، تم تنفيذ *RenderPass* أولاً ثم *GlitchPass*. يتم عرض آخر تمرير تم تمكينه في السلسلة تلقائيًا على الشاشة. يبدو إعداد التصاريح كما يلي:
|
|
</p>
|
|
|
|
<code>
|
|
const renderPass = new RenderPass( scene, camera );
|
|
composer.addPass( renderPass );
|
|
|
|
const 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/addons/postprocessing/ShaderPass.js';
|
|
import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js';
|
|
|
|
// later in your init routine
|
|
|
|
const 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>
|
|
|