‫كلية الهندسة – قسم المعلوماتيّة ‪IT‬‬

‫الجزء العملي‬
‫‪2‬‬ ‫بيانيات‬

‫هدف الجلسة‬
‫ّ‬
‫األولية )‪ (Primitives‬يف ‪.OpenGl‬‬ ‫ّ‬
‫التعرف عىل عنارص الرسم‬

‫يعتمد ‪ OpenGL‬نظام اإلحداثيات األيمن (‪ ،)RHS: Right-Hand System‬حيث يشي المحور ‪ x‬إىل اليمي‪ ،‬و يشي المحور ‪ y‬إىل األعىل ‪،‬و يشي المحور ‪z‬‬
‫إىل خارج الشاشة‪ .‬مع تقوس أصابع اليد اليمن من المحور ‪ x‬باتجاه المحور ‪( y‬عكس اتجاه عقارب الساعة ‪ ،)CCW‬يشي اإلبهام إىل المحور ‪.z‬‬

‫شكل ‪1‬‬
‫ّ‬
‫األولية ‪Primitives‬‬ ‫العناص‬
‫ّ‬ ‫ُ‬
‫تعتي العنارص الهندسية األولية (مثل المثلث أو النقطة أو الخط أو المضلع) مدخالت أنظمة عرض الرسوميات‪.‬‬
‫يدعم ‪ OpenGL‬ثالث فئات من العنارص األ ّ‬
‫ولية الهندسية‪ :‬النقاط ‪ Vertices‬والخطوط ‪ Lines‬والمضلعات المغلقة ‪.Polygons‬‬
‫يتم تحديد العنارص األ ّ‬
‫ولية عي مجموعة من النقاط ‪ ،Vertices‬ويرتبط بكل نقطة مجموعة سمات ‪ attributes‬مثل الموضع واللون والناظم‬
‫الطبيع ‪ normal‬واإلكساء‪.‬‬
‫ي‬
‫عشة عنارص أولية كما هو موضح بالشكل ‪( 2‬التعتي العنارص مثل الكرة والمكعب والهرم عنارص ّ‬
‫أولية)‪.‬‬ ‫يدعم ‪ OpenGL‬ر‬

‫ّ‬
‫الهندسية ‪:Geometric Primitives‬‬ ‫األوليات‬
‫ّ‬
‫األولية مثل المثلث والمرب ع والمستقيم والنقطة‪ ،‬وأي عنرص‬ ‫ّ‬
‫الهندسية‬ ‫يمكن بناء أي غرض ب ‪ OpenGl‬باإلعتماد عىل مجموعة من العنارص‬
‫أوىل بدوره يتألف من نقطة أو أكي‪.‬‬
‫ي‬
‫الن يتألف منها باستخدام التابع ‪ glVertex‬ضمن زوج األوامر ‪. glBegin, glEnd‬‬
‫هندس بتحديد النقاط ي‬
‫ي‬ ‫يتم بناء عنرص‬

‫)‪void glBegin(GLenum shape‬‬

‫)‪void glVertex[234][sifd] (type x, type y, type z, ...‬‬
‫)‪void glVertex[234][sifd]v (type *coords‬‬
‫)(‪void glEnd‬‬

‫ُ ّ‬
‫الهندس مثل‪GL_POINTS, GL_LINES, GL_QUADS, :‬‬
‫ي‬ ‫ضمن األمر ‪ glBegin‬نحدد نمط الغرض‬
‫‪.GL_TRIANGLES, and GL_POLYGON‬‬
 ‫ّ ُ ّ‬ ‫ً‬
‫متتالية تشكل مثلث‪.‬‬ ‫مثال من أجل النمط ‪ GL_TRIANGLES‬كل ثالثة نقاط‬
‫ّ‬ ‫ّ‬ ‫ّ‬
‫الهندسية مثل الدوران‪.‬‬ ‫يتم عادة تحديد قيم النقاط باستخدام الفاصلة العائمة ألن العدد الصحيح غي مناسب عندإجراء التحويالت‬
‫ُ‬
‫التالية سوف تأخذ نفس اللون‪ ،‬ويجب مالحظة أن اللون باإلضافة إىل مجموعة أخرى من الخصائص ت ّ‬ ‫ّ‬
‫طبق عىل‬ ‫عند تحديد اللون‪ ،‬كل النقاط‬
‫النقاط‪.‬‬

‫شكل ‪2‬‬

‫النقاط (أو القمم) ‪Vertices‬‬

‫ّ‬
‫التالية‪:‬‬ ‫األولية من نقطة واحد أو أكي‪ ،‬والنقطة يف رسوميات الحاسوب تحمل السمات‬‫ّ‬ ‫تتكون العنارص‬
‫ً‬
‫‪ .1‬الموضع ‪ )x,y,z( :position‬يف الفضاء ي‬
‫ثالث األبعاد ويتم التعبي عنه عادة بأرقام الفاصلة العائمة‪.‬‬
‫ً‬
‫‪ .2‬اللون ‪ُ :color‬يعي عنه بمكونات ‪( RGB‬أحمر‪-‬أخرص‪-‬أزرق) أو ‪( RGBA‬أحمر‪-‬أخرص‪-‬أزرق‪-‬ألفا)‪ .‬وعادة ما يتم تسوية قيم‬
‫المكونات إىل المجال ] ‪( [1.0 , 0.0‬أو ‪ 8‬بت عدد صحيح بدون إشارة بي ‪ 0‬و ‪.)255‬‬
‫ً‬
‫‪ .3‬الشعاع الناظم ‪ : Vertex-Normal‬يكون الشعاع الناظم متعامدا عىل السطح أو المستوي‪ ،‬و يف رسوميات الحاسب‪ ،‬نحتاج إىل‬
‫ُ‬ ‫ُ‬
‫والخلف لألغراض‪ ،‬ولعمليات أخرى مثل اإلضاءة‪ .‬تستخدم‬ ‫ي‬ ‫األمام‬
‫ي‬ ‫إرفاق متجه ناظم بكل نقطة‪ .‬تستخدم النواظم للتميي بي الوجه‬
‫األمام‬
‫ي‬ ‫الطبيع إىل الوجه‬
‫ي‬ ‫قاعدة اليد اليمن (أو عكس اتجاه عقارب الساعة) يف ‪ OpenGL‬لتحديد إتجاه الناظم‪ ،‬حيث يشي الناظم‬
‫للغرض‪.‬‬
‫ّ‬ ‫ً‬
‫‪ .4‬اإلكساء ‪ :Texture‬يف رسوميات الحاسب‪ ،‬غالبا ما نقوم بتغليف األغراض بصورة ثنائية األبعاد لجعلها أكي واقعية‪ .‬يمكن أن‬
‫ّ‬ ‫ّ‬
‫مرجعية لصورة اإلكساء‪.‬‬ ‫والن تشكل إحداثيات‬
‫يكون للنقطة إحداثيات إكساء ثنائية األبعاد ( ‪ ،)t ،s‬ي‬

‫‪2‬‬
 Color ‫اللون‬
ّ
.)clearing ‫الخلفية (أو المسح‬ ‫ لتحديد لون‬glClearColor ‫األمام (الواجهة) و‬ ‫ لتحديد اللون‬glColor ‫نستخدم التابع‬
‫ي‬
ّ ً
[0.0, 1.0] ‫ عادة ُيحدد اللون كقيمة فاصلة عائمة ضمن المجال‬-
Alpha ‫ يتم استخدام‬،RGB (Red-Green-Blue) or RGBA (Red-Green-Blue-Alpha) ‫ إما باستخدام المكونات‬-
ً ‫ لألغراض الشفافة‬0=alpha ‫ حيث‬،‫لتحديد نسبة الشفافية‬
.‫ لألغراض المعتمة‬1=alpha ‫تماما و‬
ّ
OpenGl ‫ تطبق األلوان يف‬،‫التالية سوف تأخذ قيمة هذا اللون‬ ‫ جميع النقاط‬،‫عند تحديد لون األغراض أو لون الواجهة‬ -
ّ ُ ّ ّ
.‫) المكونة له‬vertices( ‫الهندس من ألوان النقاط‬
‫ي‬ ‫ ويتشكل لون الشكل‬،‫األولية‬ ‫عىل النقاط وليس عىل األشكال‬

OpenGL Line Functions ‫توابع رسم الخطوط‬

:‫ رموز يمكننا استخدامها لرسم المستقيمات‬3 ‫هناك‬
‫ ولن ينتج أي‬،‫ إال إذا تكررت اإلحداثيات‬،‫ والناتج خطوط مستقيمة غي مرتبطة‬،‫ لرسم خطوط مستقيمة بي كل زوج من النقاط المتتالية‬:GL_LINES .1
.)‫ أو عدد فردي من النقاط (من أجل النقطة األخية‬،‫سء إذا حددنا نقطة واحدة فقط‬ ‫ر‬
‫ي‬
‫وف هذه الحالة بحاجة إىل نقطتي‬‫ ي‬،‫ بي أول نقطة يف القائمة وآخر نقطة يف القائمة‬،‫ للحصول عىل سلسلة من الخطوط المستقيمة‬:GL_LINE_STRIP .2
.‫عىل األقل ضمن المجموعة‬
.‫ بحيث تتصل أول نقطة يف القائمة بآخر نقطة يف القائمة‬،‫ للحصول عىل سلسلة من الخطوط المستقيمة‬:GL_LINE_LOOP .3

‫ رسم خطوط مستقيمة‬:1‫مثال‬

/*
* Draw 2D colored Primitives: line, quad, triangle and polygon.
*/
#include <windows.h>
#include <glut.h>
#include <GL/gl.h>
#include <GL/GLU.H>

/* Initialize OpenGL Graphics */

void init() {
// Set "clearing" or background color
glClearColor(0.0f, 0.0f, 0.0f, 1.0f); // Black and opaque
}

/* Handler for window-repaint event. Call back when the window first appears and
whenever the window needs to be re-painted. */
void lineSegment () {
glClear(GL_COLOR_BUFFER_BIT);

glBegin(GL_LINE_LOOP); // try GL_LINES / GL_LINE_STRIP

glColor3f(1.0f, 0.0f, 0.0f); // Red
glVertex2f(-0.8f, 0.1f); // Define vertices in counter-clockwise (CCW) order
glVertex2f(-0.2f, 0.1f); // so that the normal (front-face) is facing you
glVertex2f(-0.2f, 0.7f);
glVertex2f(-0.8f, 0.7f);
glEnd();

glFlush();
}
/* Main function */
int main(int argc, char** argv) {
glutInit(&argc, argv); // Initialize GLUT
glutCreateWindow("Vertex, Primitive & Color"); // Create window with the given title
glutInitWindowSize(320, 320); // Set the window's initial width & height
glutInitWindowPosition(50, 50); // Position the window's initial top-left corner

3
 glutDisplayFunc(lineSegment); // Register callback handler for window re-paint event
init(); // Our own OpenGL initialization
glutMainLoop(); // Enter the event-processing loop
return 0;
}
ّ ‫ رسم بعض األوليات الهند‬:2‫مثال‬
‫سية‬

void display() {
glClear(GL_COLOR_BUFFER_BIT); // Clear the color buffer with current clearing color

// Define shapes enclosed within a pair of glBegin and glEnd

glBegin(GL_QUADS);
glColor3f(1.0f, 0.0f, 0.0f);
glVertex2f(-0.8f, 0.1f);
glVertex2f(-0.2f, 0.1f);
glVertex2f(-0.2f, 0.7f);
glVertex2f(-0.8f, 0.7f);
// Each set of 4 vertices form a quad
// Red
// Define vertices in counter-clockwise (CCW) order
// so that the normal (front-face) is facing you

glColor3f(0.0f, 1.0f, 0.0f); // Green

glVertex2f(-0.7f, -0.6f);
glVertex2f(-0.1f, -0.6f);
glVertex2f(-0.1f, 0.0f);
glVertex2f(-0.7f, 0.0f);

glColor3f(0.2f, 0.2f, 0.2f); // Dark Gray

glVertex2f(-0.9f, -0.7f);
glColor3f(1.0f, 1.0f, 1.0f); // White
glVertex2f(-0.5f, -0.7f);
glColor3f(0.2f, 0.2f, 0.2f); // Dark Gray
glVertex2f(-0.5f, -0.3f);
glColor3f(1.0f, 1.0f, 1.0f); // White
glVertex2f(-0.9f, -0.3f);
glEnd();

glBegin(GL_TRIANGLES); // Each set of 3 vertices form a triangle

glColor3f(0.0f, 0.0f, 1.0f); // Blue
glVertex2f(0.1f, -0.6f);
glVertex2f(0.7f, -0.6f);
glVertex2f(0.4f, -0.1f);

glColor3f(1.0f, 0.0f, 0.0f); // Red

glVertex2f(0.3f, -0.4f);
glColor3f(0.0f, 1.0f, 0.0f); // Green
glVertex2f(0.9f, -0.4f);
glColor3f(0.0f, 0.0f, 1.0f); // Blue

4
 ‫;)‪glVertex2f(0.6f, -0.9f‬‬
‫;)(‪glEnd‬‬

‫;)‪glBegin(GL_POLYGON‬‬ ‫‪// These vertices form a closed polygon‬‬

‫‪glColor3f(1.0f, 1.0f, 0.0f); // Yellow‬‬
‫;)‪glVertex2f(0.4f, 0.2f‬‬
‫;)‪glVertex2f(0.6f, 0.2f‬‬
‫;)‪glVertex2f(0.7f, 0.4f‬‬
‫;)‪glVertex2f(0.6f, 0.6f‬‬
‫;)‪glVertex2f(0.4f, 0.6f‬‬
‫;)‪glVertex2f(0.3f, 0.4f‬‬
‫;)(‪glEnd‬‬

‫;)(‪glFlush‬‬ ‫‪// Render now‬‬

‫}‬
‫ّ‬
‫ثم نحدد تابع الرسم ضمن التابع ‪:main‬‬
‫;)‪glutDisplayFunc(display‬‬

‫البنامج‪:‬‬
‫بعض تفاصيل ر‬
‫ه تهيئة ‪:GLUT‬‬ ‫ً‬
‫نظرا ألننا نستخدم ‪ ، OpenGL Utility Toolkit‬فإن خطوتنا األوىل ي‬
‫يوفر ‪ GLUT‬أدوات مساعدة عالية المستوى لتبسيط برمجة ‪ ،OpenGL‬خاصة عند التفاعل مع نظام التشغيل (مثل إنشاء نافذة والتعامل مع‬
‫مدخالت لوحة المفاتيح والماوس)‪:‬‬
‫)‪void glutInit(int *argc, char **argv‬‬

‫يقوم بتهيئة ‪ ، GLUT‬ويجب استدعاؤه قبل وظائف ‪ GL / GLUT‬األخرى‪ .‬يأخذ نفس وسطاء مثل ‪.main‬‬
‫بعد ذلك‪ ،‬يتم إنشاء نافذة العرض عىل الشاشة مع تسمية ر‬
‫لشيط العنوان‪:‬‬
‫;)"‪glutCreateWindow ("An Example OpenGL Program‬‬

‫ثم يتم تحديد ما يجب أن تحتويه نافذة العرض‪:‬‬

‫;)‪glutDisplayFunc (display‬‬

‫التاىل يتم تنشيط‬

‫لكن نافذة العرض لم تظهر بعد عىل الشاشة‪ ،‬نحتاج إىل تابع ‪ GLUT‬آخر إلكمال عمليات معالجة النوافذ‪ ،‬بعد تنفيذ التابع ي‬
‫الرسوم‪:‬‬
‫ي‬ ‫الن أنشأناها ‪ ،‬بما يف ذلك محتواها‬
‫جميع نوافذ العرض ي‬
‫;) ( ‪glutMainLoop‬‬

‫يجب أن يكون هذا اإلستدعاء األخي ضمن الينامج‪ ،‬والذي يعرض الرسوميات ويضع الينامج يف حلقة ال نهائية تتحقق من مدخالت األجهزة‬
‫مثل الماوس أو لوحة المفاتيح‪.‬‬
‫ً‬
‫تفاعليا‪ ،‬لذا سيستمر الينامج يف عرض الرسوميات حن نغلق نافذة العرض‪.‬‬ ‫هذا المثال ليس‬
‫تهيئة لمرة واحدة )( ‪init‬‬
‫تم تصميم هذا التابع لتنفيذ مهام تهيئة ‪ OpenGL‬لمرة واحدة‪ ،‬مثل تعيي لون المسح (‪ .)clearing‬يتم استدعاء ‪ init‬مرة واحدة يف التابع‬
‫يس ‪.main‬‬‫الرئ ي‬

‫‪5‬‬
 ‫ُ ّ‬
‫المحدد‪ ،‬نحتاج إىل استدعاء تابع ‪:OpenGL‬‬ ‫لعرض لون النافذة‬
‫;)‪glClear (GL_COLOR_BUFFER_BIT‬‬

‫معالج اإلستجابة لإلستدعاء ‪Callback Handler‬‬

‫عرف التابع الذي نستدعيه ضمن ‪ glutDisplayFunc‬بمعالج حدث اإلستجابة للستدعاء ‪ ،callback event handler‬يوفر هذا‬ ‫ُي ّ‬
‫يستدع نظام رسوميات ‪ OpenGL‬هذا التابع‬
‫ي‬ ‫المعالج اإلستجابة لحدث معي (مثل الضغط عىل المفتاح والنقر بالماوس ورسم النوافذ)‪.‬‬
‫ً‬
‫استجابة لطلب رسم النافذة‪( ،‬عىل سبيل المثال ‪ ،‬تظهر النافذة ألول مرة ‪ ،‬وتتم استعادة النافذة بعد تصغيها أو تغيي حجمها)‪.‬‬

‫ّ‬
‫الثانية ‪...‬‬ ‫نهاية الجلسة‬

‫‪6‬‬