Modul Workshop Grafika PDF

BUKU AJAR
WORKSHOP GRAFIKA KOMPUTER
Penyusun:
Nana Ramadijanti,S.Kom.,M.Kom.
NIP. 19711109.1998.02.2.001
Drs. Achmad Basuki,M.Kom.,Ph.D.

NIP. 19690112.1994.03.1.002
Fadilah Fahrul Hardiansyah,S.ST.

NIP. 2000000061
Program Studi D3 Teknik Informatika

Departemen Teknik Informatika dan Komputer
Politeknik Elektronika Negeri Surabaya
2013
KATA PENGANTAR
Alhamdulillah, Segala puji hanya untuk Allah SWT, Tuhan Yang Maha Berilmu.
atas petunjukNya-lah kami dapat menyelesaikan buku ajar mahasiswa D3 Teknik
Informatika untuk matakuliah Workshop Grafika Komputer. Diharapkan dengan adanya
buku ini, mahasiswa mendapatkan panduan dalam mengikuti perkuliahan Workshop
Grafika Komputer.
Materi yang disusun pada buku ini sesuai dengan silabus matakuliah Workshop
Grafika Komputer di program studi D3 Teknik Informatika. Jumlah modul praktikum 10
(sepuluh) percobaan dan 2 tugas:proyek 1 dan proyek 2 yang harus dikerjakan siswa di
tengah semester dan akhir semester,pengganti UTS dan UAS. Isi buku setiap judul
praktikum disusun mulai dari dasar teori, tugas pendahuluan,percobaan,tugas dan laporan
resmi yang harus dikerjakan siswa saat mengikuti workshop grafika komputer.
Pengerjaan percobaan dilakukan dengan bahasa pemrograman c++ dengan library
OpenGL. Dengan mengacu pada buku ini,mahasiswa diharapkan dapat mengerti dan
membuat obyek grafik 2D dan 3D. Ucapan terima kasih tak lupa kami sampaikan kepada
beberapa pihak yang telah memberikan kontribusi dalam penyelesaian buku Workshop
Grafika Komputer ini, yaitu:
 Dr. Zainal Arief,ST.,MT.,selaku Direktur PENS
 Ir. Anang Budikarso,MT.,selaku Pembantu Direktur II PENS
 Eko Henfri Binugroho, SST, MSc,selaku Ketua Unit Penelitian PENS
 Arna Fariza,S.Kom.,M.Kom.,selaku Ketua Departemen Teknik Informatika dan
Komputer PENS
 Arif Basofi,S.Kom.,M.T.,selaku Ketua Program Studi D3 Teknik Informatika
PENS
 Isbat Uzzin Nadhori,S.Kom.,M.T.,selaku Ketua Program Studi D4 Teknik
Informatika PENS
 Dosen-dosen dan karyawan PENS,khususnya rekan-rakan di program studi D3
dan D4 Teknik Informatika PENS
Sekalipun buku ini telah selesai dengan proses yang cukup panjang, akan tetapi
masih tidak menutup adanya kekurangan padanya. Segala masukan, kritik dan review
sangat kami harapkan untuk semakin menyempurnakannya pada kesempatan mendatang.
Surabaya, Nopember 2013
PENYUSUN
i
DAFTAR ISI
KATA PENGANTAR ...................................................................................................................................... i
DAFTAR ISI ................................................................................................................................................... ii
DAFTAR GAMBAR..................................................................................................................................... vii
DAFTAR TABEL ........................................................................................................................................ viii
Praktikum 1 ..................................................................................................................................................... 1
Pengantar Workshop Grafika Komputer ......................................................................................................... 1
A. TUJUAN ................................................................................................................................................. 1
B. DASAR TEORI ...................................................................................................................................... 1
B.1. Pengenalan Grafika Komputer .................................................................................................... 1
B.2. Pengenalan Pemrograman Grafik ................................................................................................ 3
B.3. Instalasi OpenGL ......................................................................................................................... 4
B.3.1. Instalasi di Visual C++6.0 ..................................................................................................... 4
B.3.2. Instalasi di Visual C++ .Net .................................................................................................. 4
B.3.3. Instalasi Instalasi di Xcode (Mac OS X 10.5 Leopard) ......................................................... 5
C. TUGAS PENDAHULUAN .................................................................................................................... 8
D. PERCOBAAN ........................................................................................................................................ 8
E. LAPORAN RESMI ................................................................................................................................. 8
Praktikum 2 ..................................................................................................................................................... 9
Menggambar dengan Fungsi Primitif Open GL .............................................................................................. 9
A. TUJUAN ................................................................................................................................................. 9
B. DASAR TEORI ...................................................................................................................................... 9
B.1. Sistem Koordinat ......................................................................................................................... 9
B. 2. Program Dasar Dengan OpenGL .............................................................................................. 10
B.3. Menggambar dengan Fungsi Primitif openGL ........................................................................... 11
B.4. Menggambar Titik ..................................................................................................................... 13
B.5. Mengubah Ukuran Titik ............................................................................................................. 13
B.6. Menggambar Garis ..................................................................................................................... 14
B.7. Menggambar Banyak Garis (Polyline) ....................................................................................... 14
B.8. Menggambar Banyak Garis (Polyline Kurva Tertutup) ............................................................. 14
B.9. Menggambar Polygon ................................................................................................................ 15
B.10. Menggambar Segi Empat (Quad)............................................................................................. 15
B.11. Menggambar N Segi Empat (Quad Strip) ................................................................................ 15
B.12. Menggambar Segi Tiga (Triangeles)........................................................................................ 16
B.13. Menggambar N Segi Tiga (Triangele Strip) ............................................................................ 16
B.14. Menggambar N Segi Tiga dengan 1 Titip Pusat (Triangele Fan)............................................. 17
B.15. Mengatur Warna ...................................................................................................................... 17
C. TUGAS PENDAHULUAN .................................................................................................................. 18
D. PERCOBAAN ...................................................................................................................................... 18
ii
E. TUGAS ................................................................................................................................................. 28
F. LAPORAN RESMI ............................................................................................................................... 28
Praktikum 3 ................................................................................................................................................... 30
OBYEK 2D ................................................................................................................................................... 30
A. TUJUAN ............................................................................................................................................... 30
B. DASAR TEORI .................................................................................................................................... 30
B.1. Obyek Grafik 2 Dimensi ............................................................................................................ 30
B.2. Menggambar Polyline ................................................................................................................ 31
B.3. Menggambar Polygon ................................................................................................................ 31
B.4. Membuat Polygon Berwarna...................................................................................................... 32
B.5. Membuat Polygon Bergradiasi ................................................................................................... 33
D. PERCOBAAN ...................................................................................................................................... 34
E. TUGAS ................................................................................................................................................. 35
F. LAPORAN RESMI ............................................................................................................................... 36
Praktikum 4 ................................................................................................................................................... 37
OBYEK PUTAR 2D ..................................................................................................................................... 37
A. TUJUAN ............................................................................................................................................... 37
B. DASAR TEORI .................................................................................................................................... 37
B.1. Membuat Lingkaran ................................................................................................................... 37
B.2 Membuat Ellipse ......................................................................................................................... 38
B.3. Membuat Obyek Polar ............................................................................................................... 38
D. PERCOBAAN ...................................................................................................................................... 41
E. TUGAS ................................................................................................................................................. 46
F. LAPORAN RESMI ............................................................................................................................... 47
Praktikum 5 ................................................................................................................................................... 48
Melakukan Pengesetan Perseptive View dan ................................................................................................ 48
View Port Fungsi Transformasi ..................................................................................................................... 48
A. TUJUAN ............................................................................................................................................... 48
B. DASAR TEORI .................................................................................................................................... 48
B.1. Sistem Koordinat Layar ............................................................................................................. 48
B.2. Menggambar Obyek 2D ............................................................................................................. 49
B.2.1. Mendefinisikan World Window .......................................................................................... 50
B.2.2. Mendefinisikan Viewport.................................................................................................... 51
B.2.3. Mapping World Window ke Vewport Window .................................................................. 51
B.2.4. Rasio Lebar R dan L ........................................................................................................... 52
B.2.5. Rasio Tinggi T dan B .......................................................................................................... 52
B.3. Transformasi di OpenGL ........................................................................................................... 53
B.3.1. Translasi .............................................................................................................................. 54
B.3.2. Scaling................................................................................................................................. 55
iii
B.3.3. Rotasi .................................................................................................................................. 56
B.3.4. Matrik Identitas ................................................................................................................... 57
D. PERCOBAAN ...................................................................................................................................... 58
E. TUGAS ................................................................................................................................................. 62
F. LAPORAN RESMI ............................................................................................................................... 63
Praktikum 6 ................................................................................................................................................... 64
Fungsi keyboard dan mouse .......................................................................................................................... 64
A. TUJUAN ............................................................................................................................................... 64
B. DASAR TEORI .................................................................................................................................... 64
B. 1. Event Handling di OpenGL ...................................................................................................... 64
B. 2. Mendefinisikan Event Keyboard............................................................................................... 65
B. 3. Mendefinisikan Event Mouse ................................................................................................... 67
D. PERCOBAAN ...................................................................................................................................... 68
E. TUGAS ................................................................................................................................................. 80
F. LAPORAN RESMI ............................................................................................................................... 81
Praktikum 7 ................................................................................................................................................... 82
TEXT DAN FONT ........................................................................................................................................ 82
A. TUJUAN ............................................................................................................................................... 82
B. DASAR TEORI .................................................................................................................................... 82
B. 1. Karakter Bitmap ............................................................................................................................ 82
B. 2. Stroke Teks Karakter .................................................................................................................... 83
B. 3. Menempatkan Teks ....................................................................................................................... 83
D. PERCOBAAN ...................................................................................................................................... 83
E. TUGAS ................................................................................................................................................. 87
F. LAPORAN RESMI ............................................................................................................................... 88
Praktikum 8 ................................................................................................................................................... 89
PROYEK 1 .................................................................................................................................................... 89
A. TUJUAN ............................................................................................................................................... 89
B. DASAR TEORI .................................................................................................................................... 89
B.1. Membuat Latar Belakang .............................................................................................................. 89
B.2. Pembuatan Obyek Pesawat ............................................................................................................ 90
B.3. Sistem Kendali ............................................................................................................................... 90
D. PERCOBAAN ...................................................................................................................................... 91
E. LAPORAN RESMI............................................................................................................................... 91
Praktikum 9 ................................................................................................................................................... 92
Vertex Array – Creating 3D Object ............................................................................................................... 92
A. TUJUAN ............................................................................................................................................... 92
iv
B. DASAR TEORI .................................................................................................................................... 92
D. PERCOBAAN ...................................................................................................................................... 98
E. TUGAS ............................................................................................................................................... 105
F. LAPORAN RESMI............................................................................................................................. 105
Praktikum 10 ............................................................................................................................................... 106
Transformation and Projection .......................................................................Error! Bookmark not defined.
A. TUJUAN ............................................................................................................................................. 106
B. DASAR TEORI .................................................................................................................................. 106
B.1. Koordinat Obyek .......................................................................................................................... 106
B.2. Koordinat Mata ............................................................................................................................ 106
B.3. Koordinat Klip ............................................................................................................................. 107
B.4. Koordinat Perangkat Normalisasi (Normalized Device Coordinates / NDC) .............................. 108
B.5. Koordinat Window (Koordinat Layar) ......................................................................................... 108
B.6. Matrix Transformasi OpenGL ..................................................................................................... 109
B.7. Model-View Matrix (GL_MODELVIEW) .................................................................................. 109
B.8. Matrix Proyeksi (GL_PROJECTION) ......................................................................................... 110
B.9. Matrix Tekstur (GL_TEXTURE) ................................................................................................ 112
B.10. Matrix Warna (GL_COLOR) ..................................................................................................... 112
C. TUGAS PENDAHULUAN ................................................................................................................ 113
D. PERCOBAAN .................................................................................................................................... 113
E. TUGAS ............................................................................................................................................... 116
F. LAPORAN RESMI............................................................................................................................. 116
Praktikum 11 ............................................................................................................................................... 117
Lighting dan Shading .................................................................................................................................. 117
A. TUJUAN ............................................................................................................................................. 117
B. DASAR TEORI .................................................................................................................................. 117
B.1. Lighting Model ............................................................................................................................ 117
B.2. Diffuse Scattering ........................................................................................................................ 118
B.3. Specullar Reflection ..................................................................................................................... 119
B.4. Ambient ....................................................................................................................................... 120
B.5. Phong Model ................................................................................................................................ 121
B.6. Flat dan Smooth Shading ............................................................................................................. 122
D. PERCOBAAN .................................................................................................................................... 123
E. TUGAS ............................................................................................................................................... 127
F. LAPORAN RESMI ............................................................................................................................. 127
Praktikum 12 ............................................................................................................................................... 128
PROYEK 2 .................................................................................................................................................. 128
A. TUJUAN ............................................................................................................................................. 128
B. DASAR TEORI .................................................................................................................................. 129
v
B.1. Membuat Obyek...................................................................................................................... 129
B.2. Pembuatan Kendali Camera View ........................................................................................... 129
D. PERCOBAAN .................................................................................................................................... 130
E. LAPORAN RESMI ............................................................................................................................. 130
Daftar Pustaka ............................................................................................................................................. 131
vi
DAFTAR GAMBAR
vii
DAFTAR TABEL
viii
ix
PRAKTIKUM 1
PENGANTAR WORKSHOP GRAFIKA KOMPUTER
A. TUJUAN
Setelah mempelajari dan mempraktekkan materi dalam praktikum ini mahasiswa
diharapkan mampu:
1. Mengetahui definisi dan manfaat grafika komputer
2. Mengenal pemrograman grafis
3. Mengenal dan mempersiapkan library grafis Open GL
B. DASAR TEORI
B.1. Pengenalan Grafika Komputer
Grafika computer (Computer Graphics) adalah suatu bidang yang mempelajari
bagaimana menghasilkan suatu gambar menggunakan komputer. Sehingga di dalam
grafika komputer akan dibahas teknik-teknik menggambar. Grafika komputer
menghasilkan software-software disain grafis yang saat ini sudah sangat canggih. Grafika
komputer menghasilkan software dengan GUI (Graphics User Interface) yang
memudahkan dan menyenangkan.
Kebutuhan akan pembuatan grafika komputer saat ini tidak bisa dihindarkan dengan
perkembangan teknologi komputer yang semakin cepat. Hampir semua bidang
menggunakan grafika komputer, tetapi kebutuhan grafika komputer lebih dirasakan
dalam bidang-bidang berikut:
(1) Visualisasi proses
a) b)
Gambar 1. 1.a ) Contoh simulasi grafis b) Contoh visualisasi proses
1
(2) Entertainment:
a) b)
Gambar 1.2. a) grafik 3D pada Final Fantasy b) grafik 3D pada game Euro 2004
(3) Design
Nany
Gambar 1.3. Contoh beberapa game 3 dimensi

(4) Game development
Gambar 1.4. Contoh simulasi pejalan kaki
Gambar 1.5. Contoh simulasi lalu lintas
2
Gambar 1.6. Peta 3D pada sistem informasi geografis
B.2. Pengenalan Pemrograman Grafik

• Sebuah teknik pemrograman yang berorientasi pada manipulasi grafis atau
menghasilkan gambar sesuai dengan kebutuhan.
• Banyak dipakai untuk simulasi, animasi, game, geospatial information, dan
visualisasi.
• Menggunakan library grafis seperti OpenG, DirectX atau Unity.
Pada workshop grafika komputer dipakai library grafis OpenGL glut. Library ini
lebih ringan dari DirectX dan dapat bekerja di semua sistem operasi, meskipun dalam
buku ini hanya dibahas untuk Windows. Selain itu library ini sangat sederhana, sehingga
memudahkan para pemula dalam mempelajari pemrograman grafik.
Di samping itu, dalam pemrograman grafik terdapat komponen dasar yang disebut
dengan obyek grafik. Obyek garfik ini merupakan obyek dasar dalam pembuatan grafik di
komputer antara lain:
 Titik dan Garis,
 Polyline dan Polygon
 Raster,
 Warna,
 Text,
 Paint.
3
Gambar 1.7. Elemen Dasar pada Grafika Komputer
B.3. Instalasi OpenGL

B.3.1. Instalasi di Visual C++6.0
• Ada 3 File penting
– glut.h
– glut32.lib
– glut32.dll
• Instalasi: Copy dan letakkan file-file di atas pada folder-folder yang sesuai
– Copy-kan file glut.h di folder c:\\Program Files\Microsoft Visual
Studio\VC98\Include\GLUT
– Copy-kan file glut32.lib di folder c:\\Program Files\Microsoft Visual
Studio\VC98\lib
– Copy-kan file glut32.dll di folder c:\\Windows\System32
B.3.2. Instalasi di Visual C++ .Net
Kebutuhan file Open GL untuk instalasi di Visual C++.Net sama dengan di Visual
C++ 6.0 perbedaan pada tempat file-file tersebut sbb :
 Copy-kan file glut.h di folder c:\\Program Files\Microsoft Visual Studio
2010\VC\Include\GLUT
 Copy-kan file glut32.lib di folder c:\\Program Files\Microsoft Visual
Studio 2010\VC\lib
 Copy-kan file glut32.dll di folder c:\\Windows\System dan di folder
c:\\Windows\System32
4
B.3.3. Instalasi Instalasi di Xcode (Mac OS X 10.5 Leopard)
• Double Click icon. Icon Xcode dapat dicari di dock, atau dipilih dari Machintosh
HD -> Developer -> Applications -> Double click icon Xcode
Gambar 1.8. Icon XCode di Mac OS X 10.5 Leopard

• Xcode yang telah aktif akan menampilkan menubar
Gambar 1.9. Jendela aplikasi XCode aktif

• Program grafika akan dibuat pada bahasa C++, dengan memilih File->New
Project->Dialog New Project->Command Line Utility->C++ Tool->Choose
Gambar 1.10. Jendela Dialog XCode New Project C++ Tool

• Isikan nama project, misalnya : coba, dan click Save
5
Gambar 1.11. Jendela Dialog Nama Project
• Tampilan awal project coba sbb :
Gambar 1.12. Jendela Project Coba

• Pada menu bar->Project->Edit Project Setting
Gambar 1.13. Pemilihan Sub Menu Edit Project Settings
6
• Pada dialog project coba info yang tampil, pilih header search path, dan isikan
value dengan : /Developer/SDKs/MacOSX10.5.sdk/usr/x11/include
Gambar 1.14. Dialog Header Search Paths

• Cari dan tambahkan OpenGL.Framework, dan tekan tombol [Add]
• Click kanan di project, pilih “Add file to [nama_project]”
• Cari dan tambahkan GLUT.Framework, dan tekan tombol [Add]
• Setelah program diketik, untuk menjalankan click icon
• Untuk menutup aplikasi, click icon
• Pada Dialog Framework, pilih Glut.framework dan OpenGL.framework, click

Add 2x
Gambar 1.15. Menambahkan GLUT dan OpenGL Framework
7
C. TUGAS PENDAHULUAN
Mengumpulkan artikel tentang trend pemanfaatan grafika komputer terkini di bidang :
 Desain Grafis
 Publishing
 Arsitektur/Teknik Sipil/Interior
 Game
 Animasi dan Movie
 Pemetaan 3D
 Simulasi dan Visualisasi
Sertakan sumber informasi dari artikel.
D. PERCOBAAN
1. Lakukan instalasi Open GL di Windows (laptop masing-masing) mengikuti langkah
pada B.3.
2. Lakukan instalasi Open GL di Mac Os (di laboratorium computer vision) mengikuti
langkah pada B.3.
E. LAPORAN RESMI
Tidak ada laporan resmi pada Workshop Grafika Komputer I, selain laptop dan atau
komputer Windows/Mac Os sudah terinstal OpenGL dan siap dipakai membuat program
grafika pada Workshop Grafika Komputer pertemuan II.
8
PRAKTIKUM 2
MENGGAMBAR DENGAN FUNGSI PRIMITIF OPEN GL
A. TUJUAN
diharapkan mampu:
1. Mengerti dan dapat Melakukan Inisialisasi Window Grafis
2. Mengerti dan dapat Membuat Gambar dengan Fungsi Primitif Open GL
3. Mengerti dan dapat Membuat Gambar 2D
B. DASAR TEORI
B.1. Sistem Koordinat
Meletakkan suatu gambar pada layar diperlukan pengetahuan mengenai sistem
koordinat Kartesian, karena OpenGL menggunakan sistem koordinat ini untuk
meletakkan suatu obyek gambar, berbeda dengan library grafis pada umumnya yang
menggunakan sistem koordinat layar. Perbedaan sistem koordinat Kartesian dan sistem
koordinat layar dapat dilihat pada gambar 2.1 dan gambar 2.2.
Y
P(x,y) x X
Y
x X
Gambar 2.1. Sistem koordinat Kartesian dan layar
Sistem koordinat Kartesian mempunyai ciri arah positif pada sumbu X adalah ke
kanan dan arah positif pada sumbu Y adalah ke atas.
Berbeda dengan sistem koordinat Kartesian, sistem koordinat layar mempunyai ciri
arah positif pada sumbu X adalah ke kanan dan arah positif pada sumbu Y adalah ke
bawah. Library grafik yang baik adalah library grafik yang mendukung sistem koordinat
Kartesian, karena para pengguna lebih familiar dengan sistem koordinat ini.
9
B. 2. Program Dasar Dengan OpenGL
Beberapa pernyataan penting untuk pemrograman grafis terutama untuk menginisialisasi
layar grafis, antara lain:
#include <GL/glut.h>
Pernyataan ini digunakan untuk mengaktifkan fungsi-fungsi grafik yang telah
disediakan oleh OpenGL. Untuk komputer Mac OS, penulisan library openGL
sebagai berikut : #include <GLUT/glut.h>
glutInitDisplayMode ( GLUT_DOUBLE | GLUT_RGB );
Menginisialisasi layar grafis menggunakan OpenGL. Dari perintah ini terlihat
bahwa struktur data gambar dinyatakan dalam bilangan dengan format double,
dan penyajian warna dalam RGB (Red Green Blue). Untuk mengurangi beban
memory, format diubah menjadi GLUT_SINGLE. Untuk menghasilkan obyek
yang transparan penyajian warna dapat diubah menjadi RGBA (Red Green Blue
Alpha).
glutInitWindowPosition(100,100);
Pernyataan ini digunakan untuk menginisialisasi posisi kiri-atas kanvas/window
tempat untuk mengambar. Pada contoh perintah di atas posisi kiri-atas di titik
(100,100). Pengubahan posisi window ini tidak terlalu bermanfaat karena
windows pada OpenGL dapat digeser dengan drag & drop, bahkan dapat di-
maximaze tanpa mengubah hasil gambar karena terjadi proses auto-resize.
glutInitWindowSize(640,480);
Pernyataan ini digunakan untuk mengatur ukuran kanvas, pada contoh di atas
ukuran diatur 640X480 pixel. Pengubahan ukuran window ini tidak terlalu
bermanfaat karena windows pada OpenGL dapat diubah dengan drag & drop,
bahkan dapat di-maximaze tanpa mengubah hasil gambar karena terjadi auto-
resize.
glutCreateWindow("My first drawing");
Pernyataan ini digunakan untuk memberikan judul pada kanvas. Pada contoh ini
judul pada kanvas adalah “My first drawing”.
glClearColor(0.0, 0.0, 0.0, 0.0);
10
Pernyataan ini digunakan untuk memberi warna latar belakang pada kanvas, pada
contoh di atas warna latar belakang kanvas adalah hitam (0,0,0,0), untuk
mengganti menjadi warna putih diubah menjadi (1,1,1,0). Konsep warna yang
digunakan adalah RGBA dengan struktur (red,green,blue,alpha) yang menyatakan
komponen (merah, hijau, biru, tranparansi), tetapi warna-warna yang akan banyak
disajikan dalam buku ini menggunakan konsep RGB dan Alpha tidak digunakan.
gluOrtho2D(-100., 100., -100.0, 100.0);
Pernyataan ini digunakan untuk menyatakan ukuran sistem koordinat dengan
struktur (xmin, xmax, ymin, ymax). Pada contoh di atas, sistem koordinat yang
digunakan mempunyai batas koordinat sumbu X dari -100 ke 100, dan sumbu Y
dari -100 ke 100. Ukuran sistem koordinat ini tidak berhubungan dengan ukuran
kanvas.
glutIdleFunc(display);
Pernyataan ini digunakan untuk refresh setiap proses menggambar selesai dan
biasanya digunakan untuk membuat animasi. Untuk gambar yang tidak bergerak,
pernyataan ini tidak digunakan.
glutDisplayFunc(display);
Pernyataan ini digunakan untuk menampilkan semua perintah grafis yang ada di
fungsi userdraw().
Untuk selanjutnya semua perintah (program) untuk menggambar obyek baik 2D atau 3D
diletakkan pada fungsi userdraw(), ini berlaku untuk semua perintah yang dijelaskan
dalam buku workshop grafika ini.
B.3. Menggambar dengan Fungsi Primitif openGL

Struktur dasar perintah untuk menggambar fungsi primitif di openGL adalah sebagai
berikut :
glBegin(GL_POLA);
glVertex2f(koordinat titik 1);
glVertex2f(koordinat titik 2);
.........
glVertex2f(koordinat titik n);
glEnd();
11
Sepuluh macam GL_POLA yang ada di openGL sebagai berikut :
GL_POINTS  Menggambar titik
GL_LINES  Menggambar garis
GL_LINE_STRIP  Menggambar polyline
GL_LINE_LOOP  Menggambar rangka Polygon
GL_POLYGON  Menggambar polygon
GL_QUADSMenggambar segi 4
GL_QUAD_STRIPMenggambar N segi 4
GL_TRIANGLES Menggambar segi 3
GL_TRIANGLE_STRIP Menggambar N segi 3
GL_TRIANGLE_FAN  Menggambar N segi 3 dengan 1 pusat
Macam-macam hasil menggambar dengan GL_POLA di openGL dapat dilihat pada

gambar 2.2
12
Gambar 2.2. Sepuluh macam GL_POLA di Fungsi Primitif openGL
B.4. Menggambar Titik

Perintah untuk menggambar obyek menggunakan openGL menggunakan struktur
sebagai berikut:
gl Statement Structure (properti)
contoh: glVertex2f(100,100)
Untuk menggambar titik menggunakan library OpenGL dapat dilakukan menggunakan
perintah:
 glVertex2f(x,y) untuk tipe data titik yang bersifat float (pecahan). Pada buku ini
model ini yang banyak digunakan.
 glVertex2d(x,y) untuk tipe data titik yang bersifat integer (bilangan bulat).
Dengan sebelumnya diberi inisialisasi glBegin(GL_POINTS).
B.5. Mengubah Ukuran Titik

Pada contoh-contoh sebelumnya terlihat ukutan titiknya sangat kecil. Untuk
mengubah ukuran titik dapat menggunakan perintah
glPointSize(ukuranTitik);
13
Bila ditulis glPointSize(4) maka besar titiknya adalah 4x4 pixel. Bila tidak digunakan
maka ukuran titiknya adalah 1 pixel.
B.6. Menggambar Garis

Perintah untuk mengambar garis dari posisi (x1,y1) ke (x2,y2) dalam bahasa C
menggunakan library OpenGL adalah:
glBegin(GL_LINES);
glVertex2f(x1,y1);
glVertex2f(x2,y2);
glEnd();
Perintah ini bisa digunakan untuk menggambar banyak garis, dengan catatan titiknya
harus berpasangan dan berurutan.
B.7. Menggambar Banyak Garis (Polyline)

Perintah untuk mengambar kurva terbuka, dengan garis dari posisi (x1,y1) ke
(x2,y2) ... ke (xn, yn), dalam bahasa C menggunakan library OpenGL adalah:
glBegin(GL_LINE_STRIP);
glVertex2f(pos_x_1,pos_y_1);
..........
glVertex2f(pos_x_n, pos_y_n);
glEnd();
B.8. Menggambar Banyak Garis (Polyline Kurva Tertutup)

Perintah untuk mengambar kurva tertutup dari posisi (x1,y1) ke (x2,y2) ... ke (xn,
yn) dalam bahasa C menggunakan library OpenGL adalah:
glBegin(GL_LINE_LOOP);
..........
glEnd();
14
B.9. Menggambar Polygon
Polygon adalah gabungan garis-garis yang tertutup yang membentuk satu obyek dan
bisa diblok dengan warna. Perintah untuk mengambar polygon dari posisi (x1,y1) ke
(x2,y2) ... ke (xn, yn) menghasilkan kurva tertutup dengan warna dalam bahasa C
menggunakan library OpenGL adalah:
glBegin(GL_POLYGON);
..........
glEnd();
B.10. Menggambar Segi Empat (Quad)

Quad adalah mirip dengan polygon, tetapi membatasi jumlah titik sampai dengan
4. Perintah ini bisa digunakan untuk menggambar banyak Quad, dengan catatan setiap 4
titik harus berpasangan dan berurutan. Bisa diblok dengan warna.
glBegin(GL_QUADS);
glVertex2f(pos_x_3, pos_y_3); Quad I
glVertex2f(pos_x_4, pos_y_4);
…
Quad N (setiap 4
titik berikutnya)
glEnd();
B.11. Menggambar N Segi Empat (Quad Strip)

Quad Strip menghasilkan N buah bentuk Quad, dimana setiap Quad mempunyai 2
titik yang sama dengan Quad sebelum dan atau sesudahnya. Bisa diblok dengan warna.
glBegin(GL_QUAD_STRIP);
Quad I
15
glVertex2f(pos_x_4,pos_y_4); Quad II
...
glEnd();
B.12. Menggambar Segi Tiga (Triangeles)

Triangles adalah mirip dengan quad, tetapi dengan jumlah titik 3. Perintah ini bisa
digunakan untuk menggambar banyak Triangles, dengan catatan setiap 3 titik harus
berpasangan dan berurutan. Bisa diblok dengan warna.
glBegin(GL_TRIANGLES);
Triangles I
glVertex2f(pos_x_2,pos_y_2); Quad I
Triangles II
glEnd();
B.13. Menggambar N Segi Tiga (Triangele Strip)

Triangle Strip adalah mirip dengan quad strip, tetapi dengan jumlah titik 3.
Perintah ini bisa digunakan untuk menggambar banyak Triangles, dengan catatan 2 dari 3
titik dipakai bersama dengan segitiga sebelum dan sesudahnya. Bisa diblok dengan
warna.
glBegin(GL_TRIANGLE_STRIP);
Triangles I
Triangles II
16
glEnd();
B.14. Menggambar N Segi Tiga dengan 1 Titip Pusat (Triangele Fan)

Triangle Fan adalah Menggambar kipas segitiga memiliki 1 titik pusat. Sangat
berguna untuk menggambar lingkaran penuh. Bisa diblok dengan warna.
glBegin(GL_TRIANGLE_FAN);
Triangles I
Triangles II
glEnd();
B.15. Mengatur Warna

Perintah untuk mengatur warna dalam bahasa C menggunakan library OpenGL
adalah:
glColor3f(red, green, blue);
Pasangan nilai RGB akan menghasilkan komposisi warna tertentu. Tabel 2.1. berikut
menyatakan warna dan komposisi nilai RGB-nya. Dimana nilai R,G dan B masing-
masing antara 0 sampai dengan 1, dimana 0 menyatakan komponen ini menjadi gelap
(tidak dipakai), dan nilai 1 menyatakan komponen ini digunakan secara maksimal.
Tabel 2.1. Komposisi RGB
Warna R G B
Merah 1 0 0
Hijau 0 1 0
Biru 0 0 1
Kuning 1 1 0
Magenta 1 0 1
Cyan 0 1 1
Putih 1 1 1
Hitam 0 0 0
Abu-abu 0.5 0.5 0.5
17
1. Tulislah kembali fungsi-fungsi untuk setting window I open GL dan kegunaannya

2. Buatlah desain gambar rumah 2D dengan memasukkan 10 pola fungsi
primitifopenGL
D. PERCOBAAN
1. Membuat window I: program dasar untuk menggunakan library OpenGL dalam
bahasa C++
void userdraw(void) {
// Disini tempat untuk menggambar
}
void display(void) {
glClear( GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}
int main(int argc, char **argv)

{
glutInit(&argc,argv);
glClearColor(1.0, 1.0, 1.0, 0.0);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(-100., 100., -100.0, 100.0);
glutIdleFunc(display); // idle event call back
glutMainLoop();
return 0;
}
18
Contoh hasil dari contoh program di atas adalah:
Gambar 2.3. Contoh hasil program dasar OpenGL
2. Pada bagian userdraw() ketikkan program berikut untuk mengambar titik di posisi
(50,10) .
glBegin(GL_POINTS);
glVertex2f(50,10);
glEnd();
3. Pada bagian userdraw() ketikkan program berikut untuk mengambar titik di posisi
(25,10), (10,10) dan (10,25).
void userdraw(void){
glBegin(GL_POINTS);
glVertex2f(25,10);
glVertex2f(10,10);
glVertex2f(10,25);
glEnd();
}
4. Program berikut menghasilkan titik-titik acak baik posisi dan besarnya.

Sebelumnya pada header ditambahkan header file #include <stdlib.h> untuk
fungsi-fungsi yang berhubungan dengan pembangkitan bilangan acak.
19
#include <stdlib.h>
int s; // ukuran titik
float x,y; // posisi titik
for(int i=0;i<1000;i++){
s=rand()%4+1;
glPointSize(s);
glBegin(GL_POINTS);
x=-100+200*(float)rand()/RAND_MAX;
y=-100+200*(float)rand()/RAND_MAX;
glVertex2f(x,y);
glEnd();
}
}
void display(void) {
glClear( GL_COLOR_BUFFER_BIT);
userdraw();
glutSwapBuffers();
}
int main(int argc, char **argv) {
glClearColor(0.0, 0.0, 0.0, 0.0);
glLoadIdentity();
gluOrtho2D(-100., 100., -100.0, 100.0);
glutIdleFunc(display); // idle event call back
glutMainLoop();
return 0;
}
Hasilnya adalah sebagai berikut:
20
Gambar 2.4. Titik-titik acak
Bila ini dijalankan akan seperti gambar TV rusak karena program berjalan secara terus-
menerus. Untuk menghentikan proses tutup satu baris perintah di bagian main() yaitu:
glutIdleFunc(display);
5. Menggambar efek bintang berkelip, efeknya hampir sama dengan menggambar titik-
titik acak, tetapi posisi titik tetap sehingga diperlukan sebuah kondisi untuk mengacak
posisi titik-titik yang hanya sekali saja (penggunaan variabel static tick yang terus-
menerus ditambah satu dan kondisi tick=0), dan untuk kemudian hanya diacak titik
mana yang akan diubah ukurannya. Programnya hampir sama dengan contoh 2.3,
tetapi fungsi userdrawnya diganti menjadi:
static int tick=0; // variable yang berjalan terus
static point2D_t bintang[100];
int i;
// mengacak posisi bintang saat tick=0 atau sekali saja
if(tick==0){
for(i=0;i<100;i++){
bintang[i].x=rand()%400;
bintang[i].y=rand()%300;
21
}
}
// menggambar bintang
setColor(1,1,1);
glPointSize(2);
for(i=0;i<100;i++){
glBegin(GL_POINTS);
glVertex2f(bintang[i].x,bintang[i].y);
glEnd();
}
// mengacak bintang yang berkelip
int k=rand()%100;
glPointSize(4);
glBegin(GL_POINTS);
glVertex2f(bintang[k].x,bintang[k].y);
glEnd();
}
6. Program berikut membuat garis dari (5,10) ke (40,0):

glBegin(GL_LINES);
glVertex2f(5,10);
glVertex2f(40,0);
glEnd();
}
(5,10)
(40,0)
Gambar 2.5. Contoh Garis

7. Program di bawah ini menggambar segitiga dari gabungan garis-garis dengan
posisi dari atas berputar searah jarum jam (0,50), (20,0) dan (-20,0).
22
glBegin(GL_LINES);
glVertex2f(0,50);
glVertex2f(20,0);
glEnd();
glBegin(GL_LINES);
glVertex2f(20,0);
glVertex2f(-20,0);
glEnd();
glBegin(GL_LINES);
glVertex2f(-20,0);
glVertex2f(0,50);
glEnd();
}
Pernyataan glBegin(GL_LINES) tidak perlu diulang untuk lebih menyingkat program

sehingga menjadi:
glBegin(GL_LINES);
glVertex2f(0,50);
glVertex2f(20,0);
glVertex2f(20,0);
glVertex2f(-20,0);
glVertex2f(-20,0);
glVertex2f(0,50);
glEnd();
}
Pada program ini terlihat bahwa glBegin(GL_LINES) selalu membutuhkan pasangan dari
2 titik untuk menghasilkan sebuah garis, sehingga untuk membuat segitiga (tiga buah
garis) dibutuhkan 6 buah peritah glVertex. Hasilnya adalah sebagai berikut:
23
Gambar 2.6. Segitiga
8. Program berikut tidak akan menghasilkan segitiga, karena tidak ada pasangan titik
yang pas.
glBegin(GL_LINES);
glVertex2f(0,50);
glVertex2f(20,0);
glVertex2f(-20,0);
glEnd();
}
9. Program ini hanya menghasilkan garis dari titik (0,50) sampai titik (20,0).
Sedangkan titik (-20,0) tidak digambar karena tidak mempunyai pasangan.
Cara lain untuk membuat segitiga dapat menggunakan perintah
glBegin(GL_LINE_STRIP) dengan menuliskan kembali titik yang pertama
seperti proram di bawah ini, lebih jauh lagi akan dibahas di bab selanjutnya.
glVertex2f(0,50);
glVertex2f(20,0);
glVertex2f(-20,0);
glVertex2f(0,50);
glEnd();
}
24
10. Menggambar efek hujan, sama seperti menggambar bintang dengan titik acak,
tetapi yang obyeknya berupa garis diagonal. Program untuk menggambar efek
hujan ini adalah:
float xp,yp;
for(int i=0;i<300;i++){
xp=640*(float)rand()/RAND_MAX;
yp=480*(float)rand()/RAND_MAX;
glColor3f(1,1,1);
glBegin(GL_LINES);
glVertex2f(xp,yp);
glVertex2f(xp+8,yp-8);
glEnd();
}
}
Hasilnya adalah:
Gambar 2.7. Efek Hujan

Derasnya hujan dapat diatur dengan memperbanyak jumlah garis yang digambar atau
membuat garisnya lebih panjang. Sedangkan arah gerakan air hujan dapat diatur dengan
25
operasi penjumlahan atau pengurangan dari masing-masing nilai x dan nilai y pada setiap
garis. Permainan sudut akan menjadi lebih baik karena bisa mengubah arah hujan menjadi
lebih realistik dengan memberikan afek angin.
11. Membuat segitiga pada contoh 2.6 di atas berwarna merah dengan latar belakang
putih dapat dilakukan dengan menambahkan glColor3f(1,0,0); sebelum membuat
segitiga sebagai berikut. Sebelumnya ubah perintah glClearColor(0.0, 0.0, 0.0, 0.0);
pada bagian main() menjadi glClearColor(1.0, 1.0, 1.0, 0.0);
glColor3f(1,0,0);
glVertex2f(0,50);
glVertex2f(20,0);
glVertex2f(-20,0);
glVertex2f(0,50);
glEnd();
}
Contoh hasilnya adalah seperti gambar 2.8.

12. Membuat segitiga pada contoh 2.6 di atas berwarna coklat dapat dilakukan dengan
mengganti perintah glColor3f(1.0.0); menjadi glColor3f(0.7,0.4,0.1); sebelum
membuat segitiga.
26
Gambar 2.8. Segitiga berwarna merah
13. Membuat grid dengan warna biru (0,0,1) dan sumbu koordinat.dengan warna biru
muda (0,1,1). Jarak antar grid adalah 10 satuan dengan batas sumbu koordinat (-
100,100) untuk sumbu X dan (-100,100) untuk sumbu Y seperti gambar berikut:
(Sebelumnya ubah latar belakang menjadi hitam dengan glClearColor(0.0, 0.0,
0.0, 0.0); pada bagian main().
Gambar 2.9. Grid dan sumbu koordinat

Listing program pada userdraw() adalah sebagai berikut:
void userdraw(){
27
glColor3f(0,0,1);
for(float x=-100;x<=100;x+=10){
glBegin(GL_LINES);
glVertex2f(x,-100);
glVertex2f(x,100);
glEnd();
glBegin(GL_LINES);
glVertex2f(-100,x);
glVertex2f(100,x);
glEnd();
}
glColor3f(0,1,1);
glBegin(GL_LINES);
glVertex2f(-100,0);
glVertex2f(100,0);
glEnd();
glBegin(GL_LINES);
glVertex2f(0,-100);
glVertex2f(0,100);
glEnd();
}
E. TUGAS
Membuat rumah 2D tampak depan ( yang telah didesain di tugas pendahuluan) dengan
menggunakan 10 pola pada fungsi primitive openGL, contoh pada gambar.
Gambar 2.10. Tugas Rumah 2D dengan Fungsi Primitif openGL
F. LAPORAN RESMI
28
1. Buatlah kesimpulan dari masing-masing percobaan program grafika yang sudah
dilakukan !
2. Demo dan kumpulkan listing program beserta penjelasan tugas workshop
menggambar dengan fungsi primitif.
29
PRAKTIKUM 3
OBYEK 2D
A. TUJUAN
diharapkan mampu:
1. Mendefinisikan obyek 2D
2. Mendefinisikan warna obyek 2D
3. Membuat fungsi menggambar obyek 2D
4. Membuat gambar obyek 2D lebih baik
B. DASAR TEORI
B.1. Obyek Grafik 2 Dimensi
Obyek grafik 2 dimensi sebenarya adalah titik, mengingat bahwa grafik 2 dimensi
adalah kumpulan dari titik-titik yang dihubungkan sehingga membentuk obyek gambar.
Berdasarkan sistem koordinat kartesian, titik dinyatakan dengan properti lokasi x dan y,
yang dituliskan dengan P(x,y). Sehingga tipe data titik dituliskan dengan:
typedef struct {
float x,y;
} point2D_t;
Untuk mendefinisikan variable titik dapat dilakukan dengan menuliskan:
point2D_t p;
Gambar dalam 2D adalah kumpulan titik-titik 2D yang dihubungkan menggubanak garis
atau polygon sesuai dengan urutan titik-titik tersebut seperti terlihat pada gambar 3.1
berikut:
P2
P1 P3
P5
P4
P6
P10 P7
P9 P8
Gambar 3.1. Definisi obyek grafik 2D
30
Untuk menyatakan sebuah obyek gambar yang terdiri dari sekumpulan titik dapat
dituliskan dalam bentuk array sebagai berikut:
point2D_t gambar[100];
Dari pernyataan di atas, gambar terdiri dari maksimum 100 titik. Jumlah titik seharusnya
didefinisikan dulu.
B.2. Menggambar Polyline
Polyline adalah sebuah bentuk gambar yang terdiri dari kumpulan garis yang
dihubungkan satu dengan yang lain secara berurutan, dengan tidak menyambungkan
kembali ke titik awalnya, seperti gambar 3.2 di bawah ini.
Gambar 3.2. Contoh polyline

Fungsi untuk membuat polyline menggunakan OpenGL dapat dituliskan dengan:
void drawPolyline(point2D_t p[],int n){
for(int i=0;i<n;i++){
glVertex2f(p[i].x,p[i].y);
}
glEnd();
}
Dan untuk menggambar Polyline dari 3 titik (0,50), (30,0) dan (-30,0) adalah sebagai
berikut:
point2D_t p[3]={{0,50},{30,0},{-30,0}};
drawPolyline(p,3);
B.3. Menggambar Polygon

Seperti halnya Polyline, Polygon juga menggambar obyek dari kumpulan garis yang
menghubungkan titik-titik secara terurut dengan dihubungkan kembali dengan titik
awalnya.
31
Gambar 3.3. Polygon
Fungsi membuat polygon sama seperti fungsi polyline dengan menambahkan titik awal di
akhirnya sebagai berikut:
void drawPolygon(point2D_t p[],int n){
}
glVertex2f(p[0].x, p[0].y);
glEnd();
}
Contoh :
Untuk membuat segitiga dari (0,50), (30,0) dan (-30,0) pada userdraw dapat dilakukan
dengan:
point2D_t p[3]={{0,50},{30,0},{-30,0}};
drawPolygon(p,3);
B.4. Membuat Polygon Berwarna

Pada pembahasan sebelumnya semua grafik yang dihasilkan berapa garis,
pembahasan berikut adalah bagaimana membuat gambar yang di-blok dengan warna. Hal
ini merupakan salah satu dasar dari grafika komputer untuk memberi warna pada setiap
obyek gambar yang dihasilkan. Karena warna adalah satu elemen grafik yang dapat
menarik perhatian pengguna. Grafik yang dihasilkan dengan warna-warna yang indah
akan menambah daya tarik pengguna untuk menikmatinya. Pemilihan warna tentu
menjadi salah satu syarat baik tidaknya sebuah obyek grafik yang ditampilkan.
Untuk membuat blok warna pada polygon, sebelumnya perlu didefinisikan struktur
data untuk warna dengan format RGB sebagai berikut:
typedef struct {
float r, g, b;
} color_t;
32
Kemudian buatlah fungsi untuk mengubah/melakukan setting warna sebagai berikut:
(1) Fungsi dengan lanngsung memasukkan nilai r,g,b
void setColor(float r, float g, float b){
glColor3f(r,g,b);
}
(2) Fungsi dengan tipe data color_t
void setColor(color_t col){
glColor3f(col.r, col.g, col.b);
}
Kemudian membuat fungsi untuk memberi warna pada bagian dalam polygon dengan
menambahkan fungsi berikut:
void fillPolygon(point2D_t p[],int n,color_t col){
setColor(col);
}
glEnd();
}
B.5. Membuat Polygon Bergradiasi

Sama halnya dengan pemberian wana pada polygon, teknik gradiasi warna sangat
dibutuhkan dalam grafika komputer untuk dapat menghasilkan gambar yang lebih nyata.
Funngsi untuk pemberian warna gradiasi pada polygon (gradatePolygon) hampir sama
dengan fillPolygon tetapi pemberian warna dilakukan pada setiap titik atau dengan kata
lain setiap titik mempunyai warna yang berbeda. Sehingga warna yang diberikan dalam
bentuk array.
void gradatePolygon(point2D_t p[], int n, color_t col[]){
setColor(col[i]);
33
}
glEnd(); }
Siapkan definisi struktur data untuk obyek 2D dan color_t. Begitu pula fungsi untuk
menggambar polyline(),polygon(),fillpolygon(),dan gradatepolygon() pada program
obyek 2D yang akan dibuat.
D. PERCOBAAN
1. Membuat gambar fungsi sinus dari 0o sampai dengan 360o, dapat dilakukan dengan
terlebih dahulu mengubah sistem koordinat pada main() dengan:
gluOrtho2D(0., 360., -1.1, 1.1);
Dan tambahan header file math.h untuk mengaktifkan fungsi-fungsi trigonometri sebagai
fungsi dalam matematika.
#include <math.h>
Kemudian di userdraw dituliskan:
point2D_t p[360];
for(int i=0;i<360;i++){
p[i].x=(float)i;
p[i].y=(float)sin((float)i/57.3);
}
drawPolyline(p,360);
}
Hasil dari program di atas adalah seperi gambar 3.4 di bawah ini.
Gambar 3.4. Contoh Fill Polygon
34
2.Program berikut membuat segitiga berwana merah dengan titik-titk sudut (0,50), (30,0)
dan (-30,0)
point2D_t p[3]={{0,50},{30,0},{-30,0}};
color_t merah={1,0,0};
fillPolygon(p,3,merah);
Hasil dari program ini adalah seperti gambar 3.5 berikut.
gambar 3.5. Contoh Fill Polygon

3.Program berikut membuat segitiga berwana gradiasi merah, hijau dan biru dengan titik-
titik sudut (0,50), (30,0) dan (-30,0)
point2D_t p[3]={{0,50},{30,0},{-30,0}};
color_t warna[3]={{1,0,0},{0,1,0},{0,0,1}};
gradatePolygon(p,3,warna);
Hasil dari program ini seperti pada gambar 3.6 di bawah ini.
Gambar 3.6. Contoh gradatePolygon
E. TUGAS
1. Buatlah program menggambar fungsi sinus dari 0o sampai dengan 360o dengan
menambahkan fungsi grid dan sumbu koordinat, seperti pada gambar 3.7.
35
Gambar 3.7. Fungsi Sinus dengan Grid
2. Buatlah gambar langit. Atur sumbu koordinat menjadi (0,640,0,480) dengan
mengganti nilai pada gluOrtho2D. Kemudian buat kotak sebesar windowsnya, dan
definisikan warna yang bersesuaian. Output dari program seperti pada gambar 3.8.
biru biru
putih putih
Gambar 3.8. Menggambar langit
F. LAPORAN RESMI
dilakukan !
2. Demo dan kumpulkan listing program beserta penjelasan tugas workshop
menggambar obyek 2D.
36
PRAKTIKUM 4
OBYEK PUTAR 2D
A. TUJUAN
diharapkan mampu:
1. Mengerti dan dapat Membuat Obyek Lingkaran
2. Mengerti dan dapat Membuat Obyek Ellipse
3. Mengerti dan dapat Membuat Obyek Polar
B. DASAR TEORI
B.1. Membuat Lingkaran
Secara definisi, lingkaran adalah segi banyak. Jadi persoalannya disini adalah
bagaimana membuat sebuah bangun segi banyak, dimana setiap segi mempunyai sudut
yang sama besar. Untuk mempermudah terlebih dahulu diperhatikan sistem koordinat
sudut dimana setiap titik dituliskan dengan P(r,a), r adalah jari-jari atau jarak dengan titik
pusat dan a adalah sudut.
P(r,a)
Gambar 4.1. Sistem koordinat sudut
37
Konversi sistem koordinat sudut menjadi sistem koordinat Kartesian adalah sebagai
berikut.
x  r. cos(a )
y  r. sin( a )
Lingkaran adalah suatu bangun yang pada setiap sudutnya, jarak dengan titik pusat selalu
sama r.
B.2 Membuat Ellipse
Ellipse sebenarnya hampir sama dengan lingkaran, hanya saja bedanya adalah pada
jari-jari, jika pada lingkaran hanya mengenal satu jari-jari maka ellipse mempunyai dua
jari-jari a (arah horisontal) dan b (arah vertikal). Hal inilah yang membuat bentuk ellipse
menjadi lonjong.
Gambar 4.2. Ellips

Persamaan ellips dalam koordinat polar adalah:
x  a. cos( )
y  b. sin( )
B.3. Membuat Obyek Polar

Obyek polar merupakan obyek benda putar dengan fungsi jari-jari terhadap sudut
r=f(). Perlu proses transformasi dari koordinat polar menjadi koordinat kartesian untuk
dapat menggambarkannya pada layar komputer sebagi berikut:
r  f ( )
x  r cos( )
y  r sin( )
Beberapa bentuk obyek polar,pada tabel 4.1 berikut :
38
Tabel 4.1. Fungsi Polar dan Hasil Menggambar Obyek Polar
Fungsi Hasil
Rose 4 daun:
r  sin 2 
Rose 3 daun:
r  sin 3 
Kardioda:
r  1  cos( )
Spiral:
r 
39
Fungsi Hasil
Lingkaran:
ra
1. Tulislah persamaan lingkaran koordinat kartesian (x,y) dari kordinat polar!
2. Tulislah persamaan ellipse koordinat kartesian (x,y) dari kordinat polar!
3. Tulislah persamaan koordinat kartesian (x,y) dari 4 (empat) obyek polar lainnya!
40
D. PERCOBAAN
1. Menggambar lingkaran pada userdraw() memanggil drawCircle(jari-jari, jumlah_titik),
misalkan bila dituliskan drawCircle(30,40) berarti membuat lingkaran dengan jari-jari
30 dan jumlah titik 40.
void drawCircle(float r, int n){
point2D_t p[360];
float a=6.28/n;
p[i].x=r*(float)cos((float)i*a);
p[i].y=r*(float)sin((float)i*a);
}
drawPolygon(p,n);
}
Pada bagian userdraw tambahkan :
setColor(1,0,0);
drawCircle(40,30);
}
Output program dapat dilihat pada gambar 4.3.
Gambar 4.3. Obyek Lingkaran
2. Membuat 2 lingkaran berwarna merah dan biru dengan latar belakang putih, jari-
jarinya masing-masing 40 dan 30, dan titik pusatnya masing-masing di (-50,0) dan
(50,0), sebelumnya ganti perintah glClearColor(0.0, 0.0, 0.0, 0.0); menjadi
glClearColor(1.0, 1.0, 1.0, 0.0); dan sumbu koordinat diganti menjadi (-320,320,-
41
340,340) agar mempunyai skala yang sama antara x dan y dengan cara mengganti
gluOrtho2D(-100.,100., -100.,100.); menjadi gluOrtho2D(-320.,320.,-240., 240.);
void drawCircle(float r, int n, float x, float y){
point2D_t p[360];
float a=6.28/n;
p[i].x=x+r*(float)cos((float)i*a);
p[i].y=y+r*(float)sin((float)i*a);
}
drawPolygon(p,n);
}
Pada bagian userdraw tambahkan :
setColor(1,0,0);
drawCircle(40,30);
}
Output program dapat dilihat pada gambar 44.
Gambar 4.4. Pengaturan posisi dan besar lingkaran

3. Membuat gambar 3 lingkaran yang mempunyai:
 jari-jari masing-masing 30, 40 dan 50
 titik pusatnya masing-masing di (-100,0), (0,0) dan (100,0)
 warna masing-masing merah, biru dan kuning.
 Setiap lingkaran dibangun oleh 40 titik.
Dengan sistem koordinatnya:gluOrtho2D(-320,320,-240,240); Fungsi untuk membuat
warna pada lingkaran yang diletakkan pada pusat koordinat.
42
void fillCircle(float r, int n, color_t col){
point2D_t p[360];
float a=6.28/n;
p[i].x=r*(float)cos((float)i*a);
p[i].y=r*(float)sin((float)i*a);
}
fillPolygon(p,n,col);
}
Fungsi untuk membuat warna pada lingkaran yang diletakkan pada koordinat (x,y).
void fillCircle(float r, int n, float x, float y, color_t col){
point2D_t p[360];
float a=6.28/n;
p[i].x=x+r*(float)cos((float)i*a);
p[i].y=y+r*(float)sin((float)i*a);
}
}
Pembanggilan fungsi di userdraw:
color_t biru={0,0,1};
color_t kuning={1,1,0};
fillCircle(30,40,-100,0,merah);
fillCircle(40,40,0,0,biru);
fillCircle(50,40,100,0,kuning);
}
43
Gambar 4.5. Lingkaran berwarna
4. Membuat 3 buah ellips dengan:
 Jari-jari (80,100), (20,10), dan (20,10)
 Diletakkan di (0,0), (100,0) dan (-100,0) mempunyai warna merah, hijau dan biru
void drawEllips(float a, float b, int n){
point2D_t p[360];
float t=6.28/n;
p[i].x=a*(float)cos((float)i*t);
p[i].y=b*(float)sin((float)i*t);
}
drawPolygon(p,n);
}
Untuk membuat ellips dengan titik pusat (x,y) maka fungsi di atas diubah menjadi:
void drawEllips(float a, float b, int n, float x, float y){
point2D_t p[360];
float t=6.28/n;
p[i].x=x+a*(float)cos((float)i*t);
p[i].y=y+b*(float)sin((float)i*t);
}
drawPolygon(p,n);
}
44
Untuk memberi warna pada bagian dalam ellips, diperlukan fungsi fillPolygon sebagai
penggati fungsi drawPolygon, tetapi masih membutuhkan tambahan warna pada
fungsinya dan dituliskan sebagai berikut:
void fillEllips(float a, float b, int n, float x, float y,
color_t col){
point2D_t p[360];
float t=6.28/n;
p[i].x=x+a*(float)cos((float)i*t);
p[i].y=y+b*(float)sin((float)i*t);
}
}
Program pada userdraw adalah:
void userdraw(void)
{
color_t hijau={0,1,0};
color_t biru={0,0,1};
fillEllips(80,100,30,0,0,merah);
fillEllips(20,10,30,100,0,hijau);
fillEllips(20,10,30,-100,0,biru);
}
Gambar 4.6. Lingkaran berwarna
45
5. Membuat kardioda sebelum menggambar diperlukan perhitungan nilai r  1  cos  
atau r  . Menggambar koordinat polar diperlukan definisi r sebagai fungsi dari sudut
atau r sebagai array. Nilai r inilah yang menghasilkan bentuk-bentuk koordinat polar.
Fungsi untuk menggambar koordinat polar adalah:
void drawPolar(float r[], int n){
point2D_t p[360];
float t=6.28/n;
p[i].x=r[i]*(float)cos((float)i*t);
p[i].y=r[i]*(float)sin((float)i*t);
}
drawPolygon(p,n);
}
Program pada userdraw adalah:
void userdraw(void)
{
// create Polar Function
float r[360];
float t=6.28/360;
for(int i=0;i<360;i++){
r[i]=150*(1+cos(i*t));
}
// draw Polar Object
setColor(0,0,0);
drawPolar(r,360);
}
E. TUGAS
1. Buatlah program menggambar bintang segi-5. Gambar bintang ini mempunyai 10 titik
yang terletak pada 2 buah lingkaran r1 dan r2 secara bergantian. Sehingga dapat dituliskan
dengan: r[10]  {r1 , r2 , r1 , r2 , r1 , r2 , r1 , r2 , r1 , r2 } Misalkan r1=50 dan r2=100 maka:
r[10]  {50,100,50,100,50,100,50,100,50,100}
46
r1
r2
Gambar 4.7. Sketsa gambar bintang dengan 2 lingkaran
F. LAPORAN RESMI
dilakukan !
2. Demo dan kumpulkan listing program beserta penjelasan tugas menggambar dengan
fungsi obyek polar!
47
PRAKTIKUM 5
MELAKUKAN PENGESETAN PERSEPTIVE VIEW DAN
VIEW PORT FUNGSI TRANSFORMASI
A. TUJUAN
diharapkan mampu:
1. Mengerti dan dapat Melakukan Pengesetan Persepektif View
2. Mengerti dan dapat Melakukan Pengesetan View Port
3. Mengerti dan dapat Melakukan Transformasi Sumbu Koordinat
B. DASAR TEORI
B.1. Sistem Koordinat Layar
Sistem koordinat layar berbentuk 2D kartesian, dengan pusat (0,0) pada pojok kiri
bawah (OpenGL). Piksel didefinisikan pada interseksi kolom dan baris. Didefinisikan
relatif pada display layar.
Gambar 3.1. Sistem Koordinat Layar

Sistem koordinat layar, pada kenyataannya tidak mudah digunakan karena :
1. Ukuran sistem koordinat layar beraneka ragam
48
Gambar 3.2. Contoh representasi 2 sistem koordinat layar yang berbeda
2. Orang lebih suka menggambar berdasarkan ukuran sebenarnya
Gambar 3.3. Gambar rumah dengan ukuran sebenarnya (feet)
Obyek gambar dalam sistem koordinat riil seharusnya dapat dinyatakan dalam
sistem koordinat layar yang terpisah.
B.2. Menggambar Obyek 2D

Langkah-langkah menggambar obyek 2D sebagai berikut :
1. Obyek gambar dalam sistem koordinat riil
2. Definisikan world window
3. Definisikan screen window
4. Mapping world window ke screen window
49
Gambar 3.4. Mapping World Window ke Screen Window
B.2.1. Mendefinisikan World Window

World window adalah sebuah daerah kotak di dunia yang
ditampilkan ( sistem koordinat world) , perhatikan gambar 3.5.
Gambar 3.5. World Window

Fungsi OpenGL: 2D Orthogonal Projection,
gluOrtho2D(W_L ,W_R,W_B,W_T)
50
B.2.2. Mendefinisikan Viewport
Viewport window adalah sebuah daerah kotak di layar yang ditampilkan ( sistem
koordinat layar) , perhatikan gambar 3.6.
Gambar 3.6. Mapping World Window ke Viewport

Fungsi OpenGL: 2D Orthogonal Projection,
glViewport(V_L ,V_R,V_B,V_T)
B.2.3. Mapping World Window ke Vewport Window

Mapping World Window ke Vewport Window dapat dilakukan hanya dengan
pemanggilan dua fungsi OpenGL yaitu:
gluOrtho2D(-1, 1, -1, 1);

glViewport(50, 50, 350, 250);
Perhatikan gambar 3.7.
Gambar 3.7. Mapping World Window ke Vewport Window
51
B.2.4. Rasio Lebar R dan L
Pada Mapping World Window ke Vewport Window rasio lebar R dan L harus
sama, sehingga koordinat sx didapatkan dengan formula :
(x-W_L)/(W_R-W_L)=(sx-V_L)/(V_R-V_L)
sx=(x-W_L)(V_R-V_L)/(W_R-W_L)+V_L
Perhatikan gambar 3.8. untuk menjaga kesamaan rasio lebar R dan L:
Gambar 3.8. Kesamaan Rasio Lebar R dan L
B.2.5. Rasio Tinggi T dan B
Pada Mapping World Window ke Vewport Window rasio tinggi T dan B harus
sama, sehingga koordinat sx didapatkan dengan formula :
(y-W_B)/(W_T-W_B)=(sy-V_B)/(V_T-V_B)
sy=(y-W_B)(V_T-V_B)/(W_R-W_B)+V_B
Perhatikan gambar 3.9. untuk menjaga kesamaan rasio tinggi T dan B:
Gambar 3.9. Kesamaan Rasio Tinggi T dan B
52
B.3. Transformasi di OpenGL
Transformasi vertex di OpenGL sebagai berikut gambar 3.10.:
Gambar 3.10. Tahapan Transformasi Vertex di OpenGL

Untuk menggambar sebuah vertex dengan tiga kali transformasi di OpenGL seperti
potongan program berikut:
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();// C = I
glMultMatrix(N); // C = N
glMultMatrix(M); // C = NM
glMultMatrix(L); // C = NML
glBegin(GL_POINTS);
glVertex3f(v); // N(M(Lv))
glEnd();
Pernyataan yang ditulis paling akhir akan dioperasikan pertama kali, sedangkan
pernyataan yang ditulis di awal dioperasikan terakhir.
Sedangkan matrik transformasi terdiri dari tiga operasi dasar yaitu :
1. Translasi
2. Scaling
3. Rotasi
53
B.3.1. Translasi
Translasi adalah proses perpindahan posisi dari obyek gambar. Formulasi dari
proses translasi dapat dijelaskan sebagai berikut:
P’(x’,y’)
Y
dy
P(x,y)
dx
Gambar 3.11. Proses translasi

Formulasi translasi adalah:
x '  x  dx
y '  y  dy
Bentuk matrik dari proses transformasi di atas dapat dituliskan dengan:
 x '  1 0 dx  x 
 y '  0 1 dy  y 
    
 1  0 0 1   1 
Sehingga matrik transformasi dari proses transalasi adalah:

1 0 dx
0 1 dy 
 
0 0 1 
Untuk membuat fungsi yang menghasilkan matrik translasi ini, terlebih dahulu dibuat
fungsi untuk menghasilkan matrik identitas
1 0 0 
0 1 0
 
0 0 1
OpenGL mempunyai fungsi translasi:
void glTranslatef(dx,dy,dz)
54
Gambar 3.12. glTranslatef(0.,2.,-2)
B.3.2. Scaling
Scaling adalah proses membesarkan/mengecilkan jarak titik sebesar m, yang
ditunjukkan oleh gambar 3.12 berikut:
P’(x’,y’)
P(x,y)
Gambar 3.13. Proses scaling

Proses scaling dapat dirumuskan dengan:
x'  m x x
y'  m y y
Secara bentuk matrik formulasi di atas dapat dituliskan dengan:

 x '  m x 0 0  x 
 y '   0 my 0  y 
    
 1   0 0 1  1 
55
Dan matrik transformasi dari proses scaling adalah sebagai berikut:
m x 0 0
0 my 0
 
 0 0 1
OpenGL mempunyai fungsi scaling:

glScalef(sx,sy,sz)
Gambar 3.14. glScalef(2.0,-0.5,1.0)

Melakukan skala pada obyek sebesar x,y,z kali sesuai dengan sumbu x,y dan z masing-
masing
B.3.3. Rotasi
Rotasi adalah proses memutar titik sebesar ao dengan titik pusat putaran berada
pada titik pusat koordinat, yang ditunjukkan oleh gambar 3.13 berikut:
Y
P’(x’,y’)
a P(x,y)
X
Gambar 3.15. Proses rotasi
Proses rotasi dapat dirumuskan dengan:
 x '  cos(a ) sin( a ) 0  x 

 y '   sin( a ) cos(a ) 0  y 
    
 1   0 0 1  1 
56
Dan matrik transformasi dari proses rotasi adalah sebagai berikut:
 cos(a ) sin( a ) 0
  sin( a ) cos(a ) 0
 
 0 0 1
OpenGL mempunyai fungsi rotasi:

void glRotatef*(sudut,x,y,z)
Gambar 3.16. glRotatef(45.,0.,0.,0.,1.)

Merotasi obyek dengan arah sudut berlawanan arah jarum jam (counterclockwise) dari
posisi awal (x,y,z) diputar sebesar sudut.
B.3.4. Matrik Identitas

Semua matrik transformasi dibentuk dari matrik indentitas, untuk membuat fungsi yang
menghasilkan matrik identitas OpenGL mempunyai fungsi yaitu:
glLoadIdentity()
1. Tulislah kembali fungsi-fungsi untuk world window dan viewport window

2. Tulislah kembali formula rasio lebar dan tinggi dari world window dan viewport
window
3. Tulislah kembali tahapan transformasi pada OpenGL
4. Tulislah fungsi OpenGL untuk translasi, rotasi, scaling dan matrik identitas
57
D. PERCOBAAN
1. Menggambar segiempat (fungsi GL_QUAD) pada sistem koordinat world window
dan viewport window. Ketikkan program ini pada userdraw().
void DrawQuad()
{ glViewport(50,50,100,100);
glLoadIdentity();
gluOrtho2D(-1,1,-1,1);
glBegin(GL_QUADS);
glVertex2f(-0.5,-0.5);
glVertex2f(0.5,-0.5);
glVertex2f(0.5,0.5);
glVertex2f(-0.5,0.5);
glEnd();
}
Amati output akhir yang ditampilkan. Buat kesimpulan tentang gluOrtho2D() dan
glViewport().
2. Lakukan modifikasi dari DrawQuad() pada percobaan no 1. Sedemikian hingga

output Quad yang ditampilkan berupa bujur sangkar 1x1. Modifikasi dilakukan
dengan dua cara:
1. Merubah kesamaan rasio lebar dan tinggi dari world window (gluOrtho2D)
2. Merubah kesamaan rasio lebar dan tinggi dari screen window (glViewport)
58
3. Program userdraw() untuk memindahkan obyek segiempat dengan titik-titik
(x1,y1)=(10.,10.) dan (x2,y2)=(100.,100.),untuk menggambar gunakan fungsi
glRectf(x1,y1,x2,y2) atau fungsi glBegin(GL_POLYGON). Lakukan translasi
sebesar 110 satuan ke arah sumbu X dan 110 satuan ke arah sumbu Y,gunakah
fungsi glTranslatef(110.,110.,0.). Jika diketahui gluOrtho2D(0.,400.,0.,400.).
Perhatikan potongan program pada userdraw() berikut :
void userdraw(void)
{
glColor3f(1.,1.,0.); //Rect Kuning=Rect hasil translasi
glRectf(10.,10.,100.,100.);
glColor3f(1.,0.,0.);
glTranslatef(110., 110., 0.);//Rect Merah=Rect hasil translasi
glRectf(10.,10.,100.,100.);
}
Hasil dari program di atas seperti pada gambar 3.17. berikut :
Gambar 3.17. Contoh Hasil Translasi
59
4. Program userdraw() untuk mengubah skala lebar 0.5 kali dan tinggi 0.5 kali pada
obyek segiempat dengan titik-titik (x1,y1)=(10.,10.) dan
(x2,y2)=(100.,100.),untuk menggambar gunakan fungsi glRectf(x1,y1,x2,y2) atau
fungsi glBegin(GL_POLYGON). Lakukan dengan fungsi glScalef(0.5,0.5.,0.).
Jika diketahui gluOrtho2D(0.,400.,0.,400.). Perhatikan potongan program pada
userdraw() berikut :
void userdraw {
glRectf(10.,10.,100.,100.);
glColor3f(1.,0.,0.); //R=Scale
glScalef(0.5,0.5, 0.);
glRectf(10.,10.,100.,100.);
}
Hasil dari program di atas adalah seperti gambar 3.18 a. Amati hasilnya,sumbu
koordinat x dan y akan di scale 0.5 dari asal. Tambahkan glTranslatef((30., 25., 0.)
sebelum fungsi glScalef() akan didapatkan hasil gambar 3.15 b. Buatlah
kesimpulan dari hasil fungsi glScalef() !
Gambar 3.18. a. Contoh Hasil Scaling b. Contoh Hasil Translasi Scaling
5. Program userdraw() untuk mengubah rotasi sb x 450 (counterclockwise) obyek

persegi panjang dengan titik-titik (x1,y1)=(10.,10.) dan (x2,y2)=(50.,100.),untuk
menggambar gunakan fungsi glRectf(x1,y1,x2,y2) atau fungsi
glBegin(GL_POLYGON). Lakukan dengan fungsi glRotatef(45.,0.,0.,1.). Jika
diketahui gluOrtho2D(0.,400.,0.,400.). Perhatikan potongan program pada
userdraw() berikut :
60
void userdraw(void)
{
glRectf(10.,10.,50.,100.);
glTranslatef(70., 100., 0.);
glRotatef(45., 0., 0.,1.);
glRectf(10.,10.,50.,100.);
}
Hasil dari program di atas adalah seperti gambar 3.19 a,amati hasilnya,sumbu
koordinat x akan diputar 450 dari sumbu x asal. Tambahkan glTranslatef((70., 100., 0.)
sebelum fungsi glRotatef() akan didapatkan hasil gambar 3.19 b. Buatlah kesimpulan dari
hasil fungsi glRotatef() !
Gambar 3.19. a. Contoh Hasil Rotasi 450 b. Contoh Hasil Translasi Rotasi 450
6. Program userdraw() untuk menggambar segitiga sebanyak 24 buah dengan rotasi
150 dari segitiga sebelumnya. Agar gambar yang segitiga yang dihasilkan tidak
mempunyai sumbu koordinat yang berbeda setelah di rotasi lakukan translasi
sumbu koordinat kembali ke posisi x,y,z = (0.,0.,0.).
void drawTriangle()
{ glBegin(GL_TRIANGLES);
glVertex2f(-30.,0.);
glVertex2f(30.,0.);
glVertex2f(0.,100.);
glEnd();
}
61
void userdraw(void)
{
int i;
drawTriangle();
for (i=0; i<24; i++) {
glRotatef(-15.*(i+1), 0., 0.,1.);
glTranslatef(0., 0., 0.);
drawTriangle();
}
}
Gambar 3.20 Hasil Rotasi dan Translasi dari Segitiga Berulang
E. TUGAS
1. Buatlah program user draw untuk menggambar sarang laba-laba yang dibuat dari
segitiga yang diputar berkali-kali. Catatan : gunakan fungsi transformasi glRotatef
(s,0.,0.,1.), dimana s adalah sudut 00 s/d 1800 dengan perubah 60. Output program
menghasilkan gambar 3.21.
62
Gambar 3.21. Sarang Laba-Laba dari Segitiga
F. LAPORAN RESMI
dilakukan !
2. Demo dan kumpulkan listing program beserta penjelasan tugas menggambar dengan
fungsi trasformasi
63
PRAKTIKUM 6
FUNGSI KEYBOARD DAN MOUSE
A. TUJUAN
diharapkan mampu:
1. Mengenal Fungsi Callback Keyboard dan Mouse
2. Mengerti dan dapat Membuat Program dengan fungsi glutKeyboardFunc()
3. Mengerti dan dapat Membuat Program dengan fungsi glutMouseFunc()
B. DASAR TEORI
B. 1. Event Handling di OpenGL
OpenGL menyediakan fungsi yang didefinisikan oleh user dan dipanggil pada saat
ada event yang bersesuaian. OpenGL memonitor peralatan input, ketika ada sesuatu yang
terjadi,misalkan saat mouse down,key press,dan lain-lain. Pada tabel 4.1 adalah beberapa
event yang dicek oleh OpenGL.
Tabel 4.1. Event di OpenGL
Event Contoh Fungsi Callback OpenGL
Keypress KeyDown glutKeyboardFunc
KeyUp
Mouse leftButtonDown glutMouseFunc
leftButtonUp
Motion With mouse press glutMotionFunc
Without glutPassiveMotionFunc
Window Moving glutReshapeFunc
Resizing
System Idle glutIdleFunc
Timer glutTimerFunc
Software What to draw glutDisplayFunc
Fungsi Callback GLUT adalah fungsi yang berjalan saat ada kejadian (event-driven).
Program-program yang menggunakan window untuk input/output,menunggu sampai ada
kejadian dan kemudian mengeksekusi beberapa fungsi yang didefinisikan sebelumnya
berdasarkan input dari user. Kejadian yang dimaksud : key press,mouse button press dan
64
release,window resize,dan lain-lain. Program OpenGL yang dibuat akan berjalan tak
terbatas (infinite loop). Berikut adalah contoh coding program menggunakan input
OpenGL. Pembahasan fungsi Callback OpenGL pada praktikum 4 ini akan difokuskan
pada pengecekan adanya kejadian mouse motion dan kejadian pada penekanan keyboard.
int main( intargc, char** argv)
{
glutInit(&argc, argv);
glutInitDisplayMode( GLUT_RGB || GLUT_SINGLE );
glutInitWindowSize( 250, 250 );
glutInitWindowPosition( 100, 100 );
glutCreateWindow(argv[0]);
init ();
glutDisplayFunc( display );
glutReshapeFunc (reshape );
glutMouseFunc( mouse );
glutMotionFunc( motion );
glutKeyboardFunc( keyboard );
glutMainLoop();
return 0;
}
B. 2. Mendefinisikan Event Keyboard

OpenGL mempunyai fungsi callback pada saat ada event keyboard :
void glutKeyboardFunc
(void (*func)(unsigned char key, int x, int y));
Func adalah mencatat fungsi yang dipanggil ketika sebuah tombol keyboard di tekan.
Parameter key mengembalikan nilai karakter ascii dari tombol keyboard yang ditekan.
Koordinat x,y adalah posisi pointer mouse saat keyboard ditekan,yang diukur dari pojok
kiri atas window. Sedangkan x dan y menyatakan lokasi (di window : koordinat relatif)
dari pointer ketika kejadian key ditekan.
Fungsi OpenGL callback yang lain untuk event adanya keyboard up (pelepasan tombol
keyboard) adalah:
void glutKeyboardUpFunc
65
(void (*func)(unsigned char key, int x, int y));
Func adalah mencatat fungsi yang dipanggil ketika sebuah tombol keyboard selesai
ditekan,diangkat. Parameter key mengembalikan nilai karakter ascii dari tombol keyboard
yang diangkat. Koordinat x,y adalah posisi pointer mouse saat keyboard ditekan,yang
diukur dari pojok kiri atas window. Sedangkan x dan y menyatakan lokasi (di window :
koordinat relatif) dari pointer ketika kejadian key ditekan.
Fungsi OpenGL callback yang lain untuk event adanya penekanan pada tombol khusus
keyboard adalah:
void glutSpecialFunc
(void (*func)(int key, int x, int y));
Func adalah mencatat fungsi yang dipanggil ketika sebuah tombol keyboard khusus yang
ditekan. Parameter key mengembalikan nilai karakter ascii dari tombol keyboard khusus
yang ditekan. Koordinat x,y adalah posisi pointer mouse saat keyboard ditekan,yang
diukur dari pojok kiri atas window. Sedangkan x dan y menyatakan lokasi (di window :
koordinat relatif) dari pointer ketika kejadian key ditekan. Berikut nilai konstanta key dari
tombol keyboard khusus yang ditekan dan fungsi tombolnya di keyboard, tabel 4.2 dan
tabel 4.3.
Tabel 4.2. Konstanta Key dari Tombol Keyboard Khusus
Konstanta Spesial Key Fungsi
GLUT_KEY_F1 Key F1
GLUT_KEY_F2 Key F2
GLUT_KEY_F3 Key F3
GLUT_KEY_F4 Key F4
GLUT_KEY_F5 Key F5
GLUT_KEY_F6 Key F6
GLUT_KEY_F7 Key F7
GLUT_KEY_F8 Key F8
GLUT_KEY_F9 Key F9
GLUT_KEY_F10 Key F10
Tabel 4.3. Konstanta Key untuk Tombol Keyboard Arah

Konstanta Key Arah Fungsi
GLUT_KEY_LEFT Key kiri
66
Konstanta Key Arah Fungsi
GLUT_KEY_UP Key atas
GLUT_KEY_RIGHT Key kanan
GLUT_KEY_DOWN Key bawah
GLUT_KEY_PAGE_UP Key Page Up
GLUT_KEY_PAGE_DOWN Key Page Dwon
GLUT_KEY_HOME Key Home
GLUT_KEY_END Key End
GLUT_KEY_INSERT Key Insert
Fungsi OpenGL yang akan mengembalikan salah satu dari nilai konstanta berikut :
GLUT_ACTIVE_SHIFT, GLUT_ACTIVE_CTRLatau GLUT_ACTIVE_ALT jika
tombol keyboard ini ditekan atau jika ada event mouse yang bekerja.
int glutGetModifiers( )
B. 3. Mendefinisikan Event Mouse

OpenGL mempunyai fungsi callback pada saat ada event mouse :
void glutMouseFunc
(void(*func)(int button,int state,int x,int y));
Func adalah sebuah pointer ke fungsi yang membawa 4 parameter integer. Func
dipanggil oleh OpenGL ketika mouse ditekan atau dilepas (pressed atau released). Button
menyatakan tombol mouse yang ditekan, salah satu dari berikut :
1. GLUT_LEFT_BUTTON
2. GLUT_RIGHT_BUTTON, atau
3. GLUT_MIDDLE_BUTTON
State menyatakan state dari tombol mouse, bernilai salah satunya :
1. GLUT_UP
2. GLUT_DOWN
Sedangkan x dan y menyatakan lokasi (di window : koordinat relatif) dari mouse ketika
kejadian.
Fungsi OpenGL untuk event adanya pergerakan pada mouse (mouse motion) adalah:
glutMotionFunc(void(*fuc)(int x,int y));
67
Func dipanggil oleh OpenGL ketika pointer mouse berpindah di dalam window selama
satu atu beberapa button mouse ditekan. Sedangkan x dan y menyatakan lokasi dari
mouse ketika kejadian.
Fungsi OpenGL untuk pengecekan tidak adanya event pada mouse (mouse motion)
adalah:
glutPassiveMotionFunc(void(*fuc)(int x,int y));
Func dipanggil oleh OpenGL ketika pointer mouse berpindah di dalam window dengan
tidak adanya button mouse yang ditekan. Sedangkan x dan y menyatakan lokasi dari
mouse ketika kejadian.
Fungsi OpenGL untuk event mouse yang berisi state GLUT_ENTERED atau
GLUT_LEFT berdasarkan mouse masuk atau meninggalkan window yaitu:
void glutEntryFunc(void(*func)(int state));
1. Tulislah kembali fungsi-fungsi OpenGL untuk event mouse dan keyboard

2. Tulislah nilai ascii dari tombol keyboard : backspace,enter,escape,dan delete
3. Tulislah kembali table konstanta tombol keyboard khusus dan tombol keyboard arah
D. PERCOBAAN
1. Event Keyboard: glutKeyboardFunc, glutKeyboardUpFunc, dan
glutSpecialFunc
Potongan program dengan fungsi glutMouseFunc(mouse)sebagai berikut :
- Tempatkan pemanggilan fungsi callback keyboard pada main program sbb :
1. glutKeyboardFunc(keyboard);
2. glutKeyboardUpFunc(keyboardup);
3. glutSpecialFunc(diectional_Keys);
4. glutSpecialFunc(special);
- Buat prosedur dengan nama dan parameter yang sama dengan prosedur pada
parameter fungsi callback sbb :
1. void keyboard(unsigned char key, int x, int y)
2. void keyboardup(unsigned char key, int x, int y)
68
3. void directional_Keys(int key, int x, int y)
4. void special(int key, int x, int y)
- Jalankan program,uji coba :
Fungsi callback keyboard : semua tombol keyboard,kecuali tombol directional key dan
tombol Fxx. Pengujian tombol Ctrl,Shift,dan Alt menggunakan fungsi glutGetModifier().
int main(int argc, char *argv[])

{ glutInit(&argc, argv);
glutInitWindowPosition(200, 200);
glutInitWindowSize(400, 400);
glutCreateWindow("GLUT_KEYBOARD_FUNC");
glClearColor(1.,1.,1.,1.);
glutKeyboardFunc(keyboard);
glutMainLoop();
return 0;
}
void keyboard(unsigned char key, int x, int y)

{ switch(key)
{ // Backspace
case 8 :
cout<<"Pressed Backspace"<<endl; break;
// Enter
case 13 :
cout<<"Pressed Enter"<<endl; break;
// Escape
case 27 :
cout<<"Pressed Escape"<<endl; break;
// Delete
case 127 :
cout<<"Pressed Delete"<<endl; break;
default :
cout<<"Pressed key : "<< (char)key <<" at position : ("
<< x <<","<< y <<")"<<endl; break;
69
}//end switch
int mod = glutGetModifiers();
switch(mod)
{
case GLUT_ACTIVE_CTRL :
cout<<"Ctrl Held"<<endl; break;
case GLUT_ACTIVE_SHIFT :
cout<<"Shift Held"<<endl; break;
case GLUT_ACTIVE_ALT :
cout<<"Alt Held"<<endl; break;
}//end switch
}//end void keyboard
Output program dengan fungsi callback glutKeyboardFunc() disajikan pada gambar

4.1.
Gambar 4.1. Output Program glutKeyboardFunc()

Fungsi callback keyboard up sama dengan fungsi callback keyboard sebelumnya,
hanya saya keyboard up akan bekerja pada saat tombol keyboard yang ditekan
sudah diangkat. Pada saat tombol keyboard yang ditekan belum diangkat fungsi
callback yang aktif adalah keyboard.
70
glutKeyboardFunc(keyboard);
glutKeyboardUpFunc(keyboardup);
glutMainLoop();
return 0;
}
void keyboardup(unsigned char key, int x, int y)

{ switch(key)
{ // Backspace
case 8 :
cout<<"Key Backspace Lifted"<<endl; break;
// Enter
case 13 :
cout<<"Key Enter Lifted"<<endl; break;
// Escape
case 27 :
cout<<"Key Escape Lifted"<<endl; break;
// Delete
case 127 :
cout<<"Key Delete Lifted"<<endl; break;
default :
cout<<"Key : "<< (char)key
<<" Lifted at position : ("
<< x <<","<< y <<")"<<endl; break;
}//end switch
}//end void
Output program dengan fungsi callback glutKeyboardUpFunc() disajikan pada gambar

4.2.
71
Gambar 4.2. Output Program glutKeyboardUpFunc()

1. Fungsi callback spesial keyboard : semua tombol keyboard pada tabel 4.2
tombol Fxx
glutSpecialFunc(special);
glutMainLoop();
return 0;
}
void special(int key, int x, int y)

{ switch(key)
{ case GLUT_KEY_F1 :
cout<<"Pressed F1"<<endl;break;
case GLUT_KEY_F2 :
72
case GLUT_KEY_F3 :
case GLUT_KEY_F4 :
case GLUT_KEY_F5 :
case GLUT_KEY_F6 :
case GLUT_KEY_F7 :
case GLUT_KEY_F8 :
case GLUT_KEY_F9 :
case GLUT_KEY_F10 :
case GLUT_KEY_F11 :
case GLUT_KEY_F12 :
}
}
Output program dengan fungsi callback glutSpecialFunc() disajikan pada gambar 4.3.
Gambar 4.3. Output Program glutSpecialFunc()
73
1. Fungsi callback spesial keyboard : pada tabel 4.3 tombol directional key
{
glutInit(&argc, argv);
glutCreateWindow("Directional Keyboard");
glutSpecialFunc(directional_Keys);
glutMainLoop();
return 0;
}
void directional_Keys(int key, int x, int y)

{ switch (key)
{
case GLUT_KEY_LEFT :
printf("GLUT_KEY_LEFT %d\n",key); break;
case GLUT_KEY_UP :
printf("GLUT_KEY_UP %d\n",key); break;
case GLUT_KEY_RIGHT :
printf("GLUT_KEY_RIGHT %d\n",key);break;
case GLUT_KEY_DOWN :
printf("GLUT_KEY_DOWN %d\n",key);break;
case GLUT_KEY_PAGE_UP :
printf("GLUT_KEY_PAGE_UP %d\n",key);break;
case GLUT_KEY_PAGE_DOWN :
printf("GLUT_KEY_PAGE_DOWN %d\n",key);break;
case GLUT_KEY_HOME :
printf("GLUT_KEY_HOME %d\n",key);break;
case GLUT_KEY_END :
printf("GLUT_KEY_END %d\n",key); break;
case GLUT_KEY_INSERT:
74
printf("GLUT_KEY_INSERT %d\n",key);break;
}//end switch
}//end void
Output program dengan fungsi callback glutSpecialFunc() disajikan pada gambar 4.4.
Gambar 4.4. Output Program glutSpecialFunc()
2. Event Mouse: glutMouseFunc(mouse)

Potongan program dengan fungsi glutMouseFunc(mouse)sebagai berikut :
- Tempatkan pemanggilan fungsi callback glutMouseFunc(mouse) pada
main program
- Buat prosedur dengan nama dan parameter yang sama dengan prosedur
glutMouseFunc(mouse) yaitu prosedur mouse(int button,int
state,int x,int y)
- Definisikan kondisi button dengan GLUT_RIGHT_BUTTON atau
GLUT_LEFT_BUTTON dan state dengan GLUT_DOWN atau GLUT_UP
- Pada saat kondisi true untuk button dan state GLUT_DOWN tampilkan “Left/Right
button pressed at<x,y>” dan saat state GLUT_UP tampilkan “Left/Right button
liftet at<x,y>”
- Jalankan program uji coba :
1. klik mouse kiri diujung kiri atas window
75
2. klik mouse kanan diujung kanan atas window
3. Klik mouse kiri di tengah window
4. Klik mouse kiri di ujung kiri bawah window
5. Klik mouse kanan di ujung kanan bawah window

{ …
glutMouseFunc(mouse);
…
}
void mouse(int button, int state, int x, int y)

{
if (button == GLUT_RIGHT_BUTTON)
{
if (state == GLUT_DOWN)
cout<<"Right button pressed"
<<"at ("<< x <<","<< y<<")"<<endl;
else
cout<<"Right button lifted"
<<"at ("<< x <<","<< y<<")"<<endl;
}
else if (button == GLUT_LEFT_BUTTON)
{
cout<<"Left button pressed"
<<"("<< x <<","<< y <<")"<<endl;
else
cout<<"Left button lifted "
<<"at ("<< x <<","<< y<<")"<<endl;
}
}
Output program dengan fungsi callback glutMouseFunc(mouse) disajikan pada

gambar 4.5.
76
Gambar 4.5. Output Program fungsi callback glutMouseFunc(mouse)
2. Event Mouse: glutMotionFunc (motion) dan glutPassiveMotionFunc

(motionpassive. Potongan program dengan fungsi glutMotionFunc
(motion) dan glutPassiveMotionFunc (motionpassive)sebagai
berikut :
- Tempatkan pemanggilan fungsi callback glutMotionFunc (motion) dan
glutPassiveMotionFunc (motionpassive)pada main program
glutMotionFunc (motion) dan glutPassiveMotionFunc
(motionpassive)yaitu prosedur motion(int x, int y) dan
motionPassive(int x, int y)
- Jalankan program uji coba :
1. Gerakkan mouse pada area window, amati hasil yang ditampilkan !
2. Klik mouse kiri dengan menggerakkan mouse di area window, amati hasil
yang ditampilkan !
3. Klik mouse kanan dengan menggerakkan mouse di area window, amati
hasil yang ditampilkan !
bool lbuttonDown = false;

bool lbutton = false;
bool rbutton = false;
{ …
77
glutMotionFunc(motion);
glutPassiveMotionFunc(motionPassive);
…
}
void mouse(int button, int state, int x, int y)

{ if (button == GLUT_RIGHT_BUTTON)
{rbutton=true; lbutton=false;
lbuttonDown=true;
else
lbuttonDown=false;
}
else if (button == GLUT_LEFT_BUTTON)
{
lbutton=true;rbutton=false;
lbuttonDown = true;
else
lbuttonDown = false;
}
}
void motion(int x, int y)

{
if (lbutton&&lbuttonDown)
cout<<"Mouse dragged with left button at "
<<"("<< x <<","<< y <<")"<<endl;
else if (rbutton&&lbuttonDown)
cout<<"Mouse dragged with right button at "
<<"("<< x <<","<< y <<")"<<endl;
}
void motionPassive(int x, int y)
78
{
cout<<"Mouse moved at "
<<"("<< x <<","<< y <<")"<<endl;
}
Output program dengan fungsi callback glutMotionFunc (motion) dan

glutPassiveMotionFunc (motionpassive)disajikan pada gambar 4.6.
Gambar 4.6. Output Program fungsi callback glutMotionFunc(motion) dan

glutPassiveMotionFunc(motionpassive)
3. Event Mouse: glutEntryFunc (entry),potongan program dengan fungsi

glutEntryFunc (entry) sebagai berikut :
- Tempatkan pemanggilan fungsi callback glutEntryFunc (entry) pada
main program
glutEntryFunc (entry) yaitu prosedur entry(int state
- Jalankan program dan amati outputput yang dihasilkan!

{ …
glutEntryFunc(entry);
…
79
}
void entry(int state)

{
if (state == GLUT_ENTERED)
cout<<"Mouse Entered"<<endl;
else
cout<<"Mouse Left"<<endl;
}
E. TUGAS
1. Buatlah gambar persegi(5x5) pada userdraw() , gunakan fungsi callback
glutSpecialFunc() untuk menggerakkan persegi maju GLUT_KEY_RIGHT
(koordX+5) dan mundur GLUT_KEY_LEFT (koordX-5).
2. Tambahkan pemanggilan fungsi callback mouse event glutMouseFunc() pada
program persegi yang sudah dibuat dengan button = GLUT_LEFT_BUTTON pada
posisi persegi akan merubah warna persegi. Lakukan juga pemanggilan callback
glutMouseMotion() dan tambahkan / kurangkan posisi x dan y dari mouse pada
koordinat posisi persegi sebelumnya.
3. Buatlah jalur maze 2D, contoh seperti pada gambar 4.7, definisikan semua range
batas koordinat tembok, gerakkan keyboard arah dari posisi start (merah) sampai
dengan mencapai posisi finish (hijau), pada saat obyek menyentuh tembok posisi
obyek tetap tidak berpindah. Gunakan tombol keyboard lain untuk mempercepat
gerakan, memperlambat dan menghentikan gerakan obyek.
Gambar 4.7. Contoh Maze 2D

4. Tambahkan program maze pada nomer 3 dengan pemanggilan glutMouseFunc(),
glutMotionFunc() dan glutPassiveMotionFunc()
80
F. LAPORAN RESMI
1. Lampirkan listing program,dan output program dari percobaan fungsi callback
keyboard dan mouse. Berikan juga kesimpulan dari masing-masing percobaan
2. Demo program tugas 1 sampai dengan tugas 4 dan kumpulkan listing program,
beserta penjelasan dan output program. Catatan : masing-masing siswa mengerjakan
tugas program berbeda dengan siswa yang lain.
81
PRAKTIKUM 7
TEXT DAN FONT
A. TUJUAN
diharapkan mampu:
1. Mengenal Fungsi Rendering Teks dengan Bitmap
2. Mengenal Fungsi Stroke Teks Karakter
3. Mengerti dan dapat Menambahkan Teks pada Program
B. DASAR TEORI
B. 1. Karakter Bitmap
OpenGL tidak menyediakan dukungan untuk font dan demikian pula untuk teks.
OpenGL menyediakan fungsi untuk bitmap dan fungsi ini dapat dipakai untuk teks.
GLUT (dan sistem window yang lain) menyediakan fungsi untuk teks. Fungsi GLUT
Bitmap berikut untuk menampilkan teks dengan model *font dan indek karakter ascii
(char) :
void glutBitMapCharacter( void *font, int char)
Model font yang dapat dipilih, salah satu dari tabel 5.1. berikut :
Tabel 5.1. Konstanta Font Bitmap
No Konstanta Font Bitmap Arti Output
1 GLUT_BITMAP_8_BY_13 Setiap font berukuran 8x13
2 GLUT_BITMAP_9_BY_15 Setiap font berukuran 9x15
3 GLUT_BITMAP_TIMES_ROMAN_10 Setiap font Times Roman,
berukuran 10 point
4 GLUT_BITMAP_TIMES_ROMAN_24 Setiap font Times
Roman,berukuran 24 point
5 GLUT_BITMAP_HELVETICA_10 Setiap font Helvetica

berukuran 10 point
6 GLUT_BITMAP_HELVETICA_12 Setiap font Times Roman,
berukuran 12 point
7 GLUT_BITMAP_HELVETICA_18 Setiap font Times Roman,
82
berukuran 18 point
B. 2. Stroke Teks Karakter

Karakter Stoke yang dihasilkan dengan menggunakan primitif OpenGL standar,
misalkan garis, poligon, dan kurva. Karakter ini dapat dimodifikasi oleh himpunan
transformasi yang dapat diterapkan pada objek geometris. Membuat stroke characters
menggunakan fungsi :
void glutStrokeCharacter(void *font, int character);
Parameter font sebagai simbolik karakter menyatakan stroke font yang dipakai
(GLUT_STROKE_ROMAN atau GLUT_STROKE_MONO_ROMAN). Sedangkan
character adalah karakter yang dibuat.
B. 3. Menempatkan Teks
Untuk menempatkan teks yang telah dibuat dengan glut bitmap atau dengan stroke
charakter, digunakan fungsi openGL berikut:
void glRasterPos{234}{sifd}( Type x, Type y, Type z, Type w)
void glRasterPos{234}{sifd}v(TYPE *array)
Penjelasan {234} merujuk pada jumlah parameter fungsi salah satu dari 2,3 atau 4,begitu
pula dengan {sifd} berarti tipe parameter single,integer,float,atau double.
1. Tulislah kembali fungsi-fungsi OpenGL yang berhubungan dengan text dan font
2. Tampilkan semua konstanta font bitmap dan stroke teks karakter.
D. PERCOBAAN
1. Menampilkan teks menggunakan fungsi glutBitmap. Konstanta font glutBitmap yang
digunakan pada program berikut adalah : GLUT_BITMAP_TIMES_ROMAN_24
void drawBitmapText(char *string,float x,float y,float z)
{
char *c;
83
glRasterPos3f(x,y,z);
for(c=string;*c!='\0';c++)
{
glutBitmapCharacter(GLUT_BITMAP_TIMES_ROMAN_24,*c);
}
}
void init()
{
}
void reshape(int w,int h)
{
glViewport(0,0,w,h);
glLoadIdentity();
gluOrtho2D(0,w,h,0);
glLoadIdentity();
}
void render(void)
{
glClear(GL_COLOR_BUFFER_BIT);
glLoadIdentity();
glColor3f(0,1,0);
drawBitmapText("Test Font",50,50,0);
glutSwapBuffers();
}
int main(int argc,char * argv[])
{
glutInitDisplayMode(GLUT_RGBA|GLUT_DOUBLE);
glutCreateWindow("Text-glutBitmap");
glutDisplayFunc(render);
84
glutIdleFunc(render);
glutReshapeFunc(reshape);
glutMainLoop();
return 0;
}
Output hasilnya pada gambar 5.1.
Gambar 5.1. Hasil pemanggilan fungsi glutBitmap
2. Menampilkan teks menggunakan fungsi Stroke Teks Character. Konstanta font Stroke
Teks Character yang digunakan pada program berikut adalah :
GLUT_STROKE_ROMAN
void drawStrokeText(char *string, int x, int y, int z)
{
char *c;
glPushMatrix();
glTranslatef(x,y+8,z);
glScalef(0.5f,-0.5f,0);
for(c=string;*c!='\0';c++)
{
glutStrokeCharacter(GLUT_STROKE_ROMAN,*c);
}
glPopMatrix();
85
}
void init()
{
}
void reshape(int w,int h)
{ glViewport(0,0,w,h);
glLoadIdentity();
gluOrtho2D(0,w,h,0);
glLoadIdentity();
}
void render(void)
{
glLoadIdentity();
glColor3f(0,1,0);
drawStrokeText("Test Font",10,200,0);
glutSwapBuffers();
}
int main(int argc,char * argv[])
{
glutInitDisplayMode(GLUT_RGBA|GLUT_DOUBLE);
glutCreateWindow("Text-glutStrokeCharacter");
glutDisplayFunc(render);
glutIdleFunc(render);
glutReshapeFunc(reshape);
glutMainLoop();
return 0;
}
86
Output hasilnya pada gambar 5.2.
Gambar 5.2. Hasil pemanggilan fungsi glutStrokeCharacter
E. TUGAS
1. Buatlah program untuk menampilkan semua konstanta font dari glutBitmap(),dengan
output seperti contoh gambar 5.3. berikut :
Gambar 5.3. GlutBitmap Font
2. Buatlah program untuk menampilkan semua konstanta font dari

glutStrokeCharacter(),dengan output seperti contoh gambar 5.4. berikut :
87
Gambar 5.4. GlutStrokeCharacter Font
F. LAPORAN RESMI
1. Lampirkan listing program,dan output program dari percobaan fungsi glutBitmapFont
dan glutStrokeFont. Berikan juga kesimpulan dari hasil dari masing-masing
percobaan !
2. Demo program tugas 1 dan tugas 2. Kumpulkan listing program, beserta penjelasan
dan output program. Catatan : masing-masing siswa mendemokan output akhir tugas
program berbeda dengan siswa yang lain.
88
PRAKTIKUM 8
PROYEK 1
A. TUJUAN
1. Menerapkan aplikasi menggambar obyek 2D
2. Menerapkan aplikasi event keyboard
3. Membuat proyek simulasi pesawat (obyek 2D) realistik,animasi,dan kendali
keyboard
Pembuatan simulasi pesawat dengan obyek grafik 2D yang realistik, animasi dan
kendalinya menggunakan keyboard seperti gambar 8.1 di bawah ini:
Gambar 8.1. [Kiri] Gerakan pesawat saat digerakkan ke kiri menggunakan tombol anak
panah kiri, [Tengah] Pesawat dalam keadaan state tengah, [Kanan] Gerakan pesawat saat
digerakkan ke kanan menggunakan tombol anak panah kanan.
Spesifikasi simulasi:
(1) Pesawat bisa bergerak ke kanan, kiri, atas dan bawah.
(2) Pesawat bisa menambah dan mengurangi kecepatan.
(3) Efek gerakan maju divisualisasikan dengan garis-garis horisontal pada latar
belakang yang bergerak dari tengah ke bawah. Kecepatan pesawat digambarkan
oleh kecepatan garis-garis horisontal.
B. DASAR TEORI
B.1. Membuat Latar Belakang
Latar belakang dari simulasi kendali pesawat ini terdapat dua macam obyek latar
belakang yaitu:
(1) Latar belakang diam yang berupa langit, gunung dan rumput/tanah.
89
(2) Latar belakang bergerak yang berupa garis-garis horisontal yang bergerak dari
tengah ke bawah.
Adapun teknik pembuatannya bisa menggunakan polygon dan pewarnaan polygon baik
satu warna maupun warna yang bergradiasi. Kreatifitas dalam membuat latar belakang
sangat dibutuhkan untuk mendapatkan latar belakang yang sesuai dengan ide proyek.
B.2. Pembuatan Obyek Pesawat

Obyek pesawat mempunyai beberapa bagian antara lain badan pesawat, sayap,
baling-baling dan mesin jet yang disimbolkan dengan api di belakang pesawat. Obyek
tambahan lain bisa diberikan untuk membuat pesawat lebih menarik. Pesawat yang
dihasilkan minimal seperti gambar 8.2 berikut.
Ruang
kemudi/penumpang Baling-baling
Sayap pesawat
Badan pesawat
Mesin jet
Gambar 8.2. Contoh obyek pesawat

Beberapa spesifikasi animasi dari obyek pesawat di atas adalah:
(1) Baling-baling pesawat harus bisa berputar
(2) Mesin jet harus mampu memberikan efek besar-kecil api jet.
B.3. Sistem Kendali

Sistem kendali pesawat menggunakan keyboard:
(1) Anak panah kiri, kanan, atas dan bawah untuk menyatakan gerakan pesawat.
(2) Tombol angka 1 untuk menambah kecepatan
(3) Tombol angka 3 untuk mengurangi kecepatan.
(4) Tombol Esc untuk keluar dari program
Gambar 8.3. Arah gerakan atas-bawah dan kiri-kanan
90
Gerakan ke atas dan ke bawah merupakan gerakan linier yang menambah atau
mengurangi nilai y dari obyek pesawat seperti terlihat pada gambar 8.3 sebelah kiri.
Gerakan ke kiri dan kanan merupakan gerakan parabolik untuk menghasilkan kesan
pesawat berbelok seperti terlihat pada gambar 8.3 sebelah kanan.
Mengumpulkan skenario dari simulasi kendali pesawat berupa gambar obyek pesawat dan
latar belakang.
D. PERCOBAAN
1. Membuat latar belakang dengan garis-garis horisontal yang bergerak dari tengah ke
bawah sesuai dengan skenario.
2. Membuat obyek pesawat sesuai dengan skenario.
3. Membuat sistem kendali untuk gerakan pesawat.
E. LAPORAN RESMI
Laporan resmi berupa demonstrasi dari proyek ini.
91
PRAKTIKUM 9
VERTEX ARRAY – CREATING 3D OBJECT
A. TUJUAN
diharapkan mampu:
1. Mampu membuat obyek 3D

2. Mengerti dan memahami penggunaan vertex array
B. DASAR TEORI
Daripada Anda menentukan data vertex individu secara langsung (diantara pasangan
glBegin() dan glEnd ()), Anda dapat menyimpan data vertex dalam satu set array
termasuk posisi vertex, normals, koordinat tekstur dan informasi warna. Dan Anda
dapat menggambar seleksi geometri primitif dengan mereferensikan kembali elemen
array dengan indeks array.
Perhatikan kode berikut untuk menggambar
kubus secara langsung. Setiap sisi
membutuhkan 6 kali pemanggilan
glVertex*() untuk membuat 2 segitiga,
misalnya, sisi depan memiliki
segitiga v0-v1-v2 dan v2-v3-v0. Sebuah
kubus memiliki 6 sisi, sehingga jumlah total
Gambar 9.1. Kubus dengan 8 vertek
pemanggilan glVertex*() adalah 36. Jika Anda juga menentukan normals, koordinat
tekstur dan warna untuk vertex yang sesuai, hal itu akan meningkatkan jumlah
pemanggilan fungsi OpenGL.
Hal lain yang harus Anda perhatikan adalah vertex "v0" dibagi dengan 3 sisi yang
berdekatan, sisi depan, kanan dan atas. Dalam mode langsung, Anda harus
menyediakan shared vertex ini 6 kali, dua kali untuk setiap sisi seperti yang
ditunjukkan dalam kode berikut.
glBegin(GL_TRIANGLES); // menggambar kubus dengan 12
segitiga
92
// front face =================
glVertex3fv(v0); // v0-v1-v2
glVertex3fv(v1);
glVertex3fv(v2);
glVertex3fv(v3);
glVertex3fv(v0);
// right face =================

glVertex3fv(v3);
glVertex3fv(v4);
glVertex3fv(v5);
glVertex3fv(v0);
// top face ===================

glVertex3fv(v5);
glVertex3fv(v6);
glVertex3fv(v1);
glVertex3fv(v0);
... // menggambar 3 sisi lainnya
glEnd();
Menggunakan vertex array mengurangi jumlah pemanggilan fungsi dan

penggunaan yang berlebihan dari shared vertex. Oleh karena itu, Anda dapat
meningkatkan kinerja rendering. Di sini, 3 fungsi OpenGL yang berbeda akan
dijelaskan untuk menggunakan vertex array; glDrawArrays(),
glDrawElements() dan glDrawRangeElements().
1. Inisialisasi
OpenGL menyediakan fungsi glEnableClientState() dan
glDisableClientState() untuk mengaktifkan dan menonaktifkan 6 jenis array.
Ditambah, ada 6 fungsi untuk menentukan posisi yang tepat (alamat) dari array,
sehingga, OpenGL dapat mengakses array dalam aplikasi Anda.
 glVertexPointer(): menetapkan pointer ke coords array vertex
 glNormalPointer(): menetapkan pointer to normal array
93
 glColorPointer(): menetapkan pointer ke array warna RGB
 glIndexPointer(): menetapkan pointer ke array warna index
 glTexCoordPointer(): menetapkan pointer ke tekstur array cords
 glEdgeFlagPointer(): menetapkan pointer ke array flag tepi
Setiap fungsi yang ditetapkan memerlukan parameter yang berbeda. Silahkan
melihat API manual OpenGL. Flag tepi digunakan untuk menandai apakah titik
berada di tepi batas atau tidak. Oleh karena itu, satu-satunya tepi di mana flag
tepi yang akan terlihat jika glPolygonMode() diatur dengan GL_LINE.
glVertexPointer(GLint size, GLenum type, GLsizei stride,

const GLvoid* pointer)
1. size: Jumlah koordinat vertex, 2 untuk titik 2D, 3 untuk titik 3D.
2. type: GL_FLOAT, GL_SHORT, GL_INT or GL_DOUBLE.
3. stride: Jumlah byte untuk mengimbangi ke vertex berikutnya
(digunakan untuk array yang disisipkan).
4. pointer: Pointer ke vertex array.
glNormalPointer(GLenum type, GLsizei stride, const GLvoid*

pointer)
1. type: GL_FLOAT, GL_SHORT, GL_INT or GL_DOUBLE.

2. stride: Jumlah byte untuk mengimbangi normal berikutnya (digunakan
untuk array yang disisipkan).
3. pointer: Pointer ke vertex array.
Perhatikan bahwa vertex array telah berada dalam aplikasi Anda (memori
sistem), yang terletak di sisi klien. Dan, OpenGL pada sisi server mendapatkan
hak akses padanya. Itulah mengapa ada perintah khusus untuk vertex array,
glEnableClientState() dan glDisableClientState() daripada menggunakan
glEnable() dan glDisable().
2. glDrawArrays()
glDrawArrays() membaca data vertex dari array yang aktif dengan
memadukan langsung melalui array tanpa melewati atau melompati. Karena
94
glDrawArrays() tidak memungkinkan untuk melompati vertex array, Anda
masih harus mengulang shared vertex satu kali pada tiap sisi.
glDrawArrays() memakai argumen 3. Yang pertama adalah tipe primitif.
Parameter kedua adalah offset awal dari array. Parameter terakhir adalah
jumlah vertex untuk melewati saluran rendering OpenGL.
Sebagai contoh di atas untuk menggambar kubus, parameter pertama adalah
GL_TRIANGLES, yang kedua adalah 0, yang berarti mulai dari awal array.
Dan parameter terakhir adalah 36: kubus memiliki 6 sisi dan masing-masing
sisi perlu 6 vertex untuk menggambar 2 segitiga, 6 × 6 = 36.
GLfloat vertices[] = {...}; // 36 koordinat vertex
...
// mengaktifkan dan menentukan pointer ke vertex array
glEnableClientState(GL_VERTEX_ARRAY);
glVertexPointer(3, GL_FLOAT, 0, vertices);
// menggambar kubus
glDrawArrays(GL_TRIANGLES, 0, 36);
// menonaktifkan vertex array setelah menggambar

glDisableClientState(GL_VERTEX_ARRAY);
Sebagai hasil dari penggunaan glDrawArrays(), Anda dapat mengganti

pemanggilan 36 glVertex*() dengan memanggil glDrawArrays() sekali.
Namun, kita masih perlu untuk menduplikasi shared vertex, sehingga jumlah
vertex yang didefinisikan dalam array masih 36 bukan 8. glDrawElements()
adalah solusi untuk mengurangi jumlah vertex dalam array, sehingga
memungkinkan lebih sedikit transfer data ke OpenGL.
3. glDrawElements()
glDrawElements() menggambar rangkaian primitif dengan melompati vertex
array dengan indeks array yang terkait. Hal ini mengurangi jumlah
pemanggilan fungsi dan jumlah vertex untuk ditransfer. Selanjutnya, OpenGL
mungkin membuat cache untuk vertex yang baru diproses dan
menggunakannya kembali tanpa mengirim vertex yang sama ke saluran
transformasi vertex berkali-kali.
glDrawElements() membutuhkan 4 parameter. Yang pertama adalah tipe
primitif, yang kedua adalah jumlah indeks dari indeks array, yang ketiga adalah
95
tipe data indeks array dan parameter terakhir adalah alamat dari indeks array.
Dalam contoh ini, parameternya adalah, GL_TRIANGLES, 36,
GL_UNSIGNED_BYTE dan indeks masing-masing.
GLubyte indices[] = {0,1,2, 2,3,0, // 36 index
0,3,4, 4,5,0,
0,5,6, 6,1,0,
1,6,7, 7,2,1,
7,4,3, 3,2,7,
4,7,6, 6,5,4};
...
// mengaktifkan dan menentukan pointer ke vertex array
// menggambar kubus
glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_BYTE,
indices);

Ukuran koordinat vertex array sekarang 8, yang merupakan jumlah yang sama
persis vertex dalam kubus tanpa entri berlebihan.
Perhatikan bahwa tipe data indeks array adalah GLubyte bukan GLuint atau
GLushort. Ini harus menjadi tipe data terkecil yang dapat ditampung nomor
indeks maksimal untuk mengurangi ukuran indeks array, jika tidak, dapat
menyebabkan penurunan kinerja karena ukuran dari indeks array. Sejak array
vertex mengandung 8 vertex, GLubyte cukup untuk menyimpan semua indeks.
Hal lain yang harus dipertimbangkan adalah
vektor normal pada shared vektor. Jika normals
dari poligon yang berdekatan di shared vektor
semua berbeda, maka vektor normal harus
ditentukan sebanyak jumlah sisi, sekali untuk
masing-masing sisi.
Sebagai contoh, vertex v0 dibagi dengan sisi
Gambar 9.2. Vektor Normal Kubus
bagian depan, kanan dan atas, namun, normals tidak dapat dibagi di v0. Normal
dari sisi depan n0, normal sisi yang kanan adalah n1 dan sisi atas adalah n2.
Untuk situasi ini, normal tidak sama dengan shared vertex, vertex tidak dapat
96
didefinisikan hanya sekali dalam vertex array lagi. Hal ini harus didefinisikan
beberapa kali dalam array untuk koordinat vertex dalam rangka untuk
mencocokkan jumlah elemen yang sama dalam array normal. Sebuah kubus
dengan normals yang tepat membutuhkan 24 vertex yang unik: 6 sisi × 4 vertex
per sisi.
4. glDrawRangeElements()
Seperti glDrawElements(), glDrawRangeElements() juga baik untuk
melompat-lompat di vertex array. Namun, glDrawRangeElements() memiliki
dua parameter lainnya (indeks awal dan akhir) untuk menentukan sejumlah
vertex yang di-prefetch. Dengan menambahkan pembatasan range ini, OpenGL
dapat memperoleh jumlah yang terbatas hanya dari data vertex array sebelum
rendering, dan mungkin dapat meningkatkan kinerja.
Parameter tambahan dalam glDrawRangeElements() adalah indeks awal dan
akhir, kemudian OpenGL mem-prefetch jumlah terbatas dari vertex dari nilai-
nilai: akhir – awal + 1. Dan nilai-nilai dalam indeks array harus terletak di
antara index awal dan akhir. Perhatikan bahwa tidak semua vertex dalam
rentang (awal, akhir) harus dirujuk. Tapi, jika Anda menentukan rentang yang
jarang digunakan, hal itu menyebabkan proses yang tidak perlu bagi banyak
simpul yang tidak digunakan dalam kisaran tersebut.
//Catatan : Definisi dari vertices
GLubyte indices[] = // paruh pertama (18 index)
{0,1,2, 2,3,0,
0,3,4, 4,5,0,
0,5,6, 6,1,0,
1,6,7, 7,2,1,
// paruh kedua (18 index)
7,4,3, 3,2,7,
4,7,6, 6,5,4};
...
// mengaktifkan dan menetapkan pointer ke vertex array
// menggambar paruh pertama, rentang 6 - 0 + 1 = 7

//vertex yang digunakan
glDrawRangeElements(GL_TRIANGLES, 0, 6, 18,
GL_UNSIGNED_BYTE, indices);
// menggambar paruh kedua, rentang 7 - 1 + 1 = 7

//vertex yang digunakan
97
GL_UNSIGNED_BYTE, indices+18);

Anda dapat mengetahui jumlah maksimum vertex yang akan di-prefetch dan
jumlah maksimum indeks dapat direferensikan dengan menggunakan
glGetIntegerv() dengan GL_MAX_ELEMENTS_VERTICES dan
GL_MAX_ELEMENTS_INDICES.
Perhatikan bahwa glDrawRangeElements() tersedia di OpenGL versi 1.2 atau
lebih.
Tulislah kembali fungsi-fungsi OpenGL yang berhubungan dengan VERTEX
ARRAY dan jelaskan kegunaannya
D. PERCOBAAN
1. Contoh Implementasi Vertex Array untuk membuat Objek 3D
Buatlah kubus dengan 4 cara yang berbeda; modus langsung, glDrawArrays(),
 draw1(): Gambarlah sebuah kubus dengan modus langsung.
 draw2(): Gambarlah sebuah kubus dengan glDrawArrays ().
 draw3(): Gambarlah sebuah kubus dengan glDrawElements ().
 draw4(): Gambarlah sebuah kubus dengan glDrawRangeElements ().
 draw5(): Gambarlah sebuah kubus dengan glDrawElements () dan berbagai
simpul yang disisipkan.
1. Isi fungsi draw1() pada main.cpp.

void draw1()
{
glPushMatrix();
glTranslatef(-2, 2, 0); // move to upper left corner
glBegin(GL_TRIANGLES);
// front faces
glNormal3f(0,0,1);
// face v0-v1-v2
98
glColor3f(1,1,1);
glVertex3f(1,1,1);
glColor3f(1,1,0);
glVertex3f(-1,1,1);
glColor3f(1,0,0);
glVertex3f(-1,-1,1);
// face v2-v3-v0
glColor3f(1,0,0);
glColor3f(1,0,1);
glVertex3f(1,-1,1);
glColor3f(1,1,1);
glVertex3f(1,1,1);
// right faces
glNormal3f(1,0,0);
// face v0-v3-v4
glColor3f(1,1,1);
glVertex3f(1,1,1);
glColor3f(1,0,1);
glVertex3f(1,-1,1);
glColor3f(0,0,1);
glVertex3f(1,-1,-1);
// face v4-v5-v0
glColor3f(0,0,1);
glColor3f(0,1,1);
glVertex3f(1,1,-1);
glColor3f(1,1,1);
glVertex3f(1,1,1);
// top faces
glNormal3f(0,1,0);
// face v0-v5-v6
glColor3f(1,1,1);
glVertex3f(1,1,1);
glColor3f(0,1,1);
glVertex3f(1,1,-1);
99
glColor3f(0,1,0);
glVertex3f(-1,1,-1);
// face v6-v1-v0
glColor3f(0,1,0);
glColor3f(1,1,0);
glVertex3f(-1,1,1);
glColor3f(1,1,1);
glVertex3f(1,1,1);
// left faces
glNormal3f(-1,0,0);
// face v1-v6-v7
glColor3f(1,1,0);
glVertex3f(-1,1,1);
glColor3f(0,1,0);
glColor3f(0,0,0);
glVertex3f(-1,-1,-1);
// face v7-v2-v1
glColor3f(0,0,0);
glColor3f(1,0,0);
glColor3f(1,1,0);
glVertex3f(-1,1,1);
// bottom faces
glNormal3f(0,-1,0);
// face v7-v4-v3
glColor3f(0,0,0);
glColor3f(0,0,1);
glColor3f(1,0,1);
glVertex3f(1,-1,1);
// face v3-v2-v7
glColor3f(1,0,1);
100
glVertex3f(1,-1,1);
glColor3f(1,0,0);
glColor3f(0,0,0);
// back faces
glNormal3f(0,0,-1);
// face v4-v7-v6
glColor3f(0,0,1);
glColor3f(0,0,0);
glColor3f(0,1,0);
// face v6-v5-v4
glColor3f(0,1,0);
glColor3f(0,1,1);
glVertex3f(1,1,-1);
glColor3f(0,0,1);
glEnd();
glPopMatrix();
}

void draw2()
{
// enble and specify pointers to vertex arrays
glEnableClientState(GL_NORMAL_ARRAY);
glEnableClientState(GL_COLOR_ARRAY);
glNormalPointer(GL_FLOAT, 0, normals1);
glColorPointer(3, GL_FLOAT, 0, colors1);
glVertexPointer(3, GL_FLOAT, 0, vertices1);
glPushMatrix();
glTranslatef(2, 2, 0); // move to upper-right corner
101
glDrawArrays(GL_TRIANGLES, 0, 36);
glPopMatrix();
// disable vertex arrays
glDisableClientState(GL_COLOR_ARRAY);
glDisableClientState(GL_NORMAL_ARRAY);
}

void draw3()
{
// enable and specify pointers to vertex arrays
glPushMatrix();
glTranslatef(-2, -2, 0);
// move to bottom-left corner
glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_BYTE, indices);
glPopMatrix();
}
102
void draw4()
{
glPushMatrix();
glTranslatef(2, -2, 0);// move to bottom-right
// draw first half (18 elements){0,1,2,
//2,3,0, 4,5,6, 6,7,4, 8,9,10, 10,11,8}
// The minimum index value in this range is 0, and the maximum index
//is 11 therefore, "start" param is 0 and "end" param is 11.
// Then, OpenGL will prefetch only 12 vertex data from the array
//prior to rendering. (half of total data)
GL_UNSIGNED_BYTE, indices);
// draw last half (18 elements) {12,13,14, 14,15,12, 16,17,18,
//18,19,16, 20,21,22, 22,23,20}
// The minimum index value in this range is 12, and the maximum
//index is 23,therefore, "start" param is 12 and "end" param is 23.
// Then, OpenGL will prefetch only 12 vertex data from the array
//prior to rendering.
// Note that the last param of glDrawRangeElements(). It is the
//pointer to the location of the first index value to be drawn.
GL_UNSIGNED_BYTE, indices+18);
glPopMatrix();
glDisableClientState(GL_VERTEX_ARRAY); // disable vertex arrays
}

void draw5()
{
103
glNormalPointer(GL_FLOAT, 9 * sizeof(GLfloat),
vertices3 + 3);
glColorPointer(3, GL_FLOAT, 9 * sizeof(GLfloat),
vertices3 + 6);
glVertexPointer(3, GL_FLOAT, 9 * sizeof(GLfloat), vertices3);
glPushMatrix();
glTranslatef(-2, -2, 0);// move to bottom-left
glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_BYTE, indices);
glPopMatrix();
}
Sehingga tampilan program akan sebagai berikut.
Gambar 9.3. Output Program Menggambar Kubus modus langsung, glDrawArrays(),

104
E. TUGAS
Buatlah program untuk menggambar 3D pyramid dengan modus langsung,
glDrawArrays(), glDrawElements() dan glDrawRangeElements()., Ouput seperti pada
gambar 9.4
Gambar 9.4. Output 3D Pyramid
F. LAPORAN RESMI
Buatlah laporan hasil percobaan di atas. Laporan berisikan dasar teori, langkah-langkah
percobaan, hasil percobaan, analisa percobaan, dan analisa kegunaan dari program yang
telah dibuat.
105
PRAKTIKUM 10
TRANSFORMASI DAN PROYEKSI
A. TUJUAN
diharapkan mampu:
1. Mengimplementasikan transformasi pada oyek 3D
2. Mengerti dan memahami OpenGL Projection
B. DASAR TEORI
Data geometris seperti posisi vertex dan vektor normal ditransformasikan
melalui Operasi Vertex dan operasi Primitif Assembly di saluran OpenGL sebelum
proses raterization.
Gambar 10.1. Vertex transformasi OpenGL
B.1. Koordinat Obyek

Koordinat obyek adalah sistem koordinat lokal suatu objek dan posisi awalnya dan
orientasi obyek sebelum dilakukan transformasi apapun. Dalam rangka untuk
mentransformasikan objek, dapat menggunakan glRotatef(), glTranslatef(),
glScalef().
B.2. Koordinat Mata
Koordinat mata ini dihasilkan dengan cara mengalikan matriks GL_MODELVIEW
dan koordinat objek. Obyek ditransformasikan dari ruang objek ke ruang mata
menggunakan matriks GL_MODELVIEW dalam OpenGL. Matriks
GL_MODELVIEW adalah kombinasi dari matriks Model dan View
( ). Transformasi Model adalah untuk mengkonversi dari ruang
106
objek untuk ruang dunia. Dan, transform View adalah untuk mengkonversi dari
ruang dunia ke ruang mata.
Perhatikan bahwa tidak ada matriks kamera (pandangan) terpisah dalam

OpenGL. Oleh karena itu, dalam rangka untuk mensimulasikan transformasi
kamera atau view, scene (objek 3D dan pencahayaan) harus ditransformasikan
dengan kebalikan dari view transformasi. Dengan kata lain, OpenGL
mendefinisikan bahwa kamera selalu terletak di (0, 0, 0) dan menghadap ke
sumbu Z koordinat ruang mata, dan tidak bisa ditransformasikan.
Vektor normal juga ditransformasikan dari koordinat objek ke koordinat mata
untuk perhitungan pencahayaan. Perhatikan bahwa normals ditransformasikan
dengan cara yang berbeda dengan yang dilakukan oleh vertex. Vektor normal
ini dikalikan tranpose dari kebalikan dari matriks GL_MODELVIEW dengan
vektor normal.
B.3. Koordinat Klip

Koordinat mata sekarang dikalikan dengan matriks GL_PROJECTION, dan
menjadi koordinat klip. Matriks GL_PROJECTION ini mendefinisikan volume
penglihatan (frustum), bagaimana data vertex diproyeksikan ke layar
(perspektif atau orthogonal). Oleh sebab itu disebut koordinat klip adalah
bahwa vertex yang ditransformasi (x,y,z) dipotong dengan membandingkan
dengan ± w.
107
B.4. Koordinat Perangkat Normalisasi (Normalized Device Coordinates / NDC)
Koordinat ini dihasilkan dengan cara membagi koordinat klip oleh w . Ini
disebut dengan pembagian perspektif. Lebih seperti koordinat window (layar),
namun belum diterjemahkan dan ditingkatkan ke layar piksel. Kisaran nilai
sekarang dinormalisasi dari -1 sampai 1 di semua 3 sumbu.
B.5. Koordinat Window (Koordinat Layar)

Koordinat ini dihasilkan dengan menerapkan koordinat perangkat dinormalisasi
(NDC) ke viewport transformasi. NDC diskala dan diterjemahkan dalam
rangka untuk bisa masuk ke layar rendering. Koordinat window akhirnya
dilewatkan ke proses raterization dari saluran OpenGL untuk menjadi fragmen.
Perintah glViewport() digunakan untuk menentukan daerah render persegi
mana yang gambar akhirnya dipetakan. glDepthRange() digunakan untuk
menentukan nilai z dari koordinat window. Koordinat window dihitung dengan
parameter yang diberikan di 2 fungsi atas;
glViewport (x, y, w, h);
glDepthRange (n, f);
Rumus transformasi viewport diperoleh dari hubungan linier antara NDC dan
koordinat window;
108
B.6. Matrix Transformasi OpenGL
OpenGL menggunakan matriks 4 x 4 untuk
transformasi. Perhatikan bahwa 16 elemen
dalam matriks disimpan sebagai array 1D dalam
urutan kolom-utama. Anda perlu mentranspose
matriks ini jika Anda ingin mengubahnya
menjadi standar konvensi, yaitu format baris-
utama. OpenGL memiliki 4 jenis matriks, GL_MODELVIEW,
GL_PROJECTION, GL_TEXTURE, dan GL_COLOR. Anda dapat
mengganti tipe saat ini dengan menggunakan glMatrixMode() dalam kode
Anda. Misalnya, dalam rangka untuk memilih matriks GL_MODELVIEW,
gunakan glMatrixMode(GL_MODELVIEW).
B.7. Model-View Matrix (GL_MODELVIEW)

GL_MODELVIEW matriks menggabungkan matriks penglihatan dan
pemodelan menjadi satu matriks. Dalam rangka untuk mengubah pandangan
(kamera), Anda perlu memindahkan seluruh scene dengan transformasi
invers. gluLookAt() terutama
digunakan untuk mengatur tampilan
transformasi.
3 elemen kolom matriks yang
paling kanan (m12, m13, m14) adalah
untuk menerjemahkan
transformasi glTranslatef(). Eleme
n m15 adalah koordinat
homogen . Elemen ini khusus digunakan Gambar 10.2.4 kolom matriks
GL_MODELVIEW
untuk transformasi proyektif.
3 set elemen, (m0, m1, m2), (m4, m5, m6) dan (m8, m9, m10) adalah untuk
Euclidean dan transformasi affine, seperti rotasi glRotatef() atau
skala glScalef(). Perhatikan bahwa 3 set ini benar-benar mewakili 3 sumbu
ortogonal;
1. (m0, m1, m2) : sumbu +X, vektor kiri, (1, 0, 0) secara default
109
2. (m4, m5, m6) : sumbu +Y, vektor atas, (0, 1, 0) secara default
3. (m8, m9, m10) : sumbu +Z, vektor depan, (0, 0, 1) secara default
Kita bisa langsung membangun matriks GL_MODELVIEW dari sudut atau

vektor lookat tanpa menggunakan fungsi transformasi OpenGL. Berikut adalah
beberapa kode yang berguna untuk membangun matriks GL_MODELVIEW:
 Angles ke Axes
 Lookat ke Axes
 Matrix4 kelas
Perhatikan bahwa OpenGL melakukan perkalian matriks dalam urutan terbalik

jika beberapa transformasi diterapkan ke vertex. Sebagai contoh, Jika vertex
ditransformasikan oleh MA pertama, dan ditransformasikan oleh MB kedua,
kemudian OpenGL melakukan MB x MA terlebih dahulu sebelum mengalikan
vertex. Jadi, transformasi terakhir datang pertama dan transformasi pertama
terjadi terakhir dalam kode Anda.
// Perhatikan bahwa objek akan ditranslasikan terlebih

dulu kemudian dirotasi
glRotatef (angle, 1, 0, 0); // merotasi derajat sudut
objek di sekitar sumbu X
glTranslatef (x, y, z); // memindah objek ke (x, y, z)
drawObject ();
B.8. Matrix Proyeksi (GL_PROJECTION)
Matriks GL_PROJECTION digunakan untuk mendefinisikan frustum. Frustum

ini menentukan obyek atau bagian dari obyek yang akan ditampilkan. Selain
itu, matriks ini menentukan bagaimana scene 3D diproyeksikan ke layar.
OpenGL menyediakan 2 fungsi untuk transformasi
GL_PROJECTION. glFrustum() adalah untuk menghasilkan proyeksi
perspektif, dan glOrtho() adalah untuk menghasilkan proyeksi ortografi
(paralel). Kedua fungsi memerlukan 6 parameter untuk menentukan 6 plane
110
kliping, kliping kiri, kanan, bawah, atas, dekat dan jauh. 8 simpul dari frustum
pandangan ditunjukkan pada gambar berikut.
Gambar 10.3. Perspektif OpenGL Melihat Frustum

Simpul jauh (belakang) plane dapat dihitung dengan rasio segitiga yang sama,
misalnya, di sebelah kiri jauh plane berada;
Untuk proyeksi ortografi, rasio ini akan

menjadi 1, sehingga nilai-nilai kiri, kanan,
bawah dan atas plane yang jauh akan sama
seperti pada plane dekat. Gambar 10.3. Ortografi Frustum
OpenGL
Anda juga dapat menggunakan fungsi
gluPerspective() dan gluOrtho2D() dengan jumlah parameter yang lebih
sedikit. gluPerspective() hanya membutuhkan 4 parameter. Bidang pandang
vertikal (FOV), aspek rasio lebar terhadap tinggi dan jarak ke plane kliping
dekat dan jauh. Setara konversi dari gluPerspective() ke glFrustum()
digambarkan dalam kode berikut.
// This creates a symmetric frustum.

// It converts to 6 params (l, r, b, t, n, f) for
glFrustum()
// from given 4 params (fovy, aspect, near, far)
void makeFrustum(double fovY, double aspectRatio, double
front, double back)
{
111
const double DEG2RAD = 3.14159265 / 180;
double tangent = tan(fovY/2 * DEG2RAD);

// tangent of half fovY
double height = front * tangent;
// half height of near plane
double width = height * aspectRatio;
// half width of near plane
// params: left, right, bottom, top, near, far
glFrustum(-width, width, -height, height, front,
back);
}
Namun, Anda harus menggunakan

glFrustum() secara langsung jika Anda
membuat volume pandang non-
simetris. Misalnya, jika Anda ingin
membuat sebuah scene lebar ke 2 layar

Gambar 10.4. Contoh dari frustum
yang digabungkan, Anda dapat asimetris
memecah frustum menjadi 2 frustum asimetris (kiri dan kanan). Kemudian,
membuat scene dengan masing-masing frustum.
B.9. Matrix Tekstur (GL_TEXTURE)

Koordinat tekstur (s, t, r, q) dikalikan dengan matriks GL_TEXTURE sebelum
pemetaan tekstur. Secara default tekstur ini adalah identitas, sehingga tekstur
akan dipetakan ke obyek tepat di mana Anda menentukan koordinat tekstur.
Dengan memodifikasi GL_TEXTURE, Anda dapat menggeser, memutar,
meregangkan, dan menyusutkan tekstur.
// rotate texture around X-axis
glMatrixMode(GL_TEXTURE);
glRotatef(angle, 1, 0, 0);
B.10. Matrix Warna (GL_COLOR)

Komponen warna (r, g, b, a) dikalikan dengan matriks GL_COLOR. Hal ini
dapat digunakan untuk konversi ruang warna dan swaping komponen warna.
Matriks GL_COLOR tidak umum digunakan dan diperlukan ekstensi
GL_ARB_imaging.
112
Matrix Lain Yang Biasa Digunakan
glPushMatrix() : mendorong matriks saat ini ke dalam matriks stack.
glPopMatrix() : pop matriks arus dari matriks stack.
glLoadIdentity() : mengatur matriks saat ini untuk matriks identitas.
glLoadMatrix{fd}(m) : menggantikan matriks saat ini dengan m matriks.
glLoadTransposeMatrix{fd}(m) : menggantikan matriks saat ini dengan
baris-utama memerintahkan matriks m.
glMultMatrix{fd}(m) : kalikan matriks saat ini dengan m matriks, dan
memperbarui hasil untuk matriks saat ini.
glMultTransposeMatrix{fd}(m) : kalikan matriks saat ini dengan m baris-
utama matriks memerintahkan, dan memperbarui hasil untuk matriks saat ini.
glGetFloatv(GL_MODELVIEW_MATRIX, m) : mengembalikan 16 nilai
GL_MODELVIEW matriks m.
Pahamilah langkah-langkah yang ada pada prosedur percobaan. Kemudian buatlah
flowchart untuk aplikasi yang akan di buat.
D. PERCOBAAN
1. Translasi pada obyek bola (sphere)
 Tambahkan program berikut pada fungsi draw()
GLfloat oprY = -1;

GLfloat deltaY = 0;
void Draw() {
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
glEnable(GL_DEPTH_TEST);
// Draw a sphere
glLoadIdentity();
glPushMatrix();
glTranslatef(0, deltaY, 0.0); // fungsi translasi
glutSolidSphere(.5, 20, 20);
glPopMatrix();
glFlush();
deltaY+=0.001*oprY;
if(deltaY>=1)oprY=-1;
if(deltaY<=-1)oprY=1;
113
glutPostRedisplay();
}
 Dalam program dia atas dibuat sebuah obyek sphere (glutSolidSphere) yang
akan bergerak keatas kebawah sesuai nilai dari deltaY. Fungsi yang digunakan
untuk menggerakkan adalah glTranslatef(x,y,z).
 Berikut adalah hasil running program dari program tersebut.
Gambar 10.5. Translasi Obyek Bola
2. Rotasi pada obyek bola

GLfloat oprY = -1;

GLfloat deltaY = 0;
void Draw() {
// Draw a sphere
glLoadIdentity();
glPushMatrix();
glRotated(deltaY, deltaY, deltaY, deltaY);
glTranslatef(1.0, 0.0, 0.0);
glPopMatrix();
glFlush();
deltaY+=0.1*oprY;
}
114
 Dalam program dia atas dibuat sebuah obyek sphere (glutSolidSphere) yang
akan berputar searah sumbu x, y dan z sesuai nilai dari deltaY. Fungsi yang
digunakan untuk menggerakkan adalah glRotated(angle, x, y, z).
Gambar 10.6. Rotasi Obyek Bola
3. Scaling pada obyek bola

// Draw a sphere
glLoadIdentity();
glPushMatrix();
glScalef(delta, delta, delta);
glPopMatrix();
delta+=0.0001;
 Dalam program diatas dibuat sebuah obyek sphere (glutSolidSphere) yang akan
semakin membesar dan membesar sesuai nilai dari deltaY. Fungsi yang
digunakan untuk menggerakkan adalah glScalef(x, y, z).
115
Gambar 10.7. Scalling Obyek Bola
E. TUGAS
Buatlah gambar matahari,bumi,bulan dengan bentuk bola. Gunakan fungsi scalling
untuk tiga ukuran bola,posisikan bumi dan bulan dari matahari dengan translasi. Jika
sudah tepat buatlah animasi gerakan bumi mengelilingi matahari,dan bulan
mengelilingi bumi. Contoh tampilan output pada gambar 10.8.
Gambar 10.8. Transformasi

F. LAPORAN RESMI
Buatlah laporan hasil percobaan di atas. Laporan berisikan dasar teori, langkah-langkah
percobaan, hasil percobaan, analisa percobaan, dan analisa kegunaan dari program yang
telah dibuat.
116
PRAKTIKUM 11
LIGHTING DAN SHADING
A. TUJUAN
diharapkan mampu:
1. Mengenal dan Mengerti Lighting pada OpenGL
2. Mengerti dan dapat Melakukan Flat Shading
3. Mengerti dan dapat Melakukan Smooth Shading
B. DASAR TEORI
B.1. Lighting Model
Ada beberapa macam metode optical view yang dapat dijadikan dasar sebagai
pencahayaan yang jatuh pada benda, yaitu:
 Diffuse Scattering
 Specullar Reflection
 Ambient
 Phong Model
Dari semua model pencahayaan tersebut, Phong model merupakan model pencahayaan
yang paling lengkap. Jadi dalam buku grafika ini fungsi pencahayaan yang digunakan
adalah Phong model.
Untuk dapat mengimplementasikan model-model pencahayaan itu terlebih dahulu kita
perlu melakukan pengaturan terhadap lighting model view point menjadi local. Secara
default opengl menyediakan sudut pandang infinite dimana jarak antara sumber cahaya,
sudut pandang dan setiap komponen vertex yang tergambar di layar dianggap sama.
Sehinga cahaya terlihat merata diseluruh bagian obyek pada gambar. Untuk merubahnya
kita gunakan perintah berikut ini:
glLightModeli(GL_LIGHT_MODEL_LOCAL_VIEWER,GL_TRUE);
117
selain itu kita juga harus mengaktifkan fungsi enablelighting, untuk mengaktifkan
pencahayaan dengan sumber cahaya yang kita tentukan.
glEnable(GL_LIGHTING);
glEnable(GL_LIGHT0);
Dua baris perintah diatas adalah perintah untuk mengaktifkan pencahayaan
“glEnable(GL_LIGHTING)” dan mengaktifkan sumbercahaya yang akan kita gunakan
“glEnable(GL_LIGHT0)”. Kita akan mengimplementasikan pencahayaan phong model
kedalam “GL_LIGHT0” ini.
B.2. Diffuse Scattering

Model pencahayaan diffuse scatering adalah pencahayaan yang menyebar. Sinar yang
datang dipantulkan kebanyak sudut. Gambar 11.1 adalah ilustrasi pantulan cahaya
diffuse.
Gambar 11.1 Pencahayaan Diffuse

Dari ilustrasi pada gambar 11.1 terlihat sinar yang datang dipantulkan menyebar
kebanyak sudut. Dan jika diimplementasikan ke gambar maka hasilnya akan terlihat
seperti gambar 11.2 berikut ini.
118
Gambar 11.2 Diffuse Lighting
Untuk mengimplementasikan diffuse lighting terlebih dahulu kita inisialisasikan
intensitas cahaya dan warna seperti berikut:
GLfloat qaDiffuseLight[] = {0.8, 0.8, 0.8, 1.0};
glLightfv(GL_LIGHT0, GL_DIFFUSE, qaDiffuseLight);
Kemudian di fungsi draw kita tambahkan perintah untuk memberikan properti pada
material atau gambar.
GLfloat qaGreen[] = {0.0, 1.0, 0.0, 1.0};
glMaterialfv(GL_FRONT, GL_DIFFUSE, qaGreen);
perintah itu digunakan untuk memberikan properti cahaya diffuse (GL_DIFFUSE)
dengan warna (qaGreen) pada sisi depan material (GL_FRONT).
B.3. Specullar Reflection

Refleksi specullar ini sama dengan refleksi pada cermin. Cahaya yang datang dipantulkan
secara tepat kesatu arah.
Gambar 11.3 Ilustrasi Specular Reflection
119
Misalkan cahaya datang searah garis P maka cahaya akan dipantulkan ke arah Q. Dimana
sudut antara Q dan sumbu normal (Qr) sama dengan P dan sumbu normal (Qi).
Jika specullar reflection ini diimplementasikan pada gambar maka akan terlihat seperti
gambar 11.4 berikut ini.
Gambar 11.4 Specular Lighting

Untuk mengimplementasikan specullar lighting terlebih dahulu kita inisialisasikan
GLfloat qaSpecullarLight[] = {1.0, 1.0, 1.0, 1.0};
glLightfv(GL_LIGHT0, GL_SPECULLAR, qaSpecullarLight);
GLfloat qaGreen[] = {0.0, 1.0, 0.0, 1.0};
glMaterialfv(GL_FRONT, GL_ SPECULLAR, qaGreen);
perintah itu digunakan untuk memberikan properti cahaya diffuse (GL_SPECULLAR)

B.4. Ambient
Model pencahayaan menggunakan ambient adalah model pencahayaan yang merata pada
semua permukaan benda. Gambar 11.3 adalah contoh hasil pencahayaan ambient pada
benda.
120
Gambar 11.5 Ambient Lighting
Untuk mengimplementasikan specullar lighting terlebih dahulu kita inisialisasikan
GLfloat qaSpecullarLight[] = {1.0, 1.0, 1.0, 1.0};
glLightfv(GL_LIGHT0, GL_SPECULLAR, qaSpecullarLight);
GLfloat qaGreen[] = {0.0, 1.0, 0.0, 1.0};
glMaterialfv(GL_FRONT, GL_ SPECULLAR, qaGreen);
perintah itu digunakan untuk memberikan properti cahaya diffuse (GL_SPECULLAR)

B.5. Phong Model

Phong model adalah gabungan dari ambient, diffuse, dan specullar. Dengan
menggabungkan ketiga model tersebut akan didapat hasil pencahayaan yang lebih baik
dan terlihat lebih nyata. Gambar 11.6 adalah hasil dari phong model.
121
Gambar 11.6 Phong Model
B.6. Flat dan Smooth Shading

Untuk mengimplementasikan flat shading dan smooth shading (gauraud shading)
opengl telah menyediakan fungsi yang dapat kita pakai. Untuk mengganti mode flat
shading ataupun smooth shading, kita gunakan fungsi glShadeModel();
Parameter untuk fungsi itu adalah mode shading yang kita inginkan flat atau smoot.
Untuk mode flat maka kita gunakan glShadeModel(GL_FLAT);, untuk smooth kita gunakan
glShadeModel(GL_SMOOTH);.
Flat shading umumnya lebih ringan dibandingkan dengan smooth shading. Namun
smooth shading membuat obyek terlihat lebih halus. Mode default yang disediakan oleh
opengl adalah mode smooth shading. Jika kita tidak mengubah shadeModel maka
otomatis shade yang digunakan adalah smooth. Gambar 11.7 adalah hasil penggunaan flat
dan smooth shading pada sebuah bola.
Gambar 11.7 Flat dan Smooth Shading
1. Jelaskan mengenai ambient, diffuse, specular dan phong mode menurut pemahaman
anda!
2. Apa kegunaan dari fungsi glShadeModel()?
3. Jelaskan default shading model yang disediakan oleh opengl!
122
D. PERCOBAAN
1. Mengimplementasikan phong model pada gambar segiempat (GL_QUAD).
a. Aturlah window size menjadi 250x250. Dan ortho menjadi -1 sampai 1
glOrtho(-1.0, 1.0, -1.0, 1.0, -1.0, 1.0);
b. Melakukan pengaturan lighting, intensitas lighting, warna lighting, dan posisi
lighting
// Lighting set up
glLightModeli(GL_LIGHT_MODEL_LOCAL_VIEWER, GL_TRUE);
// Set lighting intensity and color

GLfloat qaAmbientLight[]= {0.2, 0.2, 0.2, 1.0};
GLfloat qaDiffuseLight[]= {0.8, 0.8, 0.8, 1.0};
GLfloat qaSpecularLight[]= {1.0, 1.0, 1.0, 1.0};
glLightfv(GL_LIGHT0, GL_AMBIENT, qaAmbientLight);
glLightfv(GL_LIGHT0, GL_SPECULAR, qaSpecularLight);
// Set the light position

GLfloat qaLightPosition[]= {.5, .5, 0.0, 1.0};
glLightfv(GL_LIGHT0, GL_POSITION, qaLightPosition);
c. Kemudian tambahkan perintah berikut pada fungsi draw()

void Draw() {
// Set material properties
GLfloat qaBlack[] = {0.0, 0.0, 0.0, 1.0};
GLfloat qaGreen[] = {0.0, 1.0, 0.0, 1.0};
GLfloat qaWhite[] = {1.0, 1.0, 1.0, 1.0};
glMaterialfv(GL_FRONT, GL_AMBIENT, qaGreen);
glMaterialfv(GL_FRONT, GL_SPECULAR, qaWhite);
123
glMaterialf(GL_FRONT, GL_SHININESS, 60.0);
// Draw square with many little squares
glBegin(GL_QUADS);
glNormal3f(0.0, 0.0, 1.0);
const GLfloat kqDelta = .01;
for (int i = -90; i < 90; ++i) {
for (int j = -90; j < 90; ++j) {
glVertex3f(j*kqDelta, i*kqDelta, -.2);
glVertex3f((j+1)*kqDelta, i*kqDelta, -.2);
glVertex3f((j+1)*kqDelta, (i+1)*kqDelta, -.2);
glVertex3f(j*kqDelta, (i+1)*kqDelta, -.2);
}
}
glEnd();
glFlush();
}
d. Hasil running program
Gambar 11.8 Percobaan 1 Phong Model
2. Implementasi Flat Shading dan Smooth Shading pada bola ()

a. Lakukan sedikit perubahan pada program percobaan 1
124
b. Tambahkan GLUT_DEPTH pada glutInitDisplayMode();
Awal glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
Menjadi glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB |
GLUT_DEPTH);
c. Kemudian ubahlah fungsi initialize()
void Initialize() {
glClearColor(0.0, 0.0, 0.0, 0.0);
glLoadIdentity();
glOrtho(-1.0, 1.0, 0.0, 1.0, -3.0, 3.0);
// Lighting set up
glLightModeli(GL_LIGHT_MODEL_LOCAL_VIEWER, GL_TRUE);
// Set lighting intensity and color

GLfloat qaAmbientLight[]= {0.2, 0.2, 0.2, 1.0};
GLfloat qaDiffuseLight[]= {0.8, 0.8, 0.8, 1.0};
GLfloat qaSpecularLight[]= {1.0, 1.0, 1.0, 1.0};
glLightfv(GL_LIGHT0, GL_AMBIENT, qaAmbientLight);
glLightfv(GL_LIGHT0, GL_SPECULAR, qaSpecularLight);
// Set the light position

GLfloat qaLightPosition[]= {0.0, 1.0, -.5, 1.0};
glLightfv(GL_LIGHT0, GL_POSITION, qaLightPosition);
}
d. Setelah itu kita gambar dua buah sphere pada fungsi draw()
void Draw() {
125
// Set material properties
GLfloat qaBlack[] = {0.0, 0.0, 0.0, 1.0};
GLfloat qaGreen[] = {0.0, 1.0, 0.0, 1.0};
GLfloat qaRed[] = {1.0, 0.0, 0.0, 1.0};
GLfloat qaBlue[] = {0.0, 0.0, 1.0, 1.0};
GLfloat qaWhite[] = {1.0, 1.0, 1.0, 1.0};
GLfloat qaLowAmbient[] = {0.2, 0.2, 0.2, 1.0};
GLfloat qaFullAmbient[] = {1.0, 1.0, 1.0, 1.0};
for (int iIndex = 0; iIndex < 2; ++iIndex) {

if (iIndex == 0) {
glShadeModel(GL_FLAT);
} else {
glShadeModel(GL_SMOOTH);
}
//Set, ambient, diffuse and specular lighting. Set ambient to20%.
glMaterialfv(GL_FRONT, GL_AMBIENT, qaGreen);
glMaterialfv(GL_FRONT, GL_SPECULAR, qaWhite);
glMaterialf(GL_FRONT, GL_SHININESS, 128.0);
glLightfv(GL_LIGHT0, GL_AMBIENT, qaLowAmbient);
// Draw a sphere
glLoadIdentity();
glPushMatrix();
glTranslatef(-0.5 + (float)iIndex, 0.5, -2.0);
glPopMatrix();
// Turn off diffuse and specular. Set ambient light tofull.
glMaterialfv(GL_FRONT, GL_DIFFUSE, qaBlack);
glMaterialfv(GL_FRONT, GL_SPECULAR, qaBlack);
glLightfv(GL_LIGHT0, GL_AMBIENT, qaFullAmbient);
}
glFlush();
}
126
e. Pada fungsi draw dibuat sphere sebanyak 2 buah dengan menggunakan looping.
Untuk sphere pertama menggunakan shade model flat. Yang kedua menggunakan
smooth shading.
f. Ketika di running hasilnya adalah seperti berikut:
Gambar 11.9 Flat dan Smooth Shading
E. TUGAS
Implementasikan Flat Shading dan Smooth Shading pada obyek 3D anda sendiri!
Ubahlah posisi sumber cahaya sesuai keinginan anda!
F. LAPORAN RESMI
Demo dan kumpulkan listing program beserta penjelasan tugas implementasi flat shading
dan smooth shading pada obyek 3D yang anda buat!
127
PRAKTIKUM 12
PROYEK 2
A. TUJUAN
diharapkan mampu:
1. Membuat animasi obyek 3D
2. Menggabungkan beberapa obyek 3D
3. Melakukan kamera view
4. Menggunakan fungsi callback keyboard
Obyek 3D yang akan digambar dinosaurus dengan menggabungkan beberapa obyek
dan bisa melakukan camera view menggunakan keyboard. Animasi ini dibuat dengan
lebih luwes seperti gambar 12.1 berikut. Perubahan saat menggerakkan mouse adalah
mengubah sudut 3D dari obyek tersebut. Gambar 12.2 menunjukkan perubahan saat
drag-drop mouse.
Gambar 12.1. [Kiri] Gerakan kepala dan badan dari dinosaurus dengan menoleh ke kanan
dan ke kiri.
Gambar 12.2. Mengubah camera-view menggunakan mouse
128
B. DASAR TEORI
B.1. Membuat Obyek
Obyek dibentuk dari beberapa obyek dasar yang digabungkan menjadi satu obyek.
Ada beberapa bagian obyek sebagai berikut:
Gambar 12.3. Obyek dinosaurus
(3) Obyek kepala yang bergerak ke kanan dan kekiri. Obyek ini termasuk pipi,
hitung, mata dan mulut.
(4) Obyek badan hampir seolah bergerak mengikuti sudut gerakan kepala namun
dengan sudut yang jauh lebih kecil.
(5) Obyek sepasang tangan yang gerakannya menyesuaikan gerakan badan.
(6) Obyek sepasang sepatu yang mempunyai sepasang yaitu sepatu di sisi kiri dan
sisi kanan.
Adapun teknik pembuatannya bisa menggunakan polygon dan pewarnaan polygon baik
satu warna maupun warna yang bergradiasi.
B.2. Pembuatan Kendali Camera View

Camera view lebih pada bentuk transformasi sumbu koordinat yang digerkan
dengan sudut azimut (a) dan elevasi (b). Gerakannya mengikuti gerakan pointer dari
129
mouse. Gambar 13 menyatakan model gerakan 3D dari gerakan mouse merupakan
konversi dari sistem koordinat (x,y,z) menjadi (r,a,b) seperti ditunjukkan oleh gambar
12.4 berikut ini.
y

x

Gambar 12.4. Sistem Koordinat 3D
Mengumpulkan obyek-obyek pembentuk dari kepala, badan, tangan dan kaki dari
dinosaurus.
D. PERCOBAAN
1. Membuat obyek dinosaurus
2. Membuat animasi dari obyek dinosaurus
3. Membuat sistem kendali dengan mouse untuk camera view.
E. LAPORAN RESMI
Laporan resmi berupa demonstrasi dari proyek ini.
130
DAFTAR PUSTAKA
5. Achmad Basuki,Nana Ramadijanti,Buku Ajar Grafika Komputer,PENS,2008

6. Lecture Notes, The Ohio State University,2D Coordinate Systems and Drawing
4. Keyboard Movement, http://www.youtube.com/watch?v=kp5i1P9YeFE, (diakses 12
September 2013)
5. Mouse Click,http://www.youtube.com/watch?v=OrIs4CrfzRk ,(diakses 12 September
2013
6. Zeyang Li (Linus), Carnegie Mellon University, Transformation inOpenGL
7. Song Ho Ahn.2005-2012, Tutorial and Source and Binary: OpenGL Vertex Array,
http://www.songho.ca/opengl/gl_vertexarray.html,(diakses Oktober 2013)
131

Modul Workshop Grafika PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Modul Workshop Grafika PDF

Uploaded by

Copyright:

Available Formats

BUKU AJAR

WORKSHOP GRAFIKA KOMPUTER

Drs. Achmad Basuki,M.Kom.,Ph.D.

Fadilah Fahrul Hardiansyah,S.ST.

Program Studi D3 Teknik Informatika

Surabaya, Nopember 2013

Gambar 1.3. Contoh beberapa game 3 dimensi

Gambar 1.4. Contoh simulasi pejalan kaki

Gambar 1.5. Contoh simulasi lalu lintas

B.2. Pengenalan Pemrograman Grafik

B.3. Instalasi OpenGL

Gambar 1.8. Icon XCode di Mac OS X 10.5 Leopard

Gambar 1.9. Jendela aplikasi XCode aktif

Gambar 1.10. Jendela Dialog XCode New Project C++ Tool

Gambar 1.12. Jendela Project Coba

Gambar 1.13. Pemilihan Sub Menu Edit Project Settings

Gambar 1.14. Dialog Header Search Paths

• Pada Dialog Framework, pilih Glut.framework dan OpenGL.framework, click

Gambar 1.15. Menambahkan GLUT dan OpenGL Framework

Gambar 2.1. Sistem koordinat Kartesian dan layar

B.3. Menggambar dengan Fungsi Primitif openGL

GL_POINTS  Menggambar titik

GL_LINES  Menggambar garis

GL_LINE_STRIP  Menggambar polyline

GL_LINE_LOOP  Menggambar rangka Polygon

GL_POLYGON  Menggambar polygon

GL_TRIANGLES Menggambar segi 3

GL_TRIANGLE_STRIP Menggambar N segi 3

GL_TRIANGLE_FAN  Menggambar N segi 3 dengan 1 pusat

Macam-macam hasil menggambar dengan GL_POLA di openGL dapat dilihat pada

B.4. Menggambar Titik

B.5. Mengubah Ukuran Titik

B.6. Menggambar Garis

B.7. Menggambar Banyak Garis (Polyline)

B.8. Menggambar Banyak Garis (Polyline Kurva Tertutup)

B.10. Menggambar Segi Empat (Quad)

B.11. Menggambar N Segi Empat (Quad Strip)

B.12. Menggambar Segi Tiga (Triangeles)

B.13. Menggambar N Segi Tiga (Triangele Strip)

B.14. Menggambar N Segi Tiga dengan 1 Titip Pusat (Triangele Fan)

B.15. Mengatur Warna

1. Tulislah kembali fungsi-fungsi untuk setting window I open GL dan kegunaannya

int main(int argc, char **argv)

Gambar 2.3. Contoh hasil program dasar OpenGL

4. Program berikut menghasilkan titik-titik acak baik posisi dan besarnya.

Hasilnya adalah sebagai berikut:

6. Program berikut membuat garis dari (5,10) ke (40,0):

Gambar 2.5. Contoh Garis

Pernyataan glBegin(GL_LINES) tidak perlu diulang untuk lebih menyingkat program

Gambar 2.7. Efek Hujan

Contoh hasilnya adalah seperti gambar 2.8.

Gambar 2.9. Grid dan sumbu koordinat

Gambar 2.10. Tugas Rumah 2D dengan Fungsi Primitif openGL

Gambar 3.1. Definisi obyek grafik 2D

Gambar 3.2. Contoh polyline

B.3. Menggambar Polygon

B.4. Membuat Polygon Berwarna

B.5. Membuat Polygon Bergradiasi

Gambar 3.4. Contoh Fill Polygon

gambar 3.5. Contoh Fill Polygon

Gambar 3.6. Contoh gradatePolygon

Gambar 3.8. Menggambar langit

Gambar 4.1. Sistem koordinat sudut