Modul 1
Primitif Drawing
I. Tugas Pendahuluan
1. Jelaskan tentang OpenGL!
2. Jelaskan tenteng ouput primitif dalam grafika computer!
II. Tujuan
Mahasiswa mampu membuat dan memanfaatkan output primitif (titik, garis, segiempat,
kurva, lingkaran, elips, fill area, dan teks)
III. Teori Penunjang
Perkembangan komputer grafik menuntut para pengembang sistem aplikasi komputer
grafik untuk dapat mengembangkan suatu informasi yang dilengkapi dengan visualisasi dan
animasi, agar dapat lebih mudah dipahami oleh pihak yang menggunakan sistem tersebut.
Komputer grafik telah menunjukkan kemajuan yang pesat dalam pengembangan berbagai
aplikasi untuk menghasilkan gambar komputer grafik yang digunakan untuk menunjang berbagai
bidang dengan teknologi grafik berbasis komputer. Penggunaan komputer grafik telah lama
digunakan dalam beberapa macam aplikasi, diantaranya pendidikan, kedokteran, fisika,
matematika, multimedia, dan lain-lain. Pada saat ini komputer grafik sudah digunakan pada
bidang sains, engineering, kedokteran, bisnis, industri, pemerintahan, seni, hiburan, iklan,
pendidikan, dan lain-lain.
Oleh karena itu, sudah semakin banyak pula bahasa pemrograman yang dilengkapi
dengan tools/library pembuatan grafik. Salah satu tools/library pembuatan aplikasi grafik adalah
OpenGL (Open Graphics Library). OpenGL (Open Graphics Library) adalah suatu spefikasi
grafik low-level yang menyediakan fungsi untuk pembuatan grafik primitif termasuk titik, garis,
dan lingkaran. OpenGL digunakan untuk mendefinisikan suatu obyek, baik obyek 2 dimensi
maupun obyek 3 dimensi. OpenGL juga merupakan suatu antarmuka pemrograman aplikasi/API
(Application Programming Interface) yang tidak tergantung pada piranti dan platform yang
digunakan, sehingga OpenGL dapat berjalan pada sistem operasi Windows, UNIX dan sistem
operasi lainnya. OpenGL pada awalnya didesain untuk digunakan pada bahasa pemrograman
C/C++, namun dalam perkembangannya OpenGL dapat juga digunakan dalam bahasa
pemrograman yang lain seperti Java, Tcl, Ada, Visual Basic, Delphi, maupun Fortran.
Namun OpenGL di-package secara berbeda-beda sesuai dengan bahasa pemrograman
yang digunakan. Oleh karena itu, package OpenGL tersebut dapat di-download pada situs
http://www.opengl.org sesuai dengan bahasa pemrograman yang akan digunakan.
Primitif Drawing
Penghasilan citra pada komputer grafik menggunakan primitif grafik dasar. Primitif ini
memudahkan untuk merender (menggambar pada layar monitor) sebagaimana penggunaan
persamaan geometrik sederhana. Contoh primitif grafik dasar (Gambar 1) adalah :
Titik
Garis, Segiempat
Kurva, Lingkaran, ellipse, kurva bezier, kurva lainnya
Fill area
Text
Gambar 1. Primitif grafik
Obyek kompleks dapat dibuat dengan kombinasi dari primitif ini. Adapun contoh grafik
primitif yang lain adalah :
Poligaris yaitu urutan garis lurus yang saling terhubung.
Teks adalah bentuk bahasa tulisan dengan simbol-simbol tertentu. Teks merupakan
kumpulan lebih dari dua karakter.
Citra raster adalah gambar yang dibuat dengan piksel yang membedakan bayangan dan
warna. Citra raster disimpan dalam komputer sebagai larik bernilai numerik. Larik
tersebut dikenal sebagai piksel map atau bitmap. Ada tiga cara untuk menghasilkan citra
grafik yaitu citra didisain dengan tangan, citra yang didapat dari perhitungan dan citra
yang discan. Pemaparan citra raster dinyatakan oleh piksel dengan video displays
(Cathod-ray Tube CRT), flat panel displays (LCD), hardcopy (printer laser, dot matrix
printers, ink-jet printers). Contoh proses pemaparan permukaan adalah citra yang
ditangkap lalu disimpan di frame buffer, kemudian digunakan untuk mewarnai sebuah
titik pada permukaan pemapar. Selanjutnya proses scan di CRT. Frame buffer adalah
matriks 2 dimensi yang mewakili piksel pada pemapar. Ukuran matriks harus cukup
untuk menyimpan kedalam warna pemapar untuk semua piksel. Sebagai contoh pemapar
(monitor) berresolusi 1280 x 1024 mempunya kedalaman warna 24 bit (~16 juta warna)
membutuhkan ruang simpan sekitar 4 Mb.
Piksel dan Bitmap. Jumlah bit yang digunakan untuk mewakili warna/bayangan dari
masing-masing piksel (picture element = pixel). 4 bit/piksel = 24 = 16 level abu-abu.
IV. Implementasi
Program primitve drawing
#include <windows.h>#include <GL/gl.h>#include <GL/glut.h>
void display(void){/* bersihkan layar dari titik pixel yang masih ada */glClear (GL_COLOR_BUFFER_BIT);/* gambar poligon (rectangle) dengan titik sudut ** (0.25, 0.25, 0.0) and (0.75, 0.75, 0.0) */glColor3f (1.0, 1.0, 0.0);
glBegin(GL_POINTS);glVertex3f (0.0, 0.0, 0.0);glVertex3f (0.0, 0.8, 0.0);glVertex3f (0.8, 0.0, 0.0);glVertex3f (0.0, -0.8, 0.0);glVertex3f (-0.8, 0.0, 0.0);glEnd();
glFlush ();}
void kunci(unsigned char key, int x, int y){
switch (key){
case 27 :case 'q':exit(0);break;
}glutPostRedisplay();
}
Int main(int argc, char *argv[]){glutInitWindowSize(200,200);glutInitWindowPosition(100,100);glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE);glutCreateWindow("Suprapto");
glutDisplayFunc(display);glutKeyboardFunc(kunci);glutMainLoop();return 0;}
1. Gantilah sintak program yang berwarna merah bold untuk membuat berbagai macam
primitive drawing seperti sintak dibawah ini. Lakukan pengamatan apa yang terjadi ? dan
bagaimana hasilnya?
glBegin(GL_POINTS);
glBegin(GL_LINE_STRIP);
glBegin(GL_LINE_LOOP);
glBegin(GL_LINES);
glBegin(GL_TRIANGLES);
glBegin(GL_TRIANGLE_FAN);
glBegin(GL_TRIANGLE_STRIP);
glBegin(GL_QUADS);
glBegin(GL_QUAD_STRIP);
glBegin(GL_POLYGON);
2. Lakukan penyisipan glColor3f (X, X, X); pada tiap vertek, kemudian amati lagi apa
yang terjadi?
3. Lakukan pengaturan ketebalan titik dan garis dengan perintah glPointSize(x); dan
glLineWidth(x); kemudian amati apa yang terjadi?
V. Tugas
1. Cobalah program diatas lakukan percobaan sesuai dengan perintah diatas
2. Buat Segitiga sama kaki
3. Buat Gambar Kubus
4. Buat Warna Pelangi yang terdiri dari 7 warna
5. Buatlah Gambar segiempat dengan didalamnya diblok warna merah
Modul 2
Animasi
I. Tugas Pendahuluan
1. Apakah fungsi dari sintak
a. glvertex3f (x,y,z);
b. glcolor3f(x,x,x)
c. glBegin(GL_POINTS);
d. glBegin(GL_LINE_STRIP);
e. glBegin(GL_LINE_LOOP);
f. glBegin(GL_LINES);
g. glBegin(GL_TRIANGLES);
h. glBegin(GL_TRIANGLE_FAN);
i. glBegin(GL_TRIANGLE_STRIP);
j. glBegin(GL_QUADS);
k. glBegin(GL_QUAD_STRIP);
l. glBegin(GL_POLYGON);
2. Sebutkan dan jelaskan 20 perintah dalam opengl lainya!
II. Tujuan
Mahsiswa mampu membuat dan memanfaatkan animasi.
III. Teori Penunjang
Animasi.
Animasi, atau kebanyakan orang lebih banyak kenal dengan film animasi, adalah film
yang merupakan hasil dari pengolahan gambar tangan sehingga menjadi gambar yang bergerak.
Pada awal penemuannya, film animasi dibuat dari berlembar-lembar kertas gambar yang
kemudian di-"putar" sehingga muncul efek gambar bergerak. Dengan bantuan komputer dan
komputer grafik, pembuatan film animasi menjadi sangat mudah dan cepat. Bahkan akhir-akhir
ini lebih banyak bermunculan film animasi 3 dimensi daripada film animasi 2 dimensi. Wayang
kulit merupakan salah satu bentuk animasi tertua di dunia. Bahkan ketika teknologi elektronik
dan komputer belum diketemukan, pertunjukan wayang kulit telah memenuhi semua elemen
animasi seperti layar, gambar bergerak, dialog dan ilustrasi musik.
Selain wayang ternyata animasi sudah berusia sangat tua. Sejak ditemukan rangkaian
gerak dalam bentuk gambar pada berbagai artefak pada jaman Mesir Kuno 2000 tahun sebelum
masehi manusia sudah mencoba membuat ilustrasi gerakan yang akhirnya berkembang menjadi
animasi. Sampai akhirnya Paul Roget, Joseph Plateau dan Pierre Desvigenes menemukan pola
penglihatan mata, lahirlah dunia animasi yang sampai sekarang mampu melahirkan berbagai
keajaiban bagi para penontonnya. Dari menghadirkan adegan-adegan lucu dalam tradisional cell
animation, hingga special effect dahsyat dalam Computer Graphics Animation yang dilahirkan
studio-studio besar Hollywood.
Sejak menyadari bahwa gambar dapat dipakai sebagai alternatif media komunikasi,
timbul keinginan menghidupkan lambang-lambang tersebut menjadi cermin ekspresi
kebudayaan. Terbukti dengan diketemukannya berbagai artefak pada peradapan Mesir Kuno
2000 sebelum masehi. Salah satunya adalah beberapa panel yang menggambarkan aksi dua
pegulat dalam berbagai pose. Dalam salah satu ilustrasi Leonardo da Vinci yang terkenal,
dilukiskan anggota tubuh manusia dalam berbagai posisi.Seorang artis Italy Gioto, juga
melukiskan malaikat dalam posisi terbang dengan repitisi gerakan.
Animasi sendiri tidak akan pernah berkembang tanpa ditemukannya prinsip dasar
dari karakter mata manusia yaitu: persistance of vision (pola penglihatan yang teratur ). Paul
Roget, Joseph Plateau dan Pierre Desvigenes, melalui peralatan optik yang mereka ciptakan,
berhasil membuktikan bahwa mata manusia cenderung menangkap urutan gambar-gambar pada
tenggang waktu tertentu sebagai suatu pola. Dalam perkembangannya animasi secara umum bisa
didefinisikan sebagai: Suatu sequence gambar yang diekspos pada tenggang waktu tertentu
sehingga tercipta sebuah ilusi gambar bergerak.
Animation adalah “Illusion Of Motion” yang dibuat dari image statis yang ditampilkan
secara berurutan. Pada video atau film, animasi merancu pada teknik dimana setiap frame dalam
film dibuat secara terpisah. Frame bisa dihasilkan dari komputer, dari fotografi atau dari gambar
lukisan. Ketika frame-frame tersebut digabungkan, maka terdapat ilusi perubahan gambar, sesuai
dengan teori yang disebut dengan “persistance of vision”.
IV. Implemetasi
1. Program garis silang
#include <GL/glut.h>
static float rotAngle = 0.;void init(void){glClearColor(0.0,0.0, 0.2, 0.0);}
void display(void){glClear(GL_COLOR_BUFFER_BIT);glColor3f (0.0, 1.0, 0.0);
glPushMatrix();glRotatef(-rotAngle, 0.0, 0.0, 0.1);glBegin (GL_LINES);
glVertex2f (-0.5, 0.5);glVertex2f (0.5, -0.5);
glEnd ();glPopMatrix();
glColor3f (0.0, 0.0, 1.0);glPushMatrix();glRotatef(rotAngle, 0.0, 0.0, 0.1);
glBegin (GL_LINES);glVertex2f (0.5, 0.5);
glVertex2f (-0.5, -0.5);glEnd ();glPopMatrix();
glFlush();}
void reshape(int w, int h){glViewport(0, 0, w, h);glMatrixMode(GL_PROJECTION);glLoadIdentity();if (w <= h)
gluOrtho2D (-1.0, 1.0, -1.0*(GLfloat)h/(GLfloat)w, 1.0*(GLfloat)h/(GLfloat)w); elsegluOrtho2D (-1.0*(GLfloat)w/(GLfloat)h, 1.0*(GLfloat)w/(GLfloat)h, -1.0, 1.0);
glMatrixMode(GL_MODELVIEW);glLoadIdentity();}
void keyboard(unsigned char key, int x, int y){switch (key){case 'r':case 'R':
rotAngle += 20.;if (rotAngle >= 360.) rotAngle = 0.;glutPostRedisplay();break;
case 27:exit(0);break;default:break;
}}
int main(int argc, char** argv){glutInit(&argc, argv);glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);glutInitWindowSize (300, 300);glutCreateWindow (argv[0]);init();glutReshapeFunc (reshape);glutKeyboardFunc (keyboard);glutDisplayFunc (display);
glutMainLoop();return 0;}
2. Program Kotak berputar#include <GL/glut.h>
static GLfloat spin = 0.0;
void display(void){glClear(GL_COLOR_BUFFER_BIT);glPushMatrix();glRotatef(spin, 0.0, 0.0, 1.0);glColor3f(1.0, 1.0, 1.0);glRectf(-25.0, -25.0, 25.0, 25.0);glPopMatrix();glutSwapBuffers();}
void spinDisplay(void){spin = spin + 2.0;
if (spin > 360.0)spin = spin - 360.0;glutPostRedisplay();
}
void init(void){glClearColor (0.0, 0.0, 0.0, 0.0);
glShadeModel (GL_FLAT);}
void reshape(int w, int h){glViewport (0, 0, (GLsizei) w, (GLsizei) h);glMatrixMode(GL_PROJECTION);glLoadIdentity();glOrtho(-50.0, 50.0, -50.0, 50.0, -1.0, 1.0);glMatrixMode(GL_MODELVIEW);glLoadIdentity();}
void mouse(int button, int state, int x, int y){switch (button){
case GLUT_LEFT_BUTTON:if (state == GLUT_DOWN)
glutIdleFunc(spinDisplay);
break;case GLUT_MIDDLE_BUTTON:case GLUT_RIGHT_BUTTON:
if (state == GLUT_DOWN)glutIdleFunc(NULL);
break;default:break;
}}
int main(int argc, char** argv){glutInit(&argc, argv);glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);glutInitWindowSize (300, 300);glutInitWindowPosition (100, 100);glutCreateWindow (argv[0]);init ();glutDisplayFunc(display);glutReshapeFunc(reshape);glutMouseFunc(mouse);glutMainLoop();return 0;}
3. Program Gerakan Lengan#include <GL/glut.h>
static int shoulder = 0, elbow = 0;void init(void){glClearColor (0.0, 0.0, 0.0, 0.0);glShadeModel (GL_FLAT);}
void display(void){glClear (GL_COLOR_BUFFER_BIT);glPushMatrix();glTranslatef (-1.0, 0.0, 0.0);
glRotatef ((GLfloat) shoulder, 0.0, 0.0, 1.0);glTranslatef (1.0, 0.0, 0.0); glPushMatrix();glScalef (2.0, 0.4, 1.0); glutWireCube (1.0);glPopMatrix();
glTranslatef (1.0, 0.0, 0.0);glRotatef ((GLfloat) elbow, 0.0, 0.0, 1.0);glTranslatef (1.0, 0.0, 0.0); glPushMatrix();glScalef (2.0, 0.4, 1.0);glutWireCube (1.0);glPopMatrix();glPopMatrix();glutSwapBuffers();}
void reshape (int w, int h){glViewport (0, 0, (GLsizei) w, (GLsizei) h);glMatrixMode (GL_PROJECTION);glLoadIdentity ();gluPerspective(65.0, (GLfloat) w/(GLfloat) h, 1.0, 20.0);
glMatrixMode(GL_MODELVIEW);glLoadIdentity();glTranslatef (0.0, 0.0, -5.0);}
void keyboard (int key, int x, int y){switch (key){
case 's':shoulder = (shoulder + 5) % 360;glutPostRedisplay();break;
case 'S':shoulder = (shoulder - 5) % 360;glutPostRedisplay();break;
case 'e':elbow = (elbow + 5) % 360;glutPostRedisplay();break;
case 'E':elbow = (elbow - 5) % 360;glutPostRedisplay();break;
case 27:exit(0);break;default:break;
}}
void main(int argc, char** argv){glutInit(&argc, argv);glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);
glutInitWindowSize (700, 600);glutInitWindowPosition (100, 100);glutCreateWindow (argv[0]);init ();glutDisplayFunc(display);glutReshapeFunc(reshape);
glutKeyboardFunc(keyboard);glutMainLoop();return 0;}
4. Program membuat planet#include <GL/glut.h>
static year = 0, day = 0;void init(void){glClearColor (0.0, 0.0, 0.0, 0.0);
glShadeModel (GL_FLAT);}
void display(void){
glClear (GL_COLOR_BUFFER_BIT);glColor3f (1.0, 1.0, 1.0);glPushMatrix();glutWireSphere(1.0, 20, 16); /* gambar matahari */glRotatef ((GLfloat) year, 0.0, 1.0, 0.0);
glTranslatef (2.0, 0.0, 0.0);glRotatef ((GLfloat) day, 0.0, 1.0, 0.0);glutWireSphere(0.2, 10, 8); /* gambar planet kecil */glPopMatrix();glutSwapBuffers();}
void reshape (int w, int h){glViewport (0, 0, (GLsizei) w, (GLsizei) h);glMatrixMode (GL_PROJECTION);glLoadIdentity ();gluPerspective(60.0, (GLfloat) w/(GLfloat) h, 1.0, 20.0); glMatrixMode(GL_MODELVIEW);
glLoadIdentity();gluLookAt (0.0, 0.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);
}
void keyboard (int key, int x, int y){
switch (key){
case 'd':day = (day + 10) % 360;glutPostRedisplay();break;
case 'D':day = (day - 10) % 360;glutPostRedisplay();break;
case 'y':year = (year + 5) % 360;glutPostRedisplay();break;
case 'Y':year = (year - 5) % 360;glutPostRedisplay();break;
case 27:exit(0);break;default:break;
}}
void main(int argc, char** argv){
glutInit(&argc, argv);glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);glutInitWindowSize (500, 500);glutInitWindowPosition (100, 100);glutCreateWindow (argv[0]);init ();glutDisplayFunc(display);glutReshapeFunc(reshape);glutKeyboardFunc(keyboard);glutMainLoop();return 0;}
1. Cobalah program diatas. Bagaimana hasilnya?
2. Analisalah setiap sintak program dengan mencermati program intinya!
V. Tugas1. Dari praktikum sebelumnya sampai sekarang, buatlah program untuk menampilkan
gambar segiempat dengan warna yang dapat diubah dengan menggunakan tombol panah
dan
2. Ubahlah program 1 supaya kedua garis yang muncul pada gambar menjadi bergerak
searah dengan simpangan 90 derajat antara keduanya !
3. Pada program 2 ubahlah program supaya bergerak jika di tekan tombol keyboard “P” atau
“p” !
4. Pada program 4 Lakukan perubahan nilai pada gluLookAt (0.0, 0.0, 5.0, 0.0, 0.0, 0.0, 0.0,
1.0, 0.0); dan glScalef (1.0, 2.0, 1.0); !
5. Pada program 4 sintak glutWireCube (1.0); lakukan perubahan dengan sintak
glutWireSphere(1.0, 40, 16); dengan melakukan perubahan nilai pada gluLookAt (0.0,
0.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); dan glScalef (1.0, 2.0, 1.0); kemudian amati apa yang
terjadi?
6. Pada program 4. Buatlah gambar lintasan bumi yang mengelilingi matahari!
Modul 3
Pencahayaan pada OpenGL
I. Tugas Pendahuluan
1. Jelaskan tentang warna RGB!
2. Jelaskan tentang Cahaya Ambient, Diffuse, dan Specular
II. Tujuan
Mahasiswa mampu membuat dan memanfaatkan pencahayaan pada OpenGL.
III. Teori Penunjang
Warna
Warna sebenarnya merupakan persepsi kita terhadap pantulan cahaya dari benda-benda di depan
mata. Tidak ada ketentuan jumlah warna dasar tetapi dalamimplementasi dengan komputer hanya
dibutuhkan tiga warna dasar. Ada berbagaimodel untuk menyatakan warna dasar serta rentang
warna yang dihasilkan, salah satu diantaranya adalah RGB. Model warna RGB dapat
digambarkan sebagai sebuah kotak yang mempunyai tiga sumbu yaitu : R(red), G(green),
B(blue), dimana nilai masing-masing sumbu berkisar dari 0 sampaii 1. Warna ditentukan
berdasarkan lokasi warna tersebut terhadap Sumbu RGB. Gambar 1 menunjukkan model RGB.
Gambar 1. Model RGB
Salah satu tujuan dari grafika komputer adalah menghasilkan tampilan yang senyata mungkin,
dan karena pengaruh cahaya sangat besar terhadap hasil nyata maka dalam membuat tampilan
akhir faktor pencahayaan harus diperhitungkan pula. Tetapi mengingat bahwa grafika komputer
adalah model matematika dari kehidupan nyata maka pencahayaan juga harus diubah menjadi
model matematika. Model matematika itu harus memenuhi persyaratan sebagai berikut :
Menghasilkan efek seperti cahaya sungguhan
Dapat dihitung dengan cepat
Model pencahayaan tiga dimensi menyangkut yang realistik menyangkut dua elemen
penting yang sangat berkaitan erat dengan shading model, yaitu :
Keakuratan dalam menggambarkan objek.
Teknik pencahayaan yang baik.
Saat cahaya menimpa permukaan benda maka sebagian cahaya akan dipantulkan dan
sebagian lain diserap. Bergantung kepada frekuensi atau panjang gelombang yang dipantulkan
dan diserap maka kita akan melihat warna. Mata kita selain sensitive terhadap warna juga sensitif
terhadap intensitas cahaya (brightness). Secara awam kita menyebut intensitas cahaya sebagai
kecerahan.
OpenGL akan melakukan komputasi warna setiap pixel di display akhir, ditampilkan
adegan itu dilakukan di frame buffer. Bagian dari komputasi ini tergantung pada pencahayaan
yang digunakan dalam adegan dan hal tersebut berkenaan dengan bagaimana suatu benda dalam
adegan yang memantulkan atau menyerap cahaya. Sebagai contoh saja misalnya sebuah lautan
memiliki warna yang berbeda pada cerah maupun pada saat hari mendung. Adanya sinar
matahari atau awan menentukan apakah laut termelihat sebagai pirus terang atau abu-abu keruh
kehijauan. Pada kenyataannya, sebagian besar objek bahkan yang tidak terlihat tiga dimensi
sampai mereka diterangi cahaya. Pada gambar 2 menunjukkan dua versi dari adegan yang persis
sama yaitu sebuah bola, dimana satu dengan pencahayaan dan satu tanpa pencahayaan.
Gambar 2. Sebuah spere dengan diterangi cahaya dan tidak diterangi
Seperti ditunjukkan pada Gambar 2, wilayah gelap tampak tidak berbeda daribul atan dua
dimensi . hal Ini menunjukkan betapa pentingnya interaksi antara obyek dan cahaya adalah dalam
menciptakan adegan tiga dimensi. Agar obyek yang telah dibuat terlihat lebih nyata, diperlukan
tambahan efek pencahayaan pada obyek yang telah kita buat. Pencahayaan adalah proses
pemberian cahaya pada suatu obyek, dikenal dengan istilah lighting atau iluminasi. Pada OpenGL
terdapat sebuah perbedaan penting antara warna dan pencahayaan yang perlu pahami.
Ketika menggunakan pencahayaan atau tekstur pemetaan dengan efek pencahayaan
dihidupkan, warna dari vertex adalah efek kumulatif dari warna bahan dan cahaya yang bersinar
di puncak. Ketika pencahayaan dimatikan, maka warna dari vertex adalah efek pengaturan warna
dan warna yang berbeda dengan bahan warna.
Gambar 3. Contoh ambient, diffuse, dan specular pada pantulan cahaya
Dengan menggunakan OpenGL, dapat memanipulasi pencahayaan dan obyek dalam
sebuah adegan untuk menciptakan berbagai macam efek. Dalam pokok bahasan pada bab
pencahayaan akan dimulai dengan sebuah pencahayaan yang penting pada permukaan
tersembunyi penghapusan. Kemudian menjelaskan bagaimana untuk mengontrol pencahayaan
dalam suatu adegan, membahas model konseptual OpenGL pencahayaan, dan menggambarkan
secara rinci cara mengatur pencahayaan dengan banyak parameter untuk mendapatkan efek
tertentu. Pada akhir bab, perhitungan matematis yang menentukan bagaimana warna
mempengaruhi pencahayaan disajikan.
Pencahayaan pada OpenGL dan Dunia Nyata
Ketika melihat permukaan fisik, persepsi warna pada mata tergantung pada distribusi
energi foton yang datang dan memicu sel-sel kerucut mata. Foton berasal dari sumber cahaya
atau kombinasi dari sumber, yang sebagian diserap dan sebagian yang dipantulkan oleh
permukaan. Selain itu, permukaan yang berbeda memiliki sifat yang sangat berbeda-beda,
misalnya yang mengkilap dengan sempurna akan memantulkan cahaya dalam arah tertentu,
sementara yang lain menyebarkan cahaya sama-sama masuk di segala penjuru. Pencahayaan pada
OpenGL hanya dengan cahaya pendekatan dan cahaya lampu seolah-olah dapat dipecah menjadi
komponen merah, hijau, dan biru. Dengan demikian, warna sumber cahaya dicirikan oleh jumlah
warna yang memancarkan cahaya merah, hijau, dan biru, dan materi permukaan ditandai dengan
persentase komponen warna merah, hijau, dan biru yang masuk dan tercermin dalam berbagai
arah. Persamaan pencahayaan pada OpenGL hanya sebuah pendekatan, tetapi satu yang bekerja
cukup baik dan dapat dihitung relatif cepat. Jika menginginkan yang lebih akurat atau model
pencahayaan hanya berbeda, harus melakukan perhitungan sendiri dalam perangkat lunak.
Dengan perangkat lunak tersebut dapat menjadi sangat kompleks, seperti beberapa jam membaca
buku teks optik pun harus meyakinkan.
Model pencahayaan dalam OpenGL, cahaya dalam sebuah adegan berasal dari beberapa
sumber cahaya yang dapat secara individual diaktifkan dan dinonaktifkan. Beberapa cahaya
datang dari arah atau posisi tertentu, dan beberapa cahaya umumnya tersebar karena adanya suatu
peristiwa. Sebagai contoh, ketika menghidupkan bola lampu dalam ruangan, sebagian besar
berasal dari cahaya bola lampu, tetapi beberapa cahaya datang setelah ada pantulan dari dinding
satu, dua, tiga, atau lebih. Cahaya yang memantul ini disebut ambient dan dapat diasumsikan
begitu cahaya tersebar tidak ada cara untuk mengetahui arah semula, tetapi hal ini akan
menghilang jika suatu sumber cahaya dimatikan. Akhirnya, mungkin ada cahaya ambient umum
dalam adegan yang tidak berasal dari sumber tertentu, seolah-olah telah tersebar beberapa kali
sumber cahaya asli
dan tidak mungkin untuk menentukan. Dalam model OpenGL, sumber cahaya hanya memiliki
efek ketika ada permukaan yang menyerap dan memantulkan cahaya. Setiap permukaan
diasumsikan terdiri dari bahan dengan berbagai sifat. Sebuah bahan dapat memancarkan cahaya
sendiri seperti lampu pada sebuah mobil atau mungkin menyebarkan beberapa cahaya yang
masuk ke segala penjuru, dan mungkin juga memantulkan sebagian dari cahaya masuk dalam
arah preferensial seperti cermin atau permukaan mengilap. Model pencahayaan yang OpenGL
mempertimbangkan pencahayaan yang dibagi menjadi empat komponen independen:
memancarkan (emissi), ambient, diffuse, dan specular. Semua empat komponen dihitung secara
independen dan kemudian ditambahkan secara bersama-sama.
Cahaya Ambient, Diffuse, dan Specular
Pencahayaan ambient adalah cahaya yang sudah berserakan begitu banyak disebabkan
oleh lingkungan dan arahnya tidak mungkin ditentukan atau tampaknya datang dari segala
penjuru. Backlighting pada sebuah ruangan memiliki komponen ambient besar, karena sebagian
besar cahaya yang mencapai mata yang memantul dari banyak permukaan. Sebuah lampu sorot
kecil di luar rumah memiliki komponen ambient, sebagian besar cahaya dalam arah yang sama,
dan karena diluar, sangat sedikit cahaya mencapai mata setelah memantul dari benda-benda lain.
Ketika cahaya ambient menyerang permukaan, maka akan tersebar merata di segala penjuru.
Komponen cahaya diffuse adalah komponen yang berasal dari satu arah, jadi akan terang kalau
hal tersebut terjadi tepat diatas sebuah permukaan dibandingkan jika hampir tidak terjadi di atas
permukaan. Setelah mengenai permukaan, akan tersebar merata di segala penjuru, sehingga
tampak sama-sama terang, tak peduli di mana mata berada. Setiap cahaya yang datang dari posisi
atau arah tertentu mungkin memiliki komponen diffuse.
Cahaya specular datang dari arah tertentu, dan cenderung terpental pada permukaan
dalam arah yang diinginkan. sinar laser berkualitas tinggi memantul pada cermin dan
menghasilkan hampir 100 persen refleksi specular. Logam atau plastic mengkilap memiliki
komponen specular tinggi, dan kapur atau karpet telah hampir tidak ada. Specularity dapat juga
dianggap sebagai shininess. Meskipun sumber cahaya memberikan satu distribusi frekuensi,
komponen ambient, diffuse, dan specular mungkin berbeda. Sebagai contoh, jika memiliki
cahaya putih di sebuah ruangan dengan dinding merah, cahaya yang tersebar cenderung menjadi
warna merah, meskipun cahaya secara langsung objek putih yang mencolok. OpenGL
memungkinkan untuk mengatur nilai merah, hijau, dan biru untuk setiap komponen cahaya
secara bebas.
IV. Implementasi
Program 1. Sebuah Lit Sphere.
Dibawah ini merupakan langkah-langkah yang diperlukan untuk menambahkan pencahayaan ke
obyek.
3. Tentukan vektor normal untuk setiap sudut dari semua benda. Vektor normal ini
menentukan orientasi objek relatif terhadap sumber cahaya.
4. Buat, pilih, dan atur posisi satu atau lebih dari sebuah sumber cahaya.
5. Ciptakan dan pilih model pencahayaan, yang mendefinisikan tingkat cahaya
lingkungan global dan lokasi efektif dari sudut pandang (untuk keperluan perhitungan
pencahayaan).
6. Tentukan sifat-sifat material untuk objek-objek dalam adegan.
Contoh program dibawah akan menyelesaikan tugas ini. Program tersebut akan menampilkan
sebuah bola diterangi satu sumber cahaya.
1. Program menggambar sebuah Lit Sphere: light.c
#include <GL/gl.h>#include <GL/glu.h>#include <GL/glut.h>
void init(void){GLfloat mat_specular[] = { 1.0, 1.0, 1.0, 1.0 };
GLfloat mat_shininess[] = { 50.0 };GLfloat light_position[] = { 1.0, 1.0, 1.0, 0.0 };glClearColor (0.0, 0.0, 0.0, 0.0);glShadeModel (GL_SMOOTH);
glMaterialfv(GL_FRONT, GL_SPECULAR, mat_specular);glMaterialfv(GL_FRONT, GL_SHININESS, mat_shininess);glLightfv(GL_LIGHT0, GL_POSITION, light_position);
glEnable(GL_LIGHTING);glEnable(GL_LIGHT0);glEnable(GL_DEPTH_TEST);}
void display(void){glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);glutSolidSphere (1.0, 20, 16);glFlush ();}
void reshape (int w, int h){glViewport (0, 0, (GLsizei) w, (GLsizei) h);glMatrixMode (GL_PROJECTION);glLoadIdentity();if (w <= h)
glOrtho (-1.5, 1.5, -1.5*(GLfloat)h/(GLfloat)w, 1.5*(GLfloat)h/(GLfloat)w, - 10.0, 10.0);else
glOrtho (-1.5*(GLfloat)w/(GLfloat)h, 1.5*(GLfloat)w/(GLfloat)h, -1.5, 1.5, -10.0, 10.0);glMatrixMode(GL_MODELVIEW);glLoadIdentity();}
int main(int argc, char** argv){
glutInit(&argc, argv);glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB | GLUT_DEPTH);glutInitWindowSize (500, 500); glutInitWindowPosition (100, 100);glutCreateWindow (argv[0]);init ();glutDisplayFunc(display);
glutReshapeFunc(reshape);glutMainLoop();return 0;}
2. Program Obyek Spere
#include <GL/glut.h>
GLfloat light_diffuse[] ={1.0, 1.0, 0.0, 1.0};GLfloat light_position[] ={1.0, 1.0, 1.0, 0.20}; GLUquadricObj *qobj;
void display(void){
glClear(GL_COLOR_BUFFER_BIT |GL_DEPTH_BUFFER_BIT);glCallList(1); /* tampilan list render sphere */glutSwapBuffers();}
void gfxinit(void){qobj = gluNewQuadric(); // glut LibrarygluQuadricDrawStyle(qobj, GLU_FILL);glNewList(1, GL_COMPILE); /* membuat tampilan sphere *///gluSphere(radius, slices, stacks);gluSphere(qobj, 1.0, 20, 20);gluCylinder(qobj, 1, 1, 3, 20, 20);gluDisk(qobj, 0.5, 1, 20, 20);gluPartialDisk(qobj, 0.5, 1, 20, 20, 45, 270);
Lakukan percobaan dengan memilih salah satu dari sintak dengan warna merahtebal. Lakukan perubahan nilai.
glEndList();glLightfv(GL_LIGHT0, GL_DIFFUSE, light_diffuse);glLightfv(GL_LIGHT0, GL_POSITION, light_position);glEnable(GL_LIGHTING);glEnable(GL_LIGHT0);glEnable(GL_DEPTH_TEST);glMatrixMode(GL_PROJECTION);// gluPerspective(field of view in degree, aspect ratio, Z near, Z far );gluPerspective(40.0, 1.0, 1.0, 10.0);glMatrixMode(GL_MODELVIEW);gluLookAt(0.0, 0.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.);glTranslatef(0.0, 0.0, -1.0);}
int main(int argc, char **argv){glutInit(&argc, argv);glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);glutCreateWindow("sphere");glutDisplayFunc(display);gfxinit();glutCreateWindow("pencahayaan");glutDisplayFunc(display);gfxinit();
glutMainLoop();return 0;}
3. Program Obyek Kubus
#include <GL/glut.h>
GLfloat light_diffuse[] = {1.0, 0.0, 0.0, 1.0}; /* warna merah terang. */GLfloat light_position[] = {1.0, 1.0, 1.0, 0.0};GLfloat n[6][3] = { /* secara normal kubus ada 6 muka. */{-1.0, 0.0, 0.0}, {0.0, 1.0, 0.0}, {1.0, 0.0, 0.0}, {0.0, -1.0, 0.0}, {0.0, 0.0, 1.0}, {0.0,0.0, -1.0} };
GLint faces[6][4] = { {0, 1, 2, 3}, {3, 2, 6, 7}, {7, 6, 5, 4}, {4, 5, 1, 0}, {5, 6, 2, 1}, {7,4, 0, 3} };GLfloat v[8][3];
void drawBox(void){
int i;for (i = 0; i < 6; i++){
glBegin(GL_QUADS);glNormal3fv(&n[i][0]);
glVertex3fv(&v[faces[i][0]][0]);glVertex3fv(&v[faces[i][1]][0]);glVertex3fv(&v[faces[i][2]][0]);glVertex3fv(&v[faces[i][3]][0]);glEnd();
}}
void display(void){glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);drawBox();glutSwapBuffers();}
void init(void){/* pengaturan data vertek kubus. */v[0][0] = v[1][0] = v[2][0] = v[3][0] = -1;v[4][0] = v[5][0] = v[6][0] = v[7][0] = 1;v[0][1] = v[1][1] = v[4][1] = v[5][1] = -1;v[2][1] = v[3][1] = v[6][1] = v[7][1] = 1;v[0][2] = v[3][2] = v[4][2] = v[7][2] = 1;v[1][2] = v[2][2] = v[5][2] = v[6][2] = -1;
/* meng-Enable-kan pencahayaan OpenGL single. */glLightfv(GL_LIGHT0, GL_DIFFUSE, light_diffuse);glLightfv(GL_LIGHT0, GL_POSITION, light_position);glEnable(GL_LIGHT0);glEnable(GL_LIGHTING);glEnable(GL_DEPTH_TEST);
/* mengatur penglihatan kubus. */glMatrixMode(GL_PROJECTION);/* sudut pandangan, aspek ratio, kedekatan Z, jauh Z */gluPerspective(40.0,1.0, 1.0, 10.0);glMatrixMode(GL_MODELVIEW);
gluLookAt(0.0, 0.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.);
/* mengatur posisi kubus */glTranslatef(0.0, 0.0, -1.0);glRotatef(60, 1.0, 0.0, 0.0);glRotatef(-20, 0.0, 0.0, 1.0);}
int main(int argc, char **argv){glutInit(&argc, argv);glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);glutCreateWindow("kubus warna merah 3D dengan pencahayaan");glutDisplayFunc(display);init();glutMainLoop();return 0;}
Cobalah program diatas
Lakukan perubahan sintak atau nilai yang ada dalam program diatas
Bagaimana hasilnya?
V. Tugas
1. Buatlah gambar donat dilengkapi dengan pencahayaan satu sumber
2. Buatlah program gambar cone dilengkapi dengan pencahayaan satu sumber
Modul 4
Bayangan
I. Tugas Pendahuluan
Jelaskan fungsi dari perintag berikut ini:
glPushMatrix();
glRotatef(ry,0,1,0);
glPopMatrix();
glPushMatrix();
glShadowProjection(l,e,n);
II. Tujuan
Mahasiswa mampu membuat dan memanfaatkan bayangan dalam sebuah gambar.
III. Teori Penunjang
Untuk menghasilkan gambar yang realistik perlu memodelkan pencerminan dan
pembiasan maupun memunculkan bayangan karena pengaruh dari adanya cahaya. Dengan
memodelkan pencerminan untuk benda yang reflektif seperti cermin akan dihasilkan pantulan
ataupun bayangan benda. Dan efek pembiasan cahaya dapat dimodelkan pada benda yang
transparan untuk menghasilkan penampakan obyek lain yang berada di belakang obyek
transparan tersebut serta efek pengumpulan cahaya bias. Effek bayangan ini sangat penting
karena dengan adanya effek tersebut seolah-olah benda tersebut nampak nyata. Bayangan sebuah
obyek benda harus disesuaikan dengan bentuk benda aslinya dan asal sumber cahaya tersebut
berada dan banyaknya sumber cahaya.
IV. Implemetasi
1. Program bayangan
#include <math.h>#include <stdio.h>#include <GL/glut.h>
double rx = 0.0;double ry = 0.0;
float l[] = { 0.0, 80.0, 0.0 }; // koordinat sumber cahayafloat n[] = { 0.0, -1.0, 0.0 };float e[] = { 0.0, -60.0, 0.0 };
void help();
// obyek yang akan digambar draw(){
}glutSolidTeapot(30.0);
glutSolidSphere(40, 16, 16);glutSolidCube (40);
// Isi dengan salah satu saja (cetak merah tebal), dan berilah obyek yang selain dalam tabelini}
//membuat proyeksi bayanganvoid glShadowProjection(* l, * e, * n)
{float d, c;float mat[16];
d = n[0]*l[0] + n[1]*l[1] + n[2]*l[2];c = e[0]*n[0] + e[1]*n[1] + e[2]*n[2] - d;
mat[0] = l[0]*n[0]+c; // membuat matrik. OpenGL menggunakan kolom matrikmat[4] = n[1]*l[0];mat[8] = n[2]*l[0];mat[12] = -l[0]*c-l[0]*d;
mat[1] = n[0]*l[1];mat[5] = l[1]*n[1]+c;mat[9] = n[2]*l[1];mat[13] = -l[1]*c-l[1]*d;
mat[2] = n[0]*l[2];mat[6] = n[1]*l[2];mat[10] = l[2]*n[2]+c;mat[14] = -l[2]*c-l[2]*d;
mat[3] = n[0];mat[7] = n[1];mat[11] = n[2];mat[15] = -d;
glMultMatrixf(mat); // kalikan matrik}
void render(){glClearColor(0.0,0.6,0.9,0.0);glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
glLightfv(GL_LIGHT0, GL_POSITION, l);glDisable(GL_CULL_FACE);glDisable(GL_LIGHTING);glColor3f(1.0,1.0,0.0);
glBegin(GL_POINTS);glVertex3f(l[0],l[1],l[2]);
glEnd();
glColor3f(0.8,0.8,0.8);glBegin(GL_QUADS);
glNormal3f(0.0,1.0,0.0);glVertex3f(-1300.0,e[1]-0.1, 1300.0);glVertex3f( 1300.0,e[1]-0.1, 1300.0);glVertex3f( 1300.0,e[1]-0.1,-1300.0);glVertex3f(-1300.0,e[1]-0.1,-1300.0);
glEnd();
// gambar bayanganglPushMatrix();glRotatef(ry,0,1,0);glRotatef(rx,1,0,0);glEnable(GL_LIGHTING);glColor3f(0.0,0.0,0.8);draw();glPopMatrix();
//sekarang gambar bayangan yang munculglPushMatrix();glShadowProjection(l,e,n);glRotatef(ry,0,1,0);glRotatef(rx,1,0,0);glDisable(GL_LIGHTING);glColor3f(0.4,0.4,0.4);draw();glPopMatrix();glutSwapBuffers();}
void keypress(unsigned char c, int a, int b){( c==27 ) exit(0);( c=='s' ) l[1]-=5.0;( c=='w' ) l[1]+=5.0;( c=='a' ) l[0]-=5.0;( c=='d' ) l[0]+=5.0;( c=='q' ) l[2]-=5.0;( c=='e' ) l[2]+=5.0;( c=='h' ) help();}
void help(){printf("proyeksi contoh bayangan sebuah obyek teapot\n");}
void idle(){rx+=0.4;ry+=0.7;render();}
void resize(w, h){glViewport(0, 0, w, h);}
int main(argc, * argv[]){glutInit(&argc, argv);glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);glutCreateWindow("proyeksi bayangan");glutReshapeFunc(resize);glutReshapeWindow(400,400);glutKeyboardFunc(keypress);glutDisplayFunc(render);glutIdleFunc(idle);
glEnable(GL_NORMALIZE);glEnable(GL_LIGHTING);glEnable(GL_COLOR_MATERIAL);glEnable(GL_DEPTH_TEST);glEnable(GL_LIGHT0);glEnable(GL_TEXTURE_2D);glMatrixMode(GL_PROJECTION);
glLoadIdentity();gluPerspective(60.0f, 1.0, 1.0, 400.0);
// Reset koordinat sebelum dimodifikasi/diubahglMatrixMode(GL_MODELVIEW);glLoadIdentity();glTranslatef(0.0, 0.0, -150.0);glutMainLoop();return 0;}
Lakukan program diatas
Analisalah sintak program diatas yang berhubungan dengan bayangan!
V. Tugas
1. Buatlah sebuah program yang menampilkan bayangan sebuah obyek benda yang berbeda
dengan program diatas disertai pencahayaan.
2. Buatlah benda kubus yang terletak di meja dengan disertai pencahayaan dan bayangannya
(sudut nya bebas)
3. Buatlah gambar tabung dilengkapi dengan bayangan dengan sudut 45° disertai
pengkabutan dengan ketebalan 40%