التَقنيات الرُسوميّة (الجُزء 6) : الاكساءات الشفّافة Transparent (Alpha) Textures

[أحمد فرحات]

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-15.jpgحلقة اليوم ستكون آخر حلقة تتحدث عن الاكساءات ، وكعادة الحلقات الختامية ، تكون النهاية بأكبر الأحداث وأكثرها غرابة وشذوذا عن القاعدة ،وموضوع اليوم هو تأكيد لهذه العادة ، فالاكساءات الشفافة هي أكبر خدعة في تاريخ التقنيات الرسومية علي الاطلاق ،الذين يتمتّعون منكم بذاكرة جيدة ، سوف يتذكرون كيف أن الاكساءات نفسها هي خدعة لونية لتقليل عدد المضلّعات ( راجع الجزء 4 ) ، ما الذي يجعل خدعة الاكساءات الشفافة أكثر تميزا اذن ؟الذي يميزها هو أنها تستخدم نمطا تقنيا ثابتا لترسم لنا عدد كبيرا للغاية من الأشكال ثلاثية الأبعاد في الألعاب ، والنمط ببساطة هو استخدام أربعة رؤوس وصورة اكساء واحدة فقط .

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

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

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-01.png
صورة اكساء بدائية ، تظهر تجمّعا من الحشائش الخضراء ، ومعظم مساحة الصورة هي لون أصفر خال من أية تفاصيل ،نحتاج لوضع هذه الصورة علي هذه الصورة ، يحيث يتداخلان مع بعضهما :

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-02.png
صورة بدائية أخري لمجموعة من المباني.

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-03.png
تم دمج الصورتين معا ، ونلاحظ هنا أن صورة الاكساء غطّت ملامح صورة المباني،في الصورة السابقة ، احتلّت نقاط صورة الحشائش جزءا من صورة المباني ، وقام الحاسوب (البطاقة الرسوميّة) باستبدال نقاط من صورة المباني بنقاط من صورة الحشائش ليصبح الاثنان صورة واحدة ،لكن هذه النتيجة ليست بنتيجة احترافية ، فعندما نرغب حقا في دمج الصورتين ، فاننا نعني بذلك أن ندمج شكل الحشائش مع شكل المباني بحيث تظهر الأشكال وكأنها جزء من صورة واحدة أصلية ، دون أن يطغي احد الأشكال علي الآخر ، ودون أن يحدث نوع من التشويه ،والحل يكون باعتبار الأجزاء الزائدة في صورة الحشائش وكأنها أجزاء شفافة ، يمكن الاستغناء عنها (حذفها) .. والأجزاء الزائدة في صورة الحشائش هي الخلفية الصفراء بالطبع.

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-04.png
سوف يتم اعتبار كل النقاط الصفراء نقاطا شفافة بنسبة 100% ، أي تظهر ما خلفها من الألوان،عندما يرغب الحاسوب في دمج الصورتين ، فانه يقوم تلقائيا بحذف أي نقطة موصوفة بأنها شفافة ، وفي لغة الرسوميات يطلق علي النقاط الشفافة اسم النقاط الأوليّة Alpha ، لأنها تُحذف في أول فرصة ، ويمكن الاستغناء عنها تماما .

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-05.png
الفارق واضح ، تم حذف النقاط الشفافة ، وتم دمج الصورتين بحيث تظهر الحشائش وكأنها موجودة أمام المباني ، وتظهر المباني من خلفها محجوبة جزئيا .. والصورة كلها تبدو كما لو التقطتها آلة تصوير موضوعة أمام حشائش ومن خلفها مجموعة من المباني ،يُطلق علي أي اكساء يحوي نقاطا أولية (موصوفة بأنها شفافة ) اسم الاكساءات الشفافة أو Alpha/Transparent Textures .

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-06.gif
صورة توضيحية توضح الفارق بين طرق دمج الصورتين ، باستخدام النقاط الأولية وبدون استخدامها .. لاحظ الفارق،الآن حان وقت استغلال هذه الحقيقة في تنفيذ اكبر عملية خداع وتوفير لعدد الرؤوس علي الاطلاق ،والتوفير هذه المرة سيكون مع أكثر الأجسام التي تحتاج الي عدد كبير من المضلعات ، وهي الحشائش ، وأوراق الأشجار وأغصانها.

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-07.jpg
تحتاج أوراق الشجر والحشائش الي عدد كبير من الرؤوس لرسمها من كل الجوانب ، و ذلك لكثرة ما بها من منحنيات و تفاصيل متشابكة .

[أحمد فرحات]

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-08.pnghttp://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-09.png
الي اليمين ورقة شجر ، والي اليسار نفس الورقة مع توضيح لعدد رؤوس التحكم Vertices بها ،في الصورة أعلاه لن يقل عدد الرؤوس في ورقة الشجر عن 60 رأسا ، و عن 500 رأس للحشائش ، وهو عدد مخيف ، وخصوصا اذا فكرنا في المواقف التي سنحتاج فيها الي رسم حقل كامل من هذه الحشائش ، الأمر الذي يُعد انتحارا رسوميّا محققا ،لكن الاكساءات الشفافة تأتي لتنقذ الموقف ، حيث سنستخدم صورة اكساء لمجموعة من الحشائش ، مثل هذه مثلا :

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-10.png
صورة اكساء بألوان عادية لورقة الشجرة .. الاكساء يحوي مناطق شفافة ، وهي الأجزاء باللون الأحمر ،سوف نحتاج الي استخدام شكل لنكسو به هذه الصورة ، والشكل الذي سنستخدمه هو أتفه وابسط شكل يمكن رسمه في أي لعبة ، وهو شكل المربع المسطّح،ولأن الاكساء المستخدم هو اكساء شفاف ، يظهر هذا المربع وكأنه ورقة شجر عادية فقط ، بدون الأجزء الحمراء ، حيث يتم حذفها ، فتظهر ورقة الشجرة وكأنها جسم مستقل بذاته ، لكن بأربعة رؤوس فقط (بدلا من 50 رأس ) .
صورة اكساء بألوان عادية لورقة الشجرة .. الاكساء يحوي مناطق شفافة ، وهي الأجزاء باللون الأحمر ،سوف نحتاج الي استخدام شكل لنكسو به هذه الصورة ، والشكل الذي سنستخدمه هو أتفه وابسط شكل يمكن رسمه في أي لعبة ، وهو شكل المربع المسطّح،ولأن الاكساء المستخدم هو اكساء شفاف ، يظهر هذا المربع وكأنه ورقة شجر عادية فقط ، بدون الأجزء الحمراء ، حيث يتم حذفها ، فتظهر ورقة الشجرة وكأنها جسم مستقل بذاته ، لكن بأربعة رؤوس فقط (بدلا من 50 رأس ) .

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-11.png
المربع المسطح ذو الأربعة رؤوس ، وتظهر بداخله الورقة بدون الأجزاء الحمراء الشفافة ،وتطبّق هذه الطريقة علي كل الحشائش والأعشاب وأوراق الشجر في كل الألعاب لتوفير عدد مخيف من الرؤوس .

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-12.jpg

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

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-13.jpg

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

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-14.jpg
بعد حذف الأجزاء الشفافة من هذه الاكساءات ، تظهر الحشائش وكأنها أشكال مستقلة بذاتها في عمق الصحراء ،يعيب هذه الطريقة أن الاكساءات تكون مُسطّحة و خالية من العمق ، فاذا نظر اليها اللاعب من منظور جانبي ، فانه يكشف حقيقتها علي الفور .. حيث تظهر بدون عمق أو تجسيم .

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-15.jpg

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

[أحمد فرحات]

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-16.jpg

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

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-17.jpg

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

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-18.gif
مقارنة متحركة بين الثلاثة صور,يحتال المصممون علي هذا اما باستخدام أشكال أخري غير المربع المسطح ، (مثل اسطوانة مثلا ، أو مستطيل منثني علي نفسه ) ، واما باستخدام عدد كبير من المربعات المسطحة لكل شكل بحيث يُخصص مربع واحد لكل منظور .


http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-19.jpghttp://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-20.jpg
الي اليمين ، صورة لمجموعة من الأزهار من لعبة Just Cause 2 ، وغني عن الذكر أنها اكساءات شفافة بالطبع .. الي اليسار ، منظر الأزهار من المنظور العلوي ، نلاحظ أنها عبارة عن مربعين متعامدين علي بعضهما علي شكل علامة "+" ، وذلك لتغطية المناظير الجانبية كلها ،تُطبّق طريقة الاكساءات الشفافة أيضا علي الأسلاك الشائكة ، والأسوار السكليّة ، مثل هذه الصورة مثلا :

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-21.jpg

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

[أحمد فرحات]

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-22.jpg
السور في الحقيقة ما هو الا اكساء شفاف ،لا يقتصر دور الاكساءات الشفافة علي هذا فقط ، وانما يمتد أيضا الي الأجسام الشبه شفافة .. مثل الزجاج مثلا ، والضباب ، والماء.

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-24.pnghttp://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-23.png

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

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-25.png
تم دمج الصورتين معا والمستطيل الأصفر يحجب الجزء الأسفل من المربع الأخضر تماما،سنفترض أننا نرغب في جعل هذا المستطيل الأصفر كأنه لوح زجاجي شبه شفاف ، بحيث يظهر من تحته حرفL,الحل هنا سيكون بوصف كل نقاط المستطيل الأصفر بأنها شفافة ، ولكن ليس بدرجة 100% ، وانما بدرجة 50% فقط ،درجة 50% تعني أنني لا أرغب في حذف نقاط المستطيل الأصفر بشكل كُلّي ، ولا حذف نقاط المربع الأخضر ، ولكن الابقاء عليهما معا ،كيف يمكن الابقاء علي لونين مختلفين يحتلّان مساحة مكانيّة واحدة ؟نعم ! تخمينكم صحيح انها حبييبة الملايين انها الألوان الوسطيّة اللعينة.

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-26.png

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

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-27.gif

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

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-28.jpg

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

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-29.jpg

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

http://www.arabhardware.net/images/stories/Articles/November/transparent-textures/27112010-30.jpg
الماء كذلك ،كل هذه الأجسام هي اكساءات شبه شفافة ، يتم فيها استخدام ألوان وسطية بحيث تعطي الايحاء بظهور الأجسام الأخري خلف الجسم شبه الشفاف (جثة غارقة تحت الماء ، خشب يخترق وسط النار ، شبح يظهر وسط الضباب .. الخ ) ،المُخضرمون منكم يعرفون أن عملية الألوان الوسطيّة تستهلك طاقة حسابية كبيرة من البطاقة الرسومية ، لهذا يقل أداء الألعاب في المشاهد التي تحتوي علي كمّيات كبيرة من الدخان أو الضباب أو النيران أو الانفجارات أو حتي الماء!

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

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