Cara membuat garis (objek dasar) pada openGL

Sekarang kita akan belajar menggambar objek dasar dalam OpenGL. Objek dasar yaitu titik, garis, dan segitiga. Buat proyek baru dengan nama Objek Dasar, langkah-langkahnya persis seperti di latihan sebelumnya.

File main.h sama persis seperti pada latihan I, sedangkan pada file main.cpp terdapat sedikit perbedaan. Perhatikan file main.cpp , lihat fungsi int DrawGLScene(GLvoid). Seperti telah diterangkan di latihan I, fungsi ini dijalankan berkali-kali selama program dijalankan. Perhatikan terdapat baris Draw() dalam DrawGLScene(GLvoid). baris kode ini digunakan untuk memanggil fungsi void Draw() yang terdapat di atas fungsi int DrawGLScene(GLvoid). Fungsi ini akan digunakan untuk menggambar objek sederhana. Perhatikan baris kode untuk menggambar titik pertama seperti di bawah:

// Titik pertama -----------------------------
 
glPointSize(5.0f);

glBegin(GL_POINTS);
 glColor3f(1.0f, 0.0f, 0.0f);
 glVertex3f( -10.0f, 5.0f, -20.0f);
glEnd();

glPointSize(5.0f) digunakan untuk mengatur besar titik yang akan digambar. Di sini, kita akan menggambar titik dengan ukuran 5.0. glBegin(GL_POINTS) digunakan untuk menggambar titik. Posisi titik yang akan digambar harus ditulis antara glBegin(GL_POINTS) dan glEnd(). glColor3f(1.0f, 0.0f, 0.0f) adalah warna dari titk yang akan digambar. Format yang digunakan adalah format RGB, jadi warna titik adalah merah. glVertex3f( -10.0f, 5.0f, -20.0f) berarti posisi titik adalah 10 satuan ke kiri, 5 satuan ke atas, dan 20 satuan menjauh dari layar. Untuk koordinat, posisi tengah (posisi 0,0,0) berada tepat di tengah-tengah layar. Sumbu X negatif berarti ke kiri, positif berarti ke kanan. Sumbu Y positif berarti ke atas, negatif ke bawah. Sedangkan untuk sumbu Z, tanda positif berarti di depan layar (di luar layar), jadi tidak terlihat di layar. Jadi sumbu Z harus menggunakan tanda negatif agar objek dapat dilihat. Cukup rumit untuk menggambar bukan, tapi ada cara ayng lebih mudah. Sekarang perhatikan titik kedua

// Titik kedua ------------------------------

glPointSize(10.0f);

glTranslatef(-5.0f, 5.0f, -20.0f);

glBegin(GL_POINTS);
 glColor3f(0.0f, 1.0f, 0.0f);
 glVertex3f( 0.0f, 0.0f, 0.0f);
glEnd();

glTranslatef( 5.0f, -5.0f, 20.0f);

glTranslatef(-5.0f, 5.0f, -20.0f) digunakan untuk merubah titik tengah sumbu koordinat. Bila tadinya pusat sumbu korrdinat terletak tepat di tengah-tengah layar, sekarang titik pusat sumbu koordinat terletak di posisi -5, 5,-20. Jadi kita bisa melihat titik yang digambar di posisi 0,0,0. Setelah menggambar titik, titik tengah sumbu koordinat dikembalikan ke posisi awal dengan glTranslatef( 5.0f, -5.0f, 20.0f). Bila tidak dikembalikan, akan menimbulkan kebingungan karena titik tengah sumbu koordinat tidak terletak di tengah. Tentu cukup merepotkan bila harus mengembalikan titik tengah sumbu koordinat tiap kali kita merubahnya. Untuk itu, digunakan cara yang lebih mudah lagi seperti pada penggambaran titik ketiga.

// Titik ketiga -----------------------------

glPointSize(7.0f);

glPushMatrix();

glTranslatef( 0.0f, 5.0f, -20.0f);

glBegin(GL_POINTS);
 glColor3f(0.0f, 0.0f, 1.0f);
 glVertex3f( 0.0f, 0.0f, 0.0f);
glEnd();

glPopMatrix();

Dengan glPushMatrix() dan glPopMatrix(), kita tidak perlu mengembalikan posisi titik tengah sumbu koordinat. Apapun perubahan yang dilakukan setelah glPushMatrix() akan dikembalikan ke nilai awal setelah glPopMatrix. Untuk penggambaran objek dasar berikutnya, semua akan menggunakan cara ini. Untuk menggambar banyak titik, memasukkan posisinya satu demi satu tidaklah efisien. Maka diperlukan looping untuk mengambar banyak titik. Caranya adalah dengan menyimpan data ke variabel, lalu variabel tersebut digunakan dalam looping untuk dimasukkan ke dalam glVertex3f(...). Penggambaran titik keempat menggunakan looping untuk menggambar beberapa titik.

// Titik keempat ---------------------------

glPointSize(5.0f);

glPushMatrix();

glTranslatef( 5.0f, 5.0f, -20.0f);

GLfloat PosX;

glBegin(GL_POINTS);

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

 for (PosX = 0.0f; PosX < 1.0f; PosX += 0.2f)
  glVertex3f( PosX, 0.0f, 0.0f);

glEnd();

glPopMatrix();

Setelah bisa menggambar titik, kita akan belajar menggambar garis. Garis terdiri dati dua titik, caranya mirip dengan cara menggambar titik. Tinggal mengganti glBegin(GL_POINTS) menjadi glBegin(GL_LINES) seperti pada program bagian garis pertama. Ingat, garis terdiri dari dua titik. Jadi glVertex3f(...) harus dituliskan dua kali, masing-masing untuk sebuat titik.

//Garis pertama ---------------------------

glLineWidth(2.0f);

glPushMatrix();

glTranslatef(-10.0f, 0.0f, -20.0f);

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

glBegin(GL_LINES);
 glVertex3f( 0.0f, 1.0f, 0.0f);
 glVertex3f( 0.0f, -1.0f, 0.0f);
glEnd();

glPopMatrix();

glLineWidth(2.0f) digunakan untuk menentukan lebar garis yang akan digambar. Di sini,kita akan menggambar garis dengan lebar 2. Garis bisa memiliki warna degradasi. Ingat bahwa garsi terdiri dari dua titik. Bila titik pertama berwarna hijau dan titik kedua berwarna biru, warna garis akan berdegradasi dari hijau ke biru. Lihat bagian garis kedua untuk melihat warna degradasi.

//Garis kedua ---------------------------

glPushMatrix();

glTranslatef( -5.0f, 0.0f, -20.0f);

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

glPopMatrix();

Garis ketiga menggambarkan cara menggunakan looping untuk membuat beberapa garis. Bila glVertex3f(...) dimasukkan beberapa kali, maka titik pertama dan kedua akan membentuk satu garis. Titik ketiga dan keempat membentuk garis kedua, dan seterusnya.

//Garis ketiga -------------------------

glPushMatrix();

glTranslatef( 0.0f, 0.0f, -20.0f);

glBegin(GL_LINES);
 for (PosX = 0.0f; PosX <= 1.0f; PosX += 0.2f)
 {
  glColor3f(0.0f, 1.0f, 0.0f); glVertex3f( PosX, 1.0f, 0.0f);
  glColor3f(0.0f, 0.0f, 1.0f); glVertex3f( PosX, -1.0f, 0.0f);
 }

glEnd();

glPopMatrix();

Bila kita ingin menggambar beberapa garis yang terhubung, digunakan glBegin(GL_LINE_STRIP). Jadi kita memasukkan beberapa titik di sini. Titik pertama dan kedua akan membentuk suatu garis, lalu titik kedua dan ketiga membentuk garis berikutnya, lalu titik ketiga dan keempat membentuk garis baru lagi, dan seterusnya. Coba juga glBegin(GL_LINE_LOOP) untuk cara lain.

//Garis keempat -------------------------

glPushMatrix();

glTranslatef( 5.0f, 0.0f, -20.0f);

glBegin(GL_LINE_STRIP);
 for (PosX = 0.0f; PosX <= 2.0f; PosX += 0.5f)
 {
  glColor3f(0.0f, 1.0f, 0.0f); glVertex3f( PosX, 1.0f, 0.0f);
  glColor3f(0.0f, 0.0f, 1.0f); glVertex3f( PosX, -1.0f, 0.0f);
 }

glEnd();

glPopMatrix();

Sekarang kita masuk ke bagian menggambar segitiga. Segitiga digambar dengan perintah glBegin(GL_TRIANGLES). Perhatikan bahwa segitiga juga bisa emmiliki warna degradasi.

//Segitiga pertama -------------------------

glPushMatrix();

glTranslatef( -10.0f, -5.0f, -20.0f);

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

glPopMatrix();

Untuk menggambar beberapa segitiga, lakukan dengan looping seperti cara biasa. Bila ingin menggambar beberapa segitiga yang terhubung, gunakan glBegin(GL_TRIANGLE_STRIP). Di sini, titik pertama, kedua, dan ketiga akan membentuk segitiga pertama. Titik kedua, ketiga, dan keempat akan membentuk segitiga kedua, dan seterusnya. Perhatikan contoh pada segitiga kedua. Coba juga glBegin(GL_TRIANGLE_FAN) untuk cara lain.

//Segitiga kedua -------------------------

glPushMatrix();

glTranslatef( -5.0f, -5.0f, -20.0f);

glBegin(GL_TRIANGLE_STRIP);
 glColor3f(1.0f, 0.0f, 0.0f); glVertex3f( -1.0f,-1.0f, 0.0f);
 glColor3f(0.0f, 1.0f, 0.0f); glVertex3f(  1.0f,-1.0f, 0.0f);
 glColor3f(0.0f, 0.0f, 1.0f); glVertex3f(  0.0f, 1.0f, 0.0f);
 glColor3f(1.0f, 1.0f, 0.0f); glVertex3f(  2.0f, 1.0f, 0.0f);
glEnd();

glPopMatrix();

Segitiga ketiga hanya memberikan cuntoh permainan warna dari beberapa segitiga terhubung. Tidak ada hal baru di sini, anda dapat mempelajarinya sendiri.

Fungsi / perintah dalam OpenGL	Kegunaan
glPointSize(Glfloat Size);	Menentukan besar titik
glBegin(GL_POINTS) ... glEnd();	Menggambar titik
glColor3f(...);	Menentukan warna
glVertex3f( ...);	Menentukan posisi sebuah titik
glTranslatef(...);	Mengubah posisi titik pusat sumbu koordinat
glPushMatrix(); .. glPopMatrix()	Membuat baris kode diantaranya menjadi tidak berlaku untuk bagian luar.
glLineWidth(Glfloat Width);	Menentukan lebar garis
glBegin(GL_LINES); ... glEnd();	Menggamabr garis
glBegin(GL_LINE_STRIP); ... glEnd();	Menggambar garis terhubung (cara 1)
glBegin(GL_LINE_LOOP); ... glEnd();	Menggambar garis terhubung (cara 2)
glBegin(GL_TRIANGLES); ... glEnd();	Menggambar segitiga
glBegin(GL_TRIANGLE_STRIP); ... glEnd();	Menggambar segitiga terhubung (cara 1)
glBegin(GL_TRIANGLE_FAN); ... glEnd();	Menggambar segitiga terhubung (cara 2)