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
#include 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);
g.
glBegin(GL_TRIANGLES);
b. glcolor3f(x,x,x)
h. glBegin(GL_TRIANGLE_FAN);
c. glBegin(GL_POINTS);
i. glBegin(GL_TRIANGLE_STRIP);
d. glBegin(GL_LINE_STRIP);
j. glBegin(GL_QUADS);
e. glBegin(GL_LINE_LOOP);
k. glBegin(GL_QUAD_STRIP);
f. glBegin(GL_LINES);
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 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); else gluOrtho2D (-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 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 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 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! Tugas
V.
1. 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 #include #include 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 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 Library gluQuadricDrawStyle(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 merah tebal. 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 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; }
V.
Cobalah program diatas
Lakukan perubahan sintak atau nilai yang ada dalam program diatas
Bagaimana hasilnya? 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 double rx = 0.0; double ry = 0.0; float l[] = { 0.0, 80.0, 0.0 }; // koordinat sumber cahaya float 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 tabel ini } //membuat proyeksi bayangan void 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 matrik mat[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 bayangan glPushMatrix(); 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 muncul glPushMatrix(); 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/diubah glMatrixMode(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%
