OpenGL .. الدرس رقم 2 إضافة الألوان في OpenGL

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

الدرس السابق

OpenGL .. الدرس رقم 1


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


Posted Image

في الدرس السابق تعلمنا كيفية رسم كل من المثلث والمربع في هذا الدرس سوف نتعلم كيفية اضافة الالوان لهما.

Flat coloring هو وصف التلوين الذي سوف يضاف الى المربع ويتم فيه اضافة لون واحد فقط إلى المربع
Smooth coloring وصف التلوين الذي سوف يضاف الى المثلث ويتم فيه اضافة لون لكل نقطه تلتقي بها اضلاع المثلث اي اننا سوف نضيف 3 ألوان .

سوف نقوم باستخدام كود الدرس السابق .. لذا لابد من ان تكون قد تابعت وفهمت الدرس السابق حتى تكمل هذا الدرس .. سوف أقوم بوضع الكود ومن ثم شرحه .. بسم الله نبدأ ..


الدرس ..


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


هذا الكود موجود في الدرس السابق لم نقم بتغيير أي شي منه
glTranslatef يوضح مكان المثلث على الشاشة ولتفصيل أكثر راجع الدرس السابق
glBegin(GL_TRIANGLES)يقوم بإنشاء المثلث

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

هنا نضع أول سطر من الكود المضاف
السطر الأول قمنا باضافته للمره الاولى وهو لوضع اللون للنقطة العليا للمثلث .. نقوم بوضع هذا الكود قبل كل نقطه من نقط المثلث التي رسمناها في الدرس السابق حتى نقوم بتلوين تلك النقطه باللون الذي نريد .
glColor3f يقوم بوضع الألوان
المتغيرات الثلاث بعد glColor3f هي ترتيبا تعبر عن الألوان الأحمر ، الأخضر والأزرق .. تكون قيمة تلك المتغيرات من 0.0f إلى 1.0f وكما شرحنا في "الدرس رقم صفر" فإنه كلما اقتربنا من 0.0f يكون اللون داكن وكلما اقتربنا من 1.0f يكون اللون فاتح ( مع العلم بانه في حالة وضع القيمة 0.0f في بارامتر اللون الأحمر فاننا لانحصل على لون فيكون اللون أسود لان القيمه تساوي صفر بينما اذا وضعناها 0.1f مثلا سوف يكون اللون أحمر داكن وكذلك بالنسبه لبارامتر اللون الازرق والاخضر ).
في السطر الأول من الكود السابق لدينا قيمة كل من بارامتر اللون الأخضر والازرق تساوي صفر بينما قيمة بارامتر اللون الأحمر تساوي واحد (وهذي القيم هي للنقطه العليا من المثلث وليس لكامل المثلث ) لذلك سوف نحصل على اللون الأحمر للجزء العلوي من المثلث .
السطر الثاني من الكود يعبر عن مكان تلك النقطه على الشاشة وقد تم شرحها بالتفصيل في الدرس السابق

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

الآن قمنا بوضع قيمة اللون الأخضر تساوي واحد وهذا اللون سوف يظهر في الجزء الأيسر السفلي من المثلث كما هو موضح من السطر الثاني

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

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

لاحظ اخي القارئ بعد تطبيق الدرس نقطه تجمع الالوان وتداخلها وكيف انها تعطي ألوانا جديدة .. تلك هي الطريقة الي تستخرج بها جميع الألوان عن طريق مزج الألوان الثلاثة ( الاحمر – الاخضر – الازرق )
glColor3f(0.5f,0.5f,1.0f);
glBegin(GL_QUADS);
glVertex3f(-1.0f, 1.0f, 0.0f);
glVertex3f( 1.0f, 1.0f, 0.0f);  
glVertex3f( 1.0f,-1.0f, 0.0f);
glVertex3f(-1.0f,-1.0f, 0.0f);
glEnd();
return TRUE;    
}

الآن وبعد ان قمنا بتلوين المثلث ب 3 الوان سوف نقوم بتلوين المربع بلون واحد .. لا نحتاج هنا ان نقوم بوضع سطر لكل نقطه من المربع بل يكفي ان نقوم بوضع اللون مرة واحدة في البداية وسوف يظهر على المربع بكامله .
ان اردنا ان نضع اكثر من لون كما فعلنا في المثلث فسوف نقوم بنفس العمل السابق في المثلث حيث نقوم بوضع لون لكل نقطه من نقاط المربع
في الكود السابق قمنا بوضع اللون الازرق كما هو واضح من القيمة 1 للبارامتر الازرق
ووضعنا قيمة كل من البارامتر الاخضر والاحمر يساي 0.5 وبتغييرها سوف نحصل على درجات الازرق المختلفة ( قم بتغييريها ولاحظ التغير في اللون الازرق )
السطر الثاني يخبر برنامجنا باننا بصدد انشاء مربع
من السطر الثالث إلى السادس يوضح نقاط المربع ومكانه على الشاشة وقد قمنا بتفصيلها في الدرس السابق
السطر السابع يخبر برنامجنا باننا انتهينا من رسم المربع
السطر الثامن يخبر البرنامج باكمال عمله والانتقال الى الخطوة التالية
if (keys[VK_F1])
{
keys[VK_F1]=FALSE;
KillGLWindow();
fullscreen=!fullscreen;
if (!CreateGLWindow("NeHe's Color Tutorial",640,480,16,fullscreen))
{
return 0;
}


هذا الكود موجود في الدرسين السابقين ولم يتم تغيير سوى الرسالة التي ستظهر في قمة المشروع title

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

إلى هنا انتهى درسنا .. بإنتظار الاسئلة ( إن وجدت ) :)

رابط الدرس الثالث :
http://www.arabteam2...showtopic=47120

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

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