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

الحلقات السابقة :
التَقنيات الرُسوميّة (جُزء 1): دقّة العرض Resolution
التَقنيات الرُسوميّة (جُزء 2) : المُضلّعات Polygons
التَقنيات الرُسوميّة (جُزء 3) : مُمانع التعرّج Anti-Aliasing
التَقنيات الرُسوميّة (جُزء 4): الاكساءات Textures
التَقنيات الرُسوميّة (جُزء 5) : ترشيح الاكساءات Anisotropic Filtering

سادسا : الاكساءات الشفّافة Transparent (Alpha) Textures

حلقة اليوم ستكون آخر حلقة تتحدث عن الاكساءات ، وكعادة الحلقات الختامية ، تكون النهاية بأكبر الأحداث وأكثرها غرابة وشذوذا عن القاعدة .

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

الذين يتمتّعون منكم بذاكرة جيدة ، سوف يتذكرون كيف أن الاكساءات نفسها هي خدعة لونية لتقليل عدد المضلّعات ( راجع الجزء 4 ) ، ما الذي يجعل خدعة الاكساءات الشفافة أكثر تميزا اذن ؟

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

أما الأشكال التي يتم رسمها بواسطتها فهي :

1-أوراق الأشجار والنباتات ، الأسلاك الشائكة ، الأسوار السلكيّة ..

2-النيران ، ألسنة اللهب ، الانفجارات ، الشرار ، الدخان ، الضباب ..

3-أشعة الليزر ، أشعة الطاقة ، التعاويذ السحرية ، العواصف الترابية ، الأعاصير ..

4-قطرات المطر ، شلالات المياه ، أمواج البحر ، السحاب ، الزجاج ..

كل هذه الأجسام والمؤثرات المختلفة الشكل والمتباينة الصفات تستخدم نفس التقنية الرسوميّة ؟ (أربعة رؤوس واكساء واحد) كيف هذا ؟ وبأي منطق؟

ولن أقول لك الا أن السر كله يكمن في براعة استخدام الاكساءات الشفّافة !

____________________________________

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

ولنبدأ بمفهوم الشفافية ..


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

نحتاج لوضع هذه الصورة علي هذه الصورة ، يحيث يتداخلان مع بعضهما :



صورة بدائية أخري لمجموعة من المباني ..



تم دمج الصورتين معا ، ونلاحظ هنا أن صورة الاكساء غطّت ملامح صورة المباني ..

في الصورة السابقة ، احتلّت نقاط صورة الحشائش جزءا من صورة المباني ، وقام الحاسوب (البطاقة الرسوميّة) باستبدال نقاط من صورة المباني بنقاط من صورة الحشائش .. ليصبح الاثنان صورة واحدة .

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

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


سوف يتم اعتبار كل النقاط الصفراء نقاطا شفافة بنسبة 100% ، أي تظهر ما خلفها من الألوان .

عندما يرغب الحاسوب في دمج الصورتين ، فانه يقوم تلقائيا بحذف أي نقطة موصوفة بأنها شفافة ، وفي لغة الرسوميات يطلق علي النقاط الشفافة اسم النقاط الأوليّة Alpha ، لأنها تُحذف في أول فرصة ، ويمكن الاستغناء عنها تماما .



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

يُطلق علي أي اكساء يحوي نقاطا أولية (موصوفة بأنها شفافة ) اسم الاكساءات الشفافة أو Alpha/Transparent Textures .


صورة توضيحية توضح الفارق بين طرق دمج الصورتين ، باستخدام النقاط الأولية وبدون استخدامها .. لاحظ الفارق.

الآن حان وقت استغلال هذه الحقيقة في تنفيذ اكبر عملية خداع وتوفير لعدد الرؤوس علي الاطلاق .

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


تحتاج أوراق الشجر والحشائش الي عدد كبير من الرؤوس لرسمها من كل الجوانب ، و ذلك لكثرة ما بها من منحنيات و تفاصيل متشابكة .




الي اليمين ورقة شجر ، والي اليسار نفس الورقة مع توضيح لعدد رؤوس التحكم Vertices بها ..

في الصورة أعلاه لن يقل عدد الرؤوس في ورقة الشجر عن 60 رأسا ، و عن 500 رأس للحشائش ، وهو عدد مخيف ، وخصوصا اذا فكرنا في المواقف التي سنحتاج فيها الي رسم حقل كامل من هذه الحشائش ، الأمر الذي يُعد انتحارا رسوميّا محققا .

لكن الاكساءات الشفافة تأتي لتنقذ الموقف ، حيث سنستخدم صورة اكساء لمجموعة من الحشائش ، مثل هذه مثلا :


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

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

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


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

تٌطبّق هذه الطريقة علي كل الحشائش والأعشاب وأوراق الشجر في كل الألعاب لتوفير عدد مخيف من الرؤوس .


منظر لصحراء قاحلة .. ولن يضرّ المنظر بعض الحشائش المتناثرة هنا وهناك ..



سوف يتم استخدام اكساءات شفافة لهذه الحشائش ، ووضعها علي مربعات مسطحة من أربعة رؤوس بالطبع !



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

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


صورة لاكساء شفاف من لعبة BF Bad Company 2 ..


صورة لنفس الاكساء من منظور جانبي مائل ، لاحظ السُمك الضئيل له ..



صورة من منظور جانبي عمودي ، اختفي الاكساء تماما ، بسبب سمكه الضئيل للغاية والذي يكاد لا يري .


مقارنة متحركة بين الثلاثة صور ..

يحتال المصممون علي هذا اما باستخدام أشكال أخري غير المربع المسطح ، (مثل اسطوانة مثلا ، أو مستطيل منثني علي نفسه ) ، واما باستخدام عدد كبير من المربعات المسطحة لكل شكل بحيث يُخصص مربع واحد لكل منظور .



الي اليمين ، صورة لمجموعة من الأزهار من لعبة Just Cause 2 ، وغني عن الذكر أنها اكساءات شفافة بالطبع .. الي اليسار ، منظر الأزهار من المنظور العلوي ، نلاحظ أنها عبارة عن مربعين متعامدين علي بعضهما علي شكل علامة "+" ، وذلك لتغطية المناظير الجانبية كلها .

تُطبّق طريقة الاكساءات الشفافة أيضا علي الأسلاك الشائكة ، والأسوار السكليّة ، مثل هذه الصورة مثلا :


صورة من لعبة BF Bad Company 2 ، تُظهر سورا سلكيا ..


السور في الحقيقة ما هو الا اكساء شفاف ..

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


صورة مربع أخضر ، في أسفله حرف L الافرنجي .. يجب دمج هذه الصورة مع صورة المستطيل الأصفر (اليسار) ..


تم دمج الصورتين معا .. والمستطيل الأصفر يحجب الجزء الأسفل من المربع الأخضر تماما ..

سنفترض أننا نرغب في جعل هذا المستطيل الأصفر كأنه لوح زجاجي شبه شفاف ، بحيث يظهر من تحته حرفL.

الحل هنا سيكون بوصف كل نقاط المستطيل الأصفر بأنها شفافة ، ولكن ليس بدرجة 100% ، وانما بدرجة 50% فقط .

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

كيف يمكن الابقاء علي لونين مختلفين يحتلّان مساحة مكانيّة واحدة ؟

نعم ! تخمينكم صحيح .. انها حبييبة الملايين .. انها الألوان الوسطيّة اللعينة !


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

سوف يتم استخدام لون وسطي بين الأصفر والأخضر ، وهو الأخضر الفاتح ، وبين اللون الأصفر والأحمر ، وهو اللون البرتقالي !


مقارنة متحركة ...

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


الدخان ما هو الا اكساء شبه شفاف .. يُظهر ما خلفه بشكل جزئي .. والمناطق السوداء ما هي الا مناطق شفافة بشكل كامل ..


النار ما هي الا اكساء شبه شفاف أيضا ..


الماء كذلك ..

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

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

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

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

لا يتم تطبيق عملية ممانعة التعرّج Anti-Aliasing علي أي اكساء شفاف أو شبه شفاف ، لأن العملية تُكوّن ألوانا وسطية بطريقة آلية ولا تلقي بالا بكون الالوان شفافة أو شبه شفافة ، وفي هذا عيب كبير ، فتطبيق العملية علي النقاط الشفافة (التي من المفترض حذفها) يشوه منظر الاكساء فورا ، حيث تتكون الوانا وسطيّة جديدة غير شفافة تهدم من فكرة عمل الاكساء الشفاف تماما .

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

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

أسئلة الحلقة :

س1: ما سبب انخفاض الأداء في المشاهد التي تحتوي علي انفجارات كثيرة ؟

س2: ما بين توسيع(تكبير) للاكساءات ، وترشيح للاكساءات ، و استخدام اكساءات شبه شفافة .. في رأيك أي من هذه العمليات هو الأثقل علي البطاقة الرسوميّة ؟

س3 : هل لاحظت تكرار استخدام الألوان الوسطية علي طول هذه السلسلة ؟ اذكر التقنيات التي تستخدم هذه الألوان في عملها ..
____________________________________

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