القائمة
التقنيات الرسومية: مضادات التعرّج

التقنيات الرسومية: مضادات التعرّج

منذ 4 سنوات - بتاريخ 2018-03-25

اخر تحديث - بتاريخ 2022-02-08

في هذه السلسلة سوف نتناول كل التقنيات الرسومية التي تستخدمها الألعاب، سوف نشرح طريقة عملها والهدف من استخدامها، بالاضافة الي تأثير تفعيلها علي أداء اللعبة وعلي بطاقة الرسوميات نفسها. والهدف رفع ثقافة القارئ وجعله مستعدا لتطويع تجربة لعبته كيفما يشاء، أو بما يناسب امكاناته. واليوم نتحدث عن مضادات التعرج Anti Aliasing.

مضادات التعرّج Anti-Aliasing

ناقشنا في الحلقتين السابقتين وظيفة بطاقة الرسوميات في حساب الألوان، وفي نقلها من مكانها لتعطينا الايحاء بالحركة، وعرفنا كيف تتكون الصور من مجموعة من نقاط الألوان Pixels، وكيف يؤثر عدد هذه النقاط علي جودة الصورة أثناء العرض علي الشاشات (دقة العرض Resolution)، وعرفنا أيضا كيف تتكون الأشكال ثلاثية الأبعاد من رؤوس، وكيف تتأثر جودة الأشكال  بعدد نقاط التحكم (الرؤوس Vertices) المستخدمة.

اليوم نتعرف علي عيب متأصّل في نظام العرض علي الشاشات سواء من ناحية نقاط الألوان أو رؤوس التحكم ..

قلنا في المرة السابقة أن ألوان الشاشة ما هي الا نقاط صغيرة جدا مكونة من نقاط زرقاء و خضراء وحمراء، لكن المشكلة أن كل نقطة تأخذ شكل مستطيل أو مربع !

التقنيات الرسومية: مضادات التعرّج التقنيات الرسومية: مضادات التعرّج التقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّج كل نقطة في الشاشة تتكون من ثلاثة مناطق، تترتب تلك المناطق اما في شكل مربع أو مستطيل ..

لا يمثل ذلك أي مشكلة عند عرض الخطوط المستقيمة .. مثل هذا الخط مثلا :

التقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّج خط برئ المظهر، وطبيعي للغاية ..

التقنيات الرسومية: مضادات التعرّج

التقنيات الرسومية: مضادات التعرّج الخط يتكون من مجموعة من النقاط مربعة الشكل، و أبعاد الخط هي 17X1، وهو يتكون من 17 نقطة (بالعرض) ونقطة واحدة (سُمكا) .

لكن عند عرض الخطوط المائلة : التقنيات الرسومية: مضادات التعرّج التقنيات الرسومية: مضادات التعرّج خط مائل غير طبيعي بالمرة، .. علي طول الخط يوجد نوع من "الشرشرة" بدلا من أن يكون كامل الاستقامة.

التقنيات الرسومية: مضادات التعرّج

التقنيات الرسومية: مضادات التعرّج التكبير يظهر الأمور علي حقيقتها، عرض الخط 17 نقطة وسُمكه نقطة واحدة أيضا. وسبب مظهر الشرشرة هو ترتيب النقاط مربعة الشكل في هيئة مائلة .. و لا توجد طريقة أخري لعرض الخط.

من الواضح جدا أن النقاط المربعة لا تصلح لعرض الخطوط المائلة وتفسير هذا بسيط جدا :

التقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّج التفسير : يوجد تباين واضح بين اللون الأبيض والأحمر .. فالعين البشرية تستطيع تمييز الفارق بينهما بسهولة شديدة .. وعندما تنظر العين الي الخط تكتشف أن اللون الأحمر ليس متصلا (كما في حالة الخط المستقيم) .. وانما تتخلله زوايا حادة من اللون الأبيض، وهي المُشار اليها بالمثلثات ..

التقنيات الرسومية: مضادات التعرّج التقنيات الرسومية: مضادات التعرّج لو كانت هذه المناطق ملونة باللون الأحمر لظهر الخط كامل الاستقامة دون أي تعرّجات أو شرشرة .. لكن هذا مستحيل لأن النقاط تأخذ شكل المربعات وليس المثلثات .

لا أجد داعيا لذكر أن هذه الظاهرة تحدث حتي علي دقة الشاشة المحلّية Native Resolution، حتي ولو تمّ استخدام دقّة 5000x5000! الذين قرأوا الجزء الأول من هذه السلسلة يعلمون أن استخدام دقة اقل من الدقة المحلية يعرض الصورة لبعض التشوهات، بسبب استخدام عملية التوسيع Stretch، وعملية الألوان الوسطيّة! و لا يتوقف الأمر عند هذا الحد فقط .. لكن استخدام أي دقة اقل من الدقة المحلية يعني أن ظاهرة التعرّجات أو الشرشرة ستتضاعف فورا ..!

التقنيات الرسومية: مضادات التعرّج التقنيات الرسومية: مضادات التعرّج صورة تقليدية بأبعاد 5X10 (اللون الأبيض والأحمر)، والدقة الأصلية للشاشة هي 10X10 .. والصورة تحتلّ نصف مساحة الشاشة بالضبط .. والخطوط السوداء تمثّل الأجزاء الخالية من الشاشة .. لاحظ وجود نفس التعرّجات في الخط الأحمرالمائل.

تعالو نطبق القوانين التي تعوّدنا عليها عند تشغيل صورة نصفية بمساحة الشاشة الكاملة :

التقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّج أولا : عملية التوزيع .. وفيها تقوم الشاشة بتوزيع كل سطر من الصورة بالتساوي علي مساحة الشاشة كلها. 

التقنيات الرسومية: مضادات التعرّج التقنيات الرسومية: مضادات التعرّج ثانيا عملية الملأ .. وتقوم الشاشة فيها بمضاعفة كل نقطة حمراء بحيث تشغل نقطتين بدلا من نقطة واحدة ! .. هل لاحظت أن التعرّجات في الخط الأحمر ازادات ؟

هكذا قامت الشاشة بعملية توسيع Stretch للصورة بحيث تشغل مساحة الشاشة كلها بدلا من نصفها فقط .. لكن بأي ثمن؟ كل الخطوط المائلة أصبحت أكثر تعرجا، وصارت ظاهرة "الشرشرة" فيها أكثر وضوحا !

التقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّج مقارنة مباشرة بين خطين عاديين، واحد بدقّة منخفضة (اليمين) والآخر بدقّة الشاشة الأصلية بعد عملية التوسيع (اليسار) ..لاحظ الفارق في التعرجات

من قرأوا الجزء الأول يعلمون أن هناك بعض الدقّات التي لا تقبل التوسيع بالتساوي لذا يتم فيها استخدام ألوان وسطية :

التقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّج دقة الصورة هنا 7X10، من أصل 10X10، أي أن هناك ثلاثة أسطر خالية من الشاشة (الأسطر السوداء)!

التقنيات الرسومية: مضادات التعرّج عملية التوزيع لم تتم بالتساوي .. ومن قبل حتي أن تتم عملية المُضاعفة .. نلاحظ أن الخط الأخضر المائل اصبح أكثر تعرّجا. التقنيات الرسومية: مضادات التعرّج التقنيات الرسومية: مضادات التعرّج سوف يتم تلوين النقاط البيضاء الواقعة بين اللون البنسجي والأخضر بلون وسطي وهو الأخضر الباهت .. بينما ستأخذ باقي النقاط البيضاء اللون البنفسجي لأنها واقعة بين لونين بنفسجيين.

التقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّج هكذا ..

التقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّج هذا هو منظر الصورة النهائي .. والخط الأخضر أصبح أكثر تشوّها عن ذي قبل ..

التقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّج مقارنة مباشرة لخطين مائلين .. الي اليسار الخط نشأ من دقة نصفية (قابلة للتقسيم بالتساوي)، والي اليمين الخط بدقة غير نصفية (غير قابلة للتقسيم بالتساوي) .. لاحظ كيف تَشوّه منظر الخط علي اليمين ، وأصبح أقل وضوحا .. وسبب ذلك هي الألوان الوسطيّة.

اذن فاستخدام دقة الشاشة المحلية يسبب تعرّجات .. والانتقال الي دقة أقل منها يزيد من حدوث التعرّجات .. سواء عن طريق عيوب عملية التوسيع، أو وجود الألوان الوسطية ..

لا يتوقف الأمر عند دقة العرض فقط .. وانما يشمل عدد المضلعات أيضا !

قُلنا في الجزء الثاني أن زيادة عدد المضلعات يجعل الأشكال اكثر استدارة وتفصيلا .. وتقليل عددها يجعل الأشكال مدببة الحواف، ويرتبط هذا بظاهرة الشرشرة برابطة وثيقة .. فالخطوط المستديرة لا تظهر التعرجات بسهولة، أما الخطوط المستقيمة فهي العكس تماما !

التقنيات الرسومية: مضادات التعرّج التقنيات الرسومية: مضادات التعرّج التقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّج الي اليسار خط مستقيم مائل .. والتعرجات تظهر فيه بوضوح .. والي اليمين خط منحني، والتعرّجات تظهر فيه بشكل اقل بكثير .

ظاهرة التعرجات قادرة علي تشويه مشاهد كاملة .. بل أنها تعوق اللعب الجيّد في بعض الأحيان بسبب جودة الصورة السيئة

التقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّج مشهد من لعبة سباق سيارات .. وكل الخطوط المائلة تظهر بتشويهات عنيفة !

تري كيف يتم حل هذه المشكلة ؟! للأسف لا يمكن حلها عن طريق استخدام العتاد، بل يجب تحويل الجبهة الي مصدر المشكلة الآخر، وهو العين البشرية!

قلنا في بداية المقال أن العين البشرة تفرق الألوان المُتباينة بسهولة .. و تستطيع تمييز الزوايا الحادة الناشئة عن اختلاط اللونين ببعضهما!

التقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّج سبب المشكلة كلها هو تلك الزوايا اللعينة .. كيف يمكن التخلّص منها ؟!

الحلّ هنا هو تلوين تلك الزوايا بلون مشابه للون الأصلي للخط ، بحيث يكون التباين اللوني بينهما قليلا :

التقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّج 1-تم تلوين النقاط الملاصقة للخط الأحمر بلون وسطي وهو الأحمر باهت .. وذلك لتقليل التباين اللوني بين الزوايا فلا تستطيع العين تمييز الفارق بينهما ..

التقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّج 2-الآن أصبحت الزوايا بين اللون الجديد (الأحمر الباهت ) واللون الأببض ..

التقنيات الرسومية: مضادات التعرّج التقنيات الرسومية: مضادات التعرّج 3-يتم تلوين النقاط التالية بلون وسطي بين الأحمر الباهت والأبيض .. لنفس السبب وهو تقليل التباين اللوني .. لاحظ انتقال الزوايا الي الصف التالي .. 

التقنيات الرسومية: مضادات التعرّج التقنيات الرسومية: مضادات التعرّج 4-تتكرر العملية مرة أخري مع اللون الوسطي الجديد .. 

التقنيات الرسومية: مضادات التعرّج التقنيات الرسومية: مضادات التعرّج 5-في النهاية أصبح اللون الأبيض متلاصقا مع اللون الأحمر الخفيف جدا .. وهنا يصبح فارق التباين بين اللونين خفيفا للغاية .. الي درجة أن العين تعجز تماما عن تمييز الزوايا ..

يطلق علي هذه العملية اسم مضاد التعرّج Anti-Aliasing، وهي كما رأيتم، مجرد استبدال لألوان من الصورة بألوان وسطيّة في محاولة لاخفاء زوايا التباين التي توجد بين لونين مختلفين ..

تستهلك هذه العملية طاقة هائلة من البطاقة الرسومية، الي حد فُقدان نسب كبيرة من الأداء .. تصل الي 30~40 % .. وأكثر من ذلك في بعض الأحيان! ويضغط مُمانع التعرّج علي ذاكرة البطاقة الرسومية VRAM، وعلي سعة تبادل البيانات فيها Bandwidth وعلي المعالج الرسومي نفسه GPU!

التقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّج الي اليسار الخط المتعرّج، الي اليمين الخط بعد تطبيق مُمانع التعرّج .. لاحظ الهالة حول الخط، والتي نتجت بسبب استخدام الألوان الوسطية.

توجد عدة مستويات من ممانع التعرج .. مثل 2X و 4X و 8X ..الخ .. وتتحكم تلك المستويات في عدد الألوان الوسطيّة التي يمكن استخدامها :

التقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّج الصورة بدون مُمانع التعرّج ..

التقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّج باستخدام مستوي 2X ..

التقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّج باستخدام 4X ..

التقنيات الرسومية: مضادات التعرّجالتقنيات الرسومية: مضادات التعرّج باستخدام 8X ..

توجد أنواع كثيرة للغاية من ممانعات التعرج، تختلف في تأثيرها علي الأداء وعلي جودة الصورة، هؤلاء هم أشهرها:

SSAA، مضاد التعرج الفائق Super Sampling، يشغل اللعبة بضعف دقة العرض Resolution، ثم يقوم بتصغيرها الي دقة العرض نفسها، فمثلا لو كانت اللعبة تعمل بـ 1080p، فان مضاد التعرج هذا يشغلها بـ2160p ثم يقوم بتصغيرها الي 1080p عن طريق دمج عدة الوان في لون واحد لا يسبب تعرجات. بالطبع يكلف هذا أداء هائلا. واستهلاك ذاكرة ضخم، لكنه ينتج أفضل صورة ممكنة، تزيل التعرجات في كل الظروف، وبوضوح عال، سواء أثناء ثبات اللاعب still أو أثناء حركته motion.

MSAA، مضاد التعرج المخصص Multi Sample، يعمل فقط علي حواف الأشكال ثلاثية الأبعاد polygon edges، ويقوم بازالة التعرجات منها، لكنه لا يعمل علي التعرجات داخل الأجسام. ولهذا فهو يكلف أداء أقل بطبيعة الحال من SSAA. وجودة الصورة منه قوية أثناء الثبات still، بدرجة وضوح عالية. لكنها ليست مثالية أثناء الحركة motion، حيث تتكون ظاهرة زحف الألوان pixel crawl أثناء الحركة، مسببة تعرجات واضحة تتحرك مع اللاعب.

FXAA و SMAA و MLAA، هؤلاء مضادات تعرج تقريبية، يعملون كمرشح ضباب Blur Filter علي الصورة النهائية كلها (ِشاملة الحواف والدواخل)، مقللين من التعرجات فيها، تكلفة الأداء فيهم قليلة للغاية، لكنهم يبهتون الصورة Blurred مقارنة بالـ SSAA و الـ MSAA. والسبب أن المرشحات تضيف الوانا وسطية علي الصورة كلها، مما يضيف ضبابية عليها كلها. بعض الناس لا يفضلون هذه الأنواع التقريبية لهذا السبب تحديدا. لكن تأثير هذه المضادات علي التعرجات جيد أثناء الثبات، والحركة.

التقنيات الرسومية: مضادات التعرّج

لاحظ الضباب في الـ FXAA و الذي يخلو منه الـ MSAA

TAA، مضاد التعرج الزمني Temporal AA، هو مضاد تعرج تقريبي أيضا، لكنه أدق بكثير، فهو يزيل التعرجات بناءا علي الصور السابقة مما يجعله خيارا فائقا أثناء الحركة و الثبات، تكلفة الأداء منه قليلة، لكن يعيبه ضباب الصورة Blur الذي يضيفه.

TXAA، مزيج من MSAA و FXAA و TAA، يقضي علي التعرجات أثناء الحركة والثبات بامتياز، لكن يعيبه الـ Blur، تكلفة الأداء مماثلة لـ MSAA.

هناك أنواع أخري أيضا، وكل عام تخرج الي النور أنواع أخري جديدة، تختلف في تكلفة الأداء وفي تغطية الحركة والثبات وفي معدل الضباب blur الذي تنتجه، وتقع مسئولية الاختيار علي اللاعب الذي يختار ما يفضله بناءا علي الصورة الناتجة وتكلفة الأداء. لكن بشكل عام فان ترتيب الأنواع من الأفضل الي الأسوأ من حيث جودة الصورة الكلية، هكذا: SSAA ثم TXAA ثم TAA ثم MSAA ثم SMAA ثم FXAA.

أضف تعليق (0)
ذات صلة