حلقة اليوم ستكون آخر حلقة تتحدث عن الاكساءات ، وكعادة الحلقات الختامية ، تكون النهاية بأكبر الأحداث وأكثرها غرابة وشذوذا عن القاعدة .
وموضوع اليوم هو تأكيد لهذه العادة ، فالاكساءات الشفافة هي أكبر خدعة في تاريخ التقنيات الرسومية علي الاطلاق .
الذين يتمتّعون منكم بذاكرة جيدة ، سوف يتذكرون كيف أن الاكساءات نفسها هي خدعة لونية لتقليل عدد المضلّعات ( راجع الجزء 4 ) ، ما الذي يجعل خدعة الاكساءات الشفافة أكثر تميزا اذن ؟
الذي يميزها هو أنها تستخدم نمطا تقنيا ثابتا لترسم لنا عدد كبيرا للغاية من الأشكال ثلاثية الأبعاد في الألعاب ، والنمط ببساطة هو استخدام أربعة رؤوس وصورة اكساء واحدة فقط .
أما الأشكال التي يتم رسمها بواسطتها فهي :
1-أوراق الأشجار والنباتات ، الأسلاك الشائكة ، الأسوار السلكيّة ..
2-النيران ، ألسنة اللهب ، الانفجارات ، الشرار ، الدخان ، الضباب ..
3-أشعة الليزر ، أشعة الطاقة ، التعاويذ السحرية ، العواصف الترابية ، الأعاصير ..
4-قطرات المطر ، شلالات المياه ، أمواج البحر ، السحاب ، الزجاج ..
كل هذه الأجسام والمؤثرات المختلفة الشكل والمتباينة الصفات تستخدم نفس التقنية الرسوميّة ؟ (أربعة رؤوس واكساء واحد) كيف هذا ؟ وبأي منطق؟
ولن أقول لك الا أن السر كله يكمن في براعة استخدام الاكساءات الشفّافة !
____________________________________
والاكساءات الشفافة هي مصطلح يعبر بدقة عن طبيعة هذه الاكساءات ، فهي اكساءات تتميز بالشفافية المطلقة ، أي تُظهر ما خلفها ، وهذه الخاصية الفريدة سوف تمنح تلك الاكساءات المرونة اللازمة لرسم أشكال ومؤثرات متنوعة .
ولنبدأ بمفهوم الشفافية ..
https://img816.imageshack.us/img816/452/46579069.png
صورة اكساء بدائية ، تظهر تجمّعا من الحشائش الخضراء ، ومعظم مساحة الصورة هي لون أصفر خال من أية تفاصيل .
نحتاج لوضع هذه الصورة علي هذه الصورة ، يحيث يتداخلان مع بعضهما :
https://img265.imageshack.us/img265/305/81423842.png
صورة بدائية أخري لمجموعة من المباني ..
https://img203.imageshack.us/img203/9151/57777289.png
تم دمج الصورتين معا ، ونلاحظ هنا أن صورة الاكساء غطّت ملامح صورة المباني ..
في الصورة السابقة ، احتلّت نقاط صورة الحشائش جزءا من صورة المباني ، وقام الحاسوب (البطاقة الرسوميّة) باستبدال نقاط من صورة المباني بنقاط من صورة الحشائش .. ليصبح الاثنان صورة واحدة .
لكن هذه النتيجة ليست بنتيجة احترافية ، فعندما نرغب حقا في دمج الصورتين ، فاننا نعني بذلك أن ندمج شكل الحشائش مع شكل المباني بحيث تظهر الأشكال وكأنها جزء من صورة واحدة أصلية ، دون أن يطغي احد الأشكال علي الآخر ، ودون أن يحدث نوع من التشويه .
والحل يكون باعتبار الأجزاء الزائدة في صورة الحشائش وكأنها أجزاء شفافة ، يمكن الاستغناء عنها (حذفها) .. والأجزاء الزائدة في صورة الحشائش هي الخلفية الصفراء بالطبع !
https://img816.imageshack.us/img816/452/46579069.png
سوف يتم اعتبار كل النقاط الصفراء نقاطا شفافة بنسبة 100% ، أي تظهر ما خلفها من الألوان .
عندما يرغب الحاسوب في دمج الصورتين ، فانه يقوم تلقائيا بحذف أي نقطة موصوفة بأنها شفافة ، وفي لغة الرسوميات يطلق علي النقاط الشفافة اسم النقاط الأوليّة Alpha ، لأنها تُحذف في أول فرصة ، ويمكن الاستغناء عنها تماما .
https://img830.imageshack.us/img830/7826/64364504.png
الفارق واضح ، تم حذف النقاط الشفافة ، وتم دمج الصورتين بحيث تظهر الحشائش وكأنها موجودة أمام المباني ، وتظهر المباني من خلفها محجوبة جزئيا .. والصورة كلها تبدو كما لو التقطتها آلة تصوير موضوعة أمام حشائش ومن خلفها مجموعة من المباني .
يُطلق علي أي اكساء يحوي نقاطا أولية (موصوفة بأنها شفافة ) اسم الاكساءات الشفافة أو Alpha/Transparent Textures .
https://img831.imageshack.us/img831/3629/42977123.gif
صورة توضيحية توضح الفارق بين طرق دمج الصورتين ، باستخدام النقاط الأولية وبدون استخدامها .. لاحظ الفارق.
الآن حان وقت استغلال هذه الحقيقة في تنفيذ اكبر عملية خداع وتوفير لعدد الرؤوس علي الاطلاق .
والتوفير هذه المرة سيكون مع أكثر الأجسام التي تحتاج الي عدد كبير من المضلعات ، وهي الحشائش ، وأوراق الأشجار وأغصانها .
https://img59.imageshack.us/img59/30...51f72f7454.jpg
تحتاج أوراق الشجر والحشائش الي عدد كبير من الرؤوس لرسمها من كل الجوانب ، و ذلك لكثرة ما بها من منحنيات و تفاصيل متشابكة .
https://img834.imageshack.us/img834/...stexturesm.pnghttps://img59.imageshack.us/img59/66...stexturesm.png
الي اليمين ورقة شجر ، والي اليسار نفس الورقة مع توضيح لعدد رؤوس التحكم Vertices بها ..
في الصورة أعلاه لن يقل عدد الرؤوس في ورقة الشجر عن 60 رأسا ، و عن 500 رأس للحشائش ، وهو عدد مخيف ، وخصوصا اذا فكرنا في المواقف التي سنحتاج فيها الي رسم حقل كامل من هذه الحشائش ، الأمر الذي يُعد انتحارا رسوميّا محققا .
لكن الاكساءات الشفافة تأتي لتنقذ الموقف ، حيث سنستخدم صورة اكساء لمجموعة من الحشائش ، مثل هذه مثلا :
https://img832.imageshack.us/img832/...inviewport.png
صورة اكساء بألوان عادية لورقة الشجرة .. الاكساء يحوي مناطق شفافة ، وهي الأجزاء باللون الأحمر .
سوف نحتاج الي استخدام شكل لنكسو به هذه الصورة ، والشكل الذي سنستخدمه هو أتفه وابسط شكل يمكن رسمه في أي لعبة ، وهو شكل المربع المسطّح ..
ولأن الاكساء المستخدم هو اكساء شفاف ، يظهر هذا المربع وكأنه ورقة شجر عادية فقط ، بدون الأجزء الحمراء ، حيث يتم حذفها ، فتظهر ورقة الشجرة وكأنها جسم مستقل بذاته ، لكن بأربعة رؤوس فقط (بدلا من 50 رأس ) .
https://img831.imageshack.us/img831/...viewport78.png
المربع المسطح ذو الأربعة رؤوس ، وتظهر بداخله الورقة بدون الأجزاء الحمراء الشفافة ..
تٌطبّق هذه الطريقة علي كل الحشائش والأعشاب وأوراق الشجر في كل الألعاب لتوفير عدد مخيف من الرؤوس .
https://img827.imageshack.us/img827/7766/54436502.jpg
منظر لصحراء قاحلة .. ولن يضرّ المنظر بعض الحشائش المتناثرة هنا وهناك ..
https://img291.imageshack.us/img291/9876/38113529.jpg
سوف يتم استخدام اكساءات شفافة لهذه الحشائش ، ووضعها علي مربعات مسطحة من أربعة رؤوس بالطبع !
https://img843.imageshack.us/img843/3476/50393951.jpg
بعد حذف الأجزاء الشفافة من هذه الاكساءات ، تظهر الحشائش وكأنها أشكال مستقلة بذاتها في عمق الصحراء !
يعيب هذه الطريقة أن الاكساءات تكون مُسطّحة و خالية من العمق ، فاذا نظر اليها اللاعب من منظور جانبي ، فانه يكشف حقيقتها علي الفور .. حيث تظهر بدون عمق أو تجسيم .
https://img259.imageshack.us/img259/2664/86633030.jpg
صورة لاكساء شفاف من لعبة BF Bad Company 2 ..
https://img714.imageshack.us/img714/4899/81296175.jpg
صورة لنفس الاكساء من منظور جانبي مائل ، لاحظ السُمك الضئيل له ..
https://img521.imageshack.us/img521/430/16700510.jpg
صورة من منظور جانبي عمودي ، اختفي الاكساء تماما ، بسبب سمكه الضئيل للغاية والذي يكاد لا يري .
https://img683.imageshack.us/img683/5149/abcy.gif
مقارنة متحركة بين الثلاثة صور ..
يحتال المصممون علي هذا اما باستخدام أشكال أخري غير المربع المسطح ، (مثل اسطوانة مثلا ، أو مستطيل منثني علي نفسه ) ، واما باستخدام عدد كبير من المربعات المسطحة لكل شكل بحيث يُخصص مربع واحد لكل منظور .
https://img268.imageshack.us/img268/...e201009190.jpg https://img697.imageshack.us/img697/...e201009190.jpg
الي اليمين ، صورة لمجموعة من الأزهار من لعبة Just Cause 2 ، وغني عن الذكر أنها اكساءات شفافة بالطبع .. الي اليسار ، منظر الأزهار من المنظور العلوي ، نلاحظ أنها عبارة عن مربعين متعامدين علي بعضهما علي شكل علامة "+" ، وذلك لتغطية المناظير الجانبية كلها .
تُطبّق طريقة الاكساءات الشفافة أيضا علي الأسلاك الشائكة ، والأسوار السكليّة ، مثل هذه الصورة مثلا :
https://img707.imageshack.us/img707/6108/90628673.jpg
صورة من لعبة BF Bad Company 2 ، تُظهر سورا سلكيا ..
https://img830.imageshack.us/img830/...unalphafw5.jpg
السور في الحقيقة ما هو الا اكساء شفاف ..
لا يقتصر دور الاكساءات الشفافة علي هذا فقط ، وانما يمتد أيضا الي الأجسام الشبه شفافة .. مثل الزجاج مثلا ، والضباب ، والماء ..
https://img193.imageshack.us/img193/5974/10694524.png https://img683.imageshack.us/img683/441/40915349.png
صورة مربع أخضر ، في أسفله حرف L الافرنجي .. يجب دمج هذه الصورة مع صورة المستطيل الأصفر (اليسار) ..
https://img697.imageshack.us/img697/8741/27560303.png
تم دمج الصورتين معا .. والمستطيل الأصفر يحجب الجزء الأسفل من المربع الأخضر تماما ..
سنفترض أننا نرغب في جعل هذا المستطيل الأصفر كأنه لوح زجاجي
شبه شفاف ، بحيث يظهر من تحته حرفL.
الحل هنا سيكون بوصف كل نقاط المستطيل الأصفر بأنها شفافة ، ولكن ليس بدرجة 100% ، وانما بدرجة 50% فقط .
درجة 50% تعني أنني لا أرغب في حذف نقاط المستطيل الأصفر بشكل كُلّي ، ولا حذف نقاط المربع الأخضر ، ولكن الابقاء عليهما معا .
كيف يمكن الابقاء علي لونين مختلفين يحتلّان مساحة مكانيّة واحدة ؟
نعم ! تخمينكم صحيح .. انها حبييبة الملايين .. انها الألوان الوسطيّة اللعينة !
https://img529.imageshack.us/img529/3824/80897819.png
بعد استخدام الألوان الوسطيّة ، ظهر المستطيل الأصفر وكأنه جسم شفاف ، ونستطيع تمييز حرف L من خلفه .
سوف يتم استخدام لون وسطي بين الأصفر والأخضر ، وهو الأخضر الفاتح ، وبين اللون الأصفر والأحمر ، وهو اللون البرتقالي !
https://img529.imageshack.us/img529/3803/69440677.gif
مقارنة متحركة ...
سوف يتم تطبيق هذا الأسلوب علي الدخان والضباب ، وقطرات الماء و ألسنة اللهب ووهج الانفجارات واشعة الطاقة و..و.. وكل الأجسام
شبه الشفافة التي سمعت عنها أو لم تسمع عنها .
https://img40.imageshack.us/img40/9539/smoketlj.jpg
الدخان ما هو الا اكساء شبه شفاف .. يُظهر ما خلفه بشكل جزئي .. والمناطق السوداء ما هي الا مناطق شفافة بشكل كامل ..
https://img268.imageshack.us/img268/...retextures.jpg
النار ما هي الا اكساء شبه شفاف أيضا ..
https://img80.imageshack.us/img80/6976/waterwg.jpg
الماء كذلك ..
كل هذه الأجسام هي اكساءات شبه شفافة ، يتم فيها استخدام ألوان وسطية بحيث تعطي الايحاء بظهور الأجسام الأخري خلف الجسم شبه الشفاف (جثة غارقة تحت الماء ، خشب يخترق وسط النار ، شبح يظهر وسط الضباب .. الخ ) .
المُخضرمون منكم يعرفون أن عملية الألوان الوسطيّة تستهلك طاقة حسابية كبيرة من البطاقة الرسومية ، لهذا يقل أداء الألعاب في المشاهد التي تحتوي علي كمّيات كبيرة من الدخان أو الضباب أو النيران أو الانفجارات أو حتي الماء!
ليس هذا فحسب ، و لكن استخدام الكساءات الشفافة في رسم حقول واسعة من الأعشاب وأوراق الأشجار يمثل عبأ اكسائيا كبيرا علي أي بطاقة رسومية ، ولهذا يقل الأداء في هذه المشاهد ، حيث تصاب منظومة الاكساءات في البطاقة الرسومية بالاختناق تحت وطاة كل هذه الاكساءات الشفافة ، دعك من أن عملية الشفافية نفسها تستهلك طاقة حسابية اضافية حتي لو لم تتضمّن ألوانا وسطية (فهي تتطلب حذفا واستبدالا ، وهذه مجهودات حسابية اضافية ) .
تتحدد جودة الاكساءات الشفافة بالدقة التي تستخدمها ، مثل الاكساءات العادية بالضبط فاستخدام دقة مرتفعة يمكن الاكساءات الشفافة من الظهور بشكل أفضل علي دقات العرض العالية ، ويساعدها علي تجنب عملية التوسيع والتكبير Stretch ، والتي تُشوّه من منظر أي اكساء .
لا يتم تطبيق عملية ممانعة التعرّج Anti-Aliasing علي أي اكساء شفاف أو شبه شفاف ، لأن العملية تُكوّن ألوانا وسطية بطريقة آلية ولا تلقي بالا بكون الالوان شفافة أو شبه شفافة ، وفي هذا عيب كبير ، فتطبيق العملية علي النقاط الشفافة (التي من المفترض حذفها) يشوه منظر الاكساء فورا ، حيث تتكون الوانا وسطيّة جديدة غير شفافة تهدم من فكرة عمل الاكساء الشفاف تماما .
لهذا يتم استخدام طراز مُعدّل من عملية ممانعة التعرّج ، ويسمي ممانعة التعرّج الشفاف Transparency Anti-Aliasing ، ويضع هذا الطراز المعدل في حسبانه كون الألوان شفافة أم لا ، ويتم تفعيله من لوحة التحكم ببرنامج القيادة Driver .
يستهلك هذا الطراز طاقة حسابية اضافية من البطاقة الرسوميّة ، ويقلل من الأداء أكثر ، وخصوصا في المشاهد التي تحوي نقاطا لونية أوّلية كثيرة ..
أسئلة الحلقة :
س1: ما سبب انخفاض الأداء في المشاهد التي تحتوي علي انفجارات كثيرة ؟
س2: ما بين توسيع(تكبير) للاكساءات ، وترشيح للاكساءات ، و استخدام اكساءات شبه شفافة .. في رأيك أي من هذه العمليات هو الأثقل علي البطاقة الرسوميّة ؟
س3 : هل لاحظت تكرار استخدام الألوان الوسطية علي طول هذه السلسلة ؟ اذكر التقنيات التي تستخدم هذه الألوان في عملها ..
____________________________________
في الحلقة القادمة باذن الله ، سوف نترك عالم التقنيات الرسومية المباشرة (ألوان ، مضلعات ، اكساءات )، وندخل في عالم التقنيات الرسومية المعقدة والقابلة للبرمجة .. انه عالم مؤثرات الاضاءة والتظليل Shader Effects ، انه عالم الجمال و محاكاة الطبيعة ، تري هل يكون معقدا ؟ هل يكون بسيط المبدأ ؟ هل يستخدم خدعا و أساليب ملتوية لتحقيق ما يريد .. أم ينفذ الي لب المشكلة مباشرة في استقامة مثل شعاع الضوء ؟