OpenGL هي أداة برمجة ثلاثية الأبعاد قوية تستخدم لرسم مشاهد ثلاثية الأبعاد معقدة من بدائل بسيطة. ستعلمك هذه المقالة كيفية رسم مكعب بسيط يمكنك تدويره لعرضه في ثلاثة أبعاد!
ستحتاج في هذا المشروع إلى محرر كود وبعض المعرفة ببرمجة لغة سي.
خطوات
جزء 1 من 3: الإعداد الأولي
الخطوة الأولى. قم بتثبيت OpenGL للبدء ، اتبع هذه الخطوات لتثبيت OpenGL على نظامك
إذا كان لديك برنامج OpenGL بالفعل ، بالإضافة إلى برنامج مترجم C متوافق مثبتًا ، فيمكنك تخطي هذه الخطوة والانتقال إلى الخطوة التالية.
الخطوة 2. قم بإنشاء المستند
قم بإنشاء ملف جديد في محرر الكود المفضل لديك واحفظه باسم mycube.c
الخطوة 3. أضف # include
هذه هي العناصر الأساسية التي ستحتاجها لبرنامجك. من المهم أن ندرك أن هناك بالفعل تضمينات مختلفة مطلوبة لأنظمة التشغيل المختلفة. تأكد من تضمين كل هذه العناصر للتأكد من أن برنامجك متعدد الاستخدامات ويمكن تشغيله لأي مستخدم.
// يشمل # تضمين # تضمين # تضمين # تعريف GL_GLEXT_PROTOTYPES #ifdef _APPLE_ # تضمين # آخر # تضمين #endif
الخطوة 4. أضف نماذج الدوال والمتغيرات العامة
خطوتك التالية هي الإعلان عن بعض النماذج الأولية للوظائف.
// وظيفة عرض النماذج الأولية باطلة () ؛ مفاتيح خاصة باطلة () ؛ // المتغيرات العالمية double rotate_y = 0 ؛ rotate_x مزدوج = 0 ؛
الخطوة 5. قم بإعداد الوظيفة الرئيسية ()
int main (int argc، char * argv ) {// تهيئة GLUT ومعالجة معاملات المستخدم glutInit (& argc، argv)؛ // طلب نافذة ملونة حقيقية مزدوجة مخزنة مع Z-buffer glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH) ؛
الخطوة 6. قم بإنشاء النافذة
الخطوة التالية هي قم بإنشاء النافذة التي سترسم فيها المكعب. في هذا البرنامج التعليمي ، تسمى النافذة "مكعب رائع".
// إنشاء نافذة glutCreateWindow ("مكعب رائع") ؛
الخطوة 7. تفعيل اختبار العمق
OpenGL هي لغة صارمة من حيث أنها لا تفترض تمكين أي ميزات خاصة. لكي يتم عرض برنامجك بشكل صحيح في 3 أبعاد باستخدام Z-buffer الذي نظرت إليه سابقًا ، فأنت بحاجة إلى ذلك تمكين اختبار العمق. مع مواصلتك لاستكشاف OpenGL ، سوف تكتشف العديد من الميزات التي ستحتاج إلى تمكينها بما في ذلك الإضاءة ، والقوام ، ووجه العدسة وغير ذلك الكثير.
// تمكين اختبار عمق Z-buffer glEnable (GL_DEPTH_TEST) ؛
الخطوة 8. إضافة وظائف رد الاتصال
فيما يلي وظائف رد الاتصال التي كتبتها في النماذج الأولية في وقت سابق. في كل مرة من خلال الحلقة الرئيسية ، سيتم استدعاء هذه الوظائف. تعيد وظيفة العرض رسم المشهد بناءً على أي تغييرات تم إجراؤها على المتغيرات منذ المكالمة السابقة. تسمح لنا وظيفة المفاتيح الخاصة بالتفاعل مع البرنامج.
// وظائف رد الاتصال glutDisplayFunc (عرض) ؛ glutSpecialFunc (مفاتيح خاصة) ؛
الخطوة 9. ابدأ MainLoop
سيؤدي هذا إلى استدعاء الوظيفة الرئيسية حتى تغلق البرنامج للسماح بالرسوم المتحركة وتفاعل المستخدم.
// تمرير التحكم إلى GLUT للأحداث glutMainLoop () ؛ // العودة إلى نظام التشغيل العودة 0 ؛ }
جزء 2 من 3: وظيفة العرض ()
الخطوة 1. فهم الغرض من هذه الوظيفة
سيتم تنفيذ كل أعمال رسم المكعب في هذه الوظيفة. الفكرة العامة وراء المكعب الخاص بك هي رسم الجوانب الستة كل على حدة ووضعها في الموضع المناسب.
من الناحية المفاهيمية ، سيتم رسم كل جانب من خلال تحديد الزوايا الأربع والسماح لبرنامج OpenGL بتوصيل الخطوط وتعبئتها باللون الذي تحدده. فيما يلي خطوات القيام بذلك
الخطوة 2. أضف glClear ()
الخطوة الأولى التي يتعين عليك اتخاذها في هذه الوظيفة هي امسح اللون و Z العازلة. بدون هذه الخطوات ، قد تظل الرسومات القديمة مرئية تحت الرسومات الجديدة ولن تكون الكائنات المرسومة في الموقع الصحيح على الشاشة.
عرض باطل () {// مسح الشاشة و Z-buffer glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT) ؛
الخطوة 3. أضف glBegin () و glEnd ()
يعرّف OpenGL الكائنات على أنها مجموعات من المضلعات المختلفة. باستخدام glBegin () الأمر ، يمكنك وضع قلم رصاص بشكل فعال يرسم شكلاً. لرفع القلم الرصاص وبدء شكل جديد ، يجب عليك استخدام glEnd () أمر. في هذا البرنامج التعليمي ، ستستخدم GL_POLYGON لرسم كل جانب من جوانب المكعب ولكن من الممكن استخدام خيارات معلمات أخرى مثل GL_LINE أو GL_QUAD أو GL_TRIANGLE لإنشاء أشكال أخرى.
- هنا سوف تبدأ من مقدمة المكعب الخاص بك. لاحقًا ستضيف لونًا إلى الجوانب الستة.
// جانب متعدد الألوان - FRONT glBegin (GL_POLYGON) ؛ // ستتم إضافة الرؤوس في الخطوة التالية glEnd () ؛
الخطوة 4. أضف glVertex3f ()
بمجرد أن تذكر أنك تريد أن تبدأ المضلع الخاص بك ، فأنت بحاجة إلى ذلك تحديد القمم من الكائن. يحتوي glVertex على أشكال متعددة بناءً على ما تريد القيام به مع الكائن الخاص بك.
- الأول هو كم عدد الأبعاد التي تعمل فيها. يوضح 3 أعلاه في glVertex3f أنك ترسم في 3 أبعاد. من الممكن أيضًا العمل بأبعاد 2 أو 4. يشير f أعلاه في glVertex3f إلى أنك تعمل بأرقام الفاصلة العائمة. يمكنك أيضًا استخدام الاختصارات أو الأعداد الصحيحة أو الزوجي.
- لاحظ أن هذه النقاط محددة في أ عكس عقارب الساعه طريقة. هذا ليس مهمًا جدًا في الوقت الحالي ، ولكن عندما تبدأ في العمل مع الإضاءة ، والقوام ، ووجه العدسة ، سيصبح هذا مهمًا للغاية ، لذا اعتد على تحديد نقاطك بعكس اتجاه عقارب الساعة الآن.
- أضف أضف النقاط بين خطوط glBegin () و glEnd ().
// جانب متعدد الألوان - FRONT glBegin (GL_POLYGON) ؛ glVertex3f (-0.5، -0.5، -0.5) ؛ // P1 glVertex3f (-0.5 ، 0.5 ، -0.5) ؛ // P2 glVertex3f (0.5 ، 0.5 ، -0.5) ؛ // P3 glVertex3f (0.5، -0.5، -0.5) ؛ // P4 glEnd () ؛
الخطوة 5. أضف glColor3f ()
يعمل glColor بطريقة مشابهة لـ glVertex. يمكنك تحديد النقاط على أنها قصيرة ، أو أعداد صحيحة ، أو أزواج ، أو أعداد عائمة. كل لون له قيمة من 0 إلى 1. كل 0 تجعل النقطة سوداء وكل 1 تجعل النقطة بيضاء. 3 في glColor3f () يشير إلى نظام ألوان RGB بدون قناة ألفا. تحدد ألفا للون شفافيته. لتغيير مستوى ألفا ، استخدم glColor4f () مع كون المعلمة الأخيرة هي القيمة من 0 إلى 1 من أجل معتم إلى شفاف.
- عند استدعاء glColor3f () ، سيكون كل رأس مرسوم من تلك النقطة على ذلك اللون. لذلك ، إذا كنت تريد أن تكون جميع الرؤوس الأربعة حمراء ، فقم فقط بتعيين اللون مرة واحدة في أي وقت قبل أوامر glVertex3f () وستكون جميع الرؤوس حمراء.
- يوضح الجانب الأمامي المحدد أدناه كيفية تحديد لون جديد لكل قمة. عند القيام بذلك ، يمكنك رؤية خاصية مثيرة للاهتمام لألوان OpenGL. نظرًا لأن كل رأس في المضلع له لونه الخاص ، فسيقوم OpenGL تلقائيًا بمزج الألوان! ستوضح الخطوة التالية كيفية تخصيص أربعة رؤوس بنفس اللون.
// جانب متعدد الألوان - FRONT glBegin (GL_POLYGON) ؛ glColor3f (1.0 ، 0.0 ، 0.0) ؛ glVertex3f (0.5 ، -0.5 ، -0.5) ؛ // P1 أحمر glColor3f (0.0 ، 1.0 ، 0.0) ؛ glVertex3f (0.5 ، 0.5 ، -0.5) ؛ // P2 أخضر glColor3f (0.0 ، 0.0 ، 1.0) ؛ glVertex3f (-0.5 ، 0.5 ، -0.5) ؛ // P3 أزرق glColor3f (1.0 ، 0.0 ، 1.0) ؛ glVertex3f (-0.5، -0.5، -0.5) ؛ // P4 هي glEnd أرجوانية () ؛
الخطوة 6. تعامل مع الجوانب الأخرى
اكتشف موقع كل رأس للأطراف الخمسة الأخرى للمكعب ، ولكن من أجل التبسيط ، فقد تم حسابها من أجلك وتم تضمينها في العرض النهائي () وظيفة أدناه.
// الجانب الأبيض - BACK glBegin (GL_POLYGON) ؛ glColor3f (1.0 ، 1.0 ، 1.0) ؛ glVertex3f (0.5 ، -0.5 ، 0.5) ؛ glVertex3f (0.5 ، 0.5 ، 0.5) ؛ glVertex3f (-0.5 ، 0.5 ، 0.5) ؛ glVertex3f (-0.5 ، -0.5 ، 0.5) ؛ glEnd () ، // الجانب الأرجواني - يمين glBegin (GL_POLYGON) ؛ glColor3f (1.0 ، 0.0 ، 1.0) ؛ glVertex3f (0.5 ، -0.5 ، -0.5) ؛ glVertex3f (0.5 ، 0.5 ، -0.5) ؛ glVertex3f (0.5 ، 0.5 ، 0.5) ؛ glVertex3f (0.5 ، -0.5 ، 0.5) ؛ glEnd () ، // الجانب الأخضر - LEFT glBegin (GL_POLYGON) ؛ glColor3f (0.0 ، 1.0 ، 0.0) ؛ glVertex3f (-0.5 ، -0.5 ، 0.5) ؛ glVertex3f (-0.5 ، 0.5 ، 0.5) ؛ glVertex3f (-0.5 ، 0.5 ، -0.5) ؛ glVertex3f (-0.5، -0.5، -0.5) ؛ glEnd () ، // الجانب الأزرق - TOP glBegin (GL_POLYGON) ؛ glColor3f (0.0 ، 0.0 ، 1.0) ؛ glVertex3f (0.5 ، 0.5 ، 0.5) ؛ glVertex3f (0.5 ، 0.5 ، -0.5) ؛ glVertex3f (-0.5 ، 0.5 ، -0.5) ؛ glVertex3f (-0.5 ، 0.5 ، 0.5) ؛ glEnd () ، // الجانب الأحمر - أسفل glBegin (GL_POLYGON) ؛ glColor3f (1.0 ، 0.0 ، 0.0) ؛ glVertex3f (0.5 ، -0.5 ، -0.5) ؛ glVertex3f (0.5 ، -0.5 ، 0.5) ؛ glVertex3f (-0.5 ، -0.5 ، 0.5) ؛ glVertex3f (-0.5، -0.5، -0.5) ؛ glEnd () ، glFlush () ؛ glutSwapBuffers () ، }
نريد أيضًا إضافة سطرين أخيرين من التعليمات البرمجية لهذه الوظيفة. وهذه هي glFlush () ؛
و glutSwapBuffers () ،
والتي تعطينا تأثير التخزين المؤقت المزدوج الذي تعلمته سابقًا.
جزء 3 من 3: تفاعل المستخدم
الخطوة 1. إضافة specialKeys ()
لقد أوشكت على الانتهاء ولكن في الوقت الحالي ، يمكنك رسم مكعب ولكن ليس لديك طريقة لتدويره. للقيام بذلك ، سوف تفعل إنشاء مفاتيح خاصة () وظيفة للسماح لنا بالضغط على مفاتيح الأسهم وتدوير المكعب!
- هذه الوظيفة هي سبب إعلانك عن المتغيرين العالميين rotate_x و rotate_y. عندما تضغط على مفتاحي الأسهم الأيمن والأيسر ، فإن rotate_y ستزداد أو تنقص بمقدار 5 درجات. وبالمثل ، عند الضغط على مفتاحي الأسهم لأعلى ولأسفل ، سيتغير rotate_x وفقًا لذلك.
مفاتيح خاصة باطلة (مفتاح int ، int x ، int y) {// السهم الأيمن - زيادة الدوران بمقدار 5 درجات إذا (key == GLUT_KEY_RIGHT) rotate_y + = 5 ؛ // السهم الأيسر - قلل الدوران بمقدار 5 درجات أخرى إذا (المفتاح == GLUT_KEY_LEFT) rotate_y - = 5 ؛ وإلا إذا (key == GLUT_KEY_UP) rotate_x + = 5 ؛ وإلا إذا (المفتاح == GLUT_KEY_DOWN) rotate_x - = 5 ؛ // طلب تحديث العرض glutPostRedisplay () ؛ }
الخطوة 2. أضف glRotate ()
البيان الأخير الخاص بك هو إضافة العبارة التي ستدور الكائن الخاص بك. ارجع إلى وظيفة الشاشة () وقبل الجانب الأمامي ، أضف هذه الأسطر:
// إعادة تعيين التحويلات glLoadIdentity () ؛ // التدوير عندما يغير المستخدم rotate_x و rotate_y glRotatef (rotate_x ، 1.0 ، 0.0 ، 0.0) ؛ glRotatef (rotate_y، 0.0، 1.0، 0.0) ؛ // جانب متعدد الألوان - أمامي….
الخطوة 3. أضف الأوامر التالية لقياس المكعب بمقدار 2 على طول المحور x ، و 2 على طول المحور y ، وقم بتدوير المكعب بمقدار 180 درجة حول المحور y ، ثم قم بترجمة المكعب بمقدار 0.1 على طول المحور x
تأكد من ترتيب هذه الأوامر بالإضافة إلى أوامر glRotate () السابقة بالترتيب الصحيح كما هو موضح أعلاه. (إذا لم تكن متأكدًا ، يتم إجراء ذلك في الكود النهائي في نهاية البرنامج التعليمي.)
// التحولات الأخرى glTranslatef (0.1 ، 0.0 ، 0.0) ؛ glRotatef (180 ، 0.0 ، 1.0 ، 0.0) ؛ glScalef (2.0 ، 2.0 ، 0.0) ؛
الخطوة 4. ترجمة التعليمات البرمجية وتشغيلها
بافتراض أنك تستخدم مجلس التعاون الخليجي كمترجم خاص بك ، قم بتشغيل هذه الأوامر من جهازك الطرفي لتجميع واختبار برنامجك.
في نظام التشغيل Linux: gcc cube.c -o cube -lglut -lGL./ mycube على نظام التشغيل Mac: gcc -o foo foo.c -framework GLUT -framework OpenGL./ mycube على Windows: gcc -Wall -ofoo foo.c -lglut32cu - lglu32 -lopengl32./ mycube
الخطوة 5. تحقق من الكود الخاص بك بالكامل
يجب أن يكون مثل هذا:
// // الملف: mycube.c // المؤلف: مات دايزلي // تاريخ الإنشاء: 4/25/2012 // المشروع: كود المصدر لعمل مكعب في OpenGL // الوصف: إنشاء نافذة OpenGL ورسم مكعب ثلاثي الأبعاد / / يمكن للمستخدم التدوير باستخدام مفاتيح الأسهم // // عناصر التحكم: سهم لليسار - تدوير لليسار // سهم لليمين - تدوير لليمين // سهم لأعلى - تدوير لأعلى // سهم لأسفل - تدوير لأسفل // ------ -------------------------------------------------- -- // يشمل // ------------------------------------------- --------------- #include #include #define GL_GLEXT_PROTOTYPES #ifdef _APPLE_ #include # else #include #endif // ------------- --------------------------------------------- // النماذج الأولية للوظيفة / / ------------------------------------------------- --------- عرض باطل () ؛ مفاتيح خاصة باطلة () ؛ // ------------------------------------------------ ---------- // المتغيرات العالمية // ---------------------------------- ------------------------ مزدوج rotate_y = 0 ؛ rotate_x مزدوج = 0 ؛ // ------------------------------------------------ ---------- // display () وظيفة رد الاتصال // ------------------------------- --------------------------- عرض باطل () {// مسح الشاشة و Z-buffer glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT) ؛ // إعادة تعيين التحويلات glLoadIdentity () ؛ // التحولات الأخرى // glTranslatef (0.1 ، 0.0 ، 0.0) ؛ // غير مدرج // glRotatef (180 ، 0.0 ، 1.0 ، 0.0) ؛ // غير مدرج // تدوير عندما يغير المستخدم rotate_x و rotate_y glRotatef (rotate_x، 1.0، 0.0، 0.0) ؛ glRotatef (rotate_y، 0.0، 1.0، 0.0) ؛ // التحولات الأخرى // glScalef (2.0 ، 2.0 ، 0.0) ؛ // غير مدرج // جانب متعدد الألوان - GLBegin أمامي (GL_POLYGON) ؛ glColor3f (1.0 ، 0.0 ، 0.0) ؛ glVertex3f (0.5 ، -0.5 ، -0.5) ؛ // P1 أحمر glColor3f (0.0 ، 1.0 ، 0.0) ؛ glVertex3f (0.5 ، 0.5 ، -0.5) ؛ // P2 أخضر glColor3f (0.0 ، 0.0 ، 1.0) ؛ glVertex3f (-0.5 ، 0.5 ، -0.5) ؛ // P3 أزرق glColor3f (1.0 ، 0.0 ، 1.0) ؛ glVertex3f (-0.5، -0.5، -0.5) ؛ // P4 هي glEnd أرجوانية () ؛ // الجانب الأبيض - BACK glBegin (GL_POLYGON) ؛ glColor3f (1.0 ، 1.0 ، 1.0) ؛ glVertex3f (0.5 ، -0.5 ، 0.5) ؛ glVertex3f (0.5 ، 0.5 ، 0.5) ؛ glVertex3f (-0.5 ، 0.5 ، 0.5) ؛ glVertex3f (-0.5 ، -0.5 ، 0.5) ؛ glEnd () ، // الجانب الأرجواني - يمين glBegin (GL_POLYGON) ؛ glColor3f (1.0 ، 0.0 ، 1.0) ؛ glVertex3f (0.5 ، -0.5 ، -0.5) ؛ glVertex3f (0.5 ، 0.5 ، -0.5) ؛ glVertex3f (0.5 ، 0.5 ، 0.5) ؛ glVertex3f (0.5 ، -0.5 ، 0.5) ؛ glEnd () ، // الجانب الأخضر - LEFT glBegin (GL_POLYGON) ؛ glColor3f (0.0 ، 1.0 ، 0.0) ؛ glVertex3f (-0.5 ، -0.5 ، 0.5) ؛ glVertex3f (-0.5 ، 0.5 ، 0.5) ؛ glVertex3f (-0.5 ، 0.5 ، -0.5) ؛ glVertex3f (-0.5، -0.5، -0.5) ؛ glEnd () ، // الجانب الأزرق - TOP glBegin (GL_POLYGON) ؛ glColor3f (0.0 ، 0.0 ، 1.0) ؛ glVertex3f (0.5 ، 0.5 ، 0.5) ؛ glVertex3f (0.5 ، 0.5 ، -0.5) ؛ glVertex3f (-0.5 ، 0.5 ، -0.5) ؛ glVertex3f (-0.5 ، 0.5 ، 0.5) ؛ glEnd () ، // الجانب الأحمر - أسفل glBegin (GL_POLYGON) ؛ glColor3f (1.0 ، 0.0 ، 0.0) ؛ glVertex3f (0.5 ، -0.5 ، -0.5) ؛ glVertex3f (0.5 ، -0.5 ، 0.5) ؛ glVertex3f (-0.5 ، -0.5 ، 0.5) ؛ glVertex3f (-0.5، -0.5، -0.5) ؛ glEnd () ، glFlush () ؛ glutSwapBuffers () ، } // ----------------------------------------------- ----------- // specialKeys () وظيفة رد الاتصال // ------------------------------ ---------------------------- void specialKeys (int key، int x، int y) {// السهم الأيمن - زيادة التدوير بمقدار 5 درجة إذا (مفتاح == GLUT_KEY_RIGHT) rotate_y + = 5 ؛ // السهم الأيسر - قلل الدوران بمقدار 5 درجات أخرى إذا (المفتاح == GLUT_KEY_LEFT) rotate_y - = 5 ؛ وإلا إذا (key == GLUT_KEY_UP) rotate_x + = 5 ؛ وإلا إذا (المفتاح == GLUT_KEY_DOWN) rotate_x - = 5 ؛ // طلب تحديث العرض glutPostRedisplay () ؛ } // ----------------------------------------------- ----------- // الوظيفة الأساسية // ------------------------------- --------------------------- int main (int argc، char * argv ) {// تهيئة GLUT ومعالجة معلمات المستخدم glutInit (& argc، argv) ؛ // طلب نافذة ملونة حقيقية مزدوجة مخزنة مع Z-buffer glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH) ؛ // إنشاء نافذة glutCreateWindow ("مكعب رائع") ؛ // تمكين اختبار عمق Z-buffer glEnable (GL_DEPTH_TEST) ؛ // وظائف رد الاتصال glutDisplayFunc (عرض) ؛ glutSpecialFunc (مفاتيح خاصة) ؛ // تمرير التحكم إلى GLUT للأحداث glutMainLoop () ؛ // العودة إلى نظام التشغيل العودة 0 ؛ }
