الشبكة العربية لمطوري الألعاب

خبير مدير وسام البهنسي مشاركة 1

السلام عليكم،
 
قريباً سنقوم بطرح مهمة برمجة بعض المظللات في اللعبة. المظللات المطلوبة ستكون بسيطة إن شاء الله، لكني أحببتُ أن أنوه عن المهمة من الآن كي تحصلوا على فرصة للاطلاع على مراجع في تعلم المظللات في XNA، أو طرح أسئلة في الشبكة لتعلمها.
 
مبدئياً، نستطيع استخدام أداة RenderMonkey من شركة AMD لبناء المظللات وتطويرها. البعض في هذه الشبكة لهم خبرة سابقة في هذا البرنامج، وأدعو كل من يودّ الدخول في هذا المجال إلى المبادرة الآن، فهي فرصة نادرة.
 
كتمرين أولي، نودّ إنشاء مظلل يقوم بتوليد شبكة على أي مسطح. مثل هذا يعني:
 




لاحقاً، سنطور نفس المظلل ليعطينا شيئاً مشابهاً للآتي:
 





من لها؟ ☺

وسام البهنسي
مبرمج في إنفيديا وإنفريمز

محترف  انس مشاركة 2

لا اعرف من المظللات الا اسمها و فكرة بسيطة عن فائدتها، فهل رغم ذلك يمكنني المشاركة ؟

خبير  أحمد عزالدين مشاركة 3

السلام عليكم

سأحاول أنا أيضاً ، ان لم يكن هناك مانع
وأعتقد أنك أخي أنس قد تحاول أيضاً ، فالهدف أن نتعلم ونحاول أن نستكشف ما لا نعرفه 😄

أحمد عزالدين
طالب دراسات عليا
جامعة كالجري

خبير مدير وسام البهنسي مشاركة 4

في 26/رمضان/1431 08:05 ص، قال انس بهدوء وتؤدة:

لا اعرف من المظللات الا اسمها و فكرة بسيطة عن فائدتها، فهل رغم ذلك يمكنني المشاركة ؟

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



في 26/رمضان/1431 08:12 ص، عقد ahmed ezz حاجبيه بتفكير وقال:

سأحاول أنا أيضاً ، ان لم يكن هناك مانع

ممتاز! المظلل المطلوب (مظلل الشبكة) يجب أن يكون قادراً على توليد شبكة على سطح المجسم اعتماداً على إحداثيات الإكساء المضمنة فيه (UV). لكن كمرحلة أولى، تستطيع محاولة إنشاء المظلل ليعتمد فقط على بيانات إحداثيات الموقع (Position) ضمن مجسم مسطح (مربع مثلاً). 
تنبيه: لا نريد للمظلل أن يعتمد على صور، وإنما يحسب الشبكة حسابياً.

وسام البهنسي
مبرمج في إنفيديا وإنفريمز

خبير  algeria مشاركة 5

السلام عليكم ورحمة الله
إخواني من ينجز العمل نرجوا أن يشرح لنا المبدأ المستعمل
لمحاكات ذلك الشكل

الجزائر قلبي وغزة نبضه

خبير  أحمد عزالدين مشاركة 6

السلام عليكم

أود فقط التأكد من فهمي للمطلوب
حيث أن تفكيري المبدئي عن المطلوب أنه سنكتب مظلل يستقبل مدخلات shader input تمثل على الاقل احداثي اماكن النقاط vertex position وكذلك تمثل ال tex coord
والمطلوب ببساطة أن يقوم اجراء المظلل بالتلاعب في قيمة مدخلات ال tex coord وذلك ليخرجها بشكل يظهر فيه الاكساء وكأنه شبكة grid

- يعني ببساطة أننا سنقوم بعمل mapping من قيم ال tex coord المدخلة من المدى 1:0 لتصبح في المدى GridWidth  :  0 وذلك بالنسبة لقيم x
والامر مشابه كذلك في حالة قيم ال y

ما حيرني قليلاً هو هل يمكن كتابة مظلل يقوم بتوليد هذه الشبكة دون استلام قيم tex coord كمدخلات للمظلل؟

أحمد عزالدين
طالب دراسات عليا
جامعة كالجري

خبير  أحمد عزالدين مشاركة 7

السلام عليكم

تم تنفيذ المطلوب وقمت بارفاق ملف المظلل والذي يمكن فتحه ببرنامج render monkey
وهذه صورة للنتيجة المطلوبة




سأقوم الان بشرح بسيط لما قمت به:
اولا: لدي ملف يمثل مجسم لمكعب ومعه اكساء بسيط يمثل خلية واحدة من خلايا الشبكة
عند فتح برنامج RM ، قم بانشاء مشروع جديد
ومن ثم قم بالضغط بالزر الايمن بالماوس على الاختيار Effect Workspace والموجود في نافذة Workspace ستظهر لك قائمة
قم باختيار الامر Add Default Effect ثم DirectX ثم Textured
سيقوم البرنامج بتوليد مشروع مبدئي يحتوي على كود مظلل يقوم باكساء مجسم افتراضي

ثانياً: قم بتغيير المجسم ليصبح مجسم مكعب ، وذلك لرؤية تأثير مظلل الشبكة بشكل أفضل
- كود المظلل بسيط جدا ، حيث قمت بتعريف متغيرين يمثلان عدد خلايا الشبكة أفقياً ورأسياً
والان ولاننا نعرف أن احداثي قيم الاكساء تكون في المدى 0 : 1
فقمت بضرب هذه القيم لكل احداثيات الاكساء المدخلة وذلك ليكون المدى 0 : GridWidth أفقياً ويكون المدى 0 : GridHeight رأسياً
ولاننا نعرف انه ان زادت قيم المدى عن الـ 1 فان DirectX وعن طريق قيم بعض الخصائص التي تحددي طريقة تعامله مع قيم الاكساء التي تقع خارج النطاق
الافتراضي ، سيقوم مثلاً بتكرار الاكساء - كما في حالتنا

التعديل الذي أضفته في كود المظلل هو في السطرين الاتيين

Output.TexCoord.x = Input.TexCoord.x * GridWidth;
Output.TexCoord.y = Input.TexCoord.y * GridHeight;

ملاحظة: اذا لم يظهر المجسم بشكل واضح ، اضغط بالزر الايمن في نافذة المعاينة preview واختار Fit Model To Screen
كما يمكنك تعديل خصائص الكاميرا من نفس القائمة اذا أردت

أحمد عزالدين
طالب دراسات عليا
جامعة كالجري

خبير مدير وسام البهنسي مشاركة 8

وفي 29/رمضان/1431 04:50 ص، ظهر شبح ابتسامة على وجه ahmed ezz وهو يقول:

تم تنفيذ المطلوب وقمت بارفاق ملف المظلل والذي يمكن فتحه ببرنامج render monkey

عمل جيد كخطوة إولى، لكن...

 

أما في 29/رمضان/1431 04:50 ص، فقد تنهد ahmed ezz بارتياح وهو يرد:

اولا: لدي ملف يمثل مجسم لمكعب ومعه اكساء بسيط يمثل خلية واحدة من خلايا الشبكة
 

وقد سبق أن نبهتُ بقولي:


في 26/رمضان/1431 11:43 ص، غمغم وسام البهنسي باستغراب قائلاً:

تنبيه: لا نريد للمظلل أن يعتمد على صور، وإنما يحسب الشبكة حسابياً.

حاول توليد الشبكة دون الاعتماد على الإكساء، فقط على إحداثيات الإكساء.

وسام البهنسي
مبرمج في إنفيديا وإنفريمز

خبير  أحمد عزالدين مشاركة 9

السلام عليكم

هذه محاولتي لتوليد الشبكة بالاعتماد فقط على احداثيات الاكساء
- للاسف هناك مشكلة أن خطوط الشبكة تظهر في اتجاه واحد فقط ، ولا أعرف ما المشكلة
- أيضاً الكود يحتاج الى كارت شاشة يستطيع تنفيذ المظللات بدءاً من الاصدارة الثالثة على الاقل
ربما يمكننا اعادة تنظيم الكود ليعتمد على عدد أقل من العمليات الرياضية والأوامر المستخدمة ، حيث أنني لاحظت أن المظللات من الجيل الثاني تدعم بحد أقصي عدد 64 أمر فقط
- الكود لما جربته منفصلاً في برنامج سي شارب ليقوم بتوليد الشبكة على نافذة البرنامج Windows Form ، كان يعمل بشكل صحيح
والان ومن المفترض أن يعمل أيضاً كمظلل ، مع بعض الفروق البسيطة
برجاء فحص اخر تعديلاتي وتوجيهي نحو المشكلة بشكل أوضح ، وجزاكم الله خيراً

أحمد عزالدين
طالب دراسات عليا
جامعة كالجري

خبير مدير وسام البهنسي مشاركة 10

وعليكم السلام أحمد،
 
لقد اقتربت أكثر وأكثر من الحل! لكن على رسلك... المظلل ليس بالتعقيد الشديد الذي يتطلب منه أن يستهلك أكثر من 64 تعليمة أو الجيل الثالث من المظللات. فهو بسيط للغاية...
 
تعال ننظر إلى حلك من منظور خوارزمي. فلنفرض أن المجسم عبارة عن سطح مربع على الأرض:
 
1- مظلل البكسلات يستقبل إحداثيات الإكساء، والتي تتراوح 0,0 إلى 1,1 عند أطراف السطح.
 
2- تقوم بتحديد عدد خلايا الشبكة أفقياً ورأسياً. في حالتك: 5×10.
 
3- تقوم بتقسيم المجال الأفقي [0,1] إلى 5 أقسام متساوية، والمجال الرأسي (أيضاً [0,1]) إلى 10 أقسام متساوية.
 
4- تدخل في حلقة لتقيس البعد الأفقي بين إحداثي الإكساء الحالي للمظلل، وبين كل قسم من الأقسام الأفقية في الشبكة. إن كان البعد أصغر من حد معين، فإنك تجعل اللون أسود، وإلا يبقى أبيض.
 
5- نفس الخطوة 4، لكن على المحور الرأسي.
 
 
كما نرى، المنطق صحيح. وقد أثبت أنت ذلك عن طريق تجريبه في برنامج اعتيادي. لكننا هنا نعمل في مظلل، وهذا يفرض علينا بعض القيود. أهمها أن المظللات تكره الحلقات التكرارية، فابتعد عنها قدر الإمكان. ولعل هذا هو السبب الذي يضطرك للجيل الثالث من المظللات، إذ أن الجيل الثاني إمكانياته محدودة جداً فيما يخص الحلقات.
 
سأعطيك بعض التلميحات علها تساعدك:
 
* الخوارزمية بشكل عام ممتازة، لكنها تحتاج لتعديل لنتخلص من الحلقات فيها.
 
* معامل "باقي القسمة" مفيد جداً.
 
* فكر بتوابع رياضية تعطيك قيماً دورية... حسناً، للتقريب أكثر، تابع الجيب ☺   فكر بكيفية الاستفادة منه أو من طريقة تصرفه...
 
 
ونحن معك إن استعصت عليك الأمور لا سمح الله 😄

وسام البهنسي
مبرمج في إنفيديا وإنفريمز