modul prak komgraf

1/41 Laboratorium Multimedia

Laboratorium Multimedia

Ganjil

2012/2013

Praktikum

Komputer Grafik [MODUL]


KONTRAK PRAKTIKUM

Nama Mata Kuliah : Praktikum Komputer Grafik

Kode Mata Praktikum : TKC 111

SKS : 1

Mata Kuliah Prasyarat : -

Dosen Penanggung Jawab : Abdullah Basuki Rahmat, S.Si., M.T.

Dosen Penyusun Modul : Abdullah Basuki Rahmat, S.Si., M.T.

Rima Tri Wahyuningrum, S.T., M.T.

Semester / Th Ajaran : Ganjil / 2012-2013

Hari Pertemuan / Jam : Sesuai Jadwal Praktikum

Tempat Pertemuan : 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.


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 INDIVIDU KELOMPOK

1 Jenis Tugas Post Test 1. Tugas Pendahuluan

2. Tugas Sesi Praktikum

2 Tujuan Mahasiswa memahami

dan menerapkan aplikasi

komputer grafik.

Mampu menyelesaikan

masalah yang diberikan

dengan bahasa

pemrograman OpenGL.

3 Jadwal Pengumpulan Di akhir praktikum 1. Di awal sesi praktikum

2. Di akhir sesi praktikum

4 Keluaran Tugas Program + Penjelasan

1. Program

2. Listing Program beserta

penjelasan (soft copy –

Hardcopy di kumpulkan

di akhir kegiatan

praktikum)


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

n1 n2 n3 n1 n2 n3 n1 n2 n3 n1 n2 n3 n1 n2 n3 n1 n2 n3 n1 n2 n3

1 010041110000 85 80 78 85 83 84 83 82 78 85 80 76 83 79 76 85 78 74 84,33 80,33 77,67 78 77,45 B+

2 008041110010 83 78 79 85 79 72 81 75 75 84 77 74 85 70 71 84 72 71 83,67 75,17 73,67 65 72,49 B

3 010041110005 87 85 88 86 85 87 85 87 86 86 88 87 87 78 79 86 78 77 86,17 83,50 84,00 83 83,10 A

4 010041110009 85 80 78 84 82 83 84 78 80 85 80 79 84 72 73 85 74 73 84,50 77,67 77,67 73 77,19 B+

5 010041110007 85 79 78 85 83 85 85 80 78 84 78 80 83 74 76 84 77 75 84,33 78,50 78,67 78 77,76 B+

6 010041110009 85 79 78 85 83 83 85 78 79 83 79 78 85 75 75 83 76 75 84,33 78,33 78,00 78 77,42 B+

7

Presentase Nilai

Kegiatan %

Tugas Pendahuluan 15%

Kehadiran + Tugas Praktikum35%

Asistensi + Laporan 35%

Posttest + Lapres 15%

Grade Nilai

Kegiatan %

A > 80

B+ > 75 - 80

B > 70 - 75

C+ > 65 - 70

C > 60 - 65

D 50 - 60

E < 50

post test

KET

n1

n2

n3

Asdos :

No NRP NAMAModul 1 Modul 2 Nilai

Akhir

Nilai

Huruf

Modul 3 Modul 4 Modul 5 Modul 6 Rata-rata Posttest

+ Lapres

Akhir

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


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


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 :


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.


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


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


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


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

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:


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


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


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;


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!


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.


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-

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


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


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


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


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


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;


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

Tugas


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%


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


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


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


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


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


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


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


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


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_TEXTURE_ENV_MODE, 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();


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


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


#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:


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


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.

modul prak komgraf

Documents