OpenGL .. الدرس رقم 4 الرسم ثلاثي الأبعاد في OpenGL

الناقل : elmasry | الكاتب الأصلى : AlDeaj | المصدر : www.arabteam2000-forum.com

الدرس السابق
OpenGL .. الدرس رقم 3


تعريف بالدرس ..


Posted Image

لقد قمنا بإنشاء كل من المثلث والمربع وقمنا بتلوينهما وتحريكهما .. الآن سوف نتعلم كيف نجعل كل منهما ثلاثي الابعاد .. سوف نقوم بتحويل المثلث الى شكل هرمي ذو الوان متعددة وممتزجة .. بينما سوف نقوم بتحويل المربع الى مكعب يحتوي كل وجه منه على لون معين .. سوف نضيف الى المثلث ثلاثة اوجه ( اليمين – اليسار والخلف ) .. بينما سنضيف الى المربع 5 اوجه (اليسار – اليمين – الخلف – فوق – تحت )


الدرس ..


 

int DrawGLScene(GLvoid)
{
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
glTranslatef(-1.5f,0.0f,-6.0f);
glRotatef(rtri,0.0f,1.0f,0.0f);
glBegin(GL_TRIANGLES);


الكود السابق موجود في الدرس السابق دون تغيير وهو يقوم بانشاء المثلث ورسمه في الجهة اليسرى من الشاشة وتحريكه حول المحور Y 

glColor3f(1.0f,0.0f,0.0f);
glVertex3f( 0.0f, 1.0f, 0.0f);
glColor3f(0.0f,1.0f,0.0f);
glVertex3f(-1.0f,-1.0f, 1.0f);
glColor3f(0.0f,0.0f,1.0f);
glVertex3f( 1.0f,-1.0f, 1.0f);


في هذا الكود قمنا برسم الوجه الامامي ( والذي هو عبارة عن مثلث ) للشكل الهرمي والذي يتكون من 4 اوجه .. بالطبع جميع تلك الاوجه المكونة للشكل الهرمي تتحد عند نقطه واحد وهي النقطه العليا لكل وجه من الاوجه الاربعة بينما يختلف كل منهم في النقطه السفلى اليمنى واليسرى .. طريقه شرح مكان المثلث والوانه واضحه ولمزيد من التفصيل يمكنك مراجعه الدروس السابقة لفهم مايجري .
الوجه الاول والذي تم رسمه الآن يحتوي على ثلاث نقاط مكونة مثلث والذي بدوره يكون الواجهة الأمامية للشكل الهرمي الذي سيتم رسمه في النهاية .
النقاط الثلاثة المكونة للمثلث تم وضع لون لكل نقطة منها .. فالنقطة العليا احتوت على اللون الأحمر والنقطه السفلى اليسرى احتوت على اللون الأخضر والنقطه السفلى اليمنى احتوت على اللون الأزرق 

glColor3f(1.0f,0.0f,0.0f);
glVertex3f( 0.0f, 1.0f, 0.0f);
glColor3f(0.0f,0.0f,1.0f);
glVertex3f( 1.0f,-1.0f, 1.0f);
glColor3f(0.0f,1.0f,0.0f);
glVertex3f( 1.0f,-1.0f, -1.0f);


الآن سوف نقوم برسم الوجه الأيمن للشكل الهرمي ( والذي سيكون عبارة عن مثلث طبعا ) .. كما قلنا سابقا فإن جميع الاوجه تتحد عند النقطه العليا وبما اننا وضعنا النقطه العليا في الكود الأول باللون الاحمر فسوف نقوم هنا بوضعها باللون الاحمر أيضا .
بما اننا نريد رسم الشكل الهرمي وهو عبارة عن شكل ثلاثي الأبعاد فيجب ان نعلم اننا سوف نستخدم العمق .. وهو البارامتر الثالث بعد glVertex3f وسوف يكون للعمق الدور الأكبر في تحديد الأشكال ثلاثية الأبعاد ورسمها .. نعود الآن للوجه الثاني للشكل الهرمي
يتحد الوجه الأيمن مع الوجه الأمامي للشكل الهرمي في كل من
1- النقطه العليا
2- النقطه السفلى اليمنى ( للوجه الأمامي ) والنقطه السفلة اليسرى ( للوجه الايمن) .
( يجب تطبيق الدرس ورؤيته لفهم الفكرة بصورة اوضح )
لذلك نرى ان قيمة المتغيرات في النقطه العليا للوجه الامامي = قيمة المتغيرات في النقطه العليا للوجه الايمن
و قيمة المتغيرات للنقطة السفلى اليمنى للوجه الأمامي = قيمة المتغيرات للنقطه السفلى اليسرى للوجه الايمن .

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

النقطه الثالثه للمثلث المكون للوجه الأيمن للشكل الهرمي سوف تكون قيمة العمق فيها تساوي -1 وهي اول نقطه في هذا الدرس تأخذ تلك القيمة .. اي انها ستكون بعيدة عن الشاشة بينما النقط الاخرى قريبه من الشاشة

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

 
glColor3f(1.0f,0.0f,0.0f);
glVertex3f( 0.0f, 1.0f, 0.0f);
glColor3f(0.0f,1.0f,0.0f);
glVertex3f( 1.0f,-1.0f, -1.0f);
glColor3f(0.0f,0.0f,1.0f);
glVertex3f(-1.0f,-1.0f, -1.0f);


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

النقطه الثالثه في عمق = -1 كما هو الحال مع النقطه اليسرى السفلى( وهذا شيء طبيعي كون الوجه الخلفي يكون في داخل عمق الشاشة ليعطي الشكل ثلاثي الابعاد ) وتكون تلك النقطه ( والتي تم وضع اللون الازرق لها ) مع النقطة العليا والنقطه اليسرى السفلى المثلث الثالث والذي يكون الوجه الخلقي للشكل الهرمي .

 
glColor3f(1.0f,0.0f,0.0f);
glVertex3f( 0.0f, 1.0f, 0.0f);
glColor3f(0.0f,0.0f,1.0f);
glVertex3f(-1.0f,-1.0f,-1.0f);
glColor3f(0.0f,1.0f,0.0f);
glVertex3f(-1.0f,-1.0f, 1.0f);
glEnd();


هذا الكود يقوم بوضع الوجه الايسر للشكل الهرمي والذي فيه النقطه العليا تحتوي على اللون الاحمر وتتشارك مع باقي الاوجه في نفس النفطه والقيم .. النقطه السفلى اليسرى تحتوي على اللون الازرق وتتشارك مع النقطه اليمنى السفلى للوجه الخلفي .. النقطه السفلى اليمنى تحتوي على اللون الاخضر وتتشارك مع النقطه السفلى اليسرى للوجه الامامي
glEnd(); يقول للبرنامج باننا انتهينا من رسم الشكل الهرمي 

glLoadIdentity();
glTranslatef(1.5f,0.0f,-7.0f);
glRotatef(rquad,1.0f,1.0f,1.0f);
glBegin(GL_QUADS);


الآن نقوم برسم المكعب والذي يحتوي على 6 مربعات .. سوف نقوم برسم نقاط كل مربع بعكس اتجاه عقارب الساعة .. اي اننا سوف نبدأ بالنقطه العليا اليمنى ثم النقطه العليا اليسرى ثم النقطه السفلى اليسرى واخيرا النقطه السفلى اليمنى .. عند رسم الوجه الخلفي للمكعب قد تعتقد باننا نرسم نقاطه ( مع ) عقارب الساعة ولكن اثناء رسمه تخيل باننا نقف خلفه فيصبح كأننا نرسم الوجه الأمامي للمكعب وبذلك تكون النقاط عكس عقارب الساعة .

سوف نقوم الآن برسم المكعب بعمق مقداره -7 كما هو واضح من السطر الثاني من الكود السابق حتى يكون حجم المكعب قريبا من حجم المثلث اثناء عرضه على الشاشة .. بامكانك تغيير تلك القيمه ورؤية ماقد يحصل .

السطر الثالث من الكود السابق يخبر برنامجنا بان المكعب سوف يتحرك على محاوره الثلاثة ( X , Y , Z )

السطر الرابع يخبر البرنامج باننا سوف نقوم بانشاء المكعب 

glColor3f(0.0f,1.0f,0.0f);
glVertex3f( 1.0f, 1.0f,-1.0f);
glVertex3f(-1.0f, 1.0f,-1.0f);
glVertex3f(-1.0f, 1.0f, 1.0f);
glVertex3f( 1.0f, 1.0f, 1.0f);


الآن سوف نقوم بانشاء السطح الاعلى للمكعب وبما اننا سوف نرسم السطح الاعلى فسوف تكون قيمة المحور Y تساوي 1 في جميع نقاط السطح الاعلى .. نقوم بوضع النقطه العليا اليمنى للمربع (والذي يكون الوجه الاعلى للمكعب) و التي قيمها موجوده في السطر الثاني من الكود السابق .. كما نرى باننا اتجهنا الى الجهة اليمنى بمقدار 1 وهي قيمة المحور X .. قيمة المحور Y تساوي 1 كما اتفقنا من قبل بسبب اننا نرسم الوجه الاعلى للمكعب .. قيمة المحور Z تساوي – 1 وتعني اننا سوف نضع تلك النقطه في عمق الى داخل الشاشة مقداره 1

النقطه الثانيه تتحرك الى اليسار بمقدار 1 وبنفس العمق ( وهي النقطه العليا اليسرى )

النقطه الثالثه هي النقطه السفلى اليسرى وتكون الى اليسار بمقدار 1 ولكن العمق يكون الى الخارج هذه المره وليس الداخل بمقدار 1

النقطه الرابعة هي النقطه السفلى اليمنى وتكون الى اليمين بمقدار 1 وبنفس عمق النقطه اليسرى السفلى
والسطر الاول من الكود السابق يوضح باننا قمنا بوضع اللون الاخضر للوجه العلوي
الآن تم انشاء السطح الاعلى للمكعب 

glColor3f(1.0f,0.5f,0.0f);
glVertex3f( 1.0f,-1.0f, 1.0f);
glVertex3f(-1.0f,-1.0f, 1.0f);
glVertex3f(-1.0f,-1.0f,-1.0f);
glVertex3f( 1.0f,-1.0f,-1.0f);


الكود السابق يبين انشاء السطح الاسفل للمكعب
السطر الاول يبين باننا اخترنا اللون البرتقالي للسطح السفلي للمكعب
النقطه العليا اليمنى للوجه السفلي للمكعب يعبر عنها السطر الثاني من الكود ( مع ملاحظه بان العمق يساوي 1 وليس -1 لانها قريبه من الشاشه وليست بعيده بعكس النقطه العليا اليمنى للوجه الاعلى للمكعب )

السطر الثالث يعبر عن النقطه السفلى اليسرى والسطر الرابع يعبر عن النقطه السفلى اليمنى 

glColor3f(1.0f,0.0f,0.0f);
glVertex3f( 1.0f, 1.0f, 1.0f);
glVertex3f(-1.0f, 1.0f, 1.0f);
glVertex3f(-1.0f,-1.0f, 1.0f);
glVertex3f( 1.0f,-1.0f, 1.0f);


الكود السابق يبين الوجه الامامي للمكعب باللون الأحمر وبعمق 1 الى خارج الشاشة 

glColor3f(1.0f,1.0f,0.0f);
glVertex3f( 1.0f,-1.0f,-1.0f);
glVertex3f(-1.0f,-1.0f,-1.0f);
glVertex3f(-1.0f, 1.0f,-1.0f);
glVertex3f( 1.0f, 1.0f,-1.0f);


الكود السابق يبين الوجه الخلقي للمكعب باللون الأصفر وبعمق 1 إلى داخل الشاشة 

glColor3f(0.0f,0.0f,1.0f);
glVertex3f(-1.0f, 1.0f, 1.0f);
glVertex3f(-1.0f, 1.0f,-1.0f);
glVertex3f(-1.0f,-1.0f,-1.0f);
glVertex3f(-1.0f,-1.0f, 1.0f);


الكود السابق يبين الوجه الايسر للمكعب باللون الأزرق ونلاحظ جميع القيم للبارامتر X تساوي 1- لاننا نقوم برسم الوجه الايسر في الجزء الايسر من منتصف المكعب 

glColor3f(1.0f,0.0f,1.0f);
glVertex3f( 1.0f, 1.0f,-1.0f);
glVertex3f( 1.0f, 1.0f, 1.0f);
glVertex3f( 1.0f,-1.0f, 1.0f);
glVertex3f( 1.0f,-1.0f,-1.0f);
glEnd();


الكود السابق يبين الوجه الايمن للمكعب باللون البنفسجي ونلاحظ جميع قيم X تساوي 1 لاننا نقوم برسم الوجه الايمن في الجزء الايمن من منتصف المكعب

الكود المصدري للدرس

الدرس الأصلي لمن أراد الإطلاع

انتهى الدرس
:)

رابط الدرس التالي :
http://www.arabteam2...showtopic=48419

اسألكم الدعاء


علي الدعيج
AlDeaj@Gmail.Com