Modul 1 Primitif Drawing · PDF fileJelaskan tenteng ouput primitif dalam grafika computer!...

Modul 1

Primitif Drawing

I. Tugas Pendahuluan

1. Jelaskan tentang OpenGL!

2. Jelaskan tenteng ouput primitif dalam grafika computer!

II. Tujuan

Mahasiswa mampu membuat dan memanfaatkan output primitif (titik, garis, segiempat,

kurva, lingkaran, elips, fill area, dan teks)

III. Teori Penunjang

Perkembangan komputer grafik menuntut para pengembang sistem aplikasi komputer

grafik untuk dapat mengembangkan suatu informasi yang dilengkapi dengan visualisasi dan

animasi, agar dapat lebih mudah dipahami oleh pihak yang menggunakan sistem tersebut.

Komputer grafik telah menunjukkan kemajuan yang pesat dalam pengembangan berbagai

aplikasi untuk menghasilkan gambar komputer grafik yang digunakan untuk menunjang berbagai

bidang dengan teknologi grafik berbasis komputer. Penggunaan komputer grafik telah lama

digunakan dalam beberapa macam aplikasi, diantaranya pendidikan, kedokteran, fisika,

matematika, multimedia, dan lain-lain. Pada saat ini komputer grafik sudah digunakan pada

bidang sains, engineering, kedokteran, bisnis, industri, pemerintahan, seni, hiburan, iklan,

pendidikan, dan lain-lain.

Oleh karena itu, sudah semakin banyak pula bahasa pemrograman yang dilengkapi

dengan tools/library pembuatan grafik. Salah satu tools/library pembuatan aplikasi grafik adalah

OpenGL (Open Graphics Library). OpenGL (Open Graphics Library) adalah suatu spefikasi

grafik low-level yang menyediakan fungsi untuk pembuatan grafik primitif termasuk titik, garis,

dan lingkaran. OpenGL digunakan untuk mendefinisikan suatu obyek, baik obyek 2 dimensi

maupun obyek 3 dimensi. OpenGL juga merupakan suatu antarmuka pemrograman aplikasi/API

(Application Programming Interface) yang tidak tergantung pada piranti dan platform yang

digunakan, sehingga OpenGL dapat berjalan pada sistem operasi Windows, UNIX dan sistem

operasi lainnya. OpenGL pada awalnya didesain untuk digunakan pada bahasa pemrograman

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

pemrograman yang lain seperti Java, Tcl, Ada, Visual Basic, Delphi, maupun Fortran.

Namun OpenGL di-package secara berbeda-beda sesuai dengan bahasa pemrograman

yang digunakan. Oleh karena itu, package OpenGL tersebut dapat di-download pada situs

http://www.opengl.org sesuai dengan bahasa pemrograman yang akan digunakan.

Primitif Drawing

Penghasilan citra pada komputer grafik menggunakan primitif grafik dasar. Primitif ini

memudahkan untuk merender (menggambar pada layar monitor) sebagaimana penggunaan

persamaan geometrik sederhana. Contoh primitif grafik dasar (Gambar 1) adalah :

Titik

Garis, Segiempat

Kurva, Lingkaran, ellipse, kurva bezier, kurva lainnya

Fill area

Text

Gambar 1. Primitif grafik

Obyek kompleks dapat dibuat dengan kombinasi dari primitif ini. Adapun contoh grafik

primitif yang lain adalah :

Poligaris yaitu urutan garis lurus yang saling terhubung.

Teks adalah bentuk bahasa tulisan dengan simbol-simbol tertentu. Teks merupakan

kumpulan lebih dari dua karakter.

Citra raster adalah gambar yang dibuat dengan piksel yang membedakan bayangan dan

warna. Citra raster disimpan dalam komputer sebagai larik bernilai numerik. Larik

tersebut dikenal sebagai piksel map atau bitmap. Ada tiga cara untuk menghasilkan citra

grafik yaitu citra didisain dengan tangan, citra yang didapat dari perhitungan dan citra

yang discan. Pemaparan citra raster dinyatakan oleh piksel dengan video displays

(Cathod-ray Tube CRT), flat panel displays (LCD), hardcopy (printer laser, dot matrix

printers, ink-jet printers). Contoh proses pemaparan permukaan adalah citra yang

ditangkap lalu disimpan di frame buffer, kemudian digunakan untuk mewarnai sebuah

titik pada permukaan pemapar. Selanjutnya proses scan di CRT. Frame buffer adalah

matriks 2 dimensi yang mewakili piksel pada pemapar. Ukuran matriks harus cukup

untuk menyimpan kedalam warna pemapar untuk semua piksel. Sebagai contoh pemapar

(monitor) berresolusi 1280 x 1024 mempunya kedalaman warna 24 bit (~16 juta warna)

membutuhkan ruang simpan sekitar 4 Mb.

Piksel dan Bitmap. Jumlah bit yang digunakan untuk mewakili warna/bayangan dari

masing-masing piksel (picture element = pixel). 4 bit/piksel = 24 = 16 level abu-abu.

IV. Implementasi

Program primitve drawing

#include <windows.h>#include <GL/gl.h>#include <GL/glut.h>

void display(void){/* bersihkan layar dari titik pixel yang masih ada */glClear (GL_COLOR_BUFFER_BIT);/* gambar poligon (rectangle) dengan titik sudut ** (0.25, 0.25, 0.0) and (0.75, 0.75, 0.0) */glColor3f (1.0, 1.0, 0.0);

glBegin(GL_POINTS);glVertex3f (0.0, 0.0, 0.0);glVertex3f (0.0, 0.8, 0.0);glVertex3f (0.8, 0.0, 0.0);glVertex3f (0.0, -0.8, 0.0);glVertex3f (-0.8, 0.0, 0.0);glEnd();

glFlush ();}

void kunci(unsigned char key, int x, int y){

switch (key){

case 27 :case 'q':exit(0);break;

}glutPostRedisplay();

}

Int main(int argc, char *argv[]){glutInitWindowSize(200,200);glutInitWindowPosition(100,100);glutInitDisplayMode(GLUT_RGB | GLUT_SINGLE);glutCreateWindow("Suprapto");

glutDisplayFunc(display);glutKeyboardFunc(kunci);glutMainLoop();return 0;}

1. Gantilah sintak program yang berwarna merah bold untuk membuat berbagai macam

primitive drawing seperti sintak dibawah ini. Lakukan pengamatan apa yang terjadi ? dan

bagaimana hasilnya?

glBegin(GL_POINTS);

glBegin(GL_LINE_STRIP);

glBegin(GL_LINE_LOOP);

glBegin(GL_LINES);

glBegin(GL_TRIANGLES);

glBegin(GL_TRIANGLE_FAN);

glBegin(GL_TRIANGLE_STRIP);

glBegin(GL_QUADS);

glBegin(GL_QUAD_STRIP);

glBegin(GL_POLYGON);

2. Lakukan penyisipan glColor3f (X, X, X); pada tiap vertek, kemudian amati lagi apa

yang terjadi?

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

glLineWidth(x); kemudian amati apa yang terjadi?

V. Tugas

1. Cobalah program diatas lakukan percobaan sesuai dengan perintah diatas

2. Buat Segitiga sama kaki

3. Buat Gambar Kubus

4. Buat Warna Pelangi yang terdiri dari 7 warna

5. Buatlah Gambar segiempat dengan didalamnya diblok warna merah

Modul 2

Animasi


1. Apakah fungsi dari sintak

a. glvertex3f (x,y,z);

b. glcolor3f(x,x,x)

c. glBegin(GL_POINTS);

d. glBegin(GL_LINE_STRIP);

e. glBegin(GL_LINE_LOOP);

f. glBegin(GL_LINES);

g. glBegin(GL_TRIANGLES);

h. glBegin(GL_TRIANGLE_FAN);

i. glBegin(GL_TRIANGLE_STRIP);

j. glBegin(GL_QUADS);

k. glBegin(GL_QUAD_STRIP);

l. glBegin(GL_POLYGON);

2. Sebutkan dan jelaskan 20 perintah dalam opengl lainya!

II. Tujuan

Mahsiswa mampu membuat dan memanfaatkan animasi.


Animasi.

Animasi, atau kebanyakan orang lebih banyak kenal dengan film animasi, adalah film

yang merupakan hasil dari pengolahan gambar tangan sehingga menjadi gambar yang bergerak.

Pada awal penemuannya, film animasi dibuat dari berlembar-lembar kertas gambar yang

kemudian di-"putar" sehingga muncul efek gambar bergerak. Dengan bantuan komputer dan

komputer grafik, pembuatan film animasi menjadi sangat mudah dan cepat. Bahkan akhir-akhir

ini lebih banyak bermunculan film animasi 3 dimensi daripada film animasi 2 dimensi. Wayang

kulit merupakan salah satu bentuk animasi tertua di dunia. Bahkan ketika teknologi elektronik

dan komputer belum diketemukan, pertunjukan wayang kulit telah memenuhi semua elemen

animasi seperti layar, gambar bergerak, dialog dan ilustrasi musik.

Selain wayang ternyata animasi sudah berusia sangat tua. Sejak ditemukan rangkaian

gerak dalam bentuk gambar pada berbagai artefak pada jaman Mesir Kuno 2000 tahun sebelum

masehi manusia sudah mencoba membuat ilustrasi gerakan yang akhirnya berkembang menjadi

animasi. Sampai akhirnya Paul Roget, Joseph Plateau dan Pierre Desvigenes menemukan pola

penglihatan mata, lahirlah dunia animasi yang sampai sekarang mampu melahirkan berbagai

keajaiban bagi para penontonnya. Dari menghadirkan adegan-adegan lucu dalam tradisional cell

animation, hingga special effect dahsyat dalam Computer Graphics Animation yang dilahirkan

studio-studio besar Hollywood.

Sejak menyadari bahwa gambar dapat dipakai sebagai alternatif media komunikasi,

timbul keinginan menghidupkan lambang-lambang tersebut menjadi cermin ekspresi

kebudayaan. Terbukti dengan diketemukannya berbagai artefak pada peradapan Mesir Kuno

2000 sebelum masehi. Salah satunya adalah beberapa panel yang menggambarkan aksi dua

pegulat dalam berbagai pose. Dalam salah satu ilustrasi Leonardo da Vinci yang terkenal,

dilukiskan anggota tubuh manusia dalam berbagai posisi.Seorang artis Italy Gioto, juga

melukiskan malaikat dalam posisi terbang dengan repitisi gerakan.

Animasi sendiri tidak akan pernah berkembang tanpa ditemukannya prinsip dasar

dari karakter mata manusia yaitu: persistance of vision (pola penglihatan yang teratur ). Paul

Roget, Joseph Plateau dan Pierre Desvigenes, melalui peralatan optik yang mereka ciptakan,

berhasil membuktikan bahwa mata manusia cenderung menangkap urutan gambar-gambar pada

tenggang waktu tertentu sebagai suatu pola. Dalam perkembangannya animasi secara umum bisa

didefinisikan sebagai: Suatu sequence gambar yang diekspos pada tenggang waktu tertentu

sehingga tercipta sebuah ilusi gambar bergerak.

Animation adalah “Illusion Of Motion” yang dibuat dari image statis yang ditampilkan

secara berurutan. Pada video atau film, animasi merancu pada teknik dimana setiap frame dalam

film dibuat secara terpisah. Frame bisa dihasilkan dari komputer, dari fotografi atau dari gambar

lukisan. Ketika frame-frame tersebut digabungkan, maka terdapat ilusi perubahan gambar, sesuai

dengan teori yang disebut dengan “persistance of vision”.

IV. Implemetasi

1. Program garis silang

#include <GL/glut.h>

static float rotAngle = 0.;void init(void){glClearColor(0.0,0.0, 0.2, 0.0);}

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

glPushMatrix();glRotatef(-rotAngle, 0.0, 0.0, 0.1);glBegin (GL_LINES);

glVertex2f (-0.5, 0.5);glVertex2f (0.5, -0.5);

glEnd ();glPopMatrix();

glColor3f (0.0, 0.0, 1.0);glPushMatrix();glRotatef(rotAngle, 0.0, 0.0, 0.1);

glBegin (GL_LINES);glVertex2f (0.5, 0.5);

glVertex2f (-0.5, -0.5);glEnd ();glPopMatrix();

glFlush();}

void reshape(int w, int h){glViewport(0, 0, w, h);glMatrixMode(GL_PROJECTION);glLoadIdentity();if (w <= h)

gluOrtho2D (-1.0, 1.0, -1.0*(GLfloat)h/(GLfloat)w, 1.0*(GLfloat)h/(GLfloat)w); elsegluOrtho2D (-1.0*(GLfloat)w/(GLfloat)h, 1.0*(GLfloat)w/(GLfloat)h, -1.0, 1.0);

glMatrixMode(GL_MODELVIEW);glLoadIdentity();}

void keyboard(unsigned char key, int x, int y){switch (key){case 'r':case 'R':

rotAngle += 20.;if (rotAngle >= 360.) rotAngle = 0.;glutPostRedisplay();break;

case 27:exit(0);break;default:break;

}}

int main(int argc, char** argv){glutInit(&argc, argv);glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB);glutInitWindowSize (300, 300);glutCreateWindow (argv[0]);init();glutReshapeFunc (reshape);glutKeyboardFunc (keyboard);glutDisplayFunc (display);

glutMainLoop();return 0;}

2. Program Kotak berputar#include <GL/glut.h>

static GLfloat spin = 0.0;

void display(void){glClear(GL_COLOR_BUFFER_BIT);glPushMatrix();glRotatef(spin, 0.0, 0.0, 1.0);glColor3f(1.0, 1.0, 1.0);glRectf(-25.0, -25.0, 25.0, 25.0);glPopMatrix();glutSwapBuffers();}

void spinDisplay(void){spin = spin + 2.0;

if (spin > 360.0)spin = spin - 360.0;glutPostRedisplay();

}

void init(void){glClearColor (0.0, 0.0, 0.0, 0.0);

glShadeModel (GL_FLAT);}

void reshape(int w, int h){glViewport (0, 0, (GLsizei) w, (GLsizei) h);glMatrixMode(GL_PROJECTION);glLoadIdentity();glOrtho(-50.0, 50.0, -50.0, 50.0, -1.0, 1.0);glMatrixMode(GL_MODELVIEW);glLoadIdentity();}

void mouse(int button, int state, int x, int y){switch (button){

case GLUT_LEFT_BUTTON:if (state == GLUT_DOWN)

glutIdleFunc(spinDisplay);

break;case GLUT_MIDDLE_BUTTON:case GLUT_RIGHT_BUTTON:

if (state == GLUT_DOWN)glutIdleFunc(NULL);

break;default:break;

}}

int main(int argc, char** argv){glutInit(&argc, argv);glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);glutInitWindowSize (300, 300);glutInitWindowPosition (100, 100);glutCreateWindow (argv[0]);init ();glutDisplayFunc(display);glutReshapeFunc(reshape);glutMouseFunc(mouse);glutMainLoop();return 0;}

3. Program Gerakan Lengan#include <GL/glut.h>

static int shoulder = 0, elbow = 0;void init(void){glClearColor (0.0, 0.0, 0.0, 0.0);glShadeModel (GL_FLAT);}

void display(void){glClear (GL_COLOR_BUFFER_BIT);glPushMatrix();glTranslatef (-1.0, 0.0, 0.0);

glRotatef ((GLfloat) shoulder, 0.0, 0.0, 1.0);glTranslatef (1.0, 0.0, 0.0); glPushMatrix();glScalef (2.0, 0.4, 1.0); glutWireCube (1.0);glPopMatrix();

glTranslatef (1.0, 0.0, 0.0);glRotatef ((GLfloat) elbow, 0.0, 0.0, 1.0);glTranslatef (1.0, 0.0, 0.0); glPushMatrix();glScalef (2.0, 0.4, 1.0);glutWireCube (1.0);glPopMatrix();glPopMatrix();glutSwapBuffers();}

void reshape (int w, int h){glViewport (0, 0, (GLsizei) w, (GLsizei) h);glMatrixMode (GL_PROJECTION);glLoadIdentity ();gluPerspective(65.0, (GLfloat) w/(GLfloat) h, 1.0, 20.0);

glMatrixMode(GL_MODELVIEW);glLoadIdentity();glTranslatef (0.0, 0.0, -5.0);}

void keyboard (int key, int x, int y){switch (key){

case 's':shoulder = (shoulder + 5) % 360;glutPostRedisplay();break;

case 'S':shoulder = (shoulder - 5) % 360;glutPostRedisplay();break;

case 'e':elbow = (elbow + 5) % 360;glutPostRedisplay();break;

case 'E':elbow = (elbow - 5) % 360;glutPostRedisplay();break;


}}

void main(int argc, char** argv){glutInit(&argc, argv);glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);

glutInitWindowSize (700, 600);glutInitWindowPosition (100, 100);glutCreateWindow (argv[0]);init ();glutDisplayFunc(display);glutReshapeFunc(reshape);

glutKeyboardFunc(keyboard);glutMainLoop();return 0;}

4. Program membuat planet#include <GL/glut.h>

static year = 0, day = 0;void init(void){glClearColor (0.0, 0.0, 0.0, 0.0);

glShadeModel (GL_FLAT);}

void display(void){

glClear (GL_COLOR_BUFFER_BIT);glColor3f (1.0, 1.0, 1.0);glPushMatrix();glutWireSphere(1.0, 20, 16); /* gambar matahari */glRotatef ((GLfloat) year, 0.0, 1.0, 0.0);

glTranslatef (2.0, 0.0, 0.0);glRotatef ((GLfloat) day, 0.0, 1.0, 0.0);glutWireSphere(0.2, 10, 8); /* gambar planet kecil */glPopMatrix();glutSwapBuffers();}

void reshape (int w, int h){glViewport (0, 0, (GLsizei) w, (GLsizei) h);glMatrixMode (GL_PROJECTION);glLoadIdentity ();gluPerspective(60.0, (GLfloat) w/(GLfloat) h, 1.0, 20.0); glMatrixMode(GL_MODELVIEW);

glLoadIdentity();gluLookAt (0.0, 0.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0);

}

void keyboard (int key, int x, int y){

switch (key){

case 'd':day = (day + 10) % 360;glutPostRedisplay();break;

case 'D':day = (day - 10) % 360;glutPostRedisplay();break;

case 'y':year = (year + 5) % 360;glutPostRedisplay();break;

case 'Y':year = (year - 5) % 360;glutPostRedisplay();break;


}}

void main(int argc, char** argv){

glutInit(&argc, argv);glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);glutInitWindowSize (500, 500);glutInitWindowPosition (100, 100);glutCreateWindow (argv[0]);init ();glutDisplayFunc(display);glutReshapeFunc(reshape);glutKeyboardFunc(keyboard);glutMainLoop();return 0;}

1. Cobalah program diatas. Bagaimana hasilnya?

2. Analisalah setiap sintak program dengan mencermati program intinya!

V. Tugas1. Dari praktikum sebelumnya sampai sekarang, buatlah program untuk menampilkan

gambar segiempat dengan warna yang dapat diubah dengan menggunakan tombol panah

dan

2. Ubahlah program 1 supaya kedua garis yang muncul pada gambar menjadi bergerak

searah dengan simpangan 90 derajat antara keduanya !

3. Pada program 2 ubahlah program supaya bergerak jika di tekan tombol keyboard “P” atau

“p” !

4. Pada program 4 Lakukan perubahan nilai pada gluLookAt (0.0, 0.0, 5.0, 0.0, 0.0, 0.0, 0.0,

1.0, 0.0); dan glScalef (1.0, 2.0, 1.0); !

5. Pada program 4 sintak glutWireCube (1.0); lakukan perubahan dengan sintak

glutWireSphere(1.0, 40, 16); dengan melakukan perubahan nilai pada gluLookAt (0.0,

0.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0); dan glScalef (1.0, 2.0, 1.0); kemudian amati apa yang

terjadi?

6. Pada program 4. Buatlah gambar lintasan bumi yang mengelilingi matahari!

Modul 3

Pencahayaan pada OpenGL


1. Jelaskan tentang warna RGB!

2. Jelaskan tentang Cahaya Ambient, Diffuse, dan Specular

II. Tujuan

Mahasiswa mampu membuat dan memanfaatkan pencahayaan pada OpenGL.


Warna

Warna sebenarnya merupakan persepsi kita terhadap pantulan cahaya dari benda-benda di depan

mata. Tidak ada ketentuan jumlah warna dasar tetapi dalamimplementasi dengan komputer hanya

dibutuhkan tiga warna dasar. Ada berbagaimodel untuk menyatakan warna dasar serta rentang

warna yang dihasilkan, salah satu diantaranya adalah RGB. Model warna RGB dapat

digambarkan sebagai sebuah kotak yang mempunyai tiga sumbu yaitu : R(red), G(green),

B(blue), dimana nilai masing-masing sumbu berkisar dari 0 sampaii 1. Warna ditentukan

berdasarkan lokasi warna tersebut terhadap Sumbu RGB. Gambar 1 menunjukkan model RGB.

Gambar 1. Model RGB

Salah satu tujuan dari grafika komputer adalah menghasilkan tampilan yang senyata mungkin,

dan karena pengaruh cahaya sangat besar terhadap hasil nyata maka dalam membuat tampilan

akhir faktor pencahayaan harus diperhitungkan pula. Tetapi mengingat bahwa grafika komputer

adalah model matematika dari kehidupan nyata maka pencahayaan juga harus diubah menjadi

model matematika. Model matematika itu harus memenuhi persyaratan sebagai berikut :

Menghasilkan efek seperti cahaya sungguhan

Dapat dihitung dengan cepat

Model pencahayaan tiga dimensi menyangkut yang realistik menyangkut dua elemen

penting yang sangat berkaitan erat dengan shading model, yaitu :

Keakuratan dalam menggambarkan objek.

Teknik pencahayaan yang baik.

Saat cahaya menimpa permukaan benda maka sebagian cahaya akan dipantulkan dan

sebagian lain diserap. Bergantung kepada frekuensi atau panjang gelombang yang dipantulkan

dan diserap maka kita akan melihat warna. Mata kita selain sensitive terhadap warna juga sensitif

terhadap intensitas cahaya (brightness). Secara awam kita menyebut intensitas cahaya sebagai

kecerahan.

OpenGL akan melakukan komputasi warna setiap pixel di display akhir, ditampilkan

adegan itu dilakukan di frame buffer. Bagian dari komputasi ini tergantung pada pencahayaan

yang digunakan dalam adegan dan hal tersebut berkenaan dengan bagaimana suatu benda dalam

adegan yang memantulkan atau menyerap cahaya. Sebagai contoh saja misalnya sebuah lautan

memiliki warna yang berbeda pada cerah maupun pada saat hari mendung. Adanya sinar

matahari atau awan menentukan apakah laut termelihat sebagai pirus terang atau abu-abu keruh

kehijauan. Pada kenyataannya, sebagian besar objek bahkan yang tidak terlihat tiga dimensi

sampai mereka diterangi cahaya. Pada gambar 2 menunjukkan dua versi dari adegan yang persis

sama yaitu sebuah bola, dimana satu dengan pencahayaan dan satu tanpa pencahayaan.

Gambar 2. Sebuah spere dengan diterangi cahaya dan tidak diterangi

Seperti ditunjukkan pada Gambar 2, wilayah gelap tampak tidak berbeda daribul atan dua

dimensi . hal Ini menunjukkan betapa pentingnya interaksi antara obyek dan cahaya adalah dalam

menciptakan adegan tiga dimensi. Agar obyek yang telah dibuat terlihat lebih nyata, diperlukan

tambahan efek pencahayaan pada obyek yang telah kita buat. Pencahayaan adalah proses

pemberian cahaya pada suatu obyek, dikenal dengan istilah lighting atau iluminasi. Pada OpenGL

terdapat sebuah perbedaan penting antara warna dan pencahayaan yang perlu pahami.

Ketika menggunakan pencahayaan atau tekstur pemetaan dengan efek pencahayaan

dihidupkan, warna dari vertex adalah efek kumulatif dari warna bahan dan cahaya yang bersinar

di puncak. Ketika pencahayaan dimatikan, maka warna dari vertex adalah efek pengaturan warna

dan warna yang berbeda dengan bahan warna.

Gambar 3. Contoh ambient, diffuse, dan specular pada pantulan cahaya

Dengan menggunakan OpenGL, dapat memanipulasi pencahayaan dan obyek dalam

sebuah adegan untuk menciptakan berbagai macam efek. Dalam pokok bahasan pada bab

pencahayaan akan dimulai dengan sebuah pencahayaan yang penting pada permukaan

tersembunyi penghapusan. Kemudian menjelaskan bagaimana untuk mengontrol pencahayaan

dalam suatu adegan, membahas model konseptual OpenGL pencahayaan, dan menggambarkan

secara rinci cara mengatur pencahayaan dengan banyak parameter untuk mendapatkan efek

tertentu. Pada akhir bab, perhitungan matematis yang menentukan bagaimana warna

mempengaruhi pencahayaan disajikan.

Pencahayaan pada OpenGL dan Dunia Nyata

Ketika melihat permukaan fisik, persepsi warna pada mata tergantung pada distribusi

energi foton yang datang dan memicu sel-sel kerucut mata. Foton berasal dari sumber cahaya

atau kombinasi dari sumber, yang sebagian diserap dan sebagian yang dipantulkan oleh

permukaan. Selain itu, permukaan yang berbeda memiliki sifat yang sangat berbeda-beda,

misalnya yang mengkilap dengan sempurna akan memantulkan cahaya dalam arah tertentu,

sementara yang lain menyebarkan cahaya sama-sama masuk di segala penjuru. Pencahayaan pada

OpenGL hanya dengan cahaya pendekatan dan cahaya lampu seolah-olah dapat dipecah menjadi

komponen merah, hijau, dan biru. Dengan demikian, warna sumber cahaya dicirikan oleh jumlah

warna yang memancarkan cahaya merah, hijau, dan biru, dan materi permukaan ditandai dengan

persentase komponen warna merah, hijau, dan biru yang masuk dan tercermin dalam berbagai

arah. Persamaan pencahayaan pada OpenGL hanya sebuah pendekatan, tetapi satu yang bekerja

cukup baik dan dapat dihitung relatif cepat. Jika menginginkan yang lebih akurat atau model

pencahayaan hanya berbeda, harus melakukan perhitungan sendiri dalam perangkat lunak.

Dengan perangkat lunak tersebut dapat menjadi sangat kompleks, seperti beberapa jam membaca

buku teks optik pun harus meyakinkan.

Model pencahayaan dalam OpenGL, cahaya dalam sebuah adegan berasal dari beberapa

sumber cahaya yang dapat secara individual diaktifkan dan dinonaktifkan. Beberapa cahaya

datang dari arah atau posisi tertentu, dan beberapa cahaya umumnya tersebar karena adanya suatu

peristiwa. Sebagai contoh, ketika menghidupkan bola lampu dalam ruangan, sebagian besar

berasal dari cahaya bola lampu, tetapi beberapa cahaya datang setelah ada pantulan dari dinding

satu, dua, tiga, atau lebih. Cahaya yang memantul ini disebut ambient dan dapat diasumsikan

begitu cahaya tersebar tidak ada cara untuk mengetahui arah semula, tetapi hal ini akan

menghilang jika suatu sumber cahaya dimatikan. Akhirnya, mungkin ada cahaya ambient umum

dalam adegan yang tidak berasal dari sumber tertentu, seolah-olah telah tersebar beberapa kali

sumber cahaya asli

dan tidak mungkin untuk menentukan. Dalam model OpenGL, sumber cahaya hanya memiliki

efek ketika ada permukaan yang menyerap dan memantulkan cahaya. Setiap permukaan

diasumsikan terdiri dari bahan dengan berbagai sifat. Sebuah bahan dapat memancarkan cahaya

sendiri seperti lampu pada sebuah mobil atau mungkin menyebarkan beberapa cahaya yang

masuk ke segala penjuru, dan mungkin juga memantulkan sebagian dari cahaya masuk dalam

arah preferensial seperti cermin atau permukaan mengilap. Model pencahayaan yang OpenGL

mempertimbangkan pencahayaan yang dibagi menjadi empat komponen independen:

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

independen dan kemudian ditambahkan secara bersama-sama.

Cahaya Ambient, Diffuse, dan Specular

Pencahayaan ambient adalah cahaya yang sudah berserakan begitu banyak disebabkan

oleh lingkungan dan arahnya tidak mungkin ditentukan atau tampaknya datang dari segala

penjuru. Backlighting pada sebuah ruangan memiliki komponen ambient besar, karena sebagian

besar cahaya yang mencapai mata yang memantul dari banyak permukaan. Sebuah lampu sorot

kecil di luar rumah memiliki komponen ambient, sebagian besar cahaya dalam arah yang sama,

dan karena diluar, sangat sedikit cahaya mencapai mata setelah memantul dari benda-benda lain.

Ketika cahaya ambient menyerang permukaan, maka akan tersebar merata di segala penjuru.

Komponen cahaya diffuse adalah komponen yang berasal dari satu arah, jadi akan terang kalau

hal tersebut terjadi tepat diatas sebuah permukaan dibandingkan jika hampir tidak terjadi di atas

permukaan. Setelah mengenai permukaan, akan tersebar merata di segala penjuru, sehingga

tampak sama-sama terang, tak peduli di mana mata berada. Setiap cahaya yang datang dari posisi

atau arah tertentu mungkin memiliki komponen diffuse.

Cahaya specular datang dari arah tertentu, dan cenderung terpental pada permukaan

dalam arah yang diinginkan. sinar laser berkualitas tinggi memantul pada cermin dan

menghasilkan hampir 100 persen refleksi specular. Logam atau plastic mengkilap memiliki

komponen specular tinggi, dan kapur atau karpet telah hampir tidak ada. Specularity dapat juga

dianggap sebagai shininess. Meskipun sumber cahaya memberikan satu distribusi frekuensi,

komponen ambient, diffuse, dan specular mungkin berbeda. Sebagai contoh, jika memiliki

cahaya putih di sebuah ruangan dengan dinding merah, cahaya yang tersebar cenderung menjadi

warna merah, meskipun cahaya secara langsung objek putih yang mencolok. OpenGL

memungkinkan untuk mengatur nilai merah, hijau, dan biru untuk setiap komponen cahaya

secara bebas.

IV. Implementasi

Program 1. Sebuah Lit Sphere.

Dibawah ini merupakan langkah-langkah yang diperlukan untuk menambahkan pencahayaan ke

obyek.

3. Tentukan vektor normal untuk setiap sudut dari semua benda. Vektor normal ini

menentukan orientasi objek relatif terhadap sumber cahaya.

4. Buat, pilih, dan atur posisi satu atau lebih dari sebuah sumber cahaya.

5. Ciptakan dan pilih model pencahayaan, yang mendefinisikan tingkat cahaya

lingkungan global dan lokasi efektif dari sudut pandang (untuk keperluan perhitungan

pencahayaan).

6. Tentukan sifat-sifat material untuk objek-objek dalam adegan.

Contoh program dibawah akan menyelesaikan tugas ini. Program tersebut akan menampilkan

sebuah bola diterangi satu sumber cahaya.

1. Program menggambar sebuah Lit Sphere: light.c

#include <GL/gl.h>#include <GL/glu.h>#include <GL/glut.h>

void init(void){GLfloat mat_specular[] = { 1.0, 1.0, 1.0, 1.0 };

GLfloat mat_shininess[] = { 50.0 };GLfloat light_position[] = { 1.0, 1.0, 1.0, 0.0 };glClearColor (0.0, 0.0, 0.0, 0.0);glShadeModel (GL_SMOOTH);

glMaterialfv(GL_FRONT, GL_SPECULAR, mat_specular);glMaterialfv(GL_FRONT, GL_SHININESS, mat_shininess);glLightfv(GL_LIGHT0, GL_POSITION, light_position);

glEnable(GL_LIGHTING);glEnable(GL_LIGHT0);glEnable(GL_DEPTH_TEST);}

void display(void){glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);glutSolidSphere (1.0, 20, 16);glFlush ();}

void reshape (int w, int h){glViewport (0, 0, (GLsizei) w, (GLsizei) h);glMatrixMode (GL_PROJECTION);glLoadIdentity();if (w <= h)

glOrtho (-1.5, 1.5, -1.5*(GLfloat)h/(GLfloat)w, 1.5*(GLfloat)h/(GLfloat)w, - 10.0, 10.0);else

glOrtho (-1.5*(GLfloat)w/(GLfloat)h, 1.5*(GLfloat)w/(GLfloat)h, -1.5, 1.5, -10.0, 10.0);glMatrixMode(GL_MODELVIEW);glLoadIdentity();}

int main(int argc, char** argv){

glutInit(&argc, argv);glutInitDisplayMode (GLUT_SINGLE | GLUT_RGB | GLUT_DEPTH);glutInitWindowSize (500, 500); glutInitWindowPosition (100, 100);glutCreateWindow (argv[0]);init ();glutDisplayFunc(display);

glutReshapeFunc(reshape);glutMainLoop();return 0;}

2. Program Obyek Spere


GLfloat light_diffuse[] ={1.0, 1.0, 0.0, 1.0};GLfloat light_position[] ={1.0, 1.0, 1.0, 0.20}; GLUquadricObj *qobj;

void display(void){

glClear(GL_COLOR_BUFFER_BIT |GL_DEPTH_BUFFER_BIT);glCallList(1); /* tampilan list render sphere */glutSwapBuffers();}

void gfxinit(void){qobj = gluNewQuadric(); // glut LibrarygluQuadricDrawStyle(qobj, GLU_FILL);glNewList(1, GL_COMPILE); /* membuat tampilan sphere *///gluSphere(radius, slices, stacks);gluSphere(qobj, 1.0, 20, 20);gluCylinder(qobj, 1, 1, 3, 20, 20);gluDisk(qobj, 0.5, 1, 20, 20);gluPartialDisk(qobj, 0.5, 1, 20, 20, 45, 270);

Lakukan percobaan dengan memilih salah satu dari sintak dengan warna merahtebal. Lakukan perubahan nilai.

glEndList();glLightfv(GL_LIGHT0, GL_DIFFUSE, light_diffuse);glLightfv(GL_LIGHT0, GL_POSITION, light_position);glEnable(GL_LIGHTING);glEnable(GL_LIGHT0);glEnable(GL_DEPTH_TEST);glMatrixMode(GL_PROJECTION);// gluPerspective(field of view in degree, aspect ratio, Z near, Z far );gluPerspective(40.0, 1.0, 1.0, 10.0);glMatrixMode(GL_MODELVIEW);gluLookAt(0.0, 0.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.);glTranslatef(0.0, 0.0, -1.0);}

int main(int argc, char **argv){glutInit(&argc, argv);glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);glutCreateWindow("sphere");glutDisplayFunc(display);gfxinit();glutCreateWindow("pencahayaan");glutDisplayFunc(display);gfxinit();

glutMainLoop();return 0;}

3. Program Obyek Kubus


GLfloat light_diffuse[] = {1.0, 0.0, 0.0, 1.0}; /* warna merah terang. */GLfloat light_position[] = {1.0, 1.0, 1.0, 0.0};GLfloat n[6][3] = { /* secara normal kubus ada 6 muka. */{-1.0, 0.0, 0.0}, {0.0, 1.0, 0.0}, {1.0, 0.0, 0.0}, {0.0, -1.0, 0.0}, {0.0, 0.0, 1.0}, {0.0,0.0, -1.0} };

GLint faces[6][4] = { {0, 1, 2, 3}, {3, 2, 6, 7}, {7, 6, 5, 4}, {4, 5, 1, 0}, {5, 6, 2, 1}, {7,4, 0, 3} };GLfloat v[8][3];

void drawBox(void){

int i;for (i = 0; i < 6; i++){

glBegin(GL_QUADS);glNormal3fv(&n[i][0]);

glVertex3fv(&v[faces[i][0]][0]);glVertex3fv(&v[faces[i][1]][0]);glVertex3fv(&v[faces[i][2]][0]);glVertex3fv(&v[faces[i][3]][0]);glEnd();

}}

void display(void){glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);drawBox();glutSwapBuffers();}

void init(void){/* pengaturan data vertek kubus. */v[0][0] = v[1][0] = v[2][0] = v[3][0] = -1;v[4][0] = v[5][0] = v[6][0] = v[7][0] = 1;v[0][1] = v[1][1] = v[4][1] = v[5][1] = -1;v[2][1] = v[3][1] = v[6][1] = v[7][1] = 1;v[0][2] = v[3][2] = v[4][2] = v[7][2] = 1;v[1][2] = v[2][2] = v[5][2] = v[6][2] = -1;

/* meng-Enable-kan pencahayaan OpenGL single. */glLightfv(GL_LIGHT0, GL_DIFFUSE, light_diffuse);glLightfv(GL_LIGHT0, GL_POSITION, light_position);glEnable(GL_LIGHT0);glEnable(GL_LIGHTING);glEnable(GL_DEPTH_TEST);

/* mengatur penglihatan kubus. */glMatrixMode(GL_PROJECTION);/* sudut pandangan, aspek ratio, kedekatan Z, jauh Z */gluPerspective(40.0,1.0, 1.0, 10.0);glMatrixMode(GL_MODELVIEW);

gluLookAt(0.0, 0.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.);

/* mengatur posisi kubus */glTranslatef(0.0, 0.0, -1.0);glRotatef(60, 1.0, 0.0, 0.0);glRotatef(-20, 0.0, 0.0, 1.0);}

int main(int argc, char **argv){glutInit(&argc, argv);glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);glutCreateWindow("kubus warna merah 3D dengan pencahayaan");glutDisplayFunc(display);init();glutMainLoop();return 0;}

Cobalah program diatas

Lakukan perubahan sintak atau nilai yang ada dalam program diatas

Bagaimana hasilnya?

V. Tugas

1. Buatlah gambar donat dilengkapi dengan pencahayaan satu sumber

2. Buatlah program gambar cone dilengkapi dengan pencahayaan satu sumber

Modul 4

Bayangan


Jelaskan fungsi dari perintag berikut ini:

glPushMatrix();

glRotatef(ry,0,1,0);

glPopMatrix();

glPushMatrix();

glShadowProjection(l,e,n);

II. Tujuan

Mahasiswa mampu membuat dan memanfaatkan bayangan dalam sebuah gambar.


Untuk menghasilkan gambar yang realistik perlu memodelkan pencerminan dan

pembiasan maupun memunculkan bayangan karena pengaruh dari adanya cahaya. Dengan

memodelkan pencerminan untuk benda yang reflektif seperti cermin akan dihasilkan pantulan

ataupun bayangan benda. Dan efek pembiasan cahaya dapat dimodelkan pada benda yang

transparan untuk menghasilkan penampakan obyek lain yang berada di belakang obyek

transparan tersebut serta efek pengumpulan cahaya bias. Effek bayangan ini sangat penting

karena dengan adanya effek tersebut seolah-olah benda tersebut nampak nyata. Bayangan sebuah

obyek benda harus disesuaikan dengan bentuk benda aslinya dan asal sumber cahaya tersebut

berada dan banyaknya sumber cahaya.

IV. Implemetasi

1. Program bayangan

#include <math.h>#include <stdio.h>#include <GL/glut.h>

double rx = 0.0;double ry = 0.0;

float l[] = { 0.0, 80.0, 0.0 }; // koordinat sumber cahayafloat n[] = { 0.0, -1.0, 0.0 };float e[] = { 0.0, -60.0, 0.0 };

void help();

// obyek yang akan digambar draw(){

}glutSolidTeapot(30.0);

glutSolidSphere(40, 16, 16);glutSolidCube (40);

// Isi dengan salah satu saja (cetak merah tebal), dan berilah obyek yang selain dalam tabelini}

//membuat proyeksi bayanganvoid glShadowProjection(* l, * e, * n)

{float d, c;float mat[16];

d = n[0]*l[0] + n[1]*l[1] + n[2]*l[2];c = e[0]*n[0] + e[1]*n[1] + e[2]*n[2] - d;

mat[0] = l[0]*n[0]+c; // membuat matrik. OpenGL menggunakan kolom matrikmat[4] = n[1]*l[0];mat[8] = n[2]*l[0];mat[12] = -l[0]*c-l[0]*d;

mat[1] = n[0]*l[1];mat[5] = l[1]*n[1]+c;mat[9] = n[2]*l[1];mat[13] = -l[1]*c-l[1]*d;

mat[2] = n[0]*l[2];mat[6] = n[1]*l[2];mat[10] = l[2]*n[2]+c;mat[14] = -l[2]*c-l[2]*d;

mat[3] = n[0];mat[7] = n[1];mat[11] = n[2];mat[15] = -d;

glMultMatrixf(mat); // kalikan matrik}

void render(){glClearColor(0.0,0.6,0.9,0.0);glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);

glLightfv(GL_LIGHT0, GL_POSITION, l);glDisable(GL_CULL_FACE);glDisable(GL_LIGHTING);glColor3f(1.0,1.0,0.0);

glBegin(GL_POINTS);glVertex3f(l[0],l[1],l[2]);

glEnd();

glColor3f(0.8,0.8,0.8);glBegin(GL_QUADS);

glNormal3f(0.0,1.0,0.0);glVertex3f(-1300.0,e[1]-0.1, 1300.0);glVertex3f( 1300.0,e[1]-0.1, 1300.0);glVertex3f( 1300.0,e[1]-0.1,-1300.0);glVertex3f(-1300.0,e[1]-0.1,-1300.0);

glEnd();

// gambar bayanganglPushMatrix();glRotatef(ry,0,1,0);glRotatef(rx,1,0,0);glEnable(GL_LIGHTING);glColor3f(0.0,0.0,0.8);draw();glPopMatrix();

//sekarang gambar bayangan yang munculglPushMatrix();glShadowProjection(l,e,n);glRotatef(ry,0,1,0);glRotatef(rx,1,0,0);glDisable(GL_LIGHTING);glColor3f(0.4,0.4,0.4);draw();glPopMatrix();glutSwapBuffers();}

void keypress(unsigned char c, int a, int b){( c==27 ) exit(0);( c=='s' ) l[1]-=5.0;( c=='w' ) l[1]+=5.0;( c=='a' ) l[0]-=5.0;( c=='d' ) l[0]+=5.0;( c=='q' ) l[2]-=5.0;( c=='e' ) l[2]+=5.0;( c=='h' ) help();}

void help(){printf("proyeksi contoh bayangan sebuah obyek teapot\n");}

void idle(){rx+=0.4;ry+=0.7;render();}

void resize(w, h){glViewport(0, 0, w, h);}

int main(argc, * argv[]){glutInit(&argc, argv);glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);glutCreateWindow("proyeksi bayangan");glutReshapeFunc(resize);glutReshapeWindow(400,400);glutKeyboardFunc(keypress);glutDisplayFunc(render);glutIdleFunc(idle);

glEnable(GL_NORMALIZE);glEnable(GL_LIGHTING);glEnable(GL_COLOR_MATERIAL);glEnable(GL_DEPTH_TEST);glEnable(GL_LIGHT0);glEnable(GL_TEXTURE_2D);glMatrixMode(GL_PROJECTION);

glLoadIdentity();gluPerspective(60.0f, 1.0, 1.0, 400.0);

// Reset koordinat sebelum dimodifikasi/diubahglMatrixMode(GL_MODELVIEW);glLoadIdentity();glTranslatef(0.0, 0.0, -150.0);glutMainLoop();return 0;}

Lakukan program diatas

Analisalah sintak program diatas yang berhubungan dengan bayangan!

V. Tugas

1. Buatlah sebuah program yang menampilkan bayangan sebuah obyek benda yang berbeda

dengan program diatas disertai pencahayaan.

2. Buatlah benda kubus yang terletak di meja dengan disertai pencahayaan dan bayangannya

(sudut nya bebas)

3. Buatlah gambar tabung dilengkapi dengan bayangan dengan sudut 45° disertai

pengkabutan dengan ketebalan 40%

Modul 1 Primitif Drawing · PDF fileJelaskan tenteng ouput primitif dalam grafika computer!...

Documents

Transcript of Modul 1 Primitif Drawing · PDF fileJelaskan tenteng ouput primitif dalam grafika computer!...