جميع الحقوق محفوظة لموقع ALGameDev.com ولمؤلف هذه المقالة..المقالة موجهة للهواة ولانضمن صحتها الكاملة


بلوحة مفاتيح: عبدالله الشمري

الصفحة الرئيسية

الدرس الثالث : أساسيات الرسم في OpenGL – الجزء الثاني

ALGamedev.Com

السلام عليكم .. في الدرس السابق رسمنا مجموعة من النقاط وفهمنا المبدا الاساسي للرسم في OpenGL .. في هذا الدرس سنتعلم ثلاثة أمور :
  • رسم " خط مستقيم " بثلاث طرق GL_LINES – GL_LINE_STRIP – GL_LINE_LOOP .. وسنتعرف على كيفية التحكم بسماكة الخط .
  • رسم أشكال رباعية باستخدام طريقة ال GL_QUADS .
  • رسم المضلعات عن طريق GL_POLYGON .
  • رسم الخطوط المستقيمة :

    توفر OpenGL عدة طرق لربط النقاط لانتاج خطوط مستقيمة ..

    ALGamedev.Com

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

    ALGamedev.Com

    تكتب هذه الشفرة البرمجية ..
        GL11.glBegin(GL11.GL_LINES);
        GL11.glVertex2f(0,0);
        GL11.glVertex2f(50,100);
        GL11.glVertex2f(50,100);
        GL11.glVertex2f(200,100);
        GL11.glEnd();
    
    لاحظ أننا احتجنا لأربع نقاط لرسم خطين .. في الغالب .. نستخدم هذه الطريقة لرسم خطوط مستقيمة منفصلة .
  • الطريقة الثانية هي GL-LINE_STRIP وتعمل هذه الطريقة بالشكل التالي ... نحتاج لنقطتين لرسم خط .. نحتاج ثلاث نقاط لرسم خطين .. نحتاج أربع نقاط لرسم ثلاث خطوط وهكذا .. لاحظ أن الخطوط ستكون متتابعة .. بمعنى .. نرسم نقطة أ .. ونرسم النقطة ب ..ونرسم النقطة ج .. عندها سيتم وصل خطين بين أ و ب و ج على التوالي ..
  • فمثلا لرسم هذه الصورة :

    ALGamedev.Com

    نكتب هذه الشفرة :
        GL11.glBegin(GL11.GL_LINE_STRIP);
        GL11.glVertex2f(400,0);
        GL11.glVertex2f(350,100);
        GL11.glVertex2f(220,100);
        GL11.glEnd();
    
  • الطريقة الثالثة لرسم الخطوط هي GL_LINE_LOOP وهي تعمل مثل GL_LINE_STRIP تماما .. لكن الفرق أنه في GL_LINE_LOOP يتم وصل آخر نقطة بأول نقطة .. في الكود السابق .. استبدل GL_LINE_STRIP بـ GL_LINE_LOOP لترى النتيجة
  • .
  • لتغيير سماكة الخط نسخدم الدالة glLineWidth ونمرر لها قيمة مناسبة .

    رسم الأشكال الرباعية :

  • يوجد عدة طرق لرسم أشكال رباعية في OpenGL .. كما هو ظاهر في الصورة :
  • ALGamedev.Com

  • لرسم شكلا رباعيا في OpenGL فاننا عادة نستخدم الطريقة GL_QUADS وهي طريقة بسيطة وسهلة .. كل أربع نقاط تشكل شكل رباعي .. ثمان نقاط تولدان شكلين رباعيين وهكذا ..
  • فمثلا لرسم ماهو بالصورة :

    ALGamedev.Com

    نكتب هذا الكود :
        GL11.glBegin(GL11.GL_QUADS);
        GL11.glVertex2i(200, 200);
        GL11.glVertex2i(300, 200);
        GL11.glVertex2i(300, 300);
        GL11.glVertex2i(200, 300);
        GL11.glEnd();
    
  • الطريقة GL_QUAD_STRIP نادرا ما نستخدمها .. الفكرة شبيهة بطريقة GL_LINE_STRIP .. لرسم شكل رباعي نستخدم أربع نقاط .. ولرسم شكلين رباعيين متصلين نرسم ست نقاط .. وبالتالي نوفر من عدد النقاط اللازمة .. وبالتالي نسرع من عملية التصيير Render .. لكن كما قلت .. هذه الطريقة نادرا ما نستخدمها .. سنستخدم بديلا أفضل لها في الدرس القادم ان شاء الله ( المثلثات) .
  • رسم المضلعات :

    ALGamedev.Com

  • لرسم مضلع في OpenGL فيمكن استخدام GL_POLYGON لتنفيذ ذلك .. الطريقة تعمل كالتالي .. لرسم مثلث نحتاج ثلاث نقاط .. ولرسم شكل رباعي نحتاج أربع نقاط ولرسم شكل خماسي نحتاج خمس نقاط .. وهكذا ..
  • .. فمثلا لرسم الشكل التالي :

    ALGamedev.Com

    نكتب هذا الكود :
        GL11.glBegin(GL11.GL_POLYGON);
        GL11.glVertex2i(50, 150);
        GL11.glVertex2i(150, 150);
        GL11.glVertex2i(200, 300);
        GL11.glVertex2i(100, 350);
        GL11.glVertex2i(0, 300);
        GL11.glEnd();
    

    مثال :

    هذا مثال على ما سبق وهو قابل للتنفيذ مباشرة .. لايوجد شيء جديد يخرج عن ما تكلمنا عليه .. فقط تحتاج لتغيير بعض القيم لتفهم أكثر ..
    /*
    * الهدف من هذا البرنامج رسم أشكال أساسية مثل الخط المستقيم
     * والاشكال الرباعية والمضلعات .. كما ستتعرف على كيفية التحكم بسماكة الخط
    */
    import org.lwjgl.input.Keyboard;
    import org.lwjgl.opengl.*;
    import org.lwjgl.opengl.GL11;
    
    public class OpenGL_03 {
      public static void main(String[] args) {
    //------------------------- Init + Create Frame (Firstly) --------------------------
       Display.setTitle( "My Game");
       try
       {
           Display.setDisplayMode(new DisplayMode(400, 400));
       }
       catch(Exception a)
       {
           System.out.println(a);
       }
       try
        {
        Display.setFullscreen(false);
        }
       catch(Exception e)
        {
            System.out.println(e);
        }
       try
        {
        Display.create();
        }
       catch(Exception e2)
        {
            System.out.println(e2);
        }
     //------------------------- Render + Input (Processing )  --------------------------
       boolean finished = false;
        while (!finished) {
           // Check for close requests
          if (Display.isCloseRequested()) {
    	finished = true;
          }
         if (Keyboard.isKeyDown(Keyboard.KEY_ESCAPE))
                  finished = true;
        GL11.glClear(GL11.GL_COLOR_BUFFER_BIT );
    
    	
        GL11.glColor3f(1,(float) 0.5, 0);
        GL11.glLineWidth(2);
    
        GL11.glBegin(GL11.GL_LINES);
        GL11.glVertex2f(0,0);
        GL11.glVertex2f(50,100);
        GL11.glVertex2f(50,100);
        GL11.glVertex2f(200,100);
        GL11.glEnd();
    
        GL11.glColor3f(1, 1, 0);
        GL11.glLineWidth(6);
    
        GL11.glBegin(GL11.GL_LINE_STRIP);
        GL11.glVertex2f(400,0);
        GL11.glVertex2f(350,100);
        GL11.glVertex2f(220,100);
        GL11.glEnd();
    
        GL11.glColor3ub((byte)0, (byte)100,(byte) 100);
    
        GL11.glBegin(GL11.GL_QUADS);
        GL11.glVertex2i(200, 200);
        GL11.glVertex2i(300, 200);
        GL11.glVertex2i(300, 300);
        GL11.glVertex2i(200, 300);
        GL11.glEnd();
    
        GL11.glColor3ub((byte)0, (byte)170,(byte)255);
    
        GL11.glBegin(GL11.GL_POLYGON);
        GL11.glVertex2i(50, 150);
        GL11.glVertex2i(150, 150);
        GL11.glVertex2i(200, 300);
        GL11.glVertex2i(100, 350);
        GL11.glVertex2i(0, 300);
        GL11.glEnd();
        
    
        Display.update();
    
        }
     //------------------------- Release ( Finally )  --------------------------
        Display.destroy();
        System.exit(0);
      }
    
    
    }
    



    الصفحة الرئيسية