Laboratorium Multimedia

Praktikum Komputer Grafik

[MODUL]

Ganjil 2012/2013
1/41
Laboratorium Multimedia

KONTRAK PRAKTIKUM
Nama Mata Kuliah Kode Mata Praktikum SKS Mata Kuliah Prasyarat Dosen Penanggung Jawab Dosen Penyusun Modul Semester / Th Ajaran Hari Pertemuan / Jam Tempat Pertemuan : Praktikum Komputer Grafik : TKC 111 :1 :: Abdullah Basuki Rahmat, S.Si., M.T. : Abdullah Basuki Rahmat, S.Si., M.T. Rima Tri Wahyuningrum, S.T., M.T. : Ganjil / 2012-2013 : Sesuai Jadwal Praktikum : Laboratorium Common Computing

Gambaran Umum :
Praktikum ini merupakan bagian dari kuliah Komputer Grafik. Dalam praktikum ini, praktikan dikenalkan dengan beberapa aspek yang berkaitan dalam pemrograman komputer grafik. Praktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL (Open Graphics Library): primitif drawing, animasi, pencahayaan pada OpenGL, bayangan, tekstur I dan tekstur II. Modul-modul ini harus dapat dikuasai oleh mahasiswa sebagai dasar penguasaan Komputer Grafik.

Mahasiswa diharapkan dapat: Mampu membuat dan memanfaatkan output primitif (titik, garis, segiempat, kurva, lingkaran, elips, fill area, dan teks). Mampu membuat dan memanfaatkan animasi. Mampu membuat dan memanfaatkan pencahayaan pada OpenGL. Mampu membuat dan memanfaatkan bayangan. Mampu membuat dan memanfaatkan tekstur.

Tujuan Pembelajaran Praktimum Mahasiswa mampu memahami dan menerapkan aplikasi komputer grafik menggunakan bahasa pemrograman OpenGL. Rumusan Kompetensi Dasar

Mahasiswa mampu memahami dan mengaplikasikan sistem grafik pada komputer. Mahasiswa mampu memahami dan mengaplikasikan berbagai teknik dan komponen komputer grafik.

Mahasiswa mampu memahami dan mengaplikasikan visualisasi obyek.

2/41

Laboratorium Multimedia

Referensi / Bahan Bacaan

E. Angel, Interactive Computer Graphics: A Top-Down Approach Using OpenGL, Fourth Edition, Pearson Education Inc., 2006. R. S. Wright, N. Haemel, G. Sellers and B. Lipchak, OpenGL Superbible: Comprehensive Tutorial and Reference, Fifth Edition, Pearson Education Inc., 2011.

Alur bagi peserta praktikum :

1. Pada Tiap Sesi Pelaksanaan Praktikum: a. Peserta praktikum menerima dan kemudian mempelajari modul praktikum. b. Peserta praktikum mengerjakan tugas pendahuluan yang diberikan. c. Peserta praktikum melakukan asistensi tugas pendahuluan tersebut. Asistensi ini digunakan bagi asisten untuk menilai kesiapan peserta juga berfungsi sebagai ajang diskusi peserta praktikum atas kesuliatan yang dialaminya. d. Peserta Praktikum melakukan implementasi tugas praktikum di laboratorium. e. Peserta praktikum mendemokan implementasi pada asisten. Penilaian yang dilakukan oleh asisten bersifat WISIWYG (What I see Is What You Get). 2. Pada akhir pelaksanaan seluruh sesi praktikum, ada Post Test, berupa test program.

Tugas
NO KRITERIA 1 Jenis Tugas 2 Tujuan INDIVIDU Post Test Mahasiswa memahami dan menerapkan aplikasi komputer grafik. Di akhir praktikum Program + Penjelasan KELOMPOK 1. Tugas Pendahuluan 2. Tugas Sesi Praktikum Mampu menyelesaikan masalah yang diberikan dengan bahasa pemrograman OpenGL. 1. Di awal sesi praktikum 2. Di akhir sesi praktikum 1. Program 2. Listing Program beserta penjelasan (soft copy Hardcopy di kumpulkan di akhir kegiatan praktikum)

3 4

Jadwal Pengumpulan Keluaran Tugas

3/41

Laboratorium Multimedia

Bobot Prosentase Penilaian Praktikum:

1. Pelaksanaan Praktikum 6 Modul a. Tugas pendahuluan 15% b. Kehadiran dan tugas praktikum 35% c. Asistensi dan laporan praktikum 35% 2. Post Test + Laporan resmi 15%

Form Nilai
Kelas : A Asdos :
Modul 1 No 1 2 3 4 5 6 7 NRP 010041110000 008041110010 010041110005 010041110009 010041110007 010041110009 NAMA n1 85 83 87 85 85 85 n2 80 78 85 80 79 79 n3 78 79 88 78 78 78 n1 85 85 86 84 85 85 n2 83 79 85 82 83 83 n3 84 72 87 83 85 83 n1 83 81 85 84 85 85 n2 82 75 87 78 80 78 n3 78 75 86 80 78 79 n1 85 84 86 85 84 83 n2 80 77 88 80 78 79 n3 76 74 87 79 80 78 n1 83 85 87 84 83 85 n2 79 70 78 72 74 75 n3 76 71 79 73 76 75 n1 85 84 86 85 84 83 n2 78 72 78 74 77 76 n3 n1 n2 n3 74 84,33 80,33 77,67 71 83,67 75,17 73,67 77 86,17 83,50 84,00 73 84,50 77,67 77,67 75 84,33 78,50 78,67 75 84,33 78,33 78,00 Modul 2 Modul 3 Modul 4 Modul 5 Modul 6 Rata-rata Posttest Nilai Nilai + Lapres Akhir Huruf Akhir 78 65 83 73 78 78 77,45 72,49 83,10 77,19 77,76 77,42 B+ B A B+ B+ B+

Presentase Nilai Kegiatan % Tugas Pendahuluan 15% Kehadiran + Tugas Praktikum 35% Asistensi + Laporan 35% Posttest + Lapres 15% Grade Nilai Kegiatan A B+ B C+ C D E

KET n1 n2 n3
post test

% > 80 > 75 - 80 > 70 - 75 > 65 - 70 > 60 - 65 50 - 60 < 50

Nilai Point Range A 4 > 80 B+ 3,5 >75 80 B 3 >70 75 C+ 2,5 > 65 70 C 2 >60 65 D 1 50 - 60 E 0 < 50 Catatan : Range Nilai bisa berubah sesuai dengan kondisi kelas Peraturan Praktikum :

Toleransi keterlambatan bagi Praktikan adalah 5 menit dari jadwal praktikum (konsekuensi : tidak boleh masuk, kecuali dengan alasan yang rasional) dengan catatan diberi tugas tambahan

4/41

Laboratorium Multimedia

Jika Tidak mengikuti kali praktikum tanpa alasan yang rasional (kecuali sakit dengan keterang dokter atau ada keluarga inti yang meninggal) maka nilai untuk semua modul praktikum adalah NOL

Praktikan diwajibkan untuk berpakaian rapi (tidak boleh kaos) dan bertingkah laku secara sopan

Praktikan dilarang membuka situs selain yang bersangkutan dengan praktikum, konsekuensinya nilai untuk modul praktikum bernilai NOL

Asistensi untuk tiap modul minimal 1x (jika tidak ada revisi) dan waktunya maksimal H-1 sebelum praktikum, Jika tidak ada asistensi maka untuk modul yang bersangkutan adalah NOL.

Kegiatan PLAGIASI dalam laporan praktikum akan diberikan nilai 0 untuk laporan yang bersangkutan dan harus membuat surat pernyataan yang disertai dengan nama, NPM, serta foto, yang diserahkan ke asisten praktikum masing-masing yang nantinya akan ditempel di mading Lab.

NB: saat pelaksanaan praktikum terdapat praktikan yang kedapatan membuka social media maka nilai untuk praktikum modul tersebut adalah 0

5/41

Laboratorium Multimedia

Modul 1 Primitif Drawing

I. Pengantar
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.

II. 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 2.1) adalah :

6/41

Laboratorium Multimedia

o Titik o Garis, Segiempat o Kurva, Lingkaran, ellipse, kurva bezier, kurva lainnya o Fill area o 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 dispalys (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. o Piksel dan Bitmap. Jumlah bit yang digunakan untuk mewakili warna/bayangan dari masin-masing piksel (picture element = pixel). 4 bit/piksel = 24 = 16 level abu-abu.

7/41

Laboratorium Multimedia

III. Program
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; }

IV. Percobaan
1. Gantilah sintak program yang berwarna merah bold untuk membuat berbagai macam primitive drawing. Lakukan pengamatan apa yang terjadi

8/41

Laboratorium Multimedia

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

9/41

Laboratorium Multimedia

Modul 2 Animasi
I. Pendahuluan
Review Praktikum sebelumnya Sebelum ke modul selanjutnya, perhatikan sintak pada Tabel 1.

Tabel 1. Perintah-perintah OpenGL yang telah dipraktekan

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

10/41

Laboratorium Multimedia

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.

II. Program
Program 1 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) {

11/41

Laboratorium Multimedia

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);

12/41

Laboratorium Multimedia

glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB); glutInitWindowSize (300, 300); glutCreateWindow (argv[0]); init(); glutReshapeFunc (reshape); glutKeyboardFunc (keyboard); glutDisplayFunc (display); glutMainLoop(); return 0; } Program 2 Membuat 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:

13/41

Laboratorium Multimedia

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; } Program 3 Membuat 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();

14/41

Laboratorium Multimedia

glPopMatrix(); glutSwapBuffers(); } void reshape (int w, int h) { glViewport (0, 0, (GLsizei) w, (GLsizei) h); glMatrixMode (GL_PROJECTION); glLoadIdentity (); gluPerspective(65.0, (GLfloat) 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;}

w/(GLfloat)

h,

1.0,

20.0);

15/41

Laboratorium Multimedia

Program 4 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;

16/41

Laboratorium Multimedia

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; }

III. Tugas
1. Cobalah program diatas ! 2. Amati pada fungsi program inti ! 3. Amati pada fungsi masukan ! 4. Dari praktikum sebelumnya sampai sekarang, buatlah program untuk menampilkan gambar segiempat dengan warna yang dapat diubah dengan menggunakan tombol panah
dan

5. Ubahlah program 1 supaya kedua garis yang muncul pada gambar menjadi bergerak searah dengan simpangan 90 derajat antara keduanya ! 6. Pada program 2 ubahlah program supaya bergerak jika di tekan tombol keyboard P atau p ! 7. 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); ! 8. 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? 9. Pada program 4. Buatlah gambar lintasan bumi yang mengelilingi matahari!

17/41

Laboratorium Multimedia

Modul 3 Pencahayaan pada OpenGL

I. Pendahuluan 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 dari bulatan 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.

18/41

Laboratorium Multimedia

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 berbedaada, 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.

19/41

Laboratorium Multimedia

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.

20/41

Laboratorium Multimedia

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 plastik 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.

II. Program Program 1. Sebuah Lit Sphere. Dibawah ini merupakan langkah-langkah yang diperlukan untuk menambahkan pencahayaan ke obyek. Tentukan vektor normal untuk setiap sudut dari semua benda. Vektor normal ini menentukan orientasi objek relatif terhadap sumber cahaya. Buat, pilih, dan atur posisi satu atau lebih dari sebuah sumber cahaya. Ciptakan dan pilih model pencahayaan, yang mendefinisikan tingkat cahaya lingkungan global dan lokasi efektif dari sudut pandang (untuk keperluan perhitungan pencahayaan). 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.
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);

21/41

Laboratorium Multimedia

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; } Program 2 Obyek sphere #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 Library gluQuadricDrawStyle(qobj, GLU_FILL); glNewList(1, GL_COMPILE); /* membuat tampilan sphere */ //gluSphere(radius, slices, stacks);

22/41

Laboratorium Multimedia

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; } Program 3 Objek 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]);

23/41

Laboratorium Multimedia

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; }

24/41

Laboratorium Multimedia

III. Tugas 1. Cobalah program diatas 2. Lakukan perubahan sintak atau nilai yang ada dalam program diatas 3. Masukan hasil pengamatan dan masukan hasilnya yang disertai gambar hasil compile dalam tabel pengamatan yang disesuaikan dengan pengamatan anda. (dengan MS Office) 4. Buatlah gambar donat dilengkapi dengan pencahayaan satu sumber 5. Buatlah program gambar cone dilengkapi dengan pencahayaan satu sumber

25/41

Laboratorium Multimedia

Modul 4 Bayangan
I. Pengantar 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.
Program 1 #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 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;

26/41

Laboratorium Multimedia

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

27/41

Laboratorium Multimedia

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);

28/41

Laboratorium Multimedia

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; }

Tugas 1. Cobalah program diatas 2. Lakukan pengamatan sintak atau nilai yang ada dalam program diatas, kemudian lakukan analisis sintak mana yang berhubungan dengan bayangan dan mana pencahayaan (tulis dan masukan dalam laporan) 3. Setelah dicompile Lakukan perubahan bayangan dan pencahayaan dengan menekan tombol: s/w memindahkan sumber cahaya naik/turun a/d memindahkan sumber cahaya ke kanan/ke kiri q/e memindahkan sumber cahaya ke depan atau ke belakang 4. Buatlah sebuah program yang menampilkan bayangan sebuah obyek benda yang berbeda dengan program diatas disertai pencahayaan. 5. Buatlah benda kubus yang terletak di meja dengan disertai pencahayaan dan bayangannya (sudut nya bebas) 6. Buatlah gambar tabung dilengkapi dengan bayangan dengan sudut 45 disertai pengkabutan dengan ketebalan 40%

29/41

Laboratorium Multimedia

Modul 5 Tekstur I
I. Pengantar Tekstur adalah tampilan permukaan (corak) dari suatu benda yang dapat dinilai dengan cara dilihat atau diraba. Pada prakteknya, tekstur sering dikategorikan sebagai corak dari suatu permukaan benda, misalnya permukaan karpet, baju, kulit kayu, dan lain sebagainya. Tekstur merupakan karakteristik intrinsik dari suatu citra yang terkait dengan tingkat kekasaran (roughness), granularitas (granulation), dan keteraturan (regularity) susunan struktural piksel. Aspek tekstural dari sebuah citra dapat dimanfaatkan sebagai dasar dari segmentasi, klasifikasi, maupun interpretasi citra. Tekstur dapat didefinisikan sebagai fungsi dari variasi spasial intensitas piksel (nilai keabuan) dalam citra. Berdasarkan strukturnya, tekstur dapat diklasifikasikan dalam dua golongan : a. Makrostruktur Tekstur makrostruktur memiliki perulangan pola lokal secara periodik pada suatu daerah citra, biasanya terdapat pada pola-pola buatan manusia dan cenderung mudah untuk direpresentasikan secara matematis.

Gambar 1. Contoh tekstur makrostruktur b. Mikrostruktur Pada tekstur mikrostruktur, pola-pola lokal dan perulangan tidak terjadi begitu jelas, sehingga tidak mudah untuk memberikan definisi tekstur yang komprehensif.

Gambar 2. Contoh tekstur mikrostruktur

30/41

Laboratorium Multimedia

Program 1 /* Program evaluasi untuk mengevaluasi kurva * permukaan secara otomatis menentukan koorditan texture */ #include <GL/glut.h> #include <stdlib.h> #include <math.h> GLfloat ctrlpoints[4][4][3] = { {{ -1.5, -1.5, 4.0}, { -0.5, -1.5, 2.0}, {0.5, -1.5, -1.0}, {1.5, -1.5, 2.0}}, {{ -1.5, -0.5, 1.0}, { -0.5, -0.5, 3.0}, {0.5, -0.5, 0.0}, {1.5, -0.5, -1.0}}, {{ -1.5, 0.5, 4.0}, { -0.5, 0.5, 0.0}, {0.5, 0.5, 3.0}, {1.5, 0.5, 4.0}}, {{ -1.5, 1.5, -2.0}, { -0.5, 1.5, -2.0}, {0.5, 1.5, 0.0}, {1.5, 1.5, -1.0}} }; GLfloat texpts[2][2][2] = {{{0.0, 0.0}, {0.0, 1.0}}, {{1.0, 0.0}, {1.0, 1.0}}}; void display(void) { glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glColor3f(1.0, 1.0, 1.0); glEvalMesh2(GL_FILL, 0, 20, 0, 20); glFlush(); } #define imageWidth 64 #define imageHeight 64 GLubyte image[3*imageWidth*imageHeight]; void makeImage(void) { int i, j; float ti, tj; for (i = 0; i < imageWidth; i++) { ti = 2.0*3.14159265*i/imageWidth; for (j = 0; j < imageHeight; j++) { tj = 2.0*3.14159265*j/imageHeight; image[3*(imageHeight*i+j)] = (GLubyte) 127*(1.0+sin(ti)); image[3*(imageHeight*i+j)+1] = (GLubyte) 127*(1.0+cos(2*tj)); image[3*(imageHeight*i+j)+2] = (GLubyte) 127*(1.0+cos(ti+tj)); } } } void init(void) { glMap2f(GL_MAP2_VERTEX_3, 0, 1, 3, 4, 0, 1, 12, 4, &ctrlpoints[0][0][0]); glMap2f(GL_MAP2_TEXTURE_COORD_2, 0, 1, 2, 2, 0, 1, 4, 2, &texpts[0][0][0]);

31/41

Laboratorium Multimedia

glEnable(GL_MAP2_TEXTURE_COORD_2); glEnable(GL_MAP2_VERTEX_3); glMapGrid2f(20, 0.0, 1.0, 20, 0.0, 1.0); makeImage(); glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_DECAL); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, imageWidth, imageHeight, 0, GL_RGB, GL_UNSIGNED_BYTE, image); glEnable(GL_TEXTURE_2D); glEnable(GL_DEPTH_TEST); glShadeModel (GL_FLAT); } void reshape(int w, int h) { glViewport(0, 0, (GLsizei) w, (GLsizei) h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); if (w <= h) glOrtho(-4.0, 4.0, -4.0*(GLfloat)h/(GLfloat)w, 4.0*(GLfloat)h/(GLfloat)w, -4.0, 4.0); else glOrtho(-4.0*(GLfloat)w/(GLfloat)h, 4.0*(GLfloat)w/(GLfloat)h, -4.0, 4.0, -4.0, 4.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glRotatef(85.0, 1.0, 1.0, 1.0); } void keyboard(unsigned char key, int x, int y) { switch (key) { case 27: exit(0); break; } } 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); glutKeyboardFunc(keyboard); glutMainLoop(); return 0; }

32/41

Laboratorium Multimedia

Program 2 /* program mendemontrasikan texture menggunakan glBindTexture() * untuk membuat dan mengatur 2 texture */ /* membuat texture papan catur */ #include <GL/glut.h> #include <stdlib.h> #include <stdio.h> #ifdef GL_VERSION_1_1 #define checkImageWidth 64 #define checkImageHeight 64 static GLubyte checkImage[checkImageHeight][checkImageWidth][4]; static GLubyte otherImage[checkImageHeight][checkImageWidth][4]; static GLuint texName[2]; void makeCheckImages(void) { int i, j, c; for (i = 0; i < checkImageHeight; i++) { for (j = 0; j < checkImageWidth; j++) { c = ((((i&0x8)==0)^((j&0x8))==0))*255; checkImage[i][j][0] = (GLubyte) c; checkImage[i][j][1] = (GLubyte) c; checkImage[i][j][2] = (GLubyte) c; checkImage[i][j][3] = (GLubyte) 255; c = ((((i&0x10)==0)^((j&0x10))==0))*255; otherImage[i][j][0] = (GLubyte) c; otherImage[i][j][1] = (GLubyte) 0; otherImage[i][j][2] = (GLubyte) 0; otherImage[i][j][3] = (GLubyte) 255; } } } void init(void) { glClearColor (0.0, 0.0, 0.0, 0.0); glShadeModel(GL_FLAT); glEnable(GL_DEPTH_TEST); makeCheckImages(); glPixelStorei(GL_UNPACK_ALIGNMENT, 1); glGenTextures(2, texName); glBindTexture(GL_TEXTURE_2D, texName[0]); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, checkImageWidth, checkImageHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, checkImage); glBindTexture(GL_TEXTURE_2D, texName[1]);

33/41

Laboratorium Multimedia

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_DECAL); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, checkImageWidth, checkImageHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, otherImage); glEnable(GL_TEXTURE_2D); } void display(void) { glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glBindTexture(GL_TEXTURE_2D, texName[0]); glBegin(GL_QUADS); glTexCoord2f(0.0, 0.0); glVertex3f(-2.0, -1.0, 0.0); glTexCoord2f(0.0, 1.0); glVertex3f(-2.0, 1.0, 0.0); glTexCoord2f(1.0, 1.0); glVertex3f(0.0, 1.0, 0.0); glTexCoord2f(1.0, 0.0); glVertex3f(0.0, -1.0, 0.0); glEnd(); glBindTexture(GL_TEXTURE_2D, texName[1]); glBegin(GL_QUADS); glTexCoord2f(0.0, 0.0); glVertex3f(1.0, -1.0, 0.0); glTexCoord2f(0.0, 1.0); glVertex3f(1.0, 1.0, 0.0); glTexCoord2f(1.0, 1.0); glVertex3f(2.41421, 1.0, -1.41421); glTexCoord2f(1.0, 0.0); glVertex3f(2.41421, -1.0, -1.41421); glEnd(); glFlush(); } 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, 30.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(0.0, 0.0, -3.6); } void keyboard(unsigned char key, int x, int y) { switch (key) { case 27: exit(0); break; }}

34/41

Laboratorium Multimedia

int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB | GLUT_DEPTH); glutInitWindowSize(250, 250); glutInitWindowPosition(100, 100); glutCreateWindow(argv[0]); init(); glutReshapeFunc(reshape); glutDisplayFunc(display); glutKeyboardFunc (keyboard); glutMainLoop(); return 0; } #else int main(int argc, char** argv) { fprintf (stderr, "program tekstur didemontrasikan dengan OpenGL Versi 1.0.\n"); return 0; } #endif

Tugas 1. Cobalah program diatas 2. Lakukan perubahan sintak atau nilai yang ada dalam program diatas ( yang berhubungan dengan texture saja) 3. Masukan hasil pengamatan dan masukan hasilnya yang disertai gambar hasil compile dalam tabel pengamatan yang disesuaikan dengan pengamatan anda. 4. Pada labsheet praktikum topik ini belum di lengkapi dengan teori mengenai teksture secara detail oleh karena itu buatlah makalah yang berisi tentang texture dengan topik: a. Tekture obyek serta Tekture koordinat NIM ganjil b. Teksture matrik serta Pencahayaan dan teksture NIM genap Makalah minimal 2 halaman A4 1 spasi, font: new time roman 12, tidak termasuk contoh program kumpulkan soft copy. Hasil dikumpulkan minggu depan

35/41

Laboratorium Multimedia

Modul 6 Tekstur II
Program 1 /* membuat texture papan catur */ #include <GL/glut.h> #include <stdlib.h> #include <stdio.h> #ifdef GL_VERSION_1_1 #define checkImageWidth 64 #define checkImageHeight 64 #define subImageWidth 16 #define subImageHeight 16 static GLubyte checkImage[checkImageHeight][checkImageWidth][4]; static GLubyte subImage[subImageHeight][subImageWidth][4]; static GLuint texName; void makeCheckImages(void) { int i, j, c; for (i = 0; i < checkImageHeight; i++) { for (j = 0; j < checkImageWidth; j++) { c = ((((i&0x8)==0)^((j&0x8))==0))*255; checkImage[i][j][0] = (GLubyte) c; checkImage[i][j][1] = (GLubyte) c; checkImage[i][j][2] = (GLubyte) c; checkImage[i][j][3] = (GLubyte) 255; } } for (i = 0; i < subImageHeight; i++) { for (j = 0; j < subImageWidth; j++) { c = ((((i&0x4)==0)^((j&0x4))==0))*255; subImage[i][j][0] = (GLubyte) c; subImage[i][j][1] = (GLubyte) 0; subImage[i][j][2] = (GLubyte) 0; subImage[i][j][3] = (GLubyte) 255; } } } void init(void) { glClearColor (0.0, 0.0, 0.0, 0.0); glShadeModel(GL_FLAT); glEnable(GL_DEPTH_TEST); makeCheckImages(); glPixelStorei(GL_UNPACK_ALIGNMENT, 1); glGenTextures(1, &texName); glBindTexture(GL_TEXTURE_2D, texName); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);

36/41

Laboratorium Multimedia

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, checkImageWidth, checkImageHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, checkImage); } void display(void) { glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glEnable(GL_TEXTURE_2D); glTexEnvf(GL_TEXTURE_ENV, GL_DECAL); glBindTexture(GL_TEXTURE_2D, texName); glBegin(GL_QUADS); glTexCoord2f(0.0, 0.0); glVertex3f(-2.0, -1.0, 0.0); glTexCoord2f(0.0, 1.0); glVertex3f(-2.0, 1.0, 0.0); glTexCoord2f(1.0, 1.0); glVertex3f(0.0, 1.0, 0.0); glTexCoord2f(1.0, 0.0); glVertex3f(0.0, -1.0, 0.0); glTexCoord2f(0.0, 0.0); glVertex3f(1.0, -1.0, 0.0); glTexCoord2f(0.0, 1.0); glVertex3f(1.0, 1.0, 0.0); glTexCoord2f(1.0, 1.0); glVertex3f(2.41421, 1.0, -1.41421); glTexCoord2f(1.0, 0.0); glVertex3f(2.41421, -1.0, -1.41421); glEnd(); glFlush(); glDisable(GL_TEXTURE_2D); } 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, 30.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(0.0, 0.0, -3.6); } void keyboard (unsigned char key, int x, int y { switch (key) { case 's': case 'S': glBindTexture(GL_TEXTURE_2D, texName); glTexSubImage2D(GL_TEXTURE_2D, 0, 12, 44, subImageWidth, subImageHeight, GL_RGBA, GL_UNSIGNED_BYTE, subImage); glutPostRedisplay();

GL_TEXTURE_ENV_MODE,

37/41

Laboratorium Multimedia

break; case 'r': case 'R': glBindTexture(GL_TEXTURE_2D, texName); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, checkImageWidth, checkImageHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, checkImage); glutPostRedisplay(); break; case 27: exit(0); break; default: break; } } int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB | GLUT_DEPTH); glutInitWindowSize(250, 250); glutInitWindowPosition(100, 100); glutCreateWindow(argv[0]); init(); glutDisplayFunc(display); glutReshapeFunc(reshape); glutKeyboardFunc(keyboard); glutMainLoop(); return 0; } #else int main(int argc, char** argv) { fprintf (stderr, "program didemontrasikan dengan OpenGL Versi 1.0.\n"); return 0; } #endif Program 2 /* program menggambar texture teapot */ #include <GL/glut.h> #include <stdlib.h> #include <stdio.h> #define stripeImageWidth 32 GLubyte stripeImage[4*stripeImageWidth]; #ifdef GL_VERSION_1_1 static GLuint texName; #endif void makeStripeImage(void) { int j; for (j = 0; j < stripeImageWidth; j++) { stripeImage[4*j] = (GLubyte) ((j<=4) ? 255 : 0); stripeImage[4*j+1] = (GLubyte) ((j>4) ? 255 : 0); stripeImage[4*j+2] = (GLubyte) 0; stripeImage[4*j+3] = (GLubyte) 255; } }

38/41

Laboratorium Multimedia

/* pengaturan koordinat texture */ static GLfloat xequalzero[] = {1.0, 0.0, 0.0, 0.0}; static GLfloat slanted[] = {1.0, 1.0, 1.0, 0.0}; static GLfloat *currentCoeff; static GLenum currentPlane; static GLint currentGenMode; void init(void) { glClearColor (0.0, 0.0, 0.0, 0.0); glEnable(GL_DEPTH_TEST); glShadeModel(GL_SMOOTH); makeStripeImage(); glPixelStorei(GL_UNPACK_ALIGNMENT, 1); #ifdef GL_VERSION_1_1 glGenTextures(1, &texName); glBindTexture(GL_TEXTURE_1D, texName); #endif glTexParameteri(GL_TEXTURE_1D, GL_TEXTURE_WRAP_S, GL_REPEAT); glTexParameteri(GL_TEXTURE_1D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); glTexParameteri(GL_TEXTURE_1D, GL_TEXTURE_MIN_FILTER, GL_LINEAR); #ifdef GL_VERSION_1_1 glTexImage1D(GL_TEXTURE_1D, 0, GL_RGBA, stripeImageWidth, 0,GL_RGBA, GL_UNSIGNED_BYTE, stripeImage); #else glTexImage1D(GL_TEXTURE_1D, 0, 4, stripeImageWidth, 0,GL_RGBA, GL_UNSIGNED_BYTE, ripeImage); #endif glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE); currentCoeff = xequalzero; currentGenMode = GL_OBJECT_LINEAR; currentPlane = GL_OBJECT_PLANE; glTexGeni(GL_S, GL_TEXTURE_GEN_MODE, currentGenMode); glTexGenfv(GL_S, currentPlane, currentCoeff); glEnable(GL_TEXTURE_GEN_S); glEnable(GL_TEXTURE_1D); glEnable(GL_CULL_FACE); glEnable(GL_LIGHTING); glEnable(GL_LIGHT0); glEnable(GL_AUTO_NORMAL); glEnable(GL_NORMALIZE); glFrontFace(GL_CW); glCullFace(GL_BACK); glMaterialf (GL_FRONT, GL_SHININESS, 64.0); } void display(void) { glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glPushMatrix (); glRotatef(45.0, 0.0, 0.0, 1.0);

39/41

Laboratorium Multimedia

#ifdef GL_VERSION_1_1 glBindTexture(GL_TEXTURE_1D, texName); #endif glutSolidTeapot(2.0); glPopMatrix (); glFlush(); } void reshape(int w, int h) { glViewport(0, 0, (GLsizei) w, (GLsizei) h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); if (w <= h) glOrtho (-3.5, 3.5, -3.5*(GLfloat)h/(GLfloat)w,3.5*(GLfloat)h/(GLfloat)w, -3.5, 3.5); else glOrtho (-3.5*(GLfloat)w/(GLfloat)h, 3.5*(GLfloat)w/(GLfloat)h, -3.5, 3.5, -3.5, 3.5); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); } void keyboard (unsigned char key, int x, int y) { switch (key) { case 'e': case 'E': currentGenMode = GL_EYE_LINEAR; currentPlane = GL_EYE_PLANE; glTexGeni(GL_S, GL_TEXTURE_GEN_MODE, currentGenMode); glTexGenfv(GL_S, currentPlane, currentCoeff); glutPostRedisplay(); break; case 'o': case 'O': currentGenMode = GL_OBJECT_LINEAR; currentPlane = GL_OBJECT_PLANE; glTexGeni(GL_S, GL_TEXTURE_GEN_MODE, currentGenMode); glTexGenfv(GL_S, currentPlane, currentCoeff); glutPostRedisplay(); break; case 's': case 'S': currentCoeff = slanted; glTexGenfv(GL_S, currentPlane, currentCoeff); glutPostRedisplay(); break; case 'x': case 'X': currentCoeff = xequalzero; glTexGenfv(GL_S, currentPlane, currentCoeff); glutPostRedisplay(); break; case 27: exit(0); break; default:

40/41

Laboratorium Multimedia

break; } } int main(int argc, char** argv) { glutInit(&argc, argv); glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB | GLUT_DEPTH); glutInitWindowSize(256, 256); glutInitWindowPosition(100, 100); glutCreateWindow (argv[0]); init (); glutDisplayFunc(display); glutReshapeFunc(reshape); glutKeyboardFunc(keyboard); glutMainLoop(); return 0; }

Tugas 1. Cobalah program diatas 2. Lakukan perubahan sintak atau nilai yang ada dalam program diatas ( yang berhubungan dengan texture saja) 3. Masukan hasil pengamatan dan masukan hasilnya yang disertai gambar hasil compile dalam tabel pengamatan yang disesuaikan dengan pengamatan anda.

41/41

Laboratorium Multimedia