BAB I
PENGENALAN OPENGL
A. TUJUAN
1. Mampu melakukan konfigurasi Library opengl di Visual Studio 2008
2. Mampu memahami inisialisasi fungsi openGL
3. Mampu membuat objek dasar dengan fungsi openGL
B. MATERI
1. Konfigurasi library openGL
2. 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\Microsoft Visual Studio 2010 (sesuaikan dengan
versi visual studio anda)\Vc\include
2. glut32.lib yang dicopy ke $dir\Program Files\Microsoft Visual Studio
2010(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
1. Primitive : berupa geometric, imagesAttribute : berupa color, line type, light,
texture
2. Viewing : berupa virtual cameraControl : turn fuction ON / OFF
3. 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 2
openGL, perintah tersebut digunakan untuk menggambarkan 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
include gl in system’
Pemanggilan library openGL
InitGL Inisialisasi openGL awal yang harus
dilakukan
glViewport Untuk pengaturan viewport
glMatrixMode Untuk pengaturan viewport
gluPerspective Pengaturan persepektif
Pembuatan Gambar
Fungsi / Prosedur Pengertian
mode GL_QUARDS Untuk menggambar segi empat
mode 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 3
sistem 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 untuk
menggambar titik pada
koordinat x dan y, dengan
nilai satuan berupa integer.
glVertex2i(10,10)
- glVertex2f(x,y) Yaitu suatu fungsi untuk
menggambar titik pada
koordinat x dan y, dengan
nilai satuan berupa float.
glVertex2f(10.0,10.0)
- glVertex2d(x,y) Yaitu suatu fungsi untuk
menggambar titik pada
koordinat x dan y, dengan
nilai satuan berupa double.
glVertex2d(10.0,10.0)
Definisi primitive objek 4
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 GL_TRIANGLES_STRIP Pada triangles strip jumlah vertex yang
dipergunakan adalah 4 buah vertex.
# define GL_TRIANGLES_FAN Triangles fan adalah pembuatan suatu objek
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 _STRIP Pada quads strip 4 buah vertex merupakan
1 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 5
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 dua merupakan perputaran terhadap sumbu y,
Parameter ke tiga 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
Contoh script untuk inisialisasi openGL :
#include <stdio.h>
#include <GL/glut.h>
void mydisplay(){
glClear(GL_COLOR_BUFFER_BIT);//Menghapus layar
glBegin(GL_POLYGON);
glVertex2f(-0.5, -0.5);
glEnd();
glFlush();
}
Script di atas merupakan script yang paling sederhana, dalam artian minimal
diperlukan untuk menginisialisasi penggunaan openGL.Fungsi-fungsi lain seperti yang
disebut diatas seperti glViewport, glMatrixMode, dapat di tambah kan pada script sesuai
dengan kebutuhan.
G. SET UP PROJECT BARU
1. Buatlah project baru pada Visual Studio dengan nama prak0. 6
7
BAB II
P R I M I T I F O B J E K
A. TUJUAN
1. Mampu melakukan inisialisasi pembuatan primitif objek pada openGL
2. Mampu membuat primitif objek menggunakan openGL
B. MATERI
1. konsep primitif objek di openGL
2. 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)
Maka sintaks pembuatan segiempat :
##include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <stdarg.h>
#include <GL/glut.h>
void mydisplay(){
glClear(GL_COLOR_BUFFER_BIT);//Menghapus layar
glBegin(GL_POLYGON); 8
glVertex2f(-0.5, -0.5);
glVertex2f(-0.5, 0.5);
glVertex2f(0.5, 0.5);
glVertex2f(0.5, -0.5);
glEnd();
glFlush();
}
int main(int argc, char** argv) {
printf(“Hello World… this is 2D Rectangle”);
glutCreateWindow("simple");
glutDisplayFunc(mydisplay);
glutMainLoop();
}
Segitiga
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <stdarg.h>
#include <glut.h>
void mydisplay(){
glClear(GL_COLOR_BUFFER_BIT);
glBegin(GL_TRIANGLES);
glVertex2f(-0.5, -0.5);
glVertex2f(-0.5, 0.5);
glVertex2f(0.5, 0.5);
glEnd();
glFlush();
}
int main(int argc, char** argv){
glutCreateWindow("simple");
glutDisplayFunc(mydisplay);
glutMainLoop();
Polygon Segi 8
Program 03. Polygon Segi Delapan
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <stdarg.h>
#include <GL/glut.h>
void mydisplay(){
glClear(GL_COLOR_BUFFER_BIT);
glBegin(GL_POLYGON);
glColor3f(0, 1, 0);
glVertex2f(-0.5, -0.5);
glVertex2f(-0.75, 0);
glVertex2f(-0.5, 0.5);
glVertex2f(0, 0.75);
glVertex2f(0.5, 0.5);
glVertex2f(0.75, 0);
glVertex2f(0.5, -0.5);
glVertex2f(0, -0.75);
glEnd();
glFlush();
}
int main(int argc, char** argv){
glutCreateWindow("simple");
glutDisplayFunc(mydisplay);
glutMainLoop();
} 9
10
BAB III
Algoritma Pembentukan Objek
A. TUJUAN
1. Mampu memhami konsep algoritma bresenham
2. Mampu menerapkan algoritma bresenham pada openGL
3. Mampu membuat garis dengan algoritma bresenham
B. MATERI
1. Konsep algoritma bresenham
2. 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, dimulai
dari K0
a. bila pk < 0 maka titik selanjutnya 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 algoritmaBressenham. 11
Contoh program 12
#include <windows.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <stdarg.h>
#include <GL\glut.h>
#include <math.h>
void display(void)
{
glClearColor(1.0,1.0,1.0,0.0);
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)
{
GLint dx = (float) fabs ((float) xEnd - x0);
GLint dy = (float) fabs ((float) 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{ 13
y++;
p+=twoDyMinusDx;
}
setPixel(x,y);
}
}
void drawMyLine (void)
{
glClear (GL_COLOR_BUFFER_BIT);
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;
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)
{
glutInit(&argc,argv);
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB);
glutInitWindowSize(400,400);
glutInitWindowPosition(0,0);
glutCreateWindow("Digital Differential Analyzer Algorithm");
display();
glutDisplayFunc(drawMyLine);
glutMainLoop(); 14
return 0;
}
TUGAS
15
BAB IV
Transformasi objek
A. TUJUAN
1. Mampu memahami transformasi objek pada openGL
2. Mampu melakukan transformasi objek menggunakan openGL
3. Mampu melakukan implementasi transformasi objek pada openGL
B. MATERI
1. Konsep Transformasi Objek
2. 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
kamera.
16
Untuk menghasilkan gambar dari obyek dengan skenario tertentu kita harus melakukan
beberapa proses, yaitu:
- Melakukan pengesetan kamera dalam bentuk setting lensa kamera (Transformasi
Proyeksi),
- Mengarah kamera dengan mengatur letak tripod (Transformasi Viewing),
- Mengatur letak obyek (Transformasi Modeling), dan
- 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.
#include <stdlib.h>
#include <glut.h>
void drawQuad(){ 17
glBegin(GL_QUADS);
glVertex2f(0., 0.);
glVertex2f(0., 50.);
glVertex2f(200., 50.);
glVertex2f(200., 0.);
glEnd();
}
void render(){
glClear(GL_COLOR_BUFFER_BIT);
//drawKoordinat
glColor3f(1.,1.,1.);
drawQuad();
//draw kordinat menjadi tidak tengah lagi/ translasi
glTranslatef(10,10,0);
glColor3f(1.,0.,0.);
drawQuad();
glFlush();
}
int main(int argc, char** argv) {
glutInit(&argc, argv);
glutInitWindowPosition(100, 100);
glutInitWindowSize(480, 480);
glutCreateWindow("Translasi");
// merubah ukuran canvas
gluOrtho2D(-320.0, 320.0, -320.0, 320.0);
glutDisplayFunc(render);
glutMainLoop();
}
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. 18
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 :
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
#include <stdlib.h>
#include <glut.h>
void drawQuad(){
glBegin(GL_QUADS);
glVertex2f(0., 0.);
glVertex2f(0., 50.);
glVertex2f(200., 50.);
glVertex2f(200., 0.);
glEnd();
}
void render(){
glClear(GL_COLOR_BUFFER_BIT);
//drawKoordinat
glColor3f(1., 1., 1.);
drawQuad();
glTranslatef(0, 0, 0);
glRotatef(0, 0, 0, 1);
glColor3f(1., 0., 0.);
drawQuad();
glFlush();
}
#include "harikeduatranslasi.h"
int main(int argc, char** argv) {
glutInit(&argc, argv);
glutInitWindowPosition(100, 100);
19
glutInitWindowSize(480, 480);
glutCreateWindow("Translasi");
// merubah ukuran canvas
gluOrtho2D(-320.0, 320.0, -320.0, 320.0);
glutDisplayFunc(render);
glutMainLoop();
}
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)
Source code
#include <stdlib.h>
#include <glut.h>
#include "DrawLine.h"
void drawQuad(){
glBegin(GL_QUADS);
glVertex2f(0., 0.);
glVertex2f(0., 50.);
glVertex2f(200., 50.);
glVertex2f(200., 0.);
glEnd();
}
void renderScene(void){
glClear(GL_COLOR_BUFFER_BIT);
drawkordinat();
glColor3f(1, 1, 0); 20
glScalef(1, 2, 1);
drawQuad();
glFlush();
}
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”. 21
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<stdio.h>
#include<stdlib.h>
#include<string.h>
#include<stdarg.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 myTimeOut(int id)
{
// called if timer event
// ...advance the state of animation incrementally...
rot += 10;
glutPostRedisplay(); // request redisplay
glutTimerFunc(100, myTimeOut, 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); glBegin(GL_QUADS);
// Front Face, red
glColor3f(1.0, 0.0, 0.0);
glVertex3f(-1.0f, -1.0f, 1.0f); 22
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);
//glutInitDisplayMode( GLUT_DOUBLE /*|GLUT_DEPTH* / );
glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH);
glutInitWindowSize(500, 500);
glutInitWindowPosition(0, 0);
glutCreateWindow("simple");
// callbacks
glutDisplayFunc(mydisplay);
glutKeyboardFunc(myKeyboard);
glutTimerFunc(100, myTimeOut, 0);
glutReshapeFunc(resize); 23
init();
glutMainLoop();
return 0;
}
Tambahan:
Konsep Depth Buffer. Mode display pada program di atas diberi tambahan mode
GLUT_DEPTH dan perintah glEnable(GL_DEPTH_TEST). Hal ini untuk memastikan
bahwa surface digambar sesuai dengan urutan penampakkan yang logis. Teknik ini
merupakan salah satu algoritma HIDDEN SURFACE REMOVAL. Untuk melihat apa
yang terjadi bila teknik ini tidak dilakukan, hapus/commented moda GLUT_DEPTH dan
glEnable(GL_DEPTH_TEST).
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();
glTranslatef(-200, -350, 0); 24
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.);
glutDisplayFunc(renderScene);
glutMainLoop();
}
25
Tugas 26
27
BAB V
ANIMASI DAN PEMROGRAMAN
A. TUJUAN
1. Mampu memahami animasi pada openGL
2. Mampu melakukan implementasi animasi objek pada openGL
B. MATERI
1. Animasi objek pada opengl
A. 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.
1. Fungsi dasar pembuatan animasi dengan menggunakan TimerFunction
GLUTAPI void APIENTRY glutTimerFunc(unsigned int millis, void
(GLUTCALLBACK *func)(int value), int value);
Dalam penggunaan glutTimerFunc dimungkinkan untuk membuat sebuah animasi yang
dikontrol olehwaktu.
2. 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.
Berikut adalah contoh dari sebuah bentuk jam analog 28
sederhana dengan minimal empat tempat penunjuk angka dan menggunakan 3 jarum. Jarum
jam berputar sesuai dengan timer per detik waktu nyata.
Program :
#include <stdlib.h>
#include <glut.h>
#include <math.h>
#define PI 3.1415926535
float sudut = 0;
int i,n;
void lingkaran(int radius, int jumlah_titik, int x_tengah, int y_tengah) {
glBegin(GL_POLYGON);
for (i = 0; i <= 360; i++){
float sudut = i*(2 * PI / jumlah_titik);
float x = x_tengah + radius*cos(sudut);
float y = y_tengah + radius*sin(sudut);
glVertex2f(x, y);
}
glEnd();
}
void panahJam(){
glBegin(GL_POLYGON);
glColor3f(0, 0, 0);
glVertex2i(0, 200);
glVertex2i(10, 180);
glVertex2i(5, 180);
glVertex2i(5, 0);
glVertex2i(-5, 0);
glVertex2i(-5, 180);
glVertex2i(-10, 180);
glVertex2i(0, 200);
glEnd();
}
void panahMenit(){
glBegin(GL_POLYGON);
glColor3f(1, 1, 1);
glVertex2i(0, 220);
glVertex2i(10, 200);
glVertex2i(5, 200);
glVertex2i(5, 0);
glVertex2i(-5, 0);
glVertex2i(-5, 200);
glVertex2i(-10, 200);
glVertex2i(0, 220);
glEnd();
}
void panahDetik(){
glBegin(GL_POLYGON);
glColor3f(1, 0, 0);
glVertex2i(0, 240);
glVertex2i(10, 210);
glVertex2i(5, 210);
glVertex2i(5, 0);
glVertex2i(-5, 0);
glVertex2i(-5, 210);
glVertex2i(-10, 210);
glVertex2i(0, 240);
glEnd(); 29
}
void angka(float jarak, float x, float y) {
glPointSize(10);
glBegin(GL_POINTS);
glColor3f(0, 0, 0);
for (n = 0; n<360; n += 30)
glVertex2f(jarak*(float)sin(n*PI / 180.0) + x, jarak*(float)cos(n*PI
/ 180.0) + y); glEnd();
}
void renderScene(void){
glClear(GL_COLOR_BUFFER_BIT);
glPushMatrix();
glColor3f(0.7, 0.7, 0.7);
lingkaran(250, 100, 0, 0);
angka(230., 0., 0.);
glPopMatrix();
glPushMatrix();
glRotatef(sudut, 0, 0, 1);
panahDetik();
glPopMatrix();
glPushMatrix();
glRotatef(sudut / 60, 0, 0, 1);
panahMenit();
glPopMatrix();
glPushMatrix();
glRotatef(sudut / 720, 0, 0, 1);
panahJam();
glPopMatrix();
glColor3f(0, 0, 0);
lingkaran(20, 100, 0, 0);
glFlush();
}
void timer(int value){
sudut -= 0.6;
glutPostRedisplay();
glutTimerFunc(100, timer, 0);
}
#include "bab5program1.h"
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(renderScene);
glutTimerFunc(60, timer, 0);
glutMainLoop();
}
Contoh program ke-2
Membuat sebuah baling-baling yang bisa perputar secara clockwise kemudian unclockwise yang
pusatnya berada pada pusat koordinat.
#include <stdlib.h> 30
#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();
}
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.
31
BAB VI
INTERAKSI DENGAN PERANGKAT
A. TUJUAN
1. Mampu memahami interasksi perangkat keras dengan openGL
2. Mampu melakukan implementasi interkasi perangkat keras dengan openGL
B. MATERI
1. 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 INPUTKEYBOARD 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){
glutPostRedisplay();
glutTimerFunc(100, timer, 0);
}
void myKeyboard(unsigned char key, int x, int y)
{ 32
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){
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 33
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)
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 34
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
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 35
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;
}
}
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> 36
#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);
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.
KONSEP MOUSE PADA GLUT 37
Dalam konsep mouse pada glut ada beberapa fungsi dasar dan inisialisasi yang
digunakan untuk melakukan interaksi mouse. Adapun penjelasannya adalah sebagai
berikut :
2. 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.
3. 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);
}
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 38
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 :
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
39
#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("coba");
glutDisplayFunc(display);
gluOrtho2D(-320.0, 320.0, -320.0, 320.0);
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); 40
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);
gluOrtho2D(-320.0, 320.0, -320.0, 320.0);
glutTimerFunc(10, Timer, 0);
glutMouseFunc(mouseku);
glutMotionFunc(motionku);
glutMainLoop();
}
4. Contoh Implementasi
#include "stdlib.h"
#include "stdio.h"
#include <conio.h>
#include "glut.h"
float x = 1, y = 1, z = 0;
int w = 480, h = 480, flag = 0, flg;
41
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;
}
}
}
}
}
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); 42
glutDisplayFunc(renderScene);
glutMouseFunc(mouse);
glutTimerFunc(1, timer, 0);
glutMainLoop();
}
43
BAB VII
OBJEK 3D
C. TUJUAN
1. Mampu memahami konsep Objek 3D wireframe pada openGL
2. Mampu membuat objek 3d wirefirme pada openGL
3. Mampu melakukan implemntasi transformasi pada objek 3d dengan OpenGL
D. MATERI
1. Pembuatan Objek 3D wireframe
2. 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.
• Sphere glutWireSphere(5, 20, 20);
• Cube
glutWireCube(25);
• Cone glutWireCone(alas, tinggi, 20, 20);
• Dodecahedron glutWireDodecahedron(); 44
• Teapot glutWireTeapot(15);
• Torus glutWireTorus(luar, dalam, 20, 20);
Setiap primitive 3D memiliki parameter nilai yang mengekspresikan letak dan bentuk
primitive objek tersebut.
F. 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.
45
Sebuah bangun tiga dimensi yang ditranslasikan dengan vektor tertentu, dilakukan
dengan memindahkan titik-titik sesuai dengan vektor tersebut.
B. 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 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, int z){
if (key == 'x'){
sx = 1;
sy = 0;
sz = 0; 46
sudut += 10;
}
else if (key == 'y'){
sx = 0;
sy = 1;
sz = 0;
sudut += 10;
}
else if (key == 'z'){
sx = 0;
sy = 0;
sz = 1;
}
}
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);
glutReshapeFunc(resize);
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, 150);
}
void display(){
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
glTranslatef(0, 0, z);
glRotatef(sudut, sx, sy, sz);
sphere();
glutSwapBuffers();
} 47
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 == '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); glutReshapeFunc(resize);
init();
glutTimerFunc(50, update, 0);
glutKeyboardFunc(myKeyboard);
glutMainLoop();
}
Note :
- Dengan interaksi keyoboard “y”, objek akan berotasi pada sumbu y saja.
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); 48
glutWireCone(10, 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();
}
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;
}
else if (key == 'y'){
sx = 0;
sy = 1;
sz = 0;
sudut += 10;
}
else if (key == 'z'){
sx = 0;
sy = 0;
sz = 1;
}
}
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);
glutReshapeFunc(resize);
init();
glutTimerFunc(50, update, 0);
glutKeyboardFunc(myKeyboard);
glutMainLoop(); 49
}
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);
}
void display(){
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
glTranslatef(0, 0, -200);
glRotatef(sudut, sx, sy, sz);
torus();
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;
}
else if (key == 'y'){
sx = 0;
sy = 1;
sz = 0;
sudut += 10; 50
}
else if (key == 'z'){
sx = 0;
sy = 0;
sz = 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);
glutReshapeFunc(resize);
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
#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 resize(int w1, int h1){
glViewport(0, 0, w1, h1); 51
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;
}
else if (key == 'y'){
sx = 0;
sy = 1;
sz = 0;
sudut += 10;
}
else if (key == 'z'){
sx = 0;
sy = 0;
sz = 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);
glutReshapeFunc(resize);
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.
6. Contoh Penerapan “TetraHedron” pada GLUT 52
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 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;
}
else if (key == 'y'){
sx = 0;
sy = 1;
sz = 0;
sudut += 10;
}
else if (key == 'z'){
sx = 0;
sy = 0;
sz = 1;
sudut += 10;
}
}
void update(int value){
glutPostRedisplay();
glutTimerFunc(50, update, 0); 53
}
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);
glutReshapeFunc(resize);
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.
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.); 54
glMatrixMode(GL_MODELVIEW);
}
void myKeyboard(unsigned char key, int x, int y){
if (key == 'x'){
sx = 1;
sy = 0;
sz = 0;
sudut += 10;
}
else if (key == 'y'){
sx = 0;
sy = 1;
sz = 0;
sudut += 10;
}
else if (key == 'z'){
sx = 0;
sy = 0;
sz = 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);
glutReshapeFunc(resize);
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); 55
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 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;
}
else if (key == 'y'){
sx = 0;
sy = 1;
sz = 0;
sudut += 10;
}
else if (key == 'z'){
sx = 0;
sy = 0;
sz = 1;
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); 56
glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA);
glutInitWindowPosition(100, 100);
glutInitWindowSize(w, h);
glutCreateWindow("Objek 3D");
glutDisplayFunc(display);
glutReshapeFunc(resize);
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.
Tugas
57
Bab VIII
Objek Solid dan Lighting
C. TUJUAN
1. Mampu memahami konsep Objek 3D solid pada openGL
2. Mampu membuat objek 3d solid pada openGL
3. Mampu melakukan implemntasi transformasi pada objek 3d dengan OpenGL
4. Mampu memahami konsep lighting pada openGL
5. Mampu melakukan implementasi lighting objek 3d dengan opnGL
D. MATERI
1. Pembuatan Objek 3D Solid
2. Transformasi Objek 3D Solid
3. 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 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 58
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.
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. 59
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
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); 60
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);
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 <Windows.h>
#include <iostream>
#include <glut.h>
#include <math.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
61
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[] =
{
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"); 62
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();
}
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 }; 63
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);
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) {
64
switch (key) {
case GLUT_KEY_UP:
rx += 5;
break;
case GLUT_KEY_DOWN:
rx -= 5;
break;
case GLUT_KEY_RIGHT:
ry += 5;
break;
case GLUT_KEY_LEFT:
ry -= 5;
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();
65
shapeindex = 1;
cx = 0; cy = 6; cz = 6;
glutDisplayFunc(display);
glutKeyboardFunc(keyboard);
glutSpecialFunc(specialkey);
glutIdleFunc(animate);
glutMainLoop();
return 0;
}
• Apple I
Apple II diperkenalkan kepada publik pada West Coast Computer Faire pada bulan April 1977. Perbedaan utama dengan Apple I adalah tampilan TV yang didesign total, di mana tampilan disimpan di memori. Dengan cara ini monitor tidak hanya bisa menampilkan teks juga bisa menampilkan gambar dan pada akhirnya warna.
Apple Lisa dilepas pada bulan January 1983 dengan harga AS$ 10.000. Sekali lagi, Apple mengenalkan produk yang tergolong sangat maju pada saat itu, tetapi terlalu mahal (kesalahan ini akan terus diulang Apple selama beberapa tahun kedepan), dan sekali lagi Apple gagal meraih pasaran yang tersedia. Apple Lisa kemudian diberhentikan pada tahun 1986. Kegagalan Apple Lisa menjadi sebuah pengalaman bagi Apple, sehingga pada tahun 1984 Apple mengeluarkan produk terbaru yang diberi nama Apple Macintosh.
