Anda di halaman 1dari 61

BAB I

PENGENALAN OPENGL
A. TUJUAN
a. Mampu melakukan konfigurasi Library opengl di Visual Studio
2008
b. Mampu memahami inisialisasi fungsi openGL
c. Mampu membuat objek dasar dengan fungsi openGL

B. MATERI
a. Konfigurasi library openGL
b. Inisialisas OpenGL

C. GLUT (GL Utility Toolkit)


Merupakan pengembangan dari OpenGL yang didesain untuk aplikasi
dengan level kecil hingga menengah dan menggunakan callback functions untuk
menambahkan interaksi dari user. Untuk pemrograman OpenGL menggunakan
C++, diperlukan library tambahan yaitu :

1. glut.h yang dicopy ke $dir-C\Microsoft Visual Studio 9.0 (sesuaikan dengan


versi visual studio anda)\Vc\include

2. glut32.lib yang dicopy ke $dir\Program Files\Microsoft Visual Studio 9.0


(sesuaikan dengan versi visual studio anda)\Vc\lib

3. glut32.dll yang dicopy ke $dir\Windows\System32 or if Win64 to sysWOW64

D. KLASIFIKASI FUNGSI
a. Primitive : berupa geometric,
b. imagesAttribute : berupa color, line type, light, texture
c. Viewing : berupa vithrtual
d. cameraControl : turn fuction ON / OFF
e. Windowing : window, mouse, keyboard

E. CARA KERJA OPENGL


OpenGL lebih mengarah pada prosedural daripada sebuah deskriptif API
grafis.Untuk mendeskripsikan scene dan bagaimana penampilannya,sebenarnya
programer lebih tau untuk menentukan hal-hal yang dibutuhkan untuk
menghasilkan efek yang di inginkan.Langkah tersebut termasuk memanggil
banyak perintah openGL, perintah tersebut digunakan untuk menggambarkan

MODUL GRAFIKA KOMPUTER 2017 Page 2


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
grafis primitif seperti titik,garis dan poligon dalam tiga dimensi.Sebagai
tambahan,openGL mendukung lighting, shading, texture mapping, blending,
transparancy,dan banyak kemampuan efek khusus lainnya.

F. INISIALISASI AWAL
Inti dari tahapan ini adalah mengatur view port dan persepektif untuk
penampilan obyek ke dalam layar monitor, viewport adalah besarnya layar
monitor(image) yang dipakai untuk menampilkanobyek, sedangkan persepektif
yang dimaksud adalah pengaturan sumbu z dalam penampilan obyek 3
dimensi,sehingga user dapat melihat obyek seolah-olah dalam bidang 3 dimensi
(X-Y-Z),selain itu penggambaran obyek yang dilakukan oleh programer juga dapat
menggunaan koordinat 3 dimensi. Selain ke dua tujuan di atas pada tahap ini juga
dilakukan koneksi awal dengan library openGL, koneksi ini dilakukan supaya
fungsi-fungsi yang di sediakan openGL dapat digunakan. Fungsi/prosedur yang
digunakan :

Fungsi / Prosedur Pengertian


LoadGlut(glut32.dll) „if you no Pemanggilan library openGL
include gl in system‟
InitGL Inisialisasi openGL awal yang harus
dilakukan
glViewport Untuk pengaturan viewport
glMatrixMode Untuk pengaturan viewport

Pembuatan Gambar
Fungsi / Prosedur Pengertian
GL_QUARDS Untuk menggambar segi empat
GL_LINES Penggambarkan sebuah garis
glVertex3f Untuk menentukan titik 3 dimensi
glColor3f Untuk penentuan suatu warna
glLineWidth Yaitu suatu fungsi yang berfungsi
untuk mengatur tebalnya garis,

glPointSize suatu fungsi yang berfungsi untuk


mengatur besarnya suatu objek,

gluOrtho2D yaitu suatu fungsi untuk mengatur


proyeksi hasil eksekusi dan
mendefinisikan besarnya sistem

MODUL GRAFIKA KOMPUTER 2017 Page 3


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
koordinat dengan urutan kirikanan dan
bawah-atas.
glClearColor Menandakan warna apa yang
digunakan sebagai background. Warna
dinyatakan dalam bentuk RGBA,
angka pertama memwakil warna
merah, kedua hijau, ketiga biru, dan
keempat adalah alpha atau tingkat
transparansi. Tiap warna berkisar
antara 0 hngga 1.
glClear Untuk menghapus window dan
memberikan warna yang telah kita
definisakn sebelumnya dengan
menggunakan glClearColor
glPushMatrix Menyimpan koordinat Matrik yang ada
glPopMatrix Berguna untuk memanggil suatu fungsi
yang telah disimpan pada glPushMatrix
glBegin(GL_Lines) Untuk memmulai menggambar dalam
bentuk garis. Setiap pasangan verteks
sebagai seg,em garis independen
glEnd Untuk mengakhiri penggambaran
sebuah garis
SwapBuffers(hDC) untuk menukar bagian belakang buffer
menjadi buffer screen
glflush() Rendiring

Fungsi dasar menggambar titik


Fungsi / Prosedur Pengertian Contoh
glVertex2i(x,y) Yaitu suatu fungsi glVertex2i(10,10)
untuk menggambar
titik pada koordinat x
dan y, dengan nilai
satuan berupa integer.
glVertex2f(x,y) Yaitu suatu fungsi glVertex2f(10.0,10.0)
untuk menggambar
titik pada koordinat x
dan y, dengan nilai
satuan berupa float.
glVertex2d(x,y) Yaitu suatu fungsi glVertex2d(10.0,10.0)
untuk menggambar
titik pada koordinat x
dan y, dengan nilai
satuan berupa double.

MODUL GRAFIKA KOMPUTER 2017 Page 4


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
Definisi primitive objek
Fungsi / Prosedur Pengertian
# define GL_POINTS Primitif objek ini dipergunakan untuk menciptakan
suatu titik.
# define GL_LINES Primitif objek ini adalah suatu primitive objek
guna menciptakan suatu garis.
# define GL_LINE_LOOP Menarik sekelompok verteks yang terhubung
menjadi segmen garis dari titik pertama sampai
terakhir, kemudian kembali ke verteks yang
pertama.
# define GL_LINE_STRIP Menggambar sekelompok verteks yang terhubung
menjadi segitiga. Sebuah segitiga baru
didefinisikan untuk setiap titik yang diberikan
setelah dua verteks pertama dan seterusnya.
# define GL_TRIANGLES Triangle atau segitiga adalah tiga buah titik yang
terhubung menjadi suatu segitiga dengan blok di
tengahnya.
#define Pada triangles strip jumlah vertex yang
GL_TRIANGLES_STRIP dipergunakan adalah 3 buah vertex.
#define Triangles fan adalah pembuatan suatu objek
GL_TRIANGLES_FAN dengan menggunakan segitiga dimana hanya
menggunakan 1 titik pusat saja.
# define GL_QUADS Quad atau segempat adalah empat buah titik yang
terhubung menjadi quat segi empat dengan blok di
tengahnya.
#define GL_QUADS Pada quads strip 4 buah vertex merupakan 1
_STRIP kelompok.
# define GL_POLYGON Polygon merupakan suatu fungsi yang mirip
dengan polyline, tetapi menghasilkan kurva
tertutup dengan blok warna (fill).

Fungsi untuk memberikan warna (fungsi color):


Fungsi Warna
glColor3f(0,0,0); Black
glColor3f(0,0,1); Blue
glColor3f(0,1,0); Green
glColor3f(0,1,1); Cyan
glColor3f(1,0,0); Red
glColor3f(1,0,1); Magenta
glColor3f(1,1,0); Yellow

MODUL GRAFIKA KOMPUTER 2017 Page 5


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
glColor3f(1,1,1); White

Transformasi objek
Fungsi / Prosedur Pengertian
glTranslatef(x,y,z); Parameter pertama menunjukkan translasi berdasarkan
sumbu x.
Parameter ke dua menunjukkan translasi terhadap sumbu
y.
Parameter ke tiga menunjukkan parameter terhadap
sumbu z pada kanvas.
glRotatef(sudut,x,y,z) Parameter pertama merupakan nilai perputaran sudut yang
; diinginkan.
Parameter ke dua adalah perputaran terhadap sumbu x,
parameter ke tiga merupakan perputaran terhadap sumbu
y,
Parameter ke empat6 adalah perputaran terhadap sumbu z.
Dan parameter ke dua, ke tiga, dan ke empat harus
bernilai 1 untuk menjadi sumbu putar sempurna. Dan
untuk pemberian nilainya akan menyebabkan perputaran
searah dengan jarum jam ketika diberi nilai negatif, dan
sebaliknya.
glScalef(x,y,z); Parameter pertama, kedua, dan ke tiga masing-masing
menunjukkan nilai skala untuk obyek berdasarkan sumbu
x, y, dan z. Jika nilai skala adalah 1, maka ukuran obyek
tersebut adalah tetap

MODUL GRAFIKA KOMPUTER 2017 Page 6


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
BAB II
PRIMITIF OBJEK
A. TUJUAN
a. Mampu melakukan inisialisasi pembuatan primitif objek pada openGL
b. Mampu membuat primitif objek menggunakan openGL

B. MATERI
a. Konsep primitif objek di openGL
b. Pembuatan primitif objek di openGL

C. Definisi Primitif Objek


Contoh primitive grafika dasar antara lain : titik, garis, kurva, fill area dan
text. Objek kompleks dapat dibuat dengan kombinasi dari primitive ini. Misalkan,
Poligaris atau yang dapat didefinisikan sebagai urutan garis lurus yang saling
terhubung. Secara umum algoritma grafis memiliki persamaan yaitu bagaimana
menampilkan hasil.

Contoh SegiEmpat yang menggunakan Primitive Objek :

Pada primitive object dapat digunakan untuk membuat segi empat berikut
adalah pembuatan suatu objek berupa segiempat, pertama mengalami Proses
Rendering :

SegiEmpat (posx, posy, w, h)

MODUL GRAFIKA KOMPUTER 2017 Page 7


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
1. Maka sintaks pembuatan segiempat :

Segitiga

MODUL GRAFIKA KOMPUTER 2017 Page 8


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
Segi_8

MODUL GRAFIKA KOMPUTER 2017 Page 9


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
BAB III
Algoritma Pembentukan Objek
A. TUJUAN
a. Mampu memhami konsep algoritma bresenham
b. Mampu menerapkan algoritma bresenham pada openGL
c. Mampu membuat garis dengan algoritma bresenham

B. MATERI
a. Konsep algoritma bresenham
b. Penerapan algoritma bresenham pada openGL

C. Algoritma Bresenham
Algoritma Garis Bresenham adalah suatu algoritma yang menentukan titik-
titik dalam dimensi yang membentuk pendekatan dekat dengan garis lurus antara
dua titik yang diberikan. Pendekatan ini biasa digunakan untuk menggambar garis
pada layar komputer, karena hanya menggunakan integer penambahan,
pengurangan dan pergeseran. Algoritma ini merupakan salah satu algoritma paling
awal yang dikembangkan di bidang komputer grafis. Konsep Algoritma Bresenham

Langkah-langkah pembentukan garis berdasarkan algoritm Bressenham


adalah:

1. Tentukan dua titik yang akan dihubungkan dalam pembentukan garis.


2. Tentukan salah satu sebagai titik awal (x0, y0) dan titik akhir (x1,y1).
3. Hitung dx, dy, 2dy dan 2dy - 2dx
4. Hitung parameter : p = 2dy – dx
5. Untuk setiap xk sepanjang jalur garis, dimulai dengan k=0,
a. bila pk < 0 maka titik selanjutn ya adalah: (xk+1, yk) dan pk+1 = pk +
2dy
b. bila tidak, titik selanjutnya adalah: (xk+1, yk+1) dan pk+1 = pk + 2dy –
2dx
6. Ulangi nomor 5 untuk menentukan posisi pixel berikutnya, sampai x = x1
atau y = y1.

Contoh :

Diketahui 2 buah titik A(10,10) dan titik B(17,16) bila titik A sebagai titik awal dan
titik B sebagai titik akhir, tentukan titik-titik antara yang menghubungkan titik A
dan titik B sehingga membentuk garis AB dengan menggunakan algoritma
Bressenham.

MODUL GRAFIKA KOMPUTER 2017 Page 10


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
MODUL GRAFIKA KOMPUTER 2017 Page 11
LAB MULTIMEDIA DAN PENGOLAHAN CITRA
Contoh program
#include <stdio.h>
#include <glut.h>

void display()
{
glMatrixMode(GL_PROJECTION);
gluOrtho2D(0.0,300.0,0.0,300.0);
}

void setPixel (GLint xCoordinate, GLint yCoordinate)


{
glBegin (GL_POINTS);
glVertex2i (xCoordinate, yCoordinate
glEnd();
glFlush();
}

void lineBres (GLint x0, GLint y0, GLint xEnd, GLint yEnd)//rumus
{
GLint dx = (xEnd - x0);
GLint dy = (yEnd - y0);
GLint p = 2*dy-dx;
GLint twoDy = 2*dy;
GLint twoDyMinusDx = 2*(dy-dx);
GLint x,y;

if(x0 > xEnd){


x=xEnd;
y=yEnd;
xEnd=x;
}
else{
x=x0;
y=y0;
}
setPixel(x,y);
while(x<xEnd){
x++;
if(p<0)
p+=twoDy;
else{
y++;
p+=twoDyMinusDx;
}
setPixel(x,y);
}
}
void drawMyLine ()
{
glColor3f(1.0,0.0,0.0);
glPointSize(4.0);
GLint x0 = 50;
GLint y0 = 50;
GLint xEnd = 150;
GLint yEnd = 50;
lineBres(x0,y0,xEnd,yEnd);

glColor3f(0.0,1.0,0.0);
glPointSize(4.0);
GLint x1 = 50;

MODUL GRAFIKA KOMPUTER 2017 Page 12


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
GLint y1 = 100;
GLint x2 = 150;
GLint y2 = 100;
lineBres(x1,y1,x2,y2);

glColor3f(0.0,0.0,1.0);
glPointSize(4.0);
GLint x3 = 50;
GLint y3 = 150;
GLint x4 = 150;
GLint y4 = 150;
lineBres(x3,y3,x4,y4);
}

int main(int argc, char** argv)


{
glutInitWindowSize(400,400);
glutInitWindowPosition(0,0);
glutCreateWindow("bresenham");
display();
glutDisplayFunc(drawMyLine);
glutMainLoop();
return 0;
}

TUGAS 

MODUL GRAFIKA KOMPUTER 2017 Page 13


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
BAB IV
Transformasi objek
A. TUJUAN
a. Mampu memahami transformasi objek pada openGL
b. Mampu melakukan transformasi objek menggunakan openGL
c. Mampu melakukan implementasi transformasi objek pada openGL

B. MATERI
a. Konsep Transformasi Objek
b. Penerapan Transformasi objek pada openGL

C. Tujuan transformasi adalah :


1. Merubah atau menyesuaikan komposisi pemandangan
2. Memudahkan membuat objek yang simetris
3. Melihat objek dari sudut pandang yang berbeda
4. Memindahkan satu atau beberapa objek dari satu tempat ke tempat lain, ini
biasa dipakai untuk animasi komputer.

Secara substansi, Grafika Komputer adalah proses transformasi dari model


3D obyek berupa informasi geometri bentuk, informasi pose, warna, texture, dan
pencahayaan menjadi citra 2D

Jika dilihat secara analogi, hal di atas mirip dengan cara kerja kamera
dalam mengambil foto dalam bidang fotografi (cf. Gambar 4). Model ini disebut
model sintesis camera.

MODUL GRAFIKA KOMPUTER 2017 Page 14


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
Untuk menghasilkan gambar dari obyek dengan skenario tertentu kita harus
melakukan beberapa proses, yaitu:

1. Melakukan pengesetan kamera dalam bentuk setting lensa kamera


(Transformasi Proyeksi),
2. Mengarah kamera dengan mengatur letak tripod (Transformasi Viewing),
3. Mengatur letak obyek (Transformasi Modeling), dan
4. Mengatur skala dan layout dari foto (Transformasi Viewport)

D. Translasi
Translasi adalah transformasi dengan bentuk yang tetap, memindahkan
objek apa adanya. Setiap titik dari objek akan ditranslasikan dengan besaran yang
sama.Dalam operasi translasi, setiap titik pada suatu entitas yang ditranslasi
bergerak dalam jarak yang sama. Pergerakan tersebut dapat berlaku dalam arah
sumbu X saja, atau dalam arah sumbu Y saja atau keduanya. Translasi juga
berlaku pada garis, objek atau gabungan objek 2D yang lain. Untuk hal ini, setiap
titik pada garis atau objek yang ditranslasi dalam arah x dan y masing -masing
sebesar tx,ty.
Program di bawah ini akan memberikan ilustrasi bagaimana transformasi
translate diimplementasikan.

MODUL GRAFIKA KOMPUTER 2017 Page 15


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
Contoh Translasi

E. Rotate
Rotasi artinya berputar. Ketika suatu bentuk benda sengaja diputar maka
perlu di tentukan pusat dan besar sudut putar. sedangkan translasi adalah
pergeseran. Benda yang telah berpindah dari pusatnya berarti mengalami
pergeseran, yaitu apakah dia bergerak maju mundur ataupun menuju ke atas bawah.
Rotasi berbeda dengan translasi karena perubahan posisi pada translasi
tidak mengacu pada suatu titik tertentu. Keistimewaan dari rotasi adalah jarak
antara titik pusat dengan masing-masing bagian dari obyek yang diputar akan
selalu tetap, seberapa jauh pun obyek itu diputar.

Pada sebuah game yang menggunakan grafik vektor dan grafik bitmap,
rotasi dan translasi sangat di butuhkan. Dengan basic4GL kita bisa
menggunakan source code yang tersedia yaitu :

MODUL GRAFIKA KOMPUTER 2017 Page 16


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
glTranslatef (x, y, z) digunakan untuk merubah titik posisi awal sumbu
koordinat menuju posisi yang ditentukan sesuai koordinat x,y, dan z. glRotatef
(angle, x, y, z) digunakan untuk memutar suatu bidang pada sudut tertentu
(angle).

Untuk membangkitkan rotasi pada objek 3D kita harus membuat aksis dari
rotasi dan jumlah sudut rotasi . Tidak seperti melakukan rotasi pada objek 2D
yang semua proses transformasi dilakukan di koordinat xy, sebuah rotasi objek
tiga dimensi bisa dilakukan di space manapun.

Contoh Program Rotasi

MODUL GRAFIKA KOMPUTER 2017 Page 17


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
F. Scale
Skala merupakan salah satu bentuk transformasi yang merubah ukuran
dari objek yang ditentukan, baik membesar ataupun mengecil. Perubahan ukuran
tersebut didasarkan pada sumbu x, sumbu y, maupun sumbu z, dimana jika yang
diubah hanya sumbu x, maka besarnya objek akan berubah sesuai dengan sumbu x
baru yang telah ditentukan, begitu pula jika diubah terhadap sumbu dan zy, maka
objek akan menguikuti perubahan sesuai sumbu y maupun z baru yang telah
ditentukan.

Perubahan skala diperoleh dari mengalikan nilai koordinat objek dengan


skala tertentu sesuai dengan sumbu masing - masing. Bentuk dari matriks skala
adalah:

Transformasi skala dapat dilakukan dengan cara memanggil fungsi:


glScalef(Sx, Sy, Sz)
glScaled(Sx, Sy, Sz)
Dimana Sx, Sy, dan Sz merupakan parameter dari masing – masing sumbu
( Sx merupakan parameter pada sumbu x, Sy merupakan parameter pada sumbu
y, dan Sz merupakan parameter pada sumbu z)

MODUL GRAFIKA KOMPUTER 2017 Page 18


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
Source code Scale

D. Tutorial Urutan Transformasi

Transformasi dapat dilakukan pada level vertex, level surface, maupun


level obyek bergantung dimana transformasi diletakkan dalam program. Operasi
transformasi merupakan operasi yang tidak bersifat komutatif, artinya, urutan
transformasi juga sangat berpengaruh pada hasilnya. ilustrasi akibat urutan
transformasi yang berbeda, yaitu hasil operasi “rotasi kemudian di translasi”
berbeda dengan operasi “translasi baru dirotasi”.

MODUL GRAFIKA KOMPUTER 2017 Page 19


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
Program obyeknya sudah berupa obyek 3D berupa kubus. Perhatikan
bagaimana kubus dibentuk dari vertex dan surface. Selain dengan mendefinisikan
obyeknya sendiri, GLUT telah menyediakan beberapa fungsi untuk menggambar
standard obyek, yaitu kubus, bola, dan poci teh.

Perhatikan apa yang terjadi bila glTranslate() dan glRotate() di fungsi


mydisplay() ditukar posisinya atau diletakkan didalam salah satu
glBegin()..glEnd()

#include<stdlib.h>
#include<glut.h>
float z_pos = -10.0f; float rot = 0.0f;
void resize(int width, int height)
{
glViewport(0, 0, width, height);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45.0,(float)width / (float)height, 1.0,
300.0);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
}
void putaran(int id)
{
rot += 10;
glutPostRedisplay(); // request redisplay
glutTimerFunc(100, putaran, 0); // request next timer event
}
void myKeyboard(unsigned char key, int x, int y)
{
if ((key == '<') || (key == ',')) z_pos -= 0.1f;
if ((key == '>') || (key == '.')) z_pos += 0.1f;
}
void mydisplay(void)
{
glClear(GL_COLOR_BUFFER_BIT);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
glTranslatef(0.0, 0.0f, z_pos);
glRotatef(rot, 0, 1, 0);

MODUL GRAFIKA KOMPUTER 2017 Page 20


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
glBegin(GL_QUADS);

// Front Face, red


glColor3f(1.0, 0.0, 0.0);
glVertex3f(-1.0f, -1.0f, 1.0f);
glVertex3f(1.0f, -1.0f, 1.0f);
glVertex3f(1.0f, 1.0f, 1.0f);
glVertex3f(-1.0f, 1.0f, 1.0f);

// Back Face, green


glColor3f(0.0, 1.0, 0.0);
glVertex3f(1.0f, -1.0f, -1.0f);
glVertex3f(1.0f, 1.0f, -1.0f);
glVertex3f(-1.0f, 1.0f, -1.0f);
glVertex3f(-1.0f, -1.0f, -1.0f);

// Top Face, blue


glColor3f(0.0, 0.0, 1.0);
glVertex3f(-1.0f, 1.0f, -1.0f);
glVertex3f(-1.0f, 1.0f, 1.0f);
glVertex3f(1.0f, 1.0f, 1.0f);
glVertex3f(1.0f, 1.0f, -1.0f);

// Bottom Face, yellow


glColor3f(1.0, 1.0, 0.0);
glVertex3f(-1.0f, -1.0f, -1.0f);
glVertex3f(1.0f, -1.0f, -1.0f);
glVertex3f(1.0f, -1.0f, 1.0f);
glVertex3f(-1.0f, -1.0f, 1.0f);

// Right face, cyan


glColor3f(0.0, 1.0, 1.0);
glVertex3f(1.0f, -1.0f, -1.0f);
glVertex3f(1.0f, 1.0f, -1.0f);
glVertex3f(1.0f, 1.0f, 1.0f);
glVertex3f(1.0f, -1.0f, 1.0f);

// Left Face, magenta


glColor3f(1.0, 0.0, 1.0);
glVertex3f(-1.0f, -1.0f, -1.0f);
glVertex3f(-1.0f, -1.0f, 1.0f);
glVertex3f(-1.0f, 1.0f, 1.0f);
glVertex3f(-1.0f, 1.0f, -1.0f);
glEnd();

glFlush();
glutSwapBuffers();
}
void init() {
glEnable(GL_DEPTH_TEST);
glClearColor(0.0, 0.0, 0.0, 1.0); // A Background Clear Color
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45,
(GLdouble)500.0 / (GLdouble)500.0, 0, 100);
glMatrixMode(GL_MODELVIEW);
return;
}
int main(int argc, char** argv)
{
glutInit(&argc, argv);

MODUL GRAFIKA KOMPUTER 2017 Page 21


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
//glutInitDisplayMode( GLUT_DOUBLE /*|GLUT_DEPTH* / );
glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);
glutInitWindowSize(500, 500);
glutInitWindowPosition(0, 0);
glutCreateWindow("Transformasi");
// callbacks
glutDisplayFunc(mydisplay);
glutKeyboardFunc(myKeyboard);
glutTimerFunc(100, putaran, 0);
glutReshapeFunc(resize);
init();
glutMainLoop();
return 0;
}

G. Implementasi Transformasi Objek


Contoh Program :
#include <stdlib.h>
#include <glut.h>
//#include <DrawLine.h>
void drawQuad(){
glBegin(GL_POLYGON);
glVertex2f(77., 70.);
glVertex2f(80., 146.);
glVertex2f(99., 90.);
glVertex2f(157., 90.);
glVertex2f(110., 55.);
glVertex2f(128., 1.);
glVertex2f(80., 34.);
glVertex2f(32., 1.);
glVertex2f(54., 55.);
glVertex2f(3., 90.);
glVertex2f(63., 90.);
glVertex2f(80., 146.);
glEnd(); glFlush();
}
void renderScene(void){
glClear(GL_COLOR_BUFFER_BIT);
// drawkordinat();
glPushMatrix();
glTranslatef(-500, -500, 0);
glColor3f(0, 1, 0);

//blue
drawQuad();
glPopMatrix();
glPushMatrix();
glTranslatef(-450, -350, 0);
glRotatef(30, 0, 0, 1);
glScalef(0.5, 0.5, 0);
glColor3f(0, 1, 1);

//red
drawQuad();
glPopMatrix();
glPushMatrix();

MODUL GRAFIKA KOMPUTER 2017 Page 22


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
glTranslatef(-200, -350, 0);
glScalef(0.5, 0.5, 0);
glColor3f(1, 0, 1);

//yellow
drawQuad();
glPopMatrix();
glPushMatrix();
glTranslatef(-150, 0, 0);
glScalef(0.3, 0.3, 0);
glColor3f(1, 1, 1);

//pink
drawQuad();
glPopMatrix();
glPushMatrix();
glTranslatef(450, 400, 0);
glRotatef(45, 0, 0, 1);
glScalef(0.6, 0.6, 0);
glColor3f(1, 0, 1);

//green
drawQuad();
glPopMatrix();
glPushMatrix();
glTranslatef(-50, -180, 0);
glScalef(0.4, 0.4, 0);
glColor3f(1, 1, 1);

//magenta
drawQuad();
glPopMatrix();
glPushMatrix();
glTranslatef(-400, -200, 0);
glScalef(0.4, 0.4, 0);
glColor3f(10, 0, 1);

//blue
drawQuad();
glPopMatrix();
glPushMatrix();
glTranslatef(50, 0, 0);
glScalef(0.4, 0.4, 0);
glColor3f(1, 0, 0);

//green
drawQuad();
glPopMatrix();
glPushMatrix();
glTranslatef(150, 300, 0);
glRotatef(-45, 0, 0, 1);
glColor3f(1, 1, 1);
glPopMatrix();
glFlush();
}
void main(int argc, char **argv){
glutInit(&argc, argv);
glutInitWindowPosition(100, 100);
glutInitWindowSize(480, 480);
glutCreateWindow("Implementasi Transformasi");
gluOrtho2D(-640., 640., -640., 640.);

MODUL GRAFIKA KOMPUTER 2017 Page 23


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
glutDisplayFunc(renderScene);
glutMainLoop();
}

Tugas 

MODUL GRAFIKA KOMPUTER 2017 Page 24


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
BAB V
ANIMASI DAN PEMROGRAMAN
A. TUJUAN
a. Mampu memahami animasi pada openGL
b. Mampu melakukan implementasi animasi objek pada openGL

B. MATERI
a. Animasi Object pada OpenGL
C. Konsep Animasi pada GLUT
Dalam penggunaan glutTimerFunc dimungkinkan untuk membuat
sebuah animasi yang dikontrol oleh waktu. Fungsi dari glutPostRedisplaya
dalah mengirimkan perintah untuk mengaktifkan display secara berkala
(looping). Kemudian pada main program perlu menambahkan fungsi untuk
mengaktifkan timer function.

a. Fungsi dasar pembuatan animasi dengan menggunakan TimerFunction

GLUT void APIENTRY glutTimerFunc(unsigned int millis, void

(GLUTCALLBACK *func)(int value), int value);

Dalam penggunaan glutTimerFunc dimungkinkan untuk membuat sebuah


animasi yang dikontrol olehwaktu.

b. Inisialisasi dalam penggunaan TimerFunction

Fungsi dari glutPostRedisplay adalah mengirim kan perintah untuk


mengaktifkan display secara berkala (looping).

Kemudian pada main program perlu menambahkan fungsi untuk mengaktifkan


timer function.

MODUL GRAFIKA KOMPUTER 2017 Page 25


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
Contoh program

Membuat sebuah baling-baling yang bisa perputar secara clockwise kemudian


unclockwise yang pusatnya berada pada pusat koordinat.

#include <stdlib.h>
#include <glut.h>
int x=0;
int zputer=0;
int zbalik=180;

void Timer(int value){


if (zputer <= 360){
x = 1;
zputer += 1;
}
if (zputer>360){
x = -1;
zbalik -= 1;
}
if (zbalik<0){
x = 1;
zputer = 0;
zbalik = 360;
}
glutPostRedisplay();
glutTimerFunc(5, Timer, 0);
}
void Draw(){
glBegin(GL_TRIANGLES);
glClear(GL_COLOR_BUFFER_BIT);
glVertex2d(0, 0);
glVertex2d(-100, 200);
glVertex2d(100, 200);
glVertex2d(0, 0);
glVertex2d(-100, -200);
glVertex2d(100, -200);
glEnd();
}
void display()
{
glClear(GL_COLOR_BUFFER_BIT);
glPopMatrix();
glRotatef(x, 0., 0., 1.);
Draw();
glPushMatrix();
glFlush();
}

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


glutInit(&argc, argv);
glutInitWindowPosition(100, 100);
glutInitWindowSize(300, 300);
glutCreateWindow("JAM ANALOG: Prak Grafkom");
gluOrtho2D(-300., 300., -300., 300.);
glutDisplayFunc(display);
glutTimerFunc(60, Timer, 0);
glutMainLoop();

MODUL GRAFIKA KOMPUTER 2017 Page 26


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
}

Animasi 2D menggunakan OpenGL dapat dilakukan dengan melakukan


perpindahan objek menggunakan glTranslatef, juga dapat dilakukan dengan
melakukan perputaran atau pergerakan objek yang berporos pada sumbu-sumbu
koordinat dari sumbu pembentuk objek tersebut menggunakan glRotatef.
Kemudian waktu yang digunakan dalam pergerakan animasi juga dapat diatur
sesuai keinginan dengan menggunakan glutTimerFunc.

MODUL GRAFIKA KOMPUTER 2017 Page 27


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
BAB VI
INTERAKSI DENGAN PERANGKAT
A. TUJUAN
a. Mampu memahami interasksi perangkat keras dengan openGL
b. Mampu melakukan implementasi interkasi perangkat keras dengan openGL

B. MATERI
a. Interaksi perangkat keras dengan openGL

Pada bab ini akan membahas tentang bagaimana objek yang kita buat akan
berinteraksi dengan perangkat keras komputer serperti, keyboard dan mouse.
1. KONSEP INPUT KEYBOARD PADA GLUT-KEY BIASA DAN
SPECIAL KEY

a. KONSEP INPUT KEYBOARD (GENERAL BUTTON)


glutKeyboardFunc adalah suatu fungsi callback untuk digunakan
sebagai masukan pada suatu jendela window. Konsepnya pada saat seorang
user atau pengguna memberikan input yaitu menekan pada tombol keyboard,
setiap tombol keyboard yang ditekan akan menghasilkan suatu karakter
ASCII yang akan menghasilkan suatu callback keyboard yang telah
didefinisikan berupa fungsi dengan 3 parameter.
Penggunaan input keyboard pada tombol-tombol biasa atau normal
key (a-z, 1-0), dapat dilakukan dengan menggunakan callback function
berupa glutKeyboardFunc(myKeyboard) dengan dideklarasikan terlebih
dahulu suatu fungsi buatan untuk menampung semua perintah input yang
akan digunakan oleh user. Fungsi buatan tersebut seperti contoh di bawah ini:

void myKeyboard(unsigned char key, int x,int y)

// masukkan perintah disini

Fungsi tersebut berisi suatu perintah yang akan digunakan dalam


pengoperasian program oleh user. Di dalam fungsi tersebut terdapat 3
parameter dan di dalamnya dideklarasikan suatu perintah yang nantinya akan
digunakan.

void timer(int value){

MODUL GRAFIKA KOMPUTER 2017 Page 28


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
glutPostRedisplay();

glutTimerFunc(100, timer, 0);

void myKeyboard(unsigned char key, int x, int y)

if(key == 'a') glTranslatef(0,5,0); if(key ==

'd') glTranslatef(0,-5,0);

void renderScene(void){

glClear(GL_COLOR_BUFFER_BIT);

glColor3f(1.,0.,0.);

Draw();

glFlush();

Sintaks tersebut adalah sintak dasar yang digunakan, untuk bisa


menggunakan input keyboard maka harus diberikan callback function untuk
memanggilnya.

glutDisplayFunc(renderScene);

glutKeyboardFunc(myKeyboard);

glutTimerFunc(30,timer,0);

Sintaks tersebut harus disertakan pada fungsi main.

Selain itu, pada keyboard juga terdapat method lain yang bisa
digunakan dalam proses input ini, yaitu: Key Press, Key Up, dan Key
Buffering.

a. Key Press
Metode ini akan memberitahukan kita pada command line tombol apa
yang sedang kita tekan. Method ini dapat dinamakan keyPressed dan pada
GLUT akan terdapat 3 parameter, satu untuk tombol yang saat itu ditekan,
dan dua untuk memberitahukan lokasi mouse ketika tombol ditekan.

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

MODUL GRAFIKA KOMPUTER 2017 Page 29


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
If(key == ‘a’){

// saat tombol ‘a’ ditekan

// aksi yang diberikan saat tombol ‘a’ ditekan

Dan fungsi tersebut akan dipanggil pada fungsi main, namun callback
function-nya sedikit berbeda dari callback function yang sebelumnya.
glutKeyboardFunc(keyPressed); // memberitahukan pada GLUT
untuk menggunakan method "keyPressed" untuk tombol yang ditekan

b. Key Up
Fungsi Key Up ini adalah fungsi register yang menyimpan nilai
masukan sampai ketika tombol keyboard dilepaskan. Hal ini bisa berguna
untuk pengaturan beberapa nilai ketika suatu tombol pertama kali ditekan, dan
tetap menjaga nilai tersebut sampai tombol tersebut dilapaskan. Method sama
seperti method Key Press tadi yaitu memiliki 3 parameter yang memiliki
fungsi yang sama, hanya berbeda pada penamaannya yaitu, keyUp.
void keyUp(unsigned char key, int x, int y){
If(key == ‘a’){ // saat tombol ‘a’ ditekan
// aksi yang diberikan saat tombol ‘a’ ditekan }
}

Dan fungsi tersebut akan dipanggil pada fungsi main, namun callback
function-nya sedikit berbeda dari callback function yang sebelumnya.
glutKeyboardFunc(keyUp); // memberitahukan pada GLUT
untuk menggunakan method "keyUp" untuk tombol yang dilepas

c. Key Buffering
Method ini memungkinkan untuk penanganan terhadap tombol yang
ditekan dalam jumlah banyak dalam proyekproyek OpenGL. Seperti yang
diketahui tipe data char sama dengan byte dan dapat mengambila nilai integer
dari 0 sampai 255. Ini dikarenakan tipe data char memiliki ukuran 28 atau 256.
Hal ini memungkinkan kita untuk menangani hingga 256 tombol berbeda pada
keyboard, atau seluruh set karakter ASCII.
Pertama dimulai dengan pendeklarasian sebuah array dari nilai
Boolean yang akan menangani masing-masing method keyboard, true untuk
tombol yang ditekan, dan false saat tombol dilepaskan.
bool* keyStates = new bool[256]; // membuat array dari
nilai boolean dengan ukuran 256 (0-255)

MODUL GRAFIKA KOMPUTER 2017 Page 30


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
kemudian dilanjutkan dengan pendeklarasian masing-masing method.
void keyPressed(unsigned char key, int x, int y) {
keyStates[key] = true;
}
void keyUp(unsigned char key, int x, int y){
keyStates[key] = false;
}
void keyOperations(void){ if(keyStates['a']){
// saat tombol ‘a’ ditekan
// aksi yang diberikan saat tombol ‘a’ ditekan
}
}

Sama seperti sebelumnya fungsi-fungsi tersebut akan dipanggil pada


fungsi main dengan callback function berikut:
void display (void){ keyOperations();
glClearColor(1.0f, 0.0f, 0.0f, 1.0f);
// menjadikan background menjadi warna merah

}

2. KONSEP INPUT KEYBOARD SPECIAL KEY


GlutSpecialFunc merupakan suatu fungsi callback pada opengl yang
digunakan untuk mengaktifkan tombol-tombol khusus pada keyboard sehingga
dapat digunakan untuk berinteraksi antara user dengan objek yang ada di
dalam display opengl. Pendeklarasiannya adalah :

void glutSpecialFunc (void (* func) (int key, int x, int y));

callback keyboard khusus dipicu ketika keyboard fungsi atau tombol


special yang dideklarasikan ditekan. Parameter callback kunci adalah
GLUT_KEY_tombol khusus.. Parameter x dan y mengindikasikan koordinat
relatif jendela ketika tombol ditekan. Ketika jendela baru dibuat, tidak ada
callback khusus awalnya terdaftar dan stroke kunci khusus di jendela
diabaikan. Melewati NULL untuk glutSpecialFunc Menonaktifkan generasi
callback khusus. Selama callback khusus, glutGetModifiers dapat dipanggil
untuk menentukan keadaan tombol pengubah ketika keystroke menghasilkan
callback terjadi. Nilai-nilai yang tersedia GLUT_KEY_ * adalah:

GLUT_KEY_F1 F1 function key

GLUT_KEY_F2 F2 function key

GLUT_KEY_F3 F3 function key

GLUT_KEY_F4 F4 function key

GLUT_KEY_F5 F5 function key

MODUL GRAFIKA KOMPUTER 2017 Page 31


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
GLUT_KEY_F6 F6 function key

GLUT_KEY_F7 F7 function key

GLUT_KEY_F8 F8 function key

GLUT_KEY_F9 F9 function key

GLUT_KEY_F10 F10 function key

GLUT_KEY_F11 F11 function key

GLUT_KEY_F12 F12 function key


GLUT_KEY_LEFT Left function key

GLUT_KEY_RIGHT Right function key

GLUT_KEY_UP Up function key

GLUT_KEY_DOWN Down function key

GLUT_KEY_PAGE_UP Page Up function key

GLUT_KEY_PAGE_DOWN PageDown function key

GLUT_KEY_HOME Home function key

GLUT_KEY_END End function key

GLUT_KEY_INSERT Insert function key

Tombol-tombol diatas dapat diaktifkan dengan membuat sebuah


fungsi callback yang akan dipanggil oleh glutSpecialFunc ke dalam fungsi
main program, sehingga user dapat berinteraksi dengan objek yang ada
dengan menekan tombol-tombol special keyboard yang telah di deklarasikan
ke dalam fungsi callback tersebut. contoh pembuatan fungsi callback untuk
tombol special keyboard :

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


switch(key){
case
GLUT_KEY_LEFT : c+=-4;
d+=0;
break;
case
GLUT_KEY_RIGHT : c+=4;
d+=0;
break;
case
GLUT_KEY_UP : c+=0;
d+=4;
break;
case GLUT_KEY_DOWN : c+=0;
d+=-4;
break;

MODUL GRAFIKA KOMPUTER 2017 Page 32


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
}
}

Selanjutnya fungsi tersebut akan dipanggil oleh glutDisplayFunc ke


dalam fungsi main, berikut script nya :

glutSpecialFunc(mySpecialKeyboard);

Selain fungsi callback yang mendeklarasikan tombol special


keyboard, untuk dapat berinteraksi fungsi tersebut harus memiliki fungsi
callback lain yang akan dipanggil kedalam fungsi glutDisplayfunc dan fungsi
glutTimerFunc didalam fungsi main program tersebut. fungsi callback di
dalam fungsi glutDisplayFunk merupakan fungsi yang mendklarasikan objek
yang akan berinteraksi dengan tombol keyborad, Sedangkan fungsi
glutTimerFunc berfungsi agar tombol keyboard dapat terus terdeteksi oleh
glut. Contoh program interaksi keyboard lengkap :

#include <stdlib.h>
#include <glut.h>
int c, d;
void triAngles(){
glBegin(GL_TRIANGLES);
glVertex2i(280, 0);
glVertex2i(250, 60);
glVertex2i(220, 0);
glEnd();
}
void mySpecialKeyboard(int key, int x, int y){
switch (key){
case
GLUT_KEY_LEFT: c += -4;
d += 0;
break;
case
GLUT_KEY_RIGHT: c += 4;
d += 0;
break;
case
GLUT_KEY_UP: c += 0; d += 4;
break;
case
GLUT_KEY_DOWN: c += 0;
d += -4;
break;
}
}
void timer(int value){
glutPostRedisplay();
glutTimerFunc(50, timer, 0);
}

void renderScene(void){
glClear(GL_COLOR_BUFFER_BIT);

MODUL GRAFIKA KOMPUTER 2017 Page 33


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
glPushMatrix();
glTranslatef(c, d, 0);
triAngles();
glPopMatrix();
glFlush();
}

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


glutInit(&argc, argv);
glutInitWindowPosition(100, 100);
glutInitWindowSize(640, 480);
glutCreateWindow("uji keyfunc");
gluOrtho2D(-320., 320., -240., 240.);
glutTimerFunc(50, timer, 0);
glutDisplayFunc(renderScene);
glutSpecialFunc(mySpecialKeyboard);
glutMainLoop();
}
Sesuai dengan program dimana setiap tombol arah akan memiliki
nilai variabel c dan d yang berbeda-beda yang akan mengakibatkan gambar
akan bergeser dengan arah yang sesuai nilai variabel tersebut ketika tombol
khusus arah (up, down, left dan right) ditekan.
2. KONSEP MOUSE PADA GLUT
Dalam konsep mouse pada glut ada beberapa fungsi dasar dan
inisialisasi yang digunakan untuk melakukan interaksi mouse. Adapun
penjelasannya adalah sebagai berikut :
1. Fungsi dasar pembuatan interaksi dengan menggunakan MouseFunction
GLUTAPI void APIENTRY glutMouseFunc(void (GLUTCALLBACK
*func)(int button, int state, int x, int y));

Paramater func adalah fungsi yang akan ditangani dengan event klik mouse.
GLUTAPI void APIENTRY glutMotionFunc(void *func(int x, int
y));

Fungsi di atas adalah fungsi pelengkap dari fungsi interaksi mouse untuk
mendeteksi gerakan mouse.
2. Inisialisasi dalam penggunaan MouseFunction
void mouse(int button, int state, int x,int y){
if(button==GLUT_LEFT_BUTTON &&
state==GLUT_DOWN)
drawDot(x,480-y);

if(button==GLUT_RIGHT_BUTTON &&
state==GLUT_DOWN)
drawDot2(x,480-y);

if(button==GLUT_MIDDLE_BUTTON &&
state==GLUT_DOWN)
drawDot3(x,480-y);

MODUL GRAFIKA KOMPUTER 2017 Page 34


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
}

void motion(int x,int y){

Dalam penerapan interaksi mouse pada open gl / glut, Fungsi


inisialisasinya adalah sebagai berikut :

1. GLUT_LEFT_BUTTON

Fungsi inisialisasi ini bertujuan untuk inisialisasi button mouse


kiri. Jadi apabila kita ingin mengaktifkan fungsi penggunaan dari button
mouse sebelah kiri maka bisa menggunakan fungsi inisialisasi ini.
2. GLUT_RIGHT_BUTTON

Fungsi inisialisasi ini bertujuan untuk inisialisasi button mouse


kanan. Jadi apabila kita ingin mengaktifkan fungsi penggunaan dari
button mouse sebelah kanan maka bisa menggunakan fungsi inisialisasi
ini.
3. GLUT_MIDDLE_BUTTON

Fungsi inisialisasi ini bertujuan untuk inisialisasi button mouse


tengah. Jadi apabila kita ingin mengaktifkan fungsi penggunaan dari
button mouse tengah maka bisa menggunakan fungsi inisialisasi ini.

4. GLUT_DOWN

Fungsi inisialisasi ini adalah untuk inisialisasi ketika tombol mouse


ditekan.
5. GLUT_UP

Fungsi inisialisasi ini adalah untuk inisialisasi ketika tombol


mouse dilepaskan. Kemudian pada main program perlu menambahkan
fungsi untuk callback fungsi MouseFunction.
glutMouseFunc(mouse); glutMotionFunc(motion);

3. Sistim Koordinat interaksi mouse pada glut


Sistim koordinat interaksi mouse pada glut adalah sebagai berikut.
Misalnya ditentukan iinisialisasi awal adalah :

int w = 480, h=480; float

x=0, y=0, z=0; maka :

MODUL GRAFIKA KOMPUTER 2017 Page 35


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
a. Titik 0,0 berada pada pojok kiri atas, koordinatnya akan berubah
apabila terjadi pergeseran mouse.

b. Titik 480,0 berada pada pojok kanan atas.

c. Titik 0, 480 berada pada pojok kiri bawah

d. Titik 480,480 berada pada pojok kanan bawah

CONTOH PROGAM PENERAPAN MOUSE PADA GLUT


#include <stdlib.h>
#include <glut.h>
#include <stdio.h>

void Triangles(){

glBegin(GL_TRIANGLES);
glVertex2i(0, 0);
glVertex2i(100, -30);
glVertex2i(100, 30);
glEnd();
}

void mouseku(int button, int state, int x, int y){


if (button == GLUT_LEFT_BUTTON){
printf("tombol KIRI (%d,%d)\n", x, y);
}
else if (button == GLUT_MIDDLE_BUTTON){
printf("tombol TENGAH (%d,%d)\n", x, y);
}
else{
printf("tombol KANAN (%d,%d)\n", x, y);
}
if (state == GLUT_DOWN){
printf("tombol DITEKAN\n");
}
else{
printf("tombol DILEPAS\n");
}
} void display(){
glClear(GL_COLOR_BUFFER_BIT); glRotatef(10, 0., 0.,
1.);
Triangles();
glFlush();
}
void Timer(int value){
glutPostRedisplay();
glutTimerFunc(30, Timer, 0);
}
void main(int argc, char **argv){
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE |
GLUT_RGBA);
glutInitWindowPosition(100, 100);
glutInitWindowSize(320, 320);
glutCreateWindow("mouse");
glutDisplayFunc(display);
gluOrtho2D(-320.0, 320.0, -320.0, 320.0);

MODUL GRAFIKA KOMPUTER 2017 Page 36


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
glutTimerFunc(10, Timer, 0);
glutMouseFunc(mouseku);
glutMainLoop();

2. Interaksi Drag
#include <stdlib.h>
#include <glut.h>
#include <stdio.h>
void Triangles(){

glBegin(GL_TRIANGLES);
glVertex2i(0, 0);
glVertex2i(100, -30);
glVertex2i(100, 30);
glEnd();

void mouseku(int button, int state, int x, int y){


if (button == GLUT_LEFT_BUTTON){
printf("tombol KIRI (%d,%d)\n", x, y);
}
else if (button == GLUT_MIDDLE_BUTTON){
printf("tombol TENGAH (%d, %d)\n", x, y);
}
else{
printf("tombol KANAN (%d,%d)\n", x, y);
}
if (state == GLUT_DOWN){
printf("tombol DITEKAN\n");
}
else{
printf("tombol DILEPAS\n");
}
}
void motionku(int x, int y){
printf("posisi printer mouse (%d, %d)\n", x, y);
}
void display(){
glClear(GL_COLOR_BUFFER_BIT); glRotatef(89,
0., 0., 1.);
Triangles();
glFlush();
}
void Timer(int value){
glutPostRedisplay();
glutTimerFunc(10, Timer, 0);
}
void main(int argc, char **argv){
glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE |
GLUT_RGBA);
glutInitWindowPosition(100, 100);
glutInitWindowSize(320, 320);
glutCreateWindow("GLUT");
glutDisplayFunc(display);

MODUL GRAFIKA KOMPUTER 2017 Page 37


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
gluOrtho2D(-320.0, 320.0, -320.0, 320.0);

glutTimerFunc(10, Timer, 0);


glutMouseFunc(mouseku);
glutMotionFunc(motionku);
glutMainLoop();
}

3. Contoh Implementasi
#include <stdlib.h>
#include <stdio.h>
#include <glut.h>

float x = 1, y = 1, z = 0;
int w = 480, h = 480, flag = 0, flg;

void drawQuad() {
glBegin(GL_POLYGON);
glColor3f(0, 0, 1);
glVertex2f(-20., -20.);
glVertex2f(20., -20.);
glVertex2f(20., 20.);
glVertex2f(-20., 20.);
glEnd();
}
void mouse(int button, int state, int xmouse,
int ymouse){
if (flg == 0)
{
if (state == GLUT_DOWN)

{
if (button == GLUT_LEFT_BUTTON)
{
flag++; if (flag == 2)
{
flg = 3; x = 3; y = 3;
printf("%d", flg);
}
}

}
}
if (flg == 3)
{
if (state == GLUT_DOWN)
{
if (button == GLUT_LEFT_BUTTON)
{
flag--; if (flag == 0)
{

x = 1; y = 1; flg =
0;
}
}

MODUL GRAFIKA KOMPUTER 2017 Page 38


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
}
}

}
void renderScene(void){
glClear(GL_COLOR_BUFFER_BIT);
glClearColor(1, 1, 1, 1);
glPushMatrix();
glScalef(x, y, z);
drawQuad();
glPopMatrix();
glFlush();
}
void timer(int value){
glutPostRedisplay();
glutTimerFunc(50, timer, 0);
}
void main(int argc, char **argv){
glutInit(&argc, argv);
glutInitWindowPosition(100, 100);
glutInitWindowSize(w, h);
glutCreateWindow("Interaksi Mouse");
gluOrtho2D(-w / 2, w / 2, -h / 2, h / 2);
glutDisplayFunc(renderScene);
glutMouseFunc(mouse);
glutTimerFunc(1, timer, 0);
glutMainLoop();
4. }

MODUL GRAFIKA KOMPUTER 2017 Page 39


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
BAB VII
OBJEK 3D
A. TUJUAN
a. Mampu memahami konsep Objek 3D wireframe pada openGL
b. Mampu membuat objek 3d wirefirme pada openGL
c. Mampu melakukan implemntasi transformasi pada objek 3d dengan
OpenGL

B. MATERI
a. Pembuatan Objek 3D wireframe
b. Transformasi Objek 3D wireframe

a. Primitive 3D
Ada beberapa bentuk primitive dari objek 3 dimensi. Promitive
yaitu bentuk dasar yang dapat dengan mudah didefinisikan secara
matematik.

a. Sphere

glutWireSphere(5, 20, 20);

b. Cube
glutWireCube(25);

c. Cone
glutWireCone(alas, tinggi, 20, 20);

MODUL GRAFIKA KOMPUTER 2017 Page 40


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
d. Dodecahedron
glutWireDodecahedron();

e. Teapot glutWireTeapot(15);

f. Torus glutWireTorus(luar, dalam, 20, 20);

Setiap primitive 3D memiliki parameter nilai yang mengekspresikan


letak dan bentuk primitive objek tersebut.

b. Transformasi Objek 3 Dimensi


Metode transformasi objek tiga dimensi sangat berbeda dengan objek
dua dimensi karena terdapat sumbu z yang ditambahkan sebagai salah satu
acuan untuk memperoleh posisi koordinat baru. a. Translasi (Perpindahan)
Dalam tranformasi objek tiga dimensi, translasi adalah pemindahan
suatu titik dari titik P=(x,y,z) ke posisi P=(x‟,y‟,z‟) (Hearn, 1994) dengan
menggunakan operasi matriks :

Parameter tx, ty, dan tz menjelaskan perpindahan jarak untuk koordinat x, y, dan
z.

MODUL GRAFIKA KOMPUTER 2017 Page 41


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
Sebuah bangun tiga dimensi yang ditranslasikan dengan vektor
tertentu, dilakukan dengan memindahkan titik-titik sesuai dengan vektor
tersebut.

Contoh Program dalam Open GL


1. Contoh Penerapan “Cube” pada GLUT

Cube menggunakan fungsi


void glutWireCube(GLdouble size);
untuk menentukan ukuran panjang sisi.

#include<stdlib.h>
#include<glut.h>
float w=480,h=480;
float sudut = 0, sx = 0, sy = 0, sz = 0;

void cube(){
glColor3d(0, 0, 1);
glutWireCube(10);

}
void display(){
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
glTranslatef(0, 0, -40);
glRotatef(sudut, sx, sy, sz);
cube();
glutSwapBuffers();
}

void init(){
glClearColor(0.0, 0.0, 0.0, 1.0);
glEnable(GL_DEPTH_TEST);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45., (GLdouble)w / (GLdouble)h,1., 300.);
glMatrixMode(GL_MODELVIEW);
}
void myKeyboard(unsigned char key, int x, int y){

MODUL GRAFIKA KOMPUTER 2017 Page 42


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
if (key == 'x'){
sx = 1;
sy = 0;
sz = 0;
sudut += 10;
}
}
void update(int value){
glutPostRedisplay();
glutTimerFunc(50, update, 0);
}

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


glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA);
glutInitWindowPosition(100, 100);
glutInitWindowSize(w, h);
glutCreateWindow("Objek 3D");
glutDisplayFunc(display);
init();
glutTimerFunc(50, update, 0);
glutKeyboardFunc(myKeyboard);
glutMainLoop();

Note:
Dengan interaksi keyboard “y”, maka objek akan berotasi pada sumbu y
saja.

2. Contoh Penerapan “WireSphere” pada GLUT


WireSphere menggunakan fungsi
void glutWireSphere(GLdouble radius,GLint slices,
GLintstacks);
untuk membuat bola berpusat pada asal pemodelan sistem koordinat.

#include<stdlib.h>
#include<glut.h>
float w = 480, h = 480;
float sudut = 0, sx = 0, sy = 0, sz = 0, z = -320;

void sphere(){
glColor3d(1, 1, 1);
glutWireSphere(100, 150,100);
}
void display(){
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
glTranslatef(0, 0, z);
glRotatef(sudut, sx, sy, sz);
sphere();
glutSwapBuffers();
}
void resize(int w1, int h1){

MODUL GRAFIKA KOMPUTER 2017 Page 43


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
glViewport(0, 0, w1, h1);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45.0, (float)w1 / (float)h1, 1.0,
300.0);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
}

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


if (key == 'y'){
sy = 1;
sudut += 10;
}
}
void update(int value){
glutPostRedisplay();
glutTimerFunc(50, update, 0);
}
void main(int argc, char **argv){
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH |
GLUT_RGBA);
glutInitWindowPosition(100, 100);
glutInitWindowSize(w, h);
glutCreateWindow("Objek 3D");
glutDisplayFunc(display);
init();
glutTimerFunc(50, update, 0);
glutKeyboardFunc(myKeyboard);
glutMainLoop();
}

3. Contoh Penerapan “WireCone” pada GLUT

WireCone menggunakan fungsi void

glutWireCone(GLdouble base, GLdouble height,GLintslices, GLint


stacks);

untuk membuat ukuran benda ditentukan dari dasar jari-jari alasnya.

#include<stdlib.h>
#include<glut.h>
float w = 480, h = 480;
float sudut = 0, sx = 0, sy = 0, sz = 0, zz = -70;
int t = 20;
void WireCone(){
glColor3d(0, 1, 1);
glutWireCone(20, t, 50, 50);
}
void display(){
glClear(GL_COLOR_BUFFER_BIT |GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
glTranslatef(0, 0, zz);
glRotatef(sudut, sx, sy, sz);
WireCone();
glutSwapBuffers();

MODUL GRAFIKA KOMPUTER 2017 Page 44


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
}

void init(){
glClearColor(0.0, 0.0, 0.0, 1.0);
glEnable(GL_DEPTH_TEST);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45., (GLdouble)w / (GLdouble)h,1., 300.);
glMatrixMode(GL_MODELVIEW);
}
void myKeyboard(unsigned char key, int x, int y){
if (key == 'x'){
sx = 1;
sy = 0;
sz = 0;
sudut += 10;
}
}
void update(int value){
glutPostRedisplay();
glutTimerFunc(50, update, 0);
}
void main(int argc, char **argv){
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE |
GLUT_DEPTH | GLUT_RGBA);
glutInitWindowPosition(100, 100);
glutInitWindowSize(w, h);
glutCreateWindow("Objek 3D");
glutDisplayFunc(display);
init();
glutTimerFunc(50, update, 0);
glutKeyboardFunc(myKeyboard);
glutMainLoop();
}

Note :
Dengan interaksi keyoboard “x”, objek akan berotasi pada sumbu x saja.
Dengan interaksi keyboard “z”, objek akan berotasi pada sumbu z saja

4. Contoh Penerapan “Torus” pada GLUT


Torus menggunakan fungsi
void glutWireTorus(GLdouble innerRadius, GLdouble
outerRadius,GLint nsides, GLint rings); .
untuk merender 12 sisi yang berpusat pada asal, dan dengan radius sama
dengan kuadrat dari 3.
#include <stdlib.h>
#include <glut.h>
float w = 480, h = 480;
float
sudut = 0, sx = 0, sy = 0, sz = 0, dalam = 20, luar = 50, sides
= 50, rings = 50;

void torus(){
glColor3d(0, 1, 1);
glutWireTorus(dalam, luar, sides, rings);
}

MODUL GRAFIKA KOMPUTER 2017 Page 45


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
void display(){
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
glTranslatef(0, 0, -200);
glRotatef(sudut, sx, sy, sz);
torus();
glutSwapBuffers();
}

void init(){
glClearColor(0.0, 0.0, 0.0, 1.0);
glEnable(GL_DEPTH_TEST);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45., (GLdouble)w / (GLdouble)h, 1., 300.);
glMatrixMode(GL_MODELVIEW);
}
void myKeyboard(unsigned char key, int x, int y){
if (key == 'x'){
sx = 1;
sy = 0;
sz = 0;
sudut += 10;
}
}
void update(int value){
glutPostRedisplay();
glutTimerFunc(50, update, 0);
}
void main(int argc, char **argv){
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH |
GLUT_RGBA);
glutInitWindowPosition(100, 100);
glutInitWindowSize(w, h);
glutCreateWindow("Objek 3D");
glutDisplayFunc(display);
init();
glutTimerFunc(50, update, 0);
glutKeyboardFunc(myKeyboard);
glutMainLoop();
}
Note :

Dengan interaksi keyoboard “x”, objek akan berotasi pada sumbu x


saja. Dengan interaksi keyboard “y”, objek akan berotasi pada sumbu y saja.
Dengan interaksi keyboard “z”, objek akan berotasi pada sumbu z saja.

5. Contoh Penerapan “Dose” pada GLUT

Dode menggunakan fungsi


void glutWireDodecahedron(void);
untuk merenders padat atau wireframe 12-sisi biasa padat. Berpusat di
sekitar asal dan dengan radius sama dengan akar kuadrat dari 3

MODUL GRAFIKA KOMPUTER 2017 Page 46


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
#include <stdlib.h>
#include <glut.h>
float w = 480, h = 480;
float sudut = 0, sx = 0, sy = 0, sz = 0, t = -7;
void wireDode(){
glColor3d(0, 1, 0);
glutWireDodecahedron();
}
void display(){
glClear(GL_COLOR_BUFFER_BIT |
GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
glTranslatef(0, 0, t);
glRotatef(sudut, sx, sy, sz);
wireDode();
glutSwapBuffers();
}
void init(){
glClearColor(0.0, 0.0, 0.0, 1.0);
glEnable(GL_DEPTH_TEST);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45., (GLdouble)w / (GLdouble)h,1.,
300.);
glMatrixMode(GL_MODELVIEW);
}
void myKeyboard(unsigned char key, int x, int y){
if (key == 'x'){
sx = 1;
sy = 0;
sz = 0;
sudut += 10;
}

}
void update(int value){
glutPostRedisplay();
glutTimerFunc(50, update, 0);
}
void main(int argc, char **argv){
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE |
GLUT_DEPTH | GLUT_RGBA);
glutInitWindowPosition(100, 100);
glutInitWindowSize(w, h);
glutCreateWindow("Objek 3D");
glutDisplayFunc(display);
init();
glutTimerFunc(50, update, 0);
glutKeyboardFunc(myKeyboard);
glutMainLoop();
}

Note :
Dengan interaksi keyoboard “x”, objek akan berotasi pada sumbu x saja.
Dengan interaksi keyboard “y”, objek akan berotasi pada sumbu y saja. Dengan
interaksi keyboard “z”, objek akan bergerak pada sumbu z saja.

MODUL GRAFIKA KOMPUTER 2017 Page 47


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
6. Contoh Penerapan “TetraHedron” pada GLUT

TetraHedron menggunakan fungsi


glutWiredTetrahedronvoid (void);
untuk merenders padat atau wireframe 4-sisi biasa padat. Berpusat di
sekitar asal dan dengan radius sama dengan akar kuadrat dari 3.
#include <stdlib.h>
#include <glut.h>
float w=480,h=480;
float sudut = 0, sx = 0, sy = 0, sz = 0, t = -5;

void WireTetrahedron(){
glColor3d(1, 0, 1);
glutWireTetrahedron();
}
void display(){
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
glTranslatef(0, 0, t);
glRotatef(sudut, sx, sy, sz);
WireTetrahedron();
glutSwapBuffers();
}

void init(){
glClearColor(0.0, 0.0, 0.0, 1.0);
glEnable(GL_DEPTH_TEST);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45., (GLdouble)w / (GLdouble)h,1., 300.);
glMatrixMode(GL_MODELVIEW);
}
void myKeyboard(unsigned char key, int x, int y){
if (key == 'x'){
sx = 1;
sy = 0;
sz = 0;
sudut += 10;
}
}
void update(int value){
glutPostRedisplay();
glutTimerFunc(50, update, 0);
}
void main(int argc, char **argv){
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA);
glutInitWindowPosition(100, 100);
glutInitWindowSize(w, h);
glutCreateWindow("Objek 3D");
glutDisplayFunc(display);
init();
glutTimerFunc(50, update, 0);
glutKeyboardFunc(myKeyboard);
glutMainLoop();
}

MODUL GRAFIKA KOMPUTER 2017 Page 48


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
Note :

Dengan interaksi keyoboard “x”, objek akan berotasi pada sumbu x


saja. Dengan interaksi keyboard “y”, objek akan berotasi pada sumbu y
saja. Dengan interaksi keyboard “z”, objek akan berotasi pada sumbu z
saja.

7. Contoh Penerapan “OctaHedron” pada GLUT

OctaHedron menggunakan fungsi


void glutWireOctahedron(void);
#include <stdlib.h>
#include <glut.h>
float w = 480, h = 480;
float sudut = 0, sx = 0, sy = 0, sz = 0, t = -5;
void WireOctahedron(){
glColor3d(1, 0, 1);
glutWireOctahedron();
}
void display(){
glClear(GL_COLOR_BUFFER_BIT |GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
glTranslatef(0, 0, t);
glRotatef(sudut, sx, sy, sz);
WireOctahedron();
glutSwapBuffers();
}
void resize(int w1, int h1){
glViewport(0, 0, w1, h1);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45.0, (float)w1 / (float)h1,1.0, 300.0);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();

}
void init(){
glClearColor(0.0, 0.0, 0.0, 1.0);
glEnable(GL_DEPTH_TEST);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45., (GLdouble)w / (GLdouble)h,1., 300.);
glMatrixMode(GL_MODELVIEW);
}
void myKeyboard(unsigned char key, int x, int y){
if (key == 'x'){
sx = 1;
sy = 0;
sz = 0;
sudut += 10;
}

}
void update(int value){

MODUL GRAFIKA KOMPUTER 2017 Page 49


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
glutPostRedisplay();
glutTimerFunc(50, update, 0);
}
void main(int argc, char **argv){
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE |GLUT_DEPTH | GLUT_RGBA);
glutInitWindowPosition(100, 100);
glutInitWindowSize(w, h);
glutCreateWindow("Objek 3D");
glutDisplayFunc(display);

init();
glutTimerFunc(50, update, 0);
glutKeyboardFunc(myKeyboard);
glutMainLoop();
}
Note :

Dengan interaksi keyoboard “x”, objek akan berotasi pada sumbu x


saja. Dengan interaksi keyboard “y”, objek akan berotasi pada sumbu y saja.
Dengan interaksi keyboard “z”, objek akan berotasi pada sumbu z saja.

8. Contoh Penerapan “Teapot” pada GLUT


Teapot menggunakan fungsi
void glutWireTeapot(GLdouble size);

Untuk merender dengan teapot dengan source code sebagai berikut :


#include<stdlib.h>
#include<glut.h>
float w = 480, h = 480;
float sudut = 0, sx = 0, sy = 0, sz = 0, t = -100, tepot = 10;
void teapot(){
glColor3d(1, 1, 1);
glutWireTeapot(tepot);
}
void display(){
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
glTranslatef(0, 0, t);
glRotatef(sudut, sx, sy, sz);
teapot();
glutSwapBuffers();
}

void init(){
glClearColor(0.0, 0.0, 0.0, 1.0);
glEnable(GL_DEPTH_TEST);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45., (GLdouble)w / (GLdouble)h, 1., 300.);
glMatrixMode(GL_MODELVIEW);
}
void myKeyboard(unsigned char key, int x, int y){
if (key == 'x'){
sx = 1;
sy = 0;

MODUL GRAFIKA KOMPUTER 2017 Page 50


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
sz = 0;
sudut += 10;
}
}
void mySpecialKeyboard(int key, int x, int y){
switch (key){
case GLUT_KEY_UP:
tepot += 1;
break;
case GLUT_KEY_DOWN:
tepot -= 1;
break;
}
}
void update(int value){
glutPostRedisplay();
glutTimerFunc(50, update, 0);
}
void main(int argc, char **argv){
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA);
glutInitWindowPosition(100, 100);
glutInitWindowSize(w, h);
glutCreateWindow("Objek 3D");
glutDisplayFunc(display);
init();
glutTimerFunc(50, update, 0);
glutKeyboardFunc(myKeyboard);
glutMainLoop();
}

Note :
Dengan interaksi keyoboard “x”, objek akan berotasi pada sumbu x
saja. Dengan interaksi keyboard “y”, objek akan beritasi pada sumbu y saja.
Dengan interaksi keyboard “z”, objek akan berotasi pada sumbu z saja.

MODUL GRAFIKA KOMPUTER 2017 Page 51


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
Bab VIII
Objek Solid dan Lighting
A. TUJUAN
a. Mampu memahami konsep Objek 3D solid pada openGL
b. Mampu membuat objek 3d solid pada openGL
c. Mampu melakukan implemntasi transformasi pada objek 3d dengan
OpenGL
d. Mampu memahami konsep lighting pada openGL
e. Mampu melakukan implementasi lighting objek 3d dengan opnGL

B. MATERI
a. Pembuatan Objek 3D Solid
b. Transformasi Objek 3D Solid
c. Lighting Objek 3d Solid

Visualisasi tentu saja tidak akan terjadi bila tidak ada cahaya.
Pencahayaan merupakan esensi dari visualisasi dan merupakan topik yang
sangat kompleks. Hingga tahap ini lingkungan diberi pencahayaan default
atau standar dengan cahaya lingkungan (ambient) yang sama pada setiap titik.
Kondisi default atau standar dapat dicapai kapan saja dengan mematikan status
Lighting menjadi disabled dengan glDisable(GL_LIGHT0).
OpenGL akan melakukan komputas\i 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.

Seperti ditunjukkan pada Gambar diatas, 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

MODUL GRAFIKA KOMPUTER 2017 Page 52


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
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.

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

MODUL GRAFIKA KOMPUTER 2017 Page 53


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
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.

Selain pencahayaan Ambient, Diffuse, dan Specular, terdapat juga


pencahayaan Emmisive, yaitu sebuah objek memancarkan cahayanya sendiri.

parameter variabel untuk memilih material warna jenis apa yang


diaktifkan pilihannya antara lain seprti tabel dibawah

MODUL GRAFIKA KOMPUTER 2017 Page 54


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
B. Implementasi Pencahayaan (lighting) pada OpenGL
Object 3D (Solid) Bentuk Solid
Fungsi Solid merupakan implementasi dari object 3D yang berpusat
pada asal pemodelan sistem koordinat. Utara dan kutub selatan bola berada di Z
positif dan negatif sumbumasing-masing dan meridian utama persimpangan
sumbu X positif.

Berikut adalah list untuk bangun 3D:

a. Kubus Solid void glutSolidCube(GLdouble size);

b. Fungsi glutSolidSphere membuat bola berpusat pada asal pemodelan


sistem koordinat. Utara dan kutub selatan bola berada di Z positif dan
negatif sumbumasing-masing dan meridian utama persimpangan sumbu
X positif.

void glutSolidSphere(GLdouble radius,GLint slices,


GLint stacks);

c. Kerucut Solid.
void glutSolidCone(GLdouble base, GLdouble height,GLint
slices, GLint stacks);

d. Torus Solid.
void glutSolidTorus(GLdouble innerRadius, GLdouble
outerRadius, Glintnsides, GLint rings);

MODUL GRAFIKA KOMPUTER 2017 Page 55


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
e. Dodecahedron Solid

void glutSolidDodecahedron(void);

f. Tetra Hedron solid.


glutSolidTetrahedron void (void);

g. Oktahedron solid.
void glutSolidOctahedron(void);

h. Icosahedron solid.
void glutSolidIcosahedron(void);

i. Poci teh solid

void glutSolidTeapot(GLdouble size);

C. Contoh Program
Proyeksi cube
#include <glut.h>
void cube()
{
//menggambar kubus dan transformasitarnslasi ke titik 0.5 0.5
0.5 dan skala 1 1 1
glPushMatrix();
glTranslated(0.5, 0.5, 0.5);//cube
glScaled(1.0, 1.0, 1.0);
glutSolidCube(1.0);
glPopMatrix();
}
void setMaterial()
{
//set properties of surfaces material
GLfloat mat_ambient[] =
{
0.7f, 0.7f, 0.7f, 1.0f
};
// ada 4 jenis

GLfloat mat_diffuse[] =
{
0.6f, 0.6f, 0.6f, 1.0f
};
GLfloat mat_specular[] =
{
1.0f, 1.0f, 1.0f, 1.0f
};
GLfloat mat_shininess[] = { 50.0f };
glMaterialfv(GL_FRONT, GL_AMBIENT, mat_ambient);
glMaterialfv(GL_FRONT, GL_DIFFUSE, mat_diffuse);
glMaterialfv(GL_FRONT, GL_SPECULAR, mat_specular);
glMaterialfv(GL_FRONT, GL_SHININESS, mat_shininess);
}
void setLighting()
{
//set light sources
GLfloat lightIntensity[] =

MODUL GRAFIKA KOMPUTER 2017 Page 56


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
{
0.7f, 0.7f, 0.7f, 1.0f
};//mensettingpencahayaan
GLfloat light_position[] =
{
2.0f, 6.0f, 3.0f, 0.0f
};
glLightfv(GL_LIGHT0, GL_DIFFUSE, lightIntensity);
glLightfv(GL_LIGHT0, GL_POSITION, light_position);
}
void setViewport()
{
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
double winHt = 1.0;
//half height of thewindow
glOrtho(-winHt * 64 / 48, winHt * 64 / 48, -winHt, winHt,
0.1, 100.0);
}
void setCamera()
{
// set the camera
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
gluLookAt(3.3, 3.3, 3.0, 0, 0.25, 0, 0.0, 1.0, 0.0);
}

void displayObject()
{
setMaterial();
setLighting();
setViewport();
setCamera();
//startDrawing
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
cube();//memanggil fungsi menggambar kubus
glFlush();//mengirim smua objek untuk dirender
}
void main(int argc, char **argv)
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB | GLUT_DEPTH);
glutInitWindowSize(640, 480);
glutInitWindowPosition(100, 100);
glutCreateWindow("simple 3d scene");
glutDisplayFunc(displayObject);//fungsidari display object
yang menggabungkankubus lighting material dan kamera
glEnable(GL_LIGHTING);
glEnable(GL_LIGHT0);
glShadeModel(GL_SMOOTH);
glEnable(GL_DEPTH_TEST);
glEnable(GL_NORMALIZE);
glClearColor(1.0f, 1.0f, 1.0f, 0.0f);
glViewport(0, 0, 640, 480);
glutMainLoop();
}

MODUL GRAFIKA KOMPUTER 2017 Page 57


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
Impelemntasi bumi, bulan, matahari :

#include <stdlib.h>
#include <glut.h>
#include <math.h>

int shapeindex;
GLdouble cx, cy, cz; // Posisi kamera
GLdouble ry, rx; // Rotasi kamera terhadap sumbu y dan x
GLfloat bumi_y, bulan_y;

void init(void) {

glClearColor(0.0, 0.0, 0.0, 0.0);


glShadeModel(GL_SMOOTH);

glMatrixMode(GL_PROJECTION);
glLoadIdentity();
glFrustum(-1, 1, -1, 1, 1.8, 20);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();

glEnable(GL_DEPTH_TEST);
glEnable(GL_LIGHTING);
glEnable(GL_LIGHT0); // Aktifkan 3 sumber cahaya
bumi_y = 1;
bulan_y = 1;
}

void display(void) {
GLfloat light_position[] = { -1.0, 0.0, 0.0, 1.0 };
GLfloat light_ambient[] = { 5.0, 5.0, 0.0, 0.0 };
GLfloat light_diffuse[] = { 0.5, 0.5, 0.5, 0.0 };
GLfloat light_specular[] = { 0.5, 0.5, 0.5, 0.0 };

GLfloat matahari_ambient[] = { 1.0, 1.0, 0.0, 0.0 };


GLfloat matahari_diffuse[] = { 0.0, 0.0, 0.0, 0.0 };
GLfloat matahari_specular[] = { 0.0, 0.0, 0.0, 0.0 };
GLfloat matahari_shininess[] = { 15.0 };

GLfloat bumi_ambient[] = { 0.0, 0.0, 2.0, 0.0 };


GLfloat bumi_diffuse[] = { 0.0, 0.0, 1.0, 0.0 };
GLfloat bumi_specular[] = { 0.0, 0.0, 0.3, 0.0 };
GLfloat bumi_shininess[] = { 15.0 };

GLfloat bulan_ambient[] = { 0.0, 0.0, 0.2, 0.0 };


GLfloat bulan_diffuse[] = { 1.0, 1.0, 1.0, 0.0 };
GLfloat bulan_specular[] = { 0.2, 0.2, 0.2, 0.0 };
GLfloat bulan_shininess[] = { 1.0 };

// Bersihkan layar
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glLoadIdentity();
gluLookAt(cx, cy, cz, 0, 0, 0, 0, 1, 0);
glRotatef(ry, 0.0, 1.0, 0.0);
glRotatef(rx, 1.0, 0.0, 0.0);

MODUL GRAFIKA KOMPUTER 2017 Page 58


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
glPushMatrix();

// gambar matahari
glMaterialfv(GL_FRONT, GL_AMBIENT, matahari_ambient);
glMaterialfv(GL_FRONT, GL_DIFFUSE, matahari_diffuse);
glMaterialfv(GL_FRONT, GL_SPECULAR, matahari_specular);
glMaterialfv(GL_FRONT, GL_SHININESS, matahari_shininess);
glPushMatrix();
glutSolidSphere(0.4, 50, 50);
glPopMatrix();

//gambar bumi
glMaterialfv(GL_FRONT, GL_AMBIENT, bumi_ambient);
glMaterialfv(GL_FRONT, GL_DIFFUSE, bumi_diffuse);
glMaterialfv(GL_FRONT, GL_SPECULAR, bumi_specular);
glMaterialfv(GL_FRONT, GL_SHININESS, bumi_shininess);
glPushMatrix();
glRotatef(bumi_y, 0.0, 1.0, 0.0);
glTranslatef(2.3, 0.0, 0.0);
glutSolidSphere(0.2, 50, 50);
glLightfv(GL_LIGHT0, GL_POSITION, light_position);
glLightfv(GL_LIGHT0, GL_AMBIENT, light_ambient);
glLightfv(GL_LIGHT0, GL_DIFFUSE, light_diffuse);
glLightfv(GL_LIGHT0, GL_SPECULAR, light_specular);
glPopMatrix();

//gambar bulan
glMaterialfv(GL_FRONT, GL_AMBIENT, bulan_ambient);
glMaterialfv(GL_FRONT, GL_DIFFUSE, bulan_diffuse);
glMaterialfv(GL_FRONT, GL_SPECULAR, bulan_specular);
glMaterialfv(GL_FRONT, GL_SHININESS, bulan_shininess);
glRotatef(bumi_y, 0.0, 1.0, 0.0);
glTranslatef(2.3, 0.0, 0.0);
glRotatef(bulan_y, 0.0, 0.1, 0.0);
glTranslatef(0.5, 0.0, 0.0);
glutSolidSphere(0.05, 50, 50);
glPopMatrix();

glutSwapBuffers();
}

void animate(void) {
bumi_y += 1;
bulan_y += 1;
glutPostRedisplay();
}

// Handle special key-press


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

switch (key) {
case GLUT_KEY_UP:
rx += 1;
break;

case GLUT_KEY_DOWN:
rx -= 1;
break;

case GLUT_KEY_RIGHT:

MODUL GRAFIKA KOMPUTER 2017 Page 59


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
ry += 1;
break;

case GLUT_KEY_LEFT:
ry -= 1;
break;

default:
break;
}

// Gambar kembali window


glutPostRedisplay();
}

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

switch (key) {
case 'f': // Kamera lihat dari depan
case 'F':
cx = 0; cy = 0; cz = 5;
break;

case 'n': // Kamera lihat dari samping kanan


case 'N':
cx = 5; cy = 0; cz = 0;
break;

case 'l': // Kamera lihat dari depan-atas-kanan


case 'L':
cx = 5; cy = 3; cz = 2;
break;

default:
break;
}

// Gambar kembali window


glutPostRedisplay();
}

int main(int argc, char **argv)


{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);

glutInitWindowSize(600, 600);
glutInitWindowPosition(100, 100);

glutCreateWindow("Kehidupan");
init();

shapeindex = 1;
cx = 0; cy = 6; cz = 6;

glutDisplayFunc(display);
glutKeyboardFunc(keyboard);
glutSpecialFunc(specialkey);
glutIdleFunc(animate);
glutMainLoop();

MODUL GRAFIKA KOMPUTER 2017 Page 60


LAB MULTIMEDIA DAN PENGOLAHAN CITRA
return 0;
}

MODUL GRAFIKA KOMPUTER 2017 Page 61


LAB MULTIMEDIA DAN PENGOLAHAN CITRA

Anda mungkin juga menyukai