KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang...

35
1/35 Laboratorium Multimedia Laboratorium Multimedia Genap 2012/2013 Praktikum Komputer Grafik [MODUL]

Transcript of KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang...

Page 1: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

1/35 Laboratorium Multimedia

Laboratorium Multimedia

Genap

2012/2013

Praktikum

Komputer Grafik [MODUL]

Page 2: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

2/35 Laboratorium Multimedia

KONTRAK PRAKTIKUM

Nama Mata Kuliah : Praktikum Komputer Grafik

Kode Mata Praktikum : TIF121

SKS : 1

Mata Kuliah Prasyarat : -

Dosen Penanggung Jawab : Yonathan Ferry Hendrawan, S.T., M.I.T.

Dosen Penyusun Modul : Yonathan Ferry Hendrawan, S.T., M.I.T.

Semester / Th Ajaran : Genap / 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, kurva, transformasi, animasi, pencahayaan pada OpenGL.

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

Mampu membuat dan memanfaatkan transformasi.

Mampu membuat dan memanfaatkan animasi.

Mampu membuat dan memanfaatkan pencahayaan pada OpenGL.

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.

Page 3: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

3/35 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.

Page 4: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

4/35 Laboratorium Multimedia

Modul 1 Primitif Drawing

I. Tugas Pendahuluan

1. Jelaskan secara singkat sejarah OpenGL!

2. Sebutkan beberapa contoh software yang menggunakan OpenGL!

3. Apa guna glBegin() dan glEnd()?

4. Jelaskan apa itu vertex!

II. Pengantar

Komputer grafik telah menunjukkan kemajuan yang pesat dari berbagai sisi:

algoritma, software, dan hardware. Cakupannya juga telah meluas ke berbagai bidang:

kedokteran, sains, engineering, bisnis, industri, seni, hiburan, iklan, dan lain-lain.

Salah satu tools/library pembuatan aplikasi grafik adalah OpenGL (Open

Graphics Library). OpenGL adalah suatu standar grafik yang menyediakan fungsi-fungsi

low-level untuk pembuatan berbagai gambar pada komputer.

Sebagai API (Application Programming Interface), OpenGL bersifat platform-

independent/tidak tergantung pada piranti dan platform yang digunakan. Hal inilah yang

membuat OpenGL dapat berjalan pada berbagai sistem operasi: Windows, UNIX, Mac,

Android, dll. OpenGL pada awalnya didesain untuk digunakan oleh bahasa

pemrograman C/C++, namun dalam perkembangannya OpenGL dapat juga digunakan

oleh bahasa pemrograman yang lain seperti Java, Tcl, Ada, Visual Basic, Delphi,

maupun Fortran.

Primitif Drawing

OpenGL memiliki beberapa obyek dasar yang disebut primitif. Gambar-gambar

kompleks dibuat dari kombinasi obyek-obyek primitif ini. Primitif mudah digambar

pada layar monitor karena menggunakan persamaan geometrik sederhana. Contoh

primitif / grafik dasar adalah :

o Titik

o Garis

o Segitiga

o Polygon

Perintah OpenGL

OpenGL memiliki daftar fungsi yang banyak. Untuk saat ini, praktikan hanya perlu

fokus pada beberapa perintah dasar yang tertera pada tabel berikut ini:

Page 5: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

5/35 Laboratorium Multimedia

Tabel 1.1 Perintah dasar OpenGL

III. Program

Berikut ini adalah program yang menggambar obyek primitif.

void display(void) {

/* bersihkan layar dari titik pixel yang masih ada */ glClear (GL_COLOR_BUFFER_BIT); /* gambar 5 titik di layar */ glColor3f (1.0, 1.0, 0.0); /* posisi vertex */ 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) { /* aplikasi berhenti ketika tombol q ditekan */ case 27 : case 'q': exit(0); break; } glutPostRedisplay();

Page 6: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

6/35 Laboratorium Multimedia

} int main(int argc, char *argv[]) {

glutInitWindowSize(400,400); glutInitWindowPosition(100,100); glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE); glutCreateWindow("Primitif"); glutDisplayFunc(display); glutKeyboardFunc(kunci); glutMainLoop(); return 0;

} Program 1.1 Menggambar 5 titik

Program diatas jika dijalankan akan menampilkan 5 titik berwarna kuning pada latar

belakang hitam. Posisi titik didefinisikan pada tiap pemanggilan glVertex3f. Ukuran

window mengambil nilai default yang disediakan oleh OpenGL: (-1,-1) untuk titik kiri

bawah dan (1,1) untuk titik kanan atas.

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 vertex, kemudian amati lagi

apa yang terjadi.

3. Lakukan pengaturan ketebalan titik dan garis dengan perintah glPointSize(x); dan

glLineWidth(x); kemudian amati apa pengaruhnya terhadap titik dan garis.

V. Tugas

1. Cobalah program diatas lakukan percobaan sesuai dengan perintah diatas.

2. Buat Pelangi horisontal yang terdiri dari 7 warna menggunakan GL_POLYGON.

3. Buat Pelangi vertikal yang terdiri dari 7 warna menggunakan GL_POLYGON.

4. Ulang soal nomor 3 dan 4 menggunakan glRect().

Page 7: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

7/35 Laboratorium Multimedia

Modul 2 Kurva

I. Tugas Pendahuluan

1. Apa perbedaan antara GL_LINES, GL_LINE_STRIP, dan GL_LINE_LOOP?

2. Gambarkan grafik persamaan y = 2x + 1 !

3. Gambarkan grafik persamaan y = (x-1)(x-2) !

4. Gambarkan grafik persamaan y = 2sin(2x) !

II. Pengantar

Menurut Wikipedia, kurva adalah garis yang tidak harus lurus. Contoh kurva:

lintasan parabola, grafik sinus, grafik persamaan logaritma, dll. Menurut definisi ini,

garis lurus dapat disebut juga sebagai kurva jenis khusus.

Mendefinisikan Kurva Menggunakan Persamaan Polynomial

Polynomial adalah persamaan matematika dalam bentuk:

Dimana a0, a1, a2, … aL adalah koefisien/konstanta.

Derajat sebuah persamaan polynomial ditentukan dari pangkat tertinggi dari variabel x.

Kurva Polynomial derajat 1

Persamaan polynomial derajat 1 disebut juga sebagai persaman linear. Jika digambar,

persamaan linear menghasilkan garis lurus.

Sebagai contoh, sebuah kurva yang memiliki representasi parametrik P(t) = a0 +a1t

adalah sebuah garis lurus yang melewati titik a0 pada waktu t = 0, dan melewati titik a0 +

a1 pada waktu t = 1. Dalam dunia 2 dimensi, P(t) terdiri dari dua persamaan: satu

persamaan untuk sumbu x: x(t), dan satu persamaan untuk sumbu y: y(t). Dalam dunia 3

dimensi P(t) memiliki pula z(t).

Berikut adalah program untuk memplot persamaan linear P(t) dimana: x(t) = -1 + 2t;

y(t) = 0.

void display(void) { /* bersihkan layar */ glClear (GL_COLOR_BUFFER_BIT); glColor3f (1.0, 1.0, 0.0); float t = 0.0; glBegin(GL_POINTS); for(t = -1.0; t<=1.0; t+=0.01){ /* x(t) = -1 + 2t; y(t) = 0 */

Page 8: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

8/35 Laboratorium Multimedia

glVertex3f (-1.0 + 2.0*t, 0.0, 0.0); } glEnd(); glFlush (); } void kunci(unsigned char key, int x, int y) { switch (key) { /* aplikasi berhenti ketika tombol q ditekan */ case 27 : case 'q': exit(0); break; } glutPostRedisplay(); } int main(int argc, char *argv[]) { glutInitWindowSize(400,400); glutInitWindowPosition(100,100); glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE); glutCreateWindow("Primitif"); glutDisplayFunc(display); glutKeyboardFunc(kunci); glutMainLoop(); return 0; }

Program 2.1 Memplot persamaan linear

Program diatas akan menaruh titik-titik disepanjang persamaan P(t) dengan interval

0.01.

Kurva Polynomial derajat 2

Persamaan polynomial derajat 2 disebut juga persamaan kuadrat. Persamaan kuadrat

menghasilkan grafik parabola.

Berikut adalah program yang menggambar x(t) = -1 + 2t; y(t) = t2 – 0.5 atau y = x

2 – 0.5

pada interval -1.0 sampai 1.0.

void display(void) { /* bersihkan layar */ glClear (GL_COLOR_BUFFER_BIT); glColor3f (1.0, 1.0, 0.0); float t = 0.0; glBegin(GL_POINTS); for(t = -1.0; t<=1.0; t+=0.01){ /* x(t) = -1 + 2t; y(t) = 0 */ glVertex3f (t, -0.5+t*t, 0.0);

Page 9: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

9/35 Laboratorium Multimedia

} glEnd(); glFlush (); } void kunci(unsigned char key, int x, int y) { switch (key) { /* aplikasi berhenti ketika tombol q ditekan */ case 27 : case 'q': exit(0); break; } glutPostRedisplay(); } int main(int argc, char *argv[]) { glutInitWindowSize(400,400); glutInitWindowPosition(100,100); glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE); glutCreateWindow("Primitif"); glutDisplayFunc(display); glutKeyboardFunc(kunci); glutMainLoop(); return 0; }

Program 2.2 Menggambar persamaan kuadrat

Program diatas akan menampilkan kurva parabola sesuai persamaan y = x2 – 0.5 pada

interval -1.0 sampai 1.0.

Kurva Polynomial derajat 3 atau lebih

Persamaan polynomial derajat 3 atau lebih memiliki sifat dan implementasi yang mirip

seperti persamaan polynomial derajat2, hanya saja grafiknya lebih kompleks.

Berikut adalah program yang menggambar y = (x+4)(x+1)(x-1)(x-3)/14 + 0.5

void myinit() { glClearColor(0.0, 0.0, 0.0, 1.0); glColor3f(1.0, 0.0, 0.0); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(-10.0, 10.0, -10.0, 10.0); glMatrixMode(GL_MODELVIEW); } void display(void) { /* bersihkan layar */ glClear (GL_COLOR_BUFFER_BIT); glColor3f (1.0, 1.0, 0.0);

Page 10: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

10/35 Laboratorium Multimedia

float t = 0.0; //f(x) = 1/14 (x+4)(x+1)(x-1)(x-3) + 0.5 glBegin(GL_POINTS); for(t = -10.0; t<=10.0; t+=0.1){ glVertex3f (t, (t+4)*(t+1)*(t-1)*(t-3)/14 + 0.5, 0.0); } glEnd(); glBegin(GL_LINES); glVertex3f(-10.0,0.0,0.0); glVertex3f(10.0,0.0,0.0); glVertex3f(0.0,-10.0,0.0); glVertex3f(0.0,10.0,0.0); glEnd(); glFlush (); } void kunci(unsigned char key, int x, int y) { switch (key) { /* aplikasi berhenti ketika tombol q ditekan */ case 27 : case 'q': exit(0); break; } glutPostRedisplay(); } int main(int argc, char *argv[]) { glutInitWindowSize(400,400); glutInitWindowPosition(100,100); glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE); glutCreateWindow("Primitif"); glutDisplayFunc(display); glutKeyboardFunc(kunci); myinit(); glutMainLoop(); return 0; }

Program 2.3 Menggambar persamaan polynomial derajat 4

Program diatas akan menampilkan kurva polynomial derajat 4 sesuai persamaan y =

1/14 (x+4)(x+1)(x-1)(x-3) + 0.5 pada interval -10.0 sampai 10.0.

Kurva Trigonometri

Kurva trigonometri adalah kurva yang dihasilkan dari fungsi-fungsi trigonometri: sinus,

cosinus, tangen.

Berikut adalah program yang menggambar grafik fungsi sinus.

//Supaya bisa menggunakan fungsi sin(), program perlu include Math.h #include <Math.h>

Page 11: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

11/35 Laboratorium Multimedia

void myinit() { glClearColor(0.0, 0.0, 0.0, 1.0); glColor3f(1.0, 0.0, 0.0); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(-1.0, 10.0, -2.0, 2.0); glMatrixMode(GL_MODELVIEW); } void display(void) { /* bersihkan layar */ glClear (GL_COLOR_BUFFER_BIT); glColor3f (1.0, 1.0, 0.0); float x = 0.0; glBegin(GL_POINTS); //perhitungan sudut di openGL menggunakan radian, bukan derajat for(x=0.0; x<=6.28; x+=0.1) { glVertex2f(x,sin(x)); } glEnd(); glBegin(GL_LINES); glVertex3f(-10.0,0.0,0.0); glVertex3f(10.0,0.0,0.0); glVertex3f(0.0,-10.0,0.0); glVertex3f(0.0,10.0,0.0); glEnd(); glFlush (); } void kunci(unsigned char key, int x, int y) { switch (key) { /* aplikasi berhenti ketika tombol q ditekan */ case 27 : case 'q': exit(0); break; } glutPostRedisplay(); } int main(int argc, char *argv[]) { glutInitWindowSize(400,400); glutInitWindowPosition(100,100); glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE); glutCreateWindow("Primitif"); glutDisplayFunc(display); glutKeyboardFunc(kunci); myinit();

Page 12: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

12/35 Laboratorium Multimedia

glutMainLoop(); return 0; }

Program 2.4 Menggambar fungsi sinus.

III. Percobaan

Berikut adalah yang harus dilakukan selama sesi lab:

1. Copy contoh-contoh program diatas, jalankan, dan amati output yang

ditampilkan.

2. Ubah program 2.1, 2.2, 2.3, dan 2.4 dari GL_POINTS untuk menggambar

kurva menjadi GL_LINES, GL_LINE_STRIP, dan GL_LINE_LOOP!

Amati perubahan tampilan yang terjadi. Mana yang menurutmu sebaiknya

digunakan dan sebaiknya dihindari dalam menggambar kurva?

3. Modifikasi program 2.4 dari fungsi sinus menjadi fungsi tangen.

Karena header file Math.h tidak mempunyai definisi fungsi tangen, gunakan

formula tg() = sin()/cos().

IV. Tugas

Selesaikan pertanyaan-pertanyaan berikut ini:

1. Ubah persamaan linear pada program 2.1 menjadi x(t): -0.8 + 1.6t; y(t) = -1 + 2t.

2. Ubah program 2.2 supaya bisa menampilkan plot seperti berikut:

Gambar yang dihasilkan tidak harus persis sama, tetapi harus dibuat semirip

mungkin. Jangan gunakan teknik transformasi(modul 3), gunakan pendekatan

persamaan matematis untuk menghasilkan gambar tersebut.

3. Modifikasi program 2.3 untuk menampilkan fungsi berikut: f(x) = (x-3)(x-2)(x-

1)(x)(x+1)(x+2)(x+3).

Sesuaikan viewport supaya kurva dapat terlihat jelas di dalam jendela program.

Page 13: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

13/35 Laboratorium Multimedia

4. Fungsi sinus memiliki bentuk baku sebagai berikut:

y = A Sin(Bx + C) + D

dimana:

- A menentukan tinggi rendahnya grafik yang dihasilkan pada sumbu y

- B menentukan berapa kali perulangan grafik dalam satu interval

- C menentukan pergeseran sudut inputan sinus

- D menentukan pegeseran grafik sinus pada sumbu y.

Modifikasi program 2.4 supaya bisa mengakomodasi bentuk baku ini. Hint: buat

variabel untuk A, B, C, dan D.

Program tidak perlu mempunyai fasilitas menerima inputan ketika dijalankan.

Sebagai contoh, berikut ini adalah gambar grafik sinus dengan A = 4, B = 5, C =

0.3, D = 1.

Page 14: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

14/35 Laboratorium Multimedia

Modul 3 Transformasi

I. Tugas Pendahuluan

1. Jelaskan dengan singkat apa yang disebut sebagai translasi, scaling, dan rotasi

dalam transformasi geometri!

2. Gambarkan grafik transformasi titik (2, 3) yang ditranslasi sejauh (3, - 4)!

3. Gambarkan grafik transformasi titik (3, 3) yang dirotasi sejauh 90 derajat

terhadap sumbu koordinat!

4. Gambarkan grafik transformasi titik (3, 2) yang di-scaling sebesar (2, 1.5)

terhadap sumbu koordinat!

II. Pengantar

Transformasi

Dalam matematika, transformasi adalah fungsi yang memetakan suatu set X ke

set yang lain ataupun ke set X sendiri. Terdapat banyak jenis operasi transformasi:

translasi, refleksi, rotasi, scaling, shearing. Dalam dunia komputer grafik, set X (yang

mengalami proses transformasi) biasanya berupa strukur geometri.

Berikut adalah perintah-perintah transformasi di OpenGL:

a. glTranslated(a, b, c): melakukan operasi translasi/pergeseran sejauh a pada sumbu x,

sejauh b pada sumbu y, dan sejauh c pada sumbu z. Contoh: jika ingin menggeser

obyek sejauh 4 pada sumbu x dan -3 pada sumbu y, maka perintahnya adalah:

glTranslated(4.0, -3.0, 0.0).

b. glScaled(d, e, f): melakukan penskalaan sebesar d pada sumbu x, sebesar e pada

sumbu y, sebesar f pada sumbu z. Contoh: jika ingin memperbesar obyek pada

sumbu x sebesar 2 kali dan memperkecil obyek menjadi seperempatnya, maka

perintahnya adalah: glScaled(2.0, 0.25, 0.0).

c. glRotated(alpha, i, j, k): melakukan rotasi sebesar alpha. Alpha ada dalam satuan

derajat, bukan radian. I, j, dan k mewakili sumbu rotasi x, y, dan z. Set nilainya

menjadi 1.0 pada sumbu yang diingikan. Contoh: jika ingin merotasi obyek sebesar

90 derajat pada sumbu x, maka perintahnya adalah: glRotated(90.0, 1, 0, 0).

Proses transformasi di OpenGL bersifat melekat: sekali sebuah perintah transformasi

dieksekusi, perintah tersebut akan selalu dilakukan untuk semua perintah yang ada

dibawahnya. Contoh: jika pada program terdapat perintah glTranslated(10.0, 0.0, 0.0)

Page 15: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

15/35 Laboratorium Multimedia

pada baris ke 25, maka perintah-perintah glVertex pada baris ke 26 dan seterusnya akan

selalu ditranslasi pada sumbu x sejauh 10.

Berikut contoh program translasi.

void display() { glClear(GL_COLOR_BUFFER_BIT); glColor3f(0.0,0.0,0.5); // Gambar kotak pertama di sudut kiri bawah glRecti(0,0, 10, 10); //translasi ke 20, 20 glTranslated(20.0, 20.0, 0); glRecti(0,0, 10, 10); glFlush(); } void myinit() { glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0,50.0,0.0,50.0); glMatrixMode(GL_MODELVIEW); glClearColor(1.0,1.0,1.0,1.0); glColor3f(0.0,0.0,0.0); } int main(int argc, char* argv[]) { glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowSize(400,400); glutInitWindowPosition(100,100); glutCreateWindow("Transform"); glutDisplayFunc(display); myinit(); glutMainLoop(); return 0; }

Program 3.1 Translasi

glRecti adalah fungsi OpenGL untuk menggambar kotak 2 dimensi dengan memberi

nilai pada parameter titik kiri bawah dan kanan atas.

Berikut contoh program Scaling.

void display() { glClear(GL_COLOR_BUFFER_BIT); glColor3f(0.0,0.0,0.5);

Page 16: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

16/35 Laboratorium Multimedia

// Gambar kotak pertama di sudut kiri bawah glRecti(0,0, 10, 10); //Scaling kotak yang digambar di ke 20, 20 sebesar 1.5 kali glScaled(1.5, 1.5, 0.0); glRecti(20,20, 30, 30); glFlush(); } void myinit() { glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0,50.0,0.0,50.0); glMatrixMode(GL_MODELVIEW); glClearColor(1.0,1.0,1.0,1.0); glColor3f(0.0,0.0,0.0); } int main(int argc, char* argv[]) { glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowSize(400,400); glutInitWindowPosition(100,100); glutCreateWindow("Transform"); glutDisplayFunc(display); myinit(); glutMainLoop(); return 0; }

Program 3.2 Scaling

Yang perlu diperhatikan disini adalah proses scaling dilakukan dari sumbu koordinat

yang terletak di sudut kiri bawah jendela. Hal inilah yang menyebabkan tampilan pada

program 3.2 diatas terlihat cenderung lebih ke kanan atas jendela.

Berikut adalah contoh program rotasi.

void display() { glClear(GL_COLOR_BUFFER_BIT); glColor3f(0.0,0.0,0.5); // Gambar kotak pertama di sudut kiri bawah glRecti(0,0, 10, 10); //rotasi kotak yang digambar di ke 20, 20 sebesar 15 derajat terhadap sumbu koordinat(titik kiri bawah) glRotated(15, 0, 0, 1.0); glRecti(20,20, 30, 30);

Page 17: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

17/35 Laboratorium Multimedia

glFlush(); } void myinit() { glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0,50.0,0.0,50.0); glMatrixMode(GL_MODELVIEW); glClearColor(1.0,1.0,1.0,1.0); glColor3f(0.0,0.0,0.0); } int main(int argc, char* argv[]) { glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowSize(400,400); glutInitWindowPosition(100,100); glutCreateWindow("Transform"); glutDisplayFunc(display); myinit(); glutMainLoop(); return 0; }

Program 3.3 Rotasi

Yang perlu diperhatikan dari program diatas adalah bahwa rotasi dilakukan terhadap

titik koordinat yang terletak pada ujung kiri bawah jendela. Supaya rotasi terjadi pada

titik tengah obyek, perlu dilakukan kombinasi perintah transformasi.

Kombinasi Transformasi

Operasi-operasi transformasi yang berbeda dapat dikombinasikan. Contoh: jika ingin

melakukan operasi-operasi berikut pada sebuah obyek:

translasi sebesar (3, -4)

lalu rotasi sebesar 30° pada sumbu z

lalu skala sebesar (2, -1)

lalu translasi lagi sebesar (0, 1.5)

dan terakhir rotasi sebesar -30°

maka perintah-perintahnya adalah:

glRotated(-30, 0, 0, 1);

glTranslated(0.0, 1.5, 0.0);

glScaled(2.0, -1.0, 0.0);

glRotated(30.0, 0, 0, 1);

Page 18: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

18/35 Laboratorium Multimedia

glTranslated(3.0, 4.0, 0.0);

Yang perlu diperhatikan disini adalah urutan perintah. OpenGL melakukan perintah

transformasi mulai dari yang paling bawah.

Perlu diingat pula bahwa karena pada dasarnya operasi transformasi dilakukan dengan

menggunakan operasi perkalian matrix yang tidak bersifat komutatif (AB ≠ BA), maka

urutan operasi transformasi sangat berpengaruh.

Salah satu kegunaan kombinasi Transformasi adalah untuk melakukan rotasi pada

obyek (bukan terhadap sumbu koordinat). Metode rotasi terhadap arbitrary point adalah

pertama-tama mentranslasikan obyek untuk berhimpit dengan sumbu koordinat, diikuti

dengan rotasi, dan terakhir men-translasikan kembali obyek pada posisinya semula.

Berikut adalah contoh program kombinasi transformasi.

void display() { glClear(GL_COLOR_BUFFER_BIT); glColor3f(0.0,0.0,0.5); // Gambar kotak pertama di sudut kiri bawah glRecti(0,0, 10, 10); //rotasi kotak kedua terhadap titik tengah kotak glTranslated(25.0, 25.0, 0); glRotated(45, 0, 0, 1.0); glTranslated(-25.0, -25.0, 0); glRecti(20, 20, 30, 30); glFlush(); } void myinit() { glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluOrtho2D(0.0,50.0,0.0,50.0); glMatrixMode(GL_MODELVIEW); glClearColor(1.0,1.0,1.0,1.0); glColor3f(0.0,0.0,0.0); } int main(int argc, char* argv[]) { glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB); glutInitWindowSize(400,400); glutInitWindowPosition(100,100); glutCreateWindow("Transform");

Page 19: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

19/35 Laboratorium Multimedia

glutDisplayFunc(display); myinit(); glutMainLoop(); return 0; }

Program 3.4 Rotasi terhadap arbitrary point

Yang perlu pula diperhatikan di topik transformasi adalah Current Transformation

Matrix (CTM). Perintah OpenGL yang berkatan dengan CTM ini adalah:

glPushMatrix(), glPopMatrix(), dan glLoadIdentity().

III. Percobaan

1. Untuk program 3.1, modifikasi parameter glTranslated, lalu amati perubahan

tampilannya. Kombinasikan dengan memodifikasi parameter pada glRecti; amati

perubahannya juga.

2. Untuk program 3.2, modifikasi parameter glScaled, lalu amati perubahan

tampilannya. Kombinasikan dengan memodifikasi parameter pada glRecti; amati

perubahannya juga.

3. Untuk program 3.3, modifikasi parameter glRotated, lalu amati perubahan

tampilannya. Kombinasikan dengan memodifikasi parameter pada glRecti; amati

perubahannya juga.

4. Untuk program 3.4, modifikasi parameter fungsi transformasi, lalu amati

perubahan tampilannya. Amati juga efek urutan pemanggilan fungsi

transformasi.

5. Berdasarkan program 3.4, buat sebuah program yang melakukan Scaling kotak

kedua terhadap titik tengah kotak kedua, bukan terhadap titik pusat koordinat.

IV. Tugas

1. Buat checker board 8 x 8 kotak dengan menggunakan glTranslate.

Page 20: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

20/35 Laboratorium Multimedia

2. Buat snow flake (bunga salju) berikut menggunakan transformasi.

Cukup buat 1 bagian, lalu duplikasi menggunakan transformasi 11 kali untuk

membuat keseluruhan gambar. Gambar tidak perlu persis, asal cukup mirip.

3. Buat program dengan tampilan sebagai berikut:

Gambar tidak harus persis, asal cukup mirip.

Page 21: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

21/35 Laboratorium Multimedia

Modul 4 Input dan Animasi

I. Tugas Pendahuluan

1. Apa yang dimaksud dengan callback function?

2. Apa yang dimaksud dengan komputasi interaktif?

3. Apa yang dimaksud dengan simulasi?

4. Berikan penjelasan secara singkat sejarah animasi komputer!

II. Pengantar

Input

Yang dimaksud sebagai input di sini adalah fasilitas program untuk menerima

sinyal dari perangkat input (keyboard dan mouse) ketika program dijalankan. Dengan

fasilitas ini, program dan user akan dapat berinteraksi secara langsung (real-time), tanpa

perlu melakukan kompilasi ulang tiap kali user ingin mengubah tampilan program.

Di GLUT, mekanisme input dijalankan dalam konsep callback function. Di

konsep ini, fungsi main memanggil fungsi input glut dan programmer harus

mendefinisikan isi fungsi input tersebut.

Berikut adalah program yang menerima input dari keyboard untuk merotasi 2 garis.

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

Page 22: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

22/35 Laboratorium Multimedia

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 (400, 400); glutCreateWindow (argv[0]); init(); glutReshapeFunc (reshape); glutKeyboardFunc (keyboard); glutDisplayFunc (display); glutMainLoop(); return 0; }

Program 4.1 Garis Silang berotasi oleh penekanan tombol keyboard

Pada program diatas, tiap kali tombol „r‟ atau „R‟ ditekan, kedua garis akan berotasi

terhadap titik pusatnya.

Page 23: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

23/35 Laboratorium Multimedia

Berikut ini adalah program yang menerima input dari keyboard untuk menggerakan

simulasi lengan robot.

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 (unsigned char 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':

Page 24: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

24/35 Laboratorium Multimedia

elbow = (elbow + 5) % 360; glutPostRedisplay(); break; case 'E': elbow = (elbow - 5) % 360; glutPostRedisplay(); break; case 27: exit(0); break; default: break; } } int 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.2 Simulasi lengan robot

Program diatas akan menggerakkan shoulder/lengan atas jika tombol „s‟ atau „S‟ ditekan; serta

akan menggerakkan elbow/siku jika tombol „e‟ atau „E‟ ditekan.

Berikut ini adalah program yang menerima inputan dari keyboard untuk menggerakkan simulasi

planet

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

Page 25: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

25/35 Laboratorium Multimedia

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 (unsigned char 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; } } int 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; }

Program 4.3 Simulasi planet

Page 26: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

26/35 Laboratorium Multimedia

Program diatas akan menggerakkan planet berotasi terhadap sumbunya atas jika tombol „d‟ atau

„D‟ ditekan; serta akan menggerakkan planet untuk berotasi terhadap matahari jika tombol „y‟

atau „Y‟ ditekan.

Animasi.

Animasi adalah “Illusion Of Motion” yang dibuat dari image statis yang

ditampilkan secara berurutan sehingga seolah-olah gambar-gambar diskontinyu tadi

menjadi terlihat kontinyu. Animasi berkembang dari ditemukannya prinsip dasar dari

karakter mata manusia yaitu: persistance of vision (pola penglihatan yang membekas).

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.

Pada OpenGL, animasi dapat dibuat dengan memanfaatkan proses transformasi

pada obyek yang dilakukan secara terus-menerus/berulang-ulang.

Berikut adalah program yang memutar kotak yang ditrigger dan distop oleh penekanan

tombol mouse.

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

Page 27: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

27/35 Laboratorium Multimedia

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 (400, 400); glutInitWindowPosition (100, 100); glutCreateWindow (argv[0]); init (); glutDisplayFunc(display); glutReshapeFunc(reshape); glutMouseFunc(mouse); glutMainLoop(); return 0; }

Program 4.4 Kotak berputar oleh penekanan tombol mouse

Program diatas menggunakan double buffering untuk menampilkan animasinya.

III. Percobaan

1. Cobalah program-program diatas

2. Amati pada fungsi program inti

3. Amati pada fungsi masukan

4. Ubahlah program 4.1 supaya kedua garis yang muncul pada gambar menjadi bergerak

searah jarum jam dengan sudut 90 derajat antara keduanya

5. Pada program 4.4 ubahlah program supaya kotak bergerak dan berhenti jika di tekan

tombol keyboard “P” atau “p”

6. Pada program 4.3 coba ganti perintah glutWireSphere(1.0, 40, 16); dengan

glutWireCube (1.0) dan glutWireSphere(0.2, 10, 8); dengan glutWireCube(0.2);

Page 28: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

28/35 Laboratorium Multimedia

7. Pada program 4.3 buatlah garis lintasan planet yang mengelilingi matahari

IV. Tugas

1. Buatlah program untuk menampilkan gambar segiempat dengan warna yang

dapat diubah dengan menggunakan tombol panah dan

2. Modifikasi program 4.4 supaya

a. ketika tombol mouse kiri ditekan, kotak berotasi terhadap sumbu z (rotasi

yang sekarang)

b. ketika tombol mouse tengah ditekan, kotak berotasi terhadap sumbu y

c. ketika tombol mouse kanan ditekan, kotak berotasi terhadap sumbu x

d. start dan stop pergerakan dilakukan dengan menekan tombol „p‟ atau „P‟

3. Modifikasi program 4.4 dengan mengganti kotak yang diputar dengan

checkerboard 8 x 8

4. Modifikasi program 4.4 supaya

a. Ketika ditekan tombol „s‟, ukuran kotak mengecil menjadi 0.75 ukuran

semula

b. Ketika ditekan tombol „S‟, ukuran kotak membesar menjadi 1.5 ukuran

semula

c. Ketika ditekan tombol „k‟, kecepatan putaran kotak jadi melambat

setengah kali lipat dari kecepatan semula

d. Ketika ditekan tombol „K‟, kecepatan putaran kotak jadi lebih cepat dua

kali lipat dari kecepatan semula

Page 29: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

29/35 Laboratorium Multimedia

Modul 5 Pencahayaan pada OpenGL

I. Tugas Pendahuluan

1. Jelaskan dengan singkat apa itu cahaya dan pengaruhnya terhadap penangkapan

visual (visual perception)!

2. Jelaskan tentang sistem warna addition dan substraction!

3. OpenGL menggunakan sistem warna addition atau substraction?

4. Apa itu vektor normal? Apa pengaruhnya terhadap pemantulan cahaya pada

obyek?

II. Pengantar

Pencahayaan memegang peranan penting dalam proses penangkapan citra oleh

perangkat optik. Tanpa ada cahaya, tidak ada citra yang dapat ditangkap. Dengan adanya

cahaya yang cukup, detail obyek 3 dimensi jadi terlihat dengan jelas.

Pada OpenGL, proses pemberian cahaya disebut juga dengan iluminasi. Sistem

pencahayaan pada OpenGL merupakan pendekatan matematis terhadap sistem pencahayaan

di dunia nyata. Cahaya lampu dalam OpenGL dipecah menjadi komponen merah, hijau, dan

biru. Tiap sumber cahaya dapat diatur konsentrasi cahaya merah, hijau, dan biru yang

dipancarkannya.

Model pencahayaan yang OpenGL mempunyai empat komponen utama:

memancarkan (emissi), ambient, diffuse, dan specular. Semua komponen dihitung secara

independen lalu hasilnya dijumlahkan. Hasil akhir penjumlahan inilah yang menjadi

warna pada obyek.

Gambar 5.1. Contoh ambient, diffuse, dan specular

Page 30: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

30/35 Laboratorium Multimedia

Cahaya Ambient, Diffuse, dan Specular

Pencahayaan ambient adalah cahaya latar belakang dan berasal dari segala arah.

Cahaya ambient ini memiliki nilai yang lebih besar pada ruangan tertutup dibandingkan

dengan ruangan terbuka. Meskipun kedua ruang tersebut memiliki sumber cahaya yang

sama. Hal ini disebabkan karena pada ruang tertutup, cahaya yang memantul dari

dinding membantu menerangi ruang.

Cahaya diffuse adalah cahaya datang yang bersifat satu arah. Jika sebuah obyek

terkena cahaya diffuse, sisi tersorot akan terlihat jelas/terang, sedangkan sisi di baliknya

akan terlihat gelap.

Mirip seperti cahaya diffuce, cahaya specular adalah cahaya datang datang dari

arah tertentu; hanya saja pantulannya tidak tersebar rata ke segala arah. Pantulan

ditentukan oleh jenis material obyek. Logam dan plastik mengkilap memiliki komponen

specular tinggi. Sementara kapur dan karpet hampir tidak memilikinya. Specularity

disebut juga sebagai shininess.

Berikut adalah hal-hal yang diperlukan untuk menjalankan pencahayaan dalam

OpenGL:

1. Tentukan vektor normal untuk setiap vertex dari semua obyek. Vektor normal ini

digunakan dalam perhitungan sudut pantulan oleh OpenGL.

2. Buat, pilih, dan atur posisi satu atau lebih sumber cahaya.

3. Ciptakan dan pilih model/setting pencahayaan.

4. Tentukan sifat-sifat material untuk semua objek.

Berikut adalah sebuah program pencahayaan sederhana. Perhatikan penerapan 4 hal

diatas pada program ini.

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)

Page 31: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

31/35 Laboratorium Multimedia

{ 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 5.1 Sphere/Bola 3 dimensi yang disorot cahaya.

Program diatas menampilkan sebuah bola yang diterangi oleh satu sumber cahaya.

glu/glut memiliki beberapa obyek 3 dimensi siap pakai yang bisa digunakan sebagai

obyek uji coba dalam modul ini. Berikut adalah program yang menampilkan beberapa

jenis obyek quadric.

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); /* tampikan list */ glutSwapBuffers(); } void gfxinit(void) { qobj = gluNewQuadric(); // glut Library gluQuadricDrawStyle(qobj, GLU_FILL); glNewList(1, GL_COMPILE); /* membuat list */ //gluSphere(radius, slices, stacks);

Page 32: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

32/35 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 atau lebih dari 4 obyek diatas. 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 5.2 Beberapa obyek Quadric

Berikut adalah program yang menampilkan sebuah kubus yang dibangun dari nol.

Perhatikan perbedaannya dengan program-program sebelumnya yang menggunakan

obyek yang sudah tersedia.

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

Page 33: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

33/35 Laboratorium Multimedia

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;

Page 34: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

34/35 Laboratorium Multimedia

}

Program 5.3 Kubus dengan pencahayaan

III. Percobaan

1. Cobalah program-program diatas. Modifikasi obyek dan nilai lalu amati

perbedaannya.

2. Modifikasi ketiga program diatas dengan menambahkan sumber cahaya kedua

IV. Tugas

1. Modifikasi program 5.3 yaitu dengan mengganti kotak dengan 3 digit NIM

terakhir dalam bentuk 3 dimensi

2. Tambahkan hingga total 4 sumber cahaya (dengan posisi dan nilai komponen

cahaya yang berbeda) untuk program hasil modifikasi pada nomor 1 diatas

3. Kombinasikan program hasil modifikasi nomor 2 diatas dengan tugas modul 4

nomor 2: NIM 3 dimensi akan bisa berputar pada sumbu x, y, atau z.

Page 35: KONTRAK PRAKTIKUM - · PDF filePraktikum ini memuat beberapa modul yang berisi tentang struktur program OpenGL ... Android, ... Program 2.3 Menggambar persamaan polynomial derajat

35/35 Laboratorium Multimedia