Modul Grafika Komputer LWJGL Edisi 2

MODUL
PROGRAM KEAHLIAN GANDA
Grafika Komputer
Paket Keahlian
Rekayasa Perangkat Lunak
Kelompok Kompetensi G
Penulis: EKO SUBIYANTORO,S.Pd.,S.ST.,MT.
Direktorat Jenderal Guru dan Tenaga Kependidikan

Kementrian Pendidikan dan Kebudayaan
Tahun 2017
i
Penulis:
1. Eko Subiyantoro, S.Pd., S.T., MT.
Email: ekovedc@gmail.com
Penelaah:
1. Siarra Maulida Asrin, S.T [081562783394],
Email: abdulmuism@gmail.com
2. Abdul Haliq, S.Pd., M.Pd., [085341259862]
Email : abdulhaliq88@gmail.com
3. Dyah Darma Andayani, S.T, M.Tel.Eng (081355721216)
Email : dydarma@gmail.com
Ilustrator :
1. Faizal Reza Nurzeha., A.Md
Copyright ©2017
Lembaga Pengembangan dan Pemberdayaan Pendidikan Tenaga
Kependidikan Bidang Kelautan Perikanan Teknologi Informasi dan
Komunikasi.
Hak Cipta Dilindungi Undang-Undang

Dilarang mengkopi sebagian atau keseluruhan isi buku ini untuk kepentingan
komersial tanpa izin tertulis dari Kementerian Pendidikan Kebudayaan.
ii
KATA SAMBUTAN
Peran guru profesional dalam proses pembelajaran sangat penting

sebagai kunci keberhasilan belajar siswa. Guru profesional adalah guru yang
kompeten membangun proses pembelajaran yang baik sehingga dapat
menghasilkan pendidikan yang berkualitas. Hal ini tersebut menjadikan guru
sebagai komponen yang menjadi fokus perhatian pemerintah pusat maupun
pemerintah daerah dalam peningkatan mutu pendidikan terutama menyangkut
kompetensi guru.
Pengembangan profesionalitas guru melalui program Keahlian Ganda
(PKG) merupakan upaya peningkatan kompetensi untuk semua guru. Sejalan
dengan hal tersebut, pemetaan kopetensi guru telah dilakukan melalui uji
kompetensi guru (UKG) untuk kompetensi pedagogik dan profesional pada akhir
tahun 2015. Hasil UKG menunjukan peta kekuatan dan kelemahan kompetensi
guru dalam penguasaan pengetahuan. Peta kompetensi guru tersebut
dikelompokan menjadi 10 (sepuluh) kelompok kompetensi. Tindak lanjut
pelaksanaan UKG diwujudkan dalam bentuk pelatihan guru paska UKG melalui
program Keahlian Ganda. Tujuannya untuk meningkatkan kompetensi guru
sebagai agen perubahan dan sumber belajar utama bagi peserta didik. Program
Keahlian Ganda dilaksanakan melalui pola tatap muka, daring (online) dan
campuran (blended) tatap muka dengan online.
Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenaga
Kependidikan (PPPPTK), Lembaga Pengembangan dan Pemberdayaan
Pendidik dan Tenaga Kependidikan Kelautan Perikanan Teknologi Informasi dan
Komunikasi (LP3TK KPTK) dan Lembaga Pengembangan dan Pemberdayaan
Kepala Sekolah (LP2KS) merupakan Unit Pelaksana Teknis di lingkungan
Direktorat Jendral Guru dan Tenaga Kependidikan yang bertanggung jawab
dalam mengembangkan perangkat dan melaksanakan peningkaan kompetensi
guru sesuai dengan bidangnya. Adapun perangkat pembelajaran yang
dikembangkan tersebut adalah modul untuk program Keahlian Ganda tatap muka
dan PKG online untuk semua mata pelajaran dan kelompok kompetensi. Dengan
modul ini diharapkan program PKG memberikan sumbangan yang sangat besar
dalam peningkatan kualitas kompetensi guru. Mari kita sukseskan program PKG
ini untuk mewujudkan Guru Mulia Karena Karya.
Jakarta, Februari 2016

Direktur Jendral
Guru dan Tenaga Kependidikan
Sumarna Surapranata, Ph.D

NIP. 195908011985031002
iii
iv
KATA PENGANTAR
Profesi guru dan tenaga kependidikan harus dihargai dan dikembangkan sebagai
profesi yang bermartabat sebagaimana diamanatkan Undang-Undang Nomor 14
Tahun 2005 tentang Guru dan Dosen. Hal ini dikarenakan guru dan tenaga
kependidikan merupakan tenaga profesional yang mempunyai fungsi, peran, dan
kedudukan yang sangat penting dalam mencapai visi pendidikan 2025 yaitu
“Menciptakan Insan Indonesia Cerdas dan Kompetitif”. Untuk itu guru dan tenaga
kependidikan yang profesional wajib melakukan pengembangan keprofesian
berkelanjutan.
Buku Pedoman Penyusunan Modul Diklat Program Keahlian Ganda Bagi Guru
dan Tenaga Kependidikan untuk institusi penyelenggara program pembinaan
karir merupakan petunjuk bagi penyelenggara pelatihan di dalam melaksakan
pengembangan modul yang merupakan salah satu sumber belajar bagi guru dan
tenaga kependidikan. Buku ini disajikan untuk memberikan informasi tentang
penyusunan modul sebagai salah satu bentuk bahan dalam kegiatan
pembinaan karir bagi guru dan tenaga kependidikan.
Pada kesempatan ini disampaikan ucapan terima kasih dan penghargaan
kepada berbagai pihak yang telah memberikan kontribusi secara maksimal
dalam mewujudkan buku ini, mudah-mudahan buku ini dapat menjadi acuan dan
sumber inspirasi bagi guru dan semua pihak yang terlibat dalam pelaksanaan
penyusunan modul untuk pembinaan karir. Kritik dan saran yang membangun
sangat diharapkan untuk menyempurnakan buku ini di masa mendatang.
Makassar, Desember 2015
Kepala LPPPTK KPTK Gowa
Sulawesi Selatan,
Dr. H. Rusdi, M.Pd,

NIP 19650430 199103 1 004
v
DAFTAR ISI
KATA SAMBUTAN .............................................................................................. iii

KATA PENGANTAR ............................................................................................ v
DAFTAR ISI ........................................................................................................ vi
DAFTAR GAMBAR ............................................................................................. ix
DAFTAR TABEL ................................................................................................. xi
PENDAHULUAN………………………………………………………………………. 1
A.Latar Belakang………………………………………………………………………. 1
B.Tujuan……………………………………………………………………………….. 2
C.Peta Kompetensi……………………………………………………………………. 2
D.Ruang Lingkup Penggunaan Modul……………………………………………… 4
E.Saran Cara Penggunaan Modul………………………………………………… . 4
KEGIATAN BELAJAR 1 PENGANTAR GRAFIKA KOMPUTER .......................... 9
A.Tujuan Pembelajaran ...................................................................................... 9
B.Indikator Pencapaian Kompetensi ................................................................... 9
C.Uraian Materi .................................................................................................. 9
D.Aktivitas Pembelajaran ................................................................................. 14
E.Latihan/Tugas ............................................................................................... 14
F.Rangkuman .................................................................................................. 15
G.Umpan Balik……………………………………………………………………… 16
H.Kunci Jawaban............................................................................................. 16
KEGIATAN BELAJAR 2 OPENGL DAN LWJGL ................................................ 19
A.Tujuan Pembelajaran .................................................................................... 19
B.Indikator Pencapaian Kompetensi ................................................................. 19
C.Uraian Materi ................................................................................................ 19
E.Latihan/Tugas ............................................................................................... 31
F.Rangkuman................................................................................................... 31
G. Umpan Balik…………………………………………………………………….. .. 32
H.Kunci Jawaban ............................................................................................. 32
vi
KEGIATAN BELAJAR 3 PRIMITIF OBJEK ....................................................... 35
C.Uraian Materi ................................................................................................ 35
E.Latihan/Tugas ............................................................................................... 43
F.Rangkuman................................................................................................... 43
G. Umpan Balik………………………………………………………………………. 44
H.Kunci Jawaban ............................................................................................. 44
KEGIATAN BELAJAR 4 PEMODELAN OBJEK 2 DIMENSI ............................. 51
C.Uraian Materi ................................................................................................ 51
E.Latihan/Tugas ............................................................................................... 62
F.Rangkuman................................................................................................... 63
G. Umpan Balik………………………………………………………………………. 63
H.Kunci Jawaban ............................................................................................. 64
KEGIATAN BELAJAR 5 PEMBUATAN OBJEK 3 DIMENSI .............................. 71
C.Uraian Materi ................................................................................................ 71
E.Latihan/Tugas ............................................................................................... 78
F.Rangkuman................................................................................................... 79
G. Umpan Balik……………………………………………………………………..... 80
H.Kunci Jawaban ............................................................................................. 80
KEGIATAN BELAJAR 6 PEMBUATAN TEKSTURE .......................................... 85
C.Uraian Materi ................................................................................................ 85
vii
E.Latihan/Tugas ............................................................................................... 96
F.Rangkuman................................................................................................... 97
G. Umpan Balik………………………………………………………………………. 98
H. Kunci Jawaban……………………………………………………………………. 98
KEGIATAN BELAJAR 7 TRANSFORMASI PROYEKSI.................................. 105
A.Tujuan Pembelajaran .................................................................................. 105
B.Indikator Pencapaian Kompetensi ............................................................... 105
C.Uraian Materi .............................................................................................. 105
D.Aktivitas Pembelajaran ............................................................................... 109
E.Latihan/Tugas ............................................................................................. 114
F.Rangkuman................................................................................................. 115
G.Umpan Balik……………………………………………………………………. . 116
H.Kunci Jawaban ........................................................................................... 116
KEGIATAN BELAJAR 8 RENDERING ........................................................... 121
A.Tujuan Pembelajaran .................................................................................. 121
B.Indikator Pencapaian Kompetensi ............................................................... 121
C.Uraian Materi .............................................................................................. 121
D.Aktivitas Pembelajaran ............................................................................... 124
E.Latihan/Tugas ............................................................................................. 134
F.Rangkuman................................................................................................. 136
G. Umpan Balik………………………………………………………………………137
H. Kunci Jawaban………………………………………………………………. 138
PENUTUP ....................................................................................................... 139
EVALUASI ....................................................................................................... 141
GLOSARIUM ................................................................................................... 145
DAFTAR PUSTAKA ......................................................................................... 149
viii
DAFTAR GAMBAR
Gambar 1 Peta Kedudukan Modul Grafika Komputer .......................................... 3

Gambar 2 Struktur Modul Grafika Komputer ........................................................ 4
Gambar 3 Translasi ........................................................................................... 52
Gambar 4 Rotasi................................................................................................ 52
Gambar 5 Skala ................................................................................................. 53
Gambar 6 Koordinat .......................................................................................... 68
Gambar 7 Surface ............................................................................................. 68
Gambar 8 Vertex dan Edge ............................................................................... 68
Gambar 9 Penggunaan Teksture dalam Game Chect Out 3D ........................... 82
Gambar 10 Analogi Pengambilan Gambar oleh Kamera.................................. 102
Gambar 11 Transformasi Ortogonal dan Proyeksi ........................................... 103
Gambar 12 Transformasi Ortogonal................................................................. 104
Gambar 13 Ilustrasi Transformasi Ortogonal dari Kode Program ..................... 104
ix
x
DAFTAR TABEL
Tabel 1 Peta Kompetensi..................................................................................... 3

Tabel 2 Data Algoritma DDA(Digital Differential Analyzer) ................................. 38
Tabel 4 Vertex Penyusun Kubus........................................................................ 93
Tabel 5 Permukaan Kubus ................................................................................ 93
xi
…
xii
PENDAHULUAN
A. Latar Belakang
Guru dan tenaga kependidikan wajib melaksanakan kegiatan pengembangan

keprofesian secara berkelanjutan agar dapat melaksanakan tugas
profesionalnya. Program Keahlian Ganda (PKG) adalah pengembangan
kompetensi Guru dan Tenaga Kependidikan yang dilaksanakan sesuai
kebutuhan, bertahap, dan berkelanjutan untuk meningkatkan profesionalitasnya.
PKG sebagai salah satu strategi pembinaan guru dan tenaga kependidikan
diharapkan dapat menjamin guru dan tenaga kependidikan mampu secara terus
menerus memelihara, meningkatkan, dan mengembangkan kompetensi sesuai
dengan standar yang telah ditetapkan. Pelaksanaan kegiatan PKG akan
mengurangi kesenjangan antara kompetensi yang dimiliki guru dan tenaga
kependidikan dengan tuntutan profesional yang dipersyaratkan.
Di dalam pelaksanaan diklat yang dilaksanakan oleh PPPPTK/LPPPTK KPTK
diperlukan suatu modul yang berfungsi sebagai salah satu sumber belajar guru.
Modul Diklat PKG Guru Rekayasa Perangkat Lunak (RPL) Level 7 “Grafika
Komputer” ini dapat digunakan oleh guru dan tenaga kependidikan dan sebagai
acuan untuk memenuhi tuntutan kompetensinya, sehingga guru dapat
melaksanakan tugasnya secara professional sesuai dengan standar yang telah
ditetapkan.
Modul Diklat PKG Guru RPL Level 7 grafika komputer ini mempelajari tentang
teori dan praktik tentang konsep dasar grafika komputer, penggunaan library
OpenGL dan LWJGL ke dalam perangkat lunak yang dapat di integrasikan ke
dalam Integrated Development Environment(IDE) , pemodelan 2 dimensi yang
diawali dengan sistem koordinat dan pembuatan primitif objek, pemodelan 3
dimensi dengan pembuatan objek 3 dimensi dan ,pemanfaatan teknik
lighting,shading, texture untuk menciptakan objek 3 yang nyata.
1
B. Tujuan
Tujuan disusunnya modul diklat PKG Guru RPL Level 7 ini adalah memberikan
pengetahuan, ketrampilan dan sikap kepada guru atau peserta diklat dalam
membangun objek 2D dan 3D dengan konsep grafika komputer dengan terampil
melalui aktifitas observasi dan praktikum. Setelah mempelajari modul ini
diharapkan guru dapat :
“Membangun objek 3D menggunakan konsep pemrograman grafik”.
Sedangkan indikator pencapaian kompetensinya yang disusun dalam Standar
Kompetensi Guru secara umum adalah :
1. Menganalisis Integrated Development Environment (IDE) pemrograman
grafik
2. Membuat instruksi dasar OPENGL
3. Membuat pemodelan objek 3D menggunakan OPENGL
4. Membuat pergerakan objek 3D menggunakan OPENGL
C. Peta Kompetensi
Modul ini merupakan modul ke-7 dari 10 modul yang dikembangkan.
Berdasarkan struktur jenjang diklat PKG Modul desain sIstem basis data ini
termasuk dalam jenjang lanjut. Modul ini akan digunakan untuk Program
Keahlian Ganda (PKG) bagi guru-guru produktif Sekolah menengah Kejuruan
pada paket keahlian Rekayasa Perangkat Lunak.
2
Proyek Sistem Informasi Proyek Sistem Informasi Proyek Sistem Informasi
Berbasis Dekstop Berbasis Web Berbasis Perangkat Bergerak
8 (50 JP) 9 (50 JP) 10 (50 JP)
Pemrograman Web Dinamis

6 (50 JP)
Grafika Komputer
(50 JP) Pemrograman Berbasis Pemrograman Berbasis
Dekstop Perangkat Bergerak
7 4 (50 JP) 5 (50 JP)
Pemrograman Berorientasi Objek

3 (50 JP)
Desain Sistem Basis Data Sistem Manajemen Basis Data

1 (50 JP) 2 (50 JP)
Gambar 1 Peta kedudukan Modul Grafika Komputer
Tabel 1 Peta kompetensi Grafika Komputer :
Standar Kompetensi Guru

Kompetensi
Utama Kompetensi Kompetensi Guru Indikator pencapaian
Inti Guru (KIG) Keahlian (KGK) Kompetensi
Profesional 1. Menguasai 20.13 Membangun 20.13.1 Menganalisis Integrated
materi, objek 3D Development
struktur, menggunakan Environment (IDE)
konsep dan konsep pemrograman grafik
pola pikir pemrograman
keilmuan grafik 20.13.2 Membuat instruksi dasar
yang OPENGL
mendukung
mata 20.13.3 Membuat pemodelan
pelajaran objek 3D menggunakan
yang diampu OPENGL
20.13.4 Membuat pergerakan

objek 3D menggunakan
OPENGL
3
D. Ruang Lingkup Penggunaan Modul
Modul ini disusun dengan empat pembahasan utama (materi pokok). Setiap
materi pokok terdapat beberapa kegiatan pembelajaran untuk mencapai
kompetensi yang telah ditentukan. Setiap kegiatan pembelajaran terdiri dari
tujuan pembelajaran, indikator essential, uraian materi, aktifitas pembelajaran,
latihan/tugas/kasus, rangkuman dan umpan balik. Materi dalam modul ini
mencakup empat topik utama yaitu: 1) Dasar-Dasar Grafika Komputer, 2)
Pemodelan Objek 2 Dimensi , 3) Pemodelan Objek 3 Dimensi dan, 4)Rendering
Kegiatan Belajar 4
Kegiatan Belajar 2 Kegiatan Belajar 6 Kegiatan Belajar 8
Pembuatan Objek 2
OpenGL dan LWJGL Pembuatan Teksture Lighting dan Shading
Dimensi
Kegiatan Belajar 1 Kegiatan Belajar 5

Kegiatan Belajar 3 Kegiatan Belajar 7
Pengantar Grafika Pembuatan objek 3
Primitif Drawing Transformasi Proyeksi
Komputer Dimensi
Topik 1 Topik 2 Topik 3 Topik 4

Dasar-Dasar Grafika Pemodelan Objek 2 Pemodelan Objek 3 Rendering
Komputer Dimensi Dimensi
Gambar 2 Struktur modul PKB Guru RPL Grade 7 Grafika Komputer
E. Saran Cara Penggunaan Modul
Modul grafika komputer ini terdiri dari empat topik utama. Peserta diklat dapat
mempalajari sesui dengan urutan topik mulai topik 1 sampai topik 4. Keempat
topik tersebut tidak memiliki ketergantungan secara penuh, sehingga peserta
diklat dapat mempelajari tidak secara berurutan. Akan tetapi untuk masing-
masing topik setiap kegiatan belajar mempunyai keterkaitan secara penuh. Ini
berarti untuk setiap topik materi yang dipelajari harus secara berurutan sesuai
urutan kegiatan pembelajaran.
Untuk setiap kegiatan pembelajaran, uruatan yang harus dilakukan oleh peserta
diklat dalam mempelajari modul ini adalah :
4
1. Membaca tujuan pembelajaran sehingga memahami target atau tujuan
dari kegiatan belajar tersebut.
2. Membaca indikator pencapaian kompetensi sehingga memahami obyek
yang akan dijadikan kriteria pengukuran untuk mencapai tujuan
pembelajaran.
3. Membaca uraian materi pembelajaran sehingga memiliki pengetahuan,
ketrampilan dan sikap terhadap kompetensi yang akan dicapai
4. Melakukan aktifitas pembelajaran dengan urutan atau kasus
permasalahan sesuai dengan contoh.
5. Mengerjakan latihan/soal atau tugas dengan mengisi lembar kerja yang
telah disediakan.
6. Menjawab pertanyaan dalam umpan balik yang akan mengukur tingkat
pencapaian kompetensi melalui penilaian diri.
5
6
7
8
DASAR-DASAR GRAFIKA KOMPUTER
Pengantar Grafika Komputer
A. Tujuan Pembelajaran
Setelah mengikuti kegiatan belajar 1 ini peserta diklat diharapkan dapat :
1. Melalui studi literatur peserta diklat dapat menganalisis komponen-
komponen penting dalam grafika komputer.
2. Melalui diskusi peserta diklat dapat menggambarkan peranan grafika
komputer dalam berbagai bidang.
B. Indikator Pencapaian Kompetensi

1. Peserta diklat mampu menganalisis konsep grafis dalam grafika komputer
2. Peserta diklat mampu membedakan desain grafis bitmap dan vektor
3. Peserta diklat mampu menjelaskan penerapan grafika komputer dalam
berbagai bidang
C. Uraian Materi
1. Pengertian Grafika Komputer

Grafika komputer (computer graphics) merupakan salah satu ilmu informatika
yang mempelajari pembuatan dan manipulasi gambar dengan komputer atau
secara digital. Grafis adalah gambar yang tersusun dari koordinat-koordinat.
Dengan demikian sumber gambar yang muncul pada layar monitor komputer
terdiri atas titik-titik yang mempunyai nilai koordinat. Layar Monitor berfungsi
sebagai sumbu koordinat x dan y. Dengan kata lain maka grafika komputer
adalah proses konversi informasi digital ke dalam format visual untuk ditampilkan
pada terminal atau output pada printer. Dalam pembuatan komputer grafis
diperlukan komputer digital untuk menyimpan dan memanipulasi gambar,
tampilan layar, input / output, dan perangkat lunak khusus yang memungkinkan
komputer digunakan untuk menggambar, warna, dan memanipulasi gambar
sehingga dapat disimpan dalam memori.
9
Format komputer grafis umum termasuk GIF dan JPEG, untuk gambar
tunggal, dan MPEG dan Quicktime, untuk gambar multiframe.
Aplikasi grafika komputer telah digunakan secara luas dalam bisnis,

penelitian ilmiah, dan hiburan. Salah satu bidang grafika komputer yang
sangat terkenal adalah Desain Grafis. Bentuk sederhana dari grafika
komputer yaitu titik, garis dan bidang 2 Dimensi (2D), yang kemudian
dikembangkan menjadi bidang 3 Dimensi (3D), pengolahan citra (image
processing) dan pengenalan pola (pattern recognation). Salah satu manfaat
utama dari grafis komputer adalah bahwa gambar dapat dimanipulasi dengan
relatif mudah dan banyak efek visual yang mungkin karena gambar dapat
dimainkan dengan lebih baik sampai pada efek yang diinginkan tercapai.
Pada dasarnya desain grafis dibedakan atas dua, yaitu desain bitmap dan
desain vector. Grafis desain bitmap dibentuk dengan raster/pixel/dot/titik/point
koordinat. Pembuatan citra (images) sebagai koleksi dari dots (pixels) yang
kecil, independent dan dapat diatur dalam bentuk baris dan kolom. Raster
grafika juga dikenal sebagai pixel graphics. Hampir semua perangkat output
komputer menggunakan konsep raster seperti CRTs, LCDs, LEDs, dan
plasma screens.
Pixel merupakan singkatan dari picture element, kadang-kadang juga disebut

pel. Pixel merupakan satu titik dalam satu grid berbentuk persegi atau juga
beribu titik secara individual “dilukis” menjadi suatu bentuk image yang
dihasilkan pada layar komputer atau pada kertas oleh sebuah Printer.
Semakin banyak jumlah titik yang membentuk suatu grafis bitmap berarti
semakin tinggi tingkat kerapatannya. Hal ini menyebabkan semakin halus
citra grafis, tetapi kapasitas filenya semakin besar. Program aplikasi grafis
yang berbasis bitmap, antara lain : Adobe Photoshop, Corel Photopaint,
Microsoft Photo Editor dan Macromedia Fireworks.
Grafis jenis vektor merupakan perkembangan dari sistem grafis bitmap

(digital). Grafis ini tidak tergantung pada banyaknya pixel penyusunnya dan
kondisi monitor karena tampilan vektor tersusun atas garis-garis. Tampilan
akan terlihat jelas meskipun dilakukan pembesaran (zooming). Penggunaan
titik-titik koordinat dan rumus-rumus tertentu dapat menciptakan bermacam-
10
macam bentuk grafis, seperti lingkaran, segitiga, bujur sangkar dan poligon.
Dengan demikian , pemakaian grafis vektor akan lebih irit dari segi volume
file, tetapi dari segi pemakaian prosessor akan memakan banyak memori.
Program aplikasi grafis yang berbasis vektor antara lain CorelDraw ,
Macromedia Free hand, Adobe Illustrator dan Micrografx Designer.
Dalam grafika komputer memiliki tiga tema utama, yaitu :

 Modeling, yaitu cara mempresentasikan sebuah objek atau lingkungan di
sekitar.
 Animasi, yaitu mempelajari tentang penggambaran dan manipulasi
gerakan objek secara otomatis atau manual.
 Rendering, yaitu mempelajari algoritma untuk membuat dan
menampilkan struktur/detail suatu objek.
2. Peran dan Penggunaan Grafika Komputer

Grafika komputer telah menunjukkan kemajuan yang pesat dalam
pengembangan berbagai aplikasi untuk menghasilkan gambar. Walaupun
pada awalnya aplikasi dalam sains dan engineering memerlukan peralatan
yang mahal, perkembangan teknologi komputer memberikan kemudahan
penggunaan komputer sebagai alat bantu aplikasi grafik komputer interaktif.
Pada saat ini grafika komputer digunakan secara rutin di bidang ilmu
pengetahuan, teknik, kedokteran, bisnis, industri, pemerintahan, seni,
hiburan, pendidikan, periklanan, dan lain sebagainya. Berikut contoh
peranan grafika komputer dalam berbagai bidang:
1) Desain
Proses desain grafika komputer terutama digunakan pada sistem
engineering dan arsitektur. Salah satu contoh penerapan grafika
computer yaitu Computer Aided Design (CAD) digunakan untuk
pembuatan desain mobil, bangunan, pesawat terbang, kapal,
komputer, tekstil, dan lain-lain.
Pada beberapa aplikasi desain, objek ditampilkan dalam bentuk
wireframe yaitu bagian gambar yang memperlihatkan keseluruhan
bentuk dan fitur internal dari sebuah objek, dimana diperlihatkan
11
keseluruhan bentuk, dengan bentuk internal dari objek tersebut.
Penggunaan wireframe bermanfaat bagi designer untuk melihat isi
dari objek tersebut.
Contoh perangkat lunak yang digunakan yaitu AutoCAD, 3D Studio
Max, dan Maya.
2) Grafika Presentasi
Bidang lain yang berhubungan dengan grafika komputer adalah grafik
presentasi yang dapat berupa cetakan, slide, dan transparansi.
Grafik presentasi biasanya digunakan untuk melengkapi laporan
keuangan, sains, data ekonomi, dan lain-lain. Bentuk grafik
presentasi tersebut adalah chart, bar chart, pie chart, dan lain-lain.
3) Computer Art
Metode grafika komputer digunakan dalam aplikasi commercial art
dan fine art. Seniman menggunakan bermacam-macam perangkat
lunak grafik, dan kadang dilengkapi dengan perangkat keras khusus.
Contoh perangkat lunak yang digunakan yaitu Corel Draw, Adobe
Photoshop, Adobe Ilustrator, Macromedia, dan sebagainya.
4) Film
Pada pembuatan film layar lebar, grafika komputer banyak digunakan
untuk menunjang proses pemodelan, visualisasi, dan editing.
Misalnya dalam proses special effect, film animasi.
5) Televisi
Grafika komputer dalam tayangan televisi juga dapat berupa iklan,
tampilan tiap acara, dan lainnya.
6) Video Musik
Produksi video musik tidak terlepas dari grafika komputer,
diantaranya pembuatan promosi, cover atau kemasan video, serta
animasi yang mengiringi setiap lagu. Proses editing video dan audio
dilakukan dengan menggunakan komputer.
7) Game
Berbagai game dapat dijalankan pada komputer PC, video player
dengan monitor TV, dan ada yang menggunakan perangkat keras
12
khusus. Alat input interaktif seperti mouse dan joystick diperlukan
untuk aplikasi game.
8) Pendidikan
Komputer sebagai alat bantu pendidikan (Computer Assisted
Instruction) sudah cukup dikenal.
Aplikasi bidang pengajaran dengan komputer sebagai alat bantunya,
diantaranya:
 Drill and Practice (latih dan praktek)
Computer Assisted Instruction (CAI) menggantikan pengajar untuk
memberikan latihan kepada siswa.
 Tutorial (penjelasan)
Sistem komputer digunakan untuk menyampaikan materi ajaran.
 Simulasi
Digunakan untuk mengkaji permasalahan yang rumit pada bidang
biologi, transportasi, ekonomi, dan lain-lain.
Aplikasi bidang bukan pengajaran dengan alat bantu komputer,
diantaranya :
a. Computer Assisted Testing (Ujian Berbantuan Komputer)
Komputer digunakan untuk sarana ujian.
b. Computer Assisted Guidance (Pengarahan Berbantuan
Komputer)
Komputer digunakan sebagai sarana untuk mencari informasi
yang diperlukan.
c. Computer Managed Instruction
Komputer digunakan untuk merencanakan pelajaran, evaluasi
belajar, serta memantau prestasi siswa.
9) Visualisasi
Ilmuwan, ahli kedokteran, analis bisnis, dan lain-lain sering
menggunakan banyak informasi suatu masalah dalam mempelajari
perilaku proses tertentu. Informasi tersebut berisi ribuan data untuk
memberikan gambaran hasil suatu evaluasi. Data tersebut diproses
sehingga mendapatkan hasil dalam bentuk visual.
10) Image Processing
13
Image processing (pengolahan citra) merupakan teknik untuk
memodifikasi atau menginterpretasi gambar yang ada, seperti foto
dan rangkaian gambar film. Dua macam prinsip pengolahan citra
adalah :
 Meningkatkan kualitas gambar.
 Memberikan persepsi dari informasi visual, seperti pada robotik.
Untuk melakukan pengolahan citra, pertama-tama membuat digitasi
dari foto atau membuat foto menjadi file image. Selanjutnya metode
digital dapat digunakan untuk memodifikasi gambar sehingga
mendapatkan kualitas yang baik.
11) Graphical User Interface (GUI)
Graphical interface (antarmuka grafik) banyak digunakan dalam
setiap aplikasi. Komponen utamanya adalah window manager,
dimana pengguna dapat mengatur tampilan dari window. Interface
juga menampilkan menu dan icon untuk mempercepat pemilihan
yang dilakukan oleh pengguna.
D. Aktivitas Pembelajaran
Peserta diklat dibagi menjadi beberapa kelompok untuk mendiskusikan materi
tentang grafika komputer dan penerapan dalam berbagai bidang, kemudian
membuat presentasi.
Kegiatan Praktikum 1.1
1. Topik diskusi 1 : Teknik dan Teknologi dalam Grafika Komputer
2. Topik diskusi 2 : Penerapan Grafika Komputer
E. Latihan Soal
1. Suatu bidang ilmu yang mempelajari bagaimana membangun grafik
(gambar) baik 2D maupun 3D yang kelihatan nyata menggunakan komputer
adalah …
14
2. Berikut ini adalah implementasi dari grafika komputer, adalah ...
a. Simulators ,CAD (Computer Aided Design) , Architectural visualization
b. Simulators ,CAD (Computer Aided Design) , Artificial Intillegence
c. Simulators , Artificial Intillegence, Architectural visualization
d. CAD (Computer Aided Design) , Architectural visualization,Artificial
Intillegence
F. Rangkuman
Grafika komputer (computer graphics) merupakan salah satu ilmu informatika
yang mempelajari pembuatan dan manipulasi gambar dengan komputer atau
secara digital. Grafis adalah gambar yang tersusun dari koordinat-koordinat.
Dengan demikian sumber gambar yang muncul pada layar monitor komputer
terdiri atas titik-titik yang mempunyai nilai koordinat. Layar Monitor berfungsi
sebagai sumbu koordinat x dan y. Dengan kata lain maka grafika komputer
adalah proses konversi informasi digital ke dalam format visual untuk ditampilkan
pada terminal atau output pada printer. Dalam pembuatan komputer grafis
diperlukan komputer digital untuk menyimpan dan memanipulasi gambar,
tampilan layar, input / output, dan perangkat lunak khusus yang memungkinkan
komputer digunakan untuk menggambar, warna, dan memanipulasi gambar
sehingga dapat disimpan dalam memori.
Pada dasarnya desain grafis dibedakan atas dua, yaitu desain bitmap dan desain
vector. Grafis desain bitmap dibentuk dengan raster/pixel/dot/titik/point koordinat.
Pembuatan citra (images) sebagai koleksi dari dots (pixels) yang kecil,
independent dan dapat diatur dalam bentuk baris dan kolom. Raster grafika juga
dikenal sebagai pixel graphics. Hampir semua perangkat output komputer
menggunakan konsep raster seperti CRTs, LCDs, LEDs, dan plasma screens.
Grafis jenis vektor merupakan perkembangan dari sistem grafis bitmap (digital).
Grafis ini tidak tergantung pada banyaknya pixel penyusunnya dan kondisi
monitor karena tampilan vektor tersusun atas garis-garis. Tampilan akan terlihat
jelas meskipun dilakukan pembesaran (zooming). Penggunaan titik-titik koordinat
dan rumus-rumus tertentu dapat menciptakan bermacam-macam bentuk grafis,
seperti lingkaran, segitiga, bujur sangkar dan poligon. Dengan demikian ,
15
pemakaian grafis vektor akan lebih irit dari segi volume file, tetapi dari segi
pemakaian prosessor akan memakan banyak memori.
Pada saat ini grafika komputer digunakan secara rutin dibidang ilmu
pengetahuan, teknik, kedokteran, bisnis, industri, pemerintahan, seni, hiburan,
pendidikan, periklanan, dan lain sebagainya.
G. Umpan Balik
IPK Hasil Yang Dicapai Rencana Tindak Lanjut

Peserta diklat mampu
menganalisis konsep grafis
dalam grafika komputer dan
berapa proses pencapaian
kompetensinya
membedakan desain grafis
bitmap dan vector dan berapa
besar proses pencapaian
kompetensinya
menjelaskan penerapan grafika
komputer dalam berbagai
bidang dan berapa besar
proses pencapaian
kompetensinya
H. Kunci Jawaban
1. Grafika Komputer
2. a
16
17
18
OpenGL dan LWJGL

1. Melalui diskusi peserta diklat dapat menggambarkan fungsi-fungsi OpenGL
yang digunakan untuk membuat objek
2. Melalui praktikum peserta diklat dapat mengintegrasikan LWJGL ke dalam
Integrated Development Environment IDE NetBeans
3. Melalui praktikum peserta diklat dapat menulis kode program dengan
perintah-perintah dasar OpenGL

1. Peserta diklat mampu menggunakan fungsi-fungsi dasar OpenGL untuk
membuat objek
2. Peserta diklat mampu memodifikasikan fungsi-fungsi dasar OpenGL untuk
membuat objek
3. Peserta diklat mampu menerapkan LWJGL ke dalam IDE NetBeans
4. Peserta diklat mampu membuat kode program dengan perintah-perintah
OpenGL
C. Uraian Materi
1. OpenGL
OpenGL (Open Graphics Library) adalah sebuah program aplikasi antar
muka yang digunakan untuk mendefinisikan komputer grafis 2D dan 3D.
Program lintas-platform API ini umumnya dianggap ketetapan standar dalam
industri komputer dalam interaksi dengan komputer grafis 2D dan juga telah
menjadi alat yang biasa untuk digunakan dengan grafis 3D. Singkatnya,
OpenGL menghilangkan kebutuhan pemrograman untuk menulis ulang
bagian grafis dari sistem operasi setiap kali sebuah bisnis akan diupgrade ke
versi baru dari sistem. Fungsi dasar dari OpenGL adalah untuk
19
mengeluarkan koleksi perintah khusus atau executable ke sistem operasi.
Dengan demikian, program ini bekerja dengan perangkat keras grafis yang
ada yang berada pada hard drive atau sumber tertentu lainnya. Setiap
perintah dirancang untuk melakukan tindakan tertentu, atau memulai efek
khusus tertentu yang terkait dengan grafis.
OpenGL adalah suatu spefikasi grafik pada level rendah yang menyediakan
fungsi untuk pembuatan grafik dasar termasuk titik, garis, dan lingkaran.
OpenGL digunakan untuk keperluan-keperluan pemrograman grafis.OpenGL
bersifat Open-Source, multi-platform dan multi-language serta digunakan
mendefinisikan suatu objek, baik objek 2 dimensi maupun objek 3 dimensi.
OpenGL juga merupakan suatu antarmuka pemrograman aplikasi
(application programming interface (API) yang tidak tergantung pada piranti
dan platform yang digunakan, sehingga OpenGL dapat berjalan pada sistem
operasi Windows, UNIX dan sistem operasi lainnya.
OpenGL pada awalnya didesain untuk digunakan pada bahasa pemrograman
C/C++, namun dalam perkembangannya OpenGL dapat juga digunakan
dalam bahasa pemrograman yang lain seperti Java, Tcl, Ada, Visual Basic,
Delphi, maupun Fortran. Namun OpenGL di-package secara berbeda-beda
sesuai dengan bahasa pemrograman yang digunakan. Oleh karena itu,
package OpenGL tersebut dapat di-download pada situs
http://www.opengl.org sesuai dengan bahasa pemrograman yang akan
digunakan.
OpenGl melayani dua tujuan :
 Untuk menyembunyikan kompleksitas dari interfacing dengan
menggunakan berbagai 3D accelerators dan menggunakan satu
standar API.
 Untuk menyembunyikan kemampuan yang berbeda dari hardware
platform yang mendukung implementasi penuh fitur opengl
(menggunakan software emulation jika diperlukan).
LWJGL
Lightweight Java Game Library (LWJGL) merupakan salah satu jenis game
engine yang berjalan dengan dasar bahasa java (open source dan free).
Game engine sendiri merupakan perangkat lunak yang digunakan khusus
20
dalam pembuatan video game. Inti LWJGL adalah untuk menyisipkan
tampilan level yang lebih rendah dan tidak perlu memasukkan kode.
Sintax Perintah OpenGL
Sintaks perintah OpenGL mengikuti aturan penulisan dari library dimana
fungsi tersebut berasal, format penulisan fungsi OpenGL adalah :
<awalan library><perintah><optional jumlah argumen><optional tipe
argumen>
Semua perintah OpenGL menggunakan awalan gl diikuti dengan huruf
kapital pada setiap kata membentuk nama perintah (sebagai contoh
glClearColor). Untuk mendefinisikan konstanta diawali dengan GL_, dengan
menggunakan huruf kapital dan garis bawah untuk memisahkan kata
(seperti GL_POLY_STIPPLE). Terkadang beberapa huruf dan angka
ditambahkan pada akhir perintah (seperti 3f pada glVertex3f). Dalam hal ini
angka 3 menunjukkan berapa banyak argumen yang harus ada pada
perintah tersebut dan akhiran huruf f menunjukkan jenis datanya yaitu
floating. Sebagai contoh pada dua perintah berikut ini :
glVertex3i(1,0,-2);
glVertex3f(1.0, 0.0, -2.0);
adalah sama yaitu meletakkan titik di layar pada koordinat x = 1, y = 0 dan z
= -2, perbedaannya yaitu pada perintah pertama menspesifikasikan titik
dengan tipe data integer 32-bit, sedangkan yang kedua dengan tipe data
single precision floating point.
Beberapa perintah OpenGL menambahkan perintah huruf akhir v yang
menunjukkan bahwa perintah tersebut menggunakan pointer ke
array/vektor. Di bawah ini contoh perbedaannya.
float color_array[]={1.0,0.0,0.0}
glColor3f (1.0,0.0,0.0);
glColor3fv(color_array);
21
Langkah-langkah instalasi LWJGL ke dalam IDE NetBeans

1. Pilih Lwjgl-X.X.zip yang tersedia dengan men-download file LWJGL
http://lwjgl.org/download.php
2. Unduh Lwjgl-docs-X.X.zip, Javadoc lwjgl untuk di Netbeans
(Direkomendasikan)
3. Unduh Lwjgl-source-X.X.zip, source code lwjgl untuk di Netbeans
(Direkomendasikan)
4. Unduh Lwjgl-applet-X.X.zip jika ingin menggunakan Java Applet dengan
Lwjgl
5. Ekstrak File Lwjgl-X.X.zip dan Lwjgl-source-X.X.zip kecuali Lwjgl-docs-
X.X.zip.
a) Cara Instalasi LWJGL di NetBeans
Berikut tahap-tahap instalasi LWJGL di NetBeans:
1. Buka Netbeans
2. Klik New Project, pilih Java Application > Next
Tulis Project Name dengan nama “TutorialLWJGL”

Klik Tools > Libraries di main menu
22
3. Klik Tombol New Library
4. Berikan nama library dengan LWJGL atau LWJGL-X.X
23
5. Pastikan Library sudah dipilih. Sekarang pilih tab Classpath untuk
menambahkan library terbaru dan kemudian klik tombol Add
JAR/Folder.
6. Pergi ke folder ekstrak LWJGL-X.X.zip dan folder Jar. lwjgl.jar,

lwjgl_util.jar, dan jinput.jar merupakan file jar yang harus Anda
pilih. Anda dapat memilih lebih dari 1 file dengan menahan
tombol Ctrl pada Keyboard.
7. Pilih Tab Sources, kemudian klik Add JAR/Folder. Pergi ke folder

ekstrak Lwjgl-source-X.X.zip dan klik folder src, kemudian pilih
folder generated dan java.
24
8. Pilih Tab Javadoc dan klik Add JAR/Folder. Kemudian pilih file
Lwjgl-docs-X.X.zip
9. Klik OK. Selesai. Library sudah ditambahkan ke dalam Netbeans.
b) Menambahkan library LWJGL ke dalam library di aplikasi

Berikut ini tahap-tahap menambah library LWJGL:
1. Buka Netbeans.
2. Klik kanan pada Libraries aplikasi kemudian pilih Add Library…
25
3. Pilih LWJGL > Klik Add Library.
4. Konfigurasi VM dengan cara klik kanan pada Tutorial lwjgl dan

pilih Properties
26
Kemudian Pilih Run, dan tambahkan script berikut ke dalam kolom
VM Options:
-Djava.library.path="Directory\lwjgl-2.9.1\native\windows"
5. Selesai.
27
Kegiatan Praktikum ini adalah kegiatan praktikum menggunakan struktur

dasar OpenGL dan LWJGL dalam IDE NetBeans.
1. Bagian awal dari program adalah bagian untuk mengimport library-library
yang diperlukan untuk mengintegrasikan LWJGL ke dalam IDE Netbeans
import java.util.logging.Level;
import java.util.logging.Logger;
import static komgraf01.KomGraf01.DISPLAY_HEIGHT;
import static komgraf01.KomGraf01.DISPLAY_WIDTH;
import org.lwjgl.LWJGLException;
import org.lwjgl.input.Keyboard;
import org.lwjgl.input.Mouse;
import org.lwjgl.opengl.Display;
import org.lwjgl.opengl.DisplayMode;
import static org.lwjgl.opengl.GL11.*;
import static org.lwjgl.util.glu.GLU.gluOrtho2D;
2. Bagian kedua dari program adalah bagian yang digunakan untuk

menentukan koordinat dari bidang dua dimensi dalam bentuk
garis dimana nilai satuan berupa double.
public class OpenGL1 {
public void draw() {
glBegin(GL_LINE_LOOP);//Objek garis
glVertex2d(200, 200); // koordinat x dan y
glVertex2d(600, 200);
glEnd();
}
3. Bagian ketiga dari program adalah bagian yang digunakan untuk
inisialisasi OpenGL
public void render() {
glClear(GL_COLOR_BUFFER_BIT);//menghapus layar
glLoadIdentity();
28
glColor3d(1, 0, 0);
draw();
glFlush();
}
public void create() throws LWJGLException {
Display.setDisplayMode(new DisplayMode(800, 600));
Display.setFullscreen(false);
Display.setTitle("GAMBAR Primitives-Geometric :
POLYGON");
Display.create();
initGL();
resizeGL();
}
void initGL() {
glClearColor(0.0f, 1.0f, 1.0f, 1.0f);
glDisable(GL_DEPTH_TEST);
glDisable(GL_LIGHTING);
}
public void resizeGL() {
//2D Scene
glViewport(0, 0, DISPLAY_WIDTH, DISPLAY_HEIGHT);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0.0f, DISPLAY_WIDTH, 0.0f, DISPLAY_HEIGHT);
glPushMatrix();
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glPushMatrix();
}
public void run() {
while (!Display.isCloseRequested() &&
!Keyboard.isKeyDown(Keyboard.KEY_ESCAPE)) {
if (Display.isVisible()) {
update();
render();
} else {
if (Display.isDirty()) {
29
render();
}
try {
Thread.sleep(100);
} catch (InterruptedException ex) {
}
}
Display.update();
Display.sync(60);
}
}
private void update() {

}
public void destroy() {

Mouse.destroy();
Keyboard.destroy();
Display.destroy();
}
public static void main(String[] args) {
OpenGL1 b1 = new OpenGL1();
try {
b1.create();
b1.run();
} catch (LWJGLException ex) {
Logger.getLogger(Belajar1.class.getName()).log(Level.SEVERE,
null, ex);
}
}
}
30
E. Latihan / Tugas
Latihan
1. OpenGL (Open Graphics Library) bersifat Open-Source, multi-platform dan

multi-language adalah sebuah program aplikasi interface untuk
mendifinisikan suatu objek yaitu ....
2. Fungsi dasar dari OpenGL adalah ....
F. Rangkuman
OpenGL (Open Graphics Library) adalah sebuah program aplikasi interface yang
digunakan untuk mendefinisikan komputer grafis 2D dan 3D. Program lintas-
platform API ini umumnya dianggap ketetapan standar dalam industri komputer
dalam interaksi dengan komputer grafis 2D dan juga telah menjadi alat yang
biasa untuk digunakan dengan grafis 3D.OpenGL adalah suatu spefikasi grafik
yang low-level yang menyediakan fungsi untuk pembuatan grafik primitif
termasuk titik, garis, dan lingkaran. OpenGL digunakan untuk keperluan-
keperluan pemrograman grfis.OpenGL bersifat Open-Source, multi-platform dan
multi-language serta digunakan mendefinisikan suatu objek, baik objek 2 dimensi
maupun objek 3 dimensi.
engine yang berjalan dengan dasar bahasa java (open source dan free). Game
engine sendiri merupakan perangkat lunak yang digunakan khusus dalam
pembuatan video game.
Sintaks perintah OpenGL mengikuti aturan penulisan dari library dimana fungsi
tersebut berasal, format penulisan fungsi OpenGL adalah :
<awalan library><perintah><optional jumlah argumen><optional tipe
argumen>
Semua perintah OpenGL menggunakan awalan gl diikuti dengan huruf kapital
pada setiap kata membentuk nama perintah (sebagai contoh glClearColor).
31
G. Umpan Balik
menggunakan fungsi-fungsi
dasar OpenGL untuk membuat
objek dan berapa proses
pencapaian kompetensinya
memodifikasikan fungsi-fungsi
dasar OpenGL untuk membuat
objek dan berapa besar proses
menerapkan LWJGL ke dalam
IDE NetBeans dan berapa
kompetensinya
Peserta diklat mampu membuat
kode program dengan perintah-
perintah OpenGL dan berapa
kompetensinya
H. Kunci Jawaban
1. Objek 2 dimensi dan objek 3 dimensi

2. Mengeluarkan koleksi perintah khusus(grafik) atau executable ke sistem
operasi
32
33
34
PEMODELAN OBJEK 2 DIMENSI
Primitif Objek

1. Melalui diskusi peserta diklat mengemukakan output primitif grafika komputer
untuk membuat objek.
2. Melalui praktikum peserta diklat membuat kode program berdasarkan
algoritma pembentukan garis dan lingkaran.
1. Peserta diklat mampu menerapkan konsep konsep dasar grafika computer

untuk menggambar primitif objek
2. Peserta diklat mampu menggunakan perintah-perintah dasar OpenGL untuk
menggambar primiif objek
3. Peserta diklat mampu menulis kode program sesuai algoritma pembentukan
garis dan lingkaran
C. Uraian Materi
1. Primitif Objek
Objek primitif merupakan bentuk geometri sederhana seperti titik (points), garis
(lines) dan bangunan dua dimensi. Dalam grafika computer, representasi citra
menggunakan primitive grafik dasar memudahkan untur dirender atau digambar
pada layar monitor sebagaimana penggunaan persamaan geometri sederhana.
Contoh objek primitif grafika dasar antara lain : titik, garis, kurva, fill area dan
text. Objek kompleks dapat dibuat dengan menggunakan kombinasi dari objek
primitif ini. Misalkan, Poligaris atau yang dapat didefinisikan sebagai urutan garis
lurus yang saling terhubung. Secara umum algoritma grafis memiliki persamaan
35
tujuan yaitu bagaimana menampilkan hasil citra yang diinginkan berdasarkan
koordinat yang telah ditentukan.
2. Titik dan Garis

Pembentukan titik dilakukan dengan mengkonversi posisi titik koordinat dengan
program aplikasi ke dalam suatu operasi tertentu menggunakan output. Random-
scan (vektor). Sistem menyimpan instruksi pembentukan titik pada display list
dan nilai koordinat untuk menentukan posisi pancaran electron ke arah lapisan
fosfor pada layer. Garis dibuat dengan menentukan posisi titik diantara titik awal
dan akhir dari suatu garis. Untuk menggambar titik (point) digunakan perintah
point(x,y) dimana nilai x dan y adalah koordinat dua dimensi pada layar.
3. Membuat Titik dan Garis

Untuk menggambar titik (point) digunakan perintah point(x,y) dimana nilai x dan
y adalah koordinat pada layar. Sedangkan untuk membuat garis digunakan
perintah lines(x1,y1,x2,y2).
Persamaan garis menurut koordinat Cartesian adalah:
y = m.x + b
dimana m adalah slope (kemiringan) dari garis yang dibentuk oleh dua titik yaitu
(x1,y1) dan (x2, y2). Untuk penambahan x sepanjang garis yaitu dx akan
mendapatkan penambahan y sebesar Δy = m. Δx
 Algoritma DDA (Digital Differential Analyzer)
DDA adalah algoritma pembentukan garis berdasarkan perhitungan Δx dan
Δy, menggunakan rumus y = m. Δ x. Garis dibuat dengan menentukan dua
endpoint yaitu titik awal dan titik akhir. Setiap koordinat titik yang membentuk
garis diperoleh dari perhitungan, kemudian dikonversikan menjadi nilai integer.
Langkah-langkah pembentukan menurut algoritma DDA, yaitu :
1) Tentukan dua titik yang akan dihubungkan.
2) Tentukan salah satu titik sebagai titik awal (x0, y0) dan titik akhir (x1, y1).
3) Hitung Δx = x1 – x0 dan Δ y = y1 – y0.
4) Tentukan step, yaitu jarak maksimum jumlah penambahan nilai x maupun
nilai y dengan cara :
 bila nilai |Δy| > |Δx| maka step = nilai |Δy|.
36
 bila tidak maka step = |Δx|.
5) Hitung penambahan koordinat pixel yaitu x_increment = Δx / step dan
y_increment = Δy / step.
6) Koordinat selanjutnya (x+x_incerement, y+y_increment).
7) Posisi pixel pada layer ditentukan dengan pembulatan nilai koordinasi
tersebut.
8) Ulangi step 6 dan 7 untuk menentukan posisi pixel selanjutnya, sampai x=
x1 dan y = y1
Contoh:
Untuk menggambarkan algoritma DDA dalam pembentukan suatu garis yang
menghubungkan titik (5,5) dan (10,9), pertama-tama ditentukan dx dan dy,
kemudian dicari step untuk mendapatkan x_increment dan y_increment.
Δx = x1 – x 0 = 10-5 = 5
Δy = y1 – y0 = 9 -5 = 4
selanjutnya hitung dan bandingkan nilai absolutnya.
|Δx| = 5
|Δy| = 4
karena |Δx| > |Δy|, maka step = |Δx| = 5, maka diperoleh :
x_inc = 5/5 = 1
y_inc = 4/5 = 0.8
Tabel 2 Data algoritma DDA
K X Y Round(x), round(y)
(5,5)
0 6 5.8 (6,6)
1 7 6.6 (7,7)
2 8 7.4 (8,7)
3 9 8.2 (9,8)
4 10 9 (10,9)
10
9
8
7
37
6
5
5 6 7 8 9 10
 Algoritma Bressenham
Prosedur untuk menggambar kembali garis dengan membulatkan nilai x atau y
ke bilangan integer membutuhkan waktu, serta variable x,y dan m merupakan
bilangan real karena kemiringan merupakan nilai pecahan. Bressenham
mengembangkan algoritma klasik yang lebih menarik, karena hanya
menggunakan perhitungan matematika dengan bilangan integer. Dengan
demikian tidak perlu membulatkan nilai posisi setiap pixel setiap waktu.
Algoritma garis Bressenhem disebut juga midpoint line algorithm adalah
algoritma konversi penambahan nilai integer yang juga dapat diadaptasi untuk
menggambar sebuah lingkaran.
Langkah-langkah untuk membentuk garis menurut algoritma ini adalah:
1) Tentukan dua titik yang akan dihubungkan dalam pembentukan garis.
2) Tetukan salah satu titik disebelah kiri sebagai titik awal (x0, y0) dan titik
lainnya sebagai titik akhir (x1, y1 ).
3) Hitung Δx, Δy, Δ2x, dan 2Δy – 2Δx.
4) Hitung parameter p0 = 2Δy – Δx.
5) Untuk setiap xk sepanjang jalur garis, dimulai dengan k = 0
 bila pk <0 maka titik selanjutnya (xk+1, yk) dan pk+1 = pk +2Δy
 bila tidak maka titik selanjutnya adalah (xk+1, yk+1) dan pk+1=pk+2Δ-y2Δx.
6) Ulangi langkah nomor 5 untuk menentukan posisi pixel selanjutnya, sampai
x=xn.
 Membuat Titik
Create_Point.java
38
public class Create_Point {

glClear(GL_COLOR_BUFFER_BIT);
glLoadIdentity();
glColor3f(0.0f, 1.0f, 0.0f);
glPointSize(10);
glBegin(GL_POINTS);
glVertex2f(100, 100);
glEnd();
}

Create_Point main = null;
try {
System.out.println("Keys:");
System.out.println("esc - Exit");
main = new Create_Point();
main.create();
main.run();
} catch (Exception ex) {
LOGGER.log(Level.SEVERE, ex.toString(), ex);
} finally {
if (main != null) {
main.destroy();
}
}
}
private void create() throws LWJGLException {
Display.setDisplayMode(new DisplayMode(DISPLAY_WIDTH,
DISPLAY_HEIGHT));
Display.setTitle("Create Point");
Display.create();
//Keyboard
Keyboard.create();
//Mouse
Mouse.setGrabbed(false);
Mouse.create();
//OpenGL
initGL();
resizeGL(); //To change body of generated methods, choose
Tools | Templates.
}
private void run() {

39
render();
} else {
render();
}
try {
Thread.sleep(100);
}
}
Display.update();
Display.sync(60);
}
}
private void destroy() {
Mouse.destroy();
Keyboard.destroy();
Display.destroy();
}
private void initGL() {
//2D Initialization
}
private void resizeGL() {
//2D Scene
glLoadIdentity();
glPushMatrix();
glLoadIdentity();
glPushMatrix();
}
}
Keluaran Program
40
 Membuat Garis
Create_Line.java
public class Create_Line {

glColor3f(1.0f, 0.0f, 1.0f);
glLineWidth(5);
glBegin(GL_LINES);
glEnd();
glFlush();
}

Create_Line main = null;
try {
System.out.println("Keys:");
System.out.println("esc - Exit");
main = new Create_Line();
main.create();
main.run();
} catch (Exception ex) {
LOGGER.log(Level.SEVERE, ex.toString(), ex);
41
} finally {
if (main != null) {
main.destroy();
}
}
}
private void create() throws LWJGLException {

Display.setDisplayMode(new DisplayMode(DISPLAY_WIDTH,
DISPLAY_HEIGHT));
}
private void run() {

....
}
private void destroy() {

....
}
private void initGL() {

....
}
private void resizeGL() {

....
}
}
Keluaran Program
42
E. Latihan Soal
Buatlah kode program agar dapat menampilkan seperti sreenshoot di atas

dengan menggunakan fungsi-fungsi primitive drawing dengan ketentuan sebagai
berikut :
Ukuran Window :DisplayMode(800, 600)
Fungsi :glBegin(GL_LINE_LOOP);
Titik awal :glVertex2d(200, 200);
F. Rangkuman
Objek primitif merupakan bentuk geometri sederhana seperti titik (points), garis
(lines) dan bangunan dua dimensi. Dalam grafika computer, representasi citra
menggunakan primitive grafik dasar memudahkan untur dirender atau digambar
pada layar monitor sebagaimana penggunaan persamaan geometri sederhana.
Contoh objek primitif grafika dasar antara lain : titik, garis, kurva, fill area dan
text. Objek kompleks dapat dibuat dengan menggunakan kombinasi dari objek
primitif ini. Pembentukan titik dilakukan dengan mengkonversi suatu posisi titik
koordinat dengan program aplikasi ke dalam suatu operasi tertentu
menggunakan output. Garis dibuat dengan menentukan posisi titik diantara titik
awal dan akhir dari suatu garis. Untuk menggambar titik (point) digunakan
perintah point(x,y) dimana nilai x dan y adalah koordinat pada layar.
43
Untuk menggambar titik (point) digunakan perintah point(x,y) dimana nilai x dan
y adalah koordinat pada layar. Sedangkan untuk membuat garis digunakan
perintah lines(x1,y1,x2,y2).
Terdapat dua algoritma pembentukan titik dan garis yaitu Algoritma DDA (Digital
Differential Analyzer) dan Algoritma Bressenham
G. Umpan Balik

Peserta diklat mampu Peserta
diklat mampu menerapkan
konsep konsep dasar grafika
computer untuk menggambar
primitif objek dan berapa
proses pencapaian
kompetensinya
menggunakan perintah-perintah
dasar OpenGL untuk
menggambar satu bentuk
gabungan dari beberapa primiif
objek dan berapa besar proses
Peserta diklat mampu menulis
kode program sesuai algoritma
pembentukan garis dan
lingkaran dan berapa besar
proses pencapaian
kompetensinya
H. Kunci Jawaban
PrimitiveGaris.java
44
public class PrimitiveGaris {
public void draw() {

glBegin(GL_LINE_LOOP);
glEnd();
}

glLoadIdentity();
glColor3d(1, 0, 0);
draw();
glFlush();
}

Display.setTitle("GAMBAR Primitives-Geometric : GARIS");
Display.create();
45
//OpenGL
initGL();
resizeGL();
}
void initGL() {
}
//2D Scene
glLoadIdentity();
glPushMatrix();
glLoadIdentity();
glPushMatrix();
public void run() {

update();
render();
} else {
render();
}
try {
Thread.sleep(100);
46
}
}
Display.update();
Display.sync(60);
}
}
//
}

Mouse.destroy();
Keyboard.destroy();
Display.destroy();
}

PrimitiveGaris b1 = new PrimitiveGaris();
try {
b1.create();
b1.run();
Logger.getLogger(PrimitiveGaris.class.getName()).log(Level
.SEVERE, null, ex);
}
47
48
49
50
Pemodelan Objek 2 Dimensi

1. Melalui diskusi peserta diklat dapat menganalisa pemodelan objek 2 Dimensi
melalui transformasi geometri.
2. Melalui praktikum peserta diklat dapat membuat kode program dengan
menggunakan operasi transformasi geomentri translasi, penskalaan,dan
rotasi.
1. Peserta diklat mampu menerapkan operasi transformasi geometri translasi,

penskalaan, dan rotasi
2. Peserta diklat mampu menerapkan operasi-operasi dasar OpenGL untuk
membangun objek 2 dimensi
3. Peserta diklat mampu menulis kode program untuk memodelkan objek 2
dimensi melalui proses translasi, penskalaan, dan rotasi
C. Uraian Materi
Grafika komputer merupakan bidang yang menarik minat banyak orang.
Salah satu sub bagian dari grafika komputer adalah pemodelan objek (object
modelling). Dalam pemodelan objek dua dimensi (2D), berbagai objek dapat
dimodelkan menurut kondisi tertentu. Objek yang dimodelkan itu perlu
dimodifikasi. Pemodifikasian objek ini dapat dilakukan dengan melakukan
berbagai operasi fungsi atau operasi transformasi geometri. Transformasi yang
dibuat dapat berupa transformasi dasar ataupun gabungan dari berbagai
transformasi geometri. Contoh transformasi geometri adalah translasi,
penskalaan, putaran (rotasi), potongan dan gabungan. Transformasi ini dikenal
51
dengan istilah transformasi affine. Pada dasarnya proses transformasi ini
adalah proses memindahkan objek tanpa merusak bentuk dari objek itu sendiri.
1. Definisi Objek Grafik 2 Dimensi
Pada sub topik ini peserta akan mempelajari objek grafik 2 dimensi dan
penerapannya dalam aplikasi sederhana.
 Titik 2D
Titik 2D mempunyai 2 nilai, yaitu x dan y yang menyatakan jarak horizontal
dan vertikal dari titik pusat sumbu koordinat (0,0).
 Polyline
Polyline adalah suatu fungsi yang digunakan untuk menggambarkan objek
2D dimana setiap titik pada objek mulai titik ke 0, 1, 2,3,..., n dihubungkan
dengan garis lurus sehingga membentuk kurva terbuka.
2. Pengenalan Operasi Transformasi Geometri

Pada sub topik ini akan dipelajari Operasi Transformasi Geometri dan
penerapannya dalam aplikasi sederhana.
3.1 Operasi Translasi

Transformasi translasi merupakan suatu operasi yang menyebabkan
perpindahan objek 2D dari satu tempat ke tempat yang lain. Perubahan
ini berlaku dalam arah yang sejajar dengan sumbu X dan sumbu Y.
Gambar 3 Proses translasi suatu objek

Translasi dilakukan dengan penambahan translasi pada suatu titik koordinat
dengan translasi vector, yaitu (tx,ty), dimana tx adalah translasi menurut
sumbu x dan ty adalah translasi menurut sumbu y. Koordinat baru titik
yang ditranslasi dapat diperoleh dengan menggunakan rumus :
52
Translasi adalah transformasi dengan bentuk yang tetap, memindahkan
objek apa adanya. Setiap titik dari objek akan ditranslasikan dengan besaran
yang sama.Dalam operasi translasi, setiap titik pada suatu entitas yang
ditranslasi bergerak dengan jarak yang sama. Pergerakan tersebut dapat
berlaku dalam arah sumbu X saja, atau dalam arah sumbu Y saja atau
keduanya.
3.2 Operasi Rotasi

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

Pada sebuah aplikasi yang menggunakan grafik vektor dan grafik bitmap,
rotasi dan translasi sangat di butuhkan. Untuk melakukan kedua proses ini
bisa menggunakan source code yang tersedia yaitu:
 glTranslatef (x, y, z) digunakan untuk merubah titik posisi awal sumbu
koordinat menuju posisi yang ditentukan sesuai koordinat x,y, dan z.
53
 glRotatef (angle, x, y, z) digunakan untuk memutar suatu bidang pada
sudut tertentu (angle).
3.3 Operasi Skala

Penskalaan adalah suatu operasi yang membuat suatu objek berubah
ukurannya baik mengecil ataupun membesar secara seragam atau tidak
seragam tergantung pada faktor penskalaan (scalling factor) yaitu (sx,sy)
yang diberikan. sx adalah faktor penskalaan menurut sumbu x dan sy faktor
penskalaan menurut sumbu y. Koordinat baru diperoleh dengan
x‟ = x + sx (x,y) = titik asal sebelum diskala
y„= y + sy (x‟,y‟) = titik setelah diskala
Nilai lebih dari 1 menyebabkan objek diperbesar, sebaliknya bila nilai lebih
kecil dari 1, maka objek akan diperkecil. Bila (sx,sy) mempunyai nilai
yang sama, maka skala disebut dengan uniform scalling.
Gambar 5 Proses skala dari sutu objek

Perintah yang terakhir yaitu glScale{f,d}(TYPEx,TYPEy,TYPEz) digunakan
untuk mengalikan martiks yang sedang aktif dengan matriks yang
memperbesar, memperkecil atau merefleksikan objek. Masing-masing
koordinat x, y, z dari setiap titik pada objek dikalikan dengan argumen x, y, z.
Perintah glScale merupakan satu-satunya perintah transformasi modelling
yang mengubah ukuran objek. Jika nilai yang diberikan lebih besar dari 1.0
maka objek akan diperbesar, jika nilai yang diberikan kurang dari 1.0 maka
objek akan diperkecil, dan jika nilai yang diberikan negatif, maka objek akan
direfleksikan (dicerminkan).
54
 Translasi
Membuat persegi panjang dengan warna merah. Kemudian hasil
translasi(geser) sebesar 90 terhadap sumbu Y adalah persegi panjang
dengan warna kuning dan ditranslasi(geser) sebesar 180 terhadap sumbu X
dan 90 terhadap sumbu Y adalah persegi panjang warna biru.
Translasi.java
public class Translasi {

public void draw(){
}
glLoadIdentity();
55
glColor3d(1, 0, 0);
buatKotak();
glTranslated(0,90, 0);
glColor3f(1, 1, 0);
buatKotak();
glTranslated(90,180, 0);
glColor3f(0, 0, 1);
buatKotak();
glFlush();
}
public void buatKotak() {
//membuat kotak
glBegin(GL_POLYGON);
glVertex2f(250, 120); //titik kiri bawah
glVertex2f(450, 120); //titik kanan bawah
glVertex2f(450, 200); //titik kanan atas
glVertex2f(250, 200); //titik kiri atas
glEnd();
}
Display.setTitle("Proses Rotasi");
Display.create();
initGL();
resizeGL();
}
void initGL() {
}

glLoadIdentity();
glPushMatrix();
glLoadIdentity();
glPushMatrix();
}
public void run() {
update();
render();
} else {
render();
}
try {
Thread.sleep(100);
56
}
}
Display.update();
Display.sync(60);
}
}
}
Mouse.destroy();
Keyboard.destroy();
Display.destroy();
}
Rotasi b1 = new Rotasi();
try {
b1.create();
b1.run();
Logger.getLogger(Rotasi.class.getName()).log(Level.SEVERE,
null, ex);
}
}
}
 Rotasi
Membuat persegi panjang dengan warna merah. Kemudian hasil
rotasi(diputar) sebesar 15 derajat adalah persegi panjang dengan warna
kuning dan di rotasi(diputar) kembali sebesar -45 derajat adalah persegi
panjang warna biru.
57
Rotasi.java
public class Rotasi {
public void draw(){

//membuat titik
}
glLoadIdentity();
glColor3d(1, 0, 0);
buatKotak();
glRotated(15, 0, 0, 1.0);
glColor3f(1, 1, 0);
buatKotak();
glRotated(-45, 0, 0, 1.0);
glColor3f(0, 0, 1);
buatKotak();
glFlush();
}
//membuat kotak
58
glEnd();
}
Display.setTitle("Proses Rotasi");
Display.create();
//OpenGL
initGL();
resizeGL();
}
void initGL() {
}
glLoadIdentity();
glPushMatrix();
glLoadIdentity();
glPushMatrix();
}
public void run() {
update();
render();
} else {
render();
}
try {
Thread.sleep(100);
}
}
Display.update();
Display.sync(60);
}
}
}
Mouse.destroy();
Keyboard.destroy();
Display.destroy();
59
}
Rotasi b1 = new Rotasi();
try {
b1.create();
b1.run();
Logger.getLogger(Rotasi.class.getName()).log(Level.SEVERE,
null, ex);
}
}
}
 Skala
Membuat persegi panjang dengan warna merah. Kemudian hasil di skala
sebesar x = 2, dan y=2 adalah menjadi persegi panjang dengan warna biru.
Skala.java
60
public class Skala {
public void draw(){

//membuat titik
}
glLoadIdentity();
glColor3d(1, 0, 0);
buatKotak();
glScaled(2, 2, 0);
glColor3d(0, 0, 1);
buatKotak();
glFlush();
}
//membuat kotak
glEnd();
}
Display.setTitle("Proses SKALA");
Display.create();
//OpenGL
initGL();
resizeGL();
}
void initGL() {
}
glLoadIdentity();
glPushMatrix();
glLoadIdentity();
glPushMatrix();
}
public void run() {
61
update();
render();
} else {
render();
}
try {
Thread.sleep(100);
}
}
Display.update();
Display.sync(60);
}
}
}
Mouse.destroy();
Keyboard.destroy();
Display.destroy();
}
Skala b1 = new Skala();
try {
b1.create();
b1.run();
Logger.getLogger(Skala.class.getName()).log(Level.SEVERE,
null, ex);
}
}
}
E. Latihan Soal
1. Buatlah aplikasi sederhana Objek 2 Dimensi seperti gambar dibawah ini
62
F. Rangkuman
Translasi adalah proses transformasi dengan bentuk yang tetap, memindahkan

objek apa adanya. Setiap titik dari objek akan ditranslasikan dengan besaran
yang sama. Dalam operasi translasi, setiap titik pada suatu entitas yang
ditranslasi bergerak dalam jarak yang sama. Pergerakan tersebut dapat berlaku
dalam arah sumbu X saja, atau dalam arah sumbu Y saja atau keduanya.
perlu ditentukan pusat dan besar sudut putar. sedangkan translasi adalah
bawah.
Penskalaan adalah suatu operasi yang membuat suatu objek berubah
ukurannya baik menjadi mengecil ataupun membesar secara seragam atau
tidak seragam tergantung pada faktor penskalaan (scalling factor) yaitu (sx,sy)
yang diberikan. sx adalah faktor penskalaan menurut sumbu x dan sy faktor
penskalaan menurut sumbu y.
G. Umpan Balik

menerapkan operasi transformasi
geometri translasi, penskalaan,
dan rotasi dan berapa proses
menerapkan operasi-operasi
dasar OpenGL untuk membangun
objek 2 dimensi dan berapa besar
proses pencapaian
kompetensinya
kode program untuk memodelkan
63
objek 2 dimensi melalui proses
translasi, penskalaan, dan rotasi
dan berapa besar proses
H. Kunci Jawaban
Jawaban No 1:
Tugas2D.java
public class Tugas2D {

private int width=600;
private int height=600;
public void draw(){

//membuat titik
}
glLoadIdentity();
gluOrtho2D(0, width, 0, height);
glLoadIdentity();
64
buatSegitiga();
glFlush();
}
public void buatSegitiga() {
//membuat triangle
glBegin(GL_TRIANGLES);
glColor3f(1.0f, 0.0f, 0.0f);
glVertex2f(width / 4.0f, height * 3.0f / 4.0f);
glColor3f(0.0f, 1.0f, 0.0f);
glVertex2f(width / 4.0f, height / 4.0f);
// Set color to violet
glColor3f(1.0f, 0.0f, 1.0f);
glVertex2f(width * 3.0f / 4.0f, height / 4.0f);
// Set color to blue
glColor3f(0.0f, 0.0f, 1.0f);
// Top triangle
glVertex2f(width / 4.0f, height * 3.0f / 4.0f);
glVertex2f(width * 3.0f / 4.0f, height * 3.0f / 4.0f);
glVertex2f(width * 3.0f / 4.0f, height / 4.0f);
glEnd();
}
Display.setTitle("Tugas 2 Dimensi");
Display.create();
//OpenGL
initGL();
resizeGL();
}
void initGL() {
}
65
glLoadIdentity();
glPushMatrix();
glLoadIdentity();
glPushMatrix();
}
public void run() {
update();
render();
} else {
render();
}
try {
Thread.sleep(100);
}
}
Display.update();
Display.sync(60);
}
}
}
Mouse.destroy();
Keyboard.destroy();
Display.destroy();
}
Tugas2D b1 = new Tugas2D();
try {
66
b1.create();
b1.run();
Logger.getLogger(Tugas2D.class.getName()).log(Level.SEVERE,
null, ex);
}
}
}
67
68
69
70
PEMODELAN OBJEK 3 DIMENSI
Pembuatan Objek 3 Dimensi

1. Melalui diskusi peserta diklat dapat menganalisis sistem koordinat 3 dimensi
dan pembuatan objek 3 dimensi
2. Melalui praktikum peserta diklat dapat membuat kode program untuk
melakukakan operasi transformasi pada objek 3 dimensi.

1. Peserta diklat mampu memahami sistem koordinat dan struktur objek 3
dimensi
2. Peserta diklat mampu menerapkan operasi-operasi dasar OpenGL untuk
membangun objek 3 dimensi
3. Peserta diklat mampu menulis kode program untuk memodelkan objek 3
dimensi melalui proses translasi, penskalaan, dan rotasi
C. Uraian Materi
Pembeda objek 2 dimensi dan 3 dimensi adalah kedalaman. Kedalaman

didefinisikan sebagai jarak antara viewer terhadap benda yang dia lihat.
Ini berarti berbeda dengan objek 2 dimensi yang hanya menggunakan 2
ukuran, yaitu panjang dan lebar, maka 3 dimensi menggunakan 3 ukuran,
yaitu panjang, lebar dan kedalaman. Secara geometri ketiga ukuran tersebut
disimbolkan dengan sumbu x, y, dan z.
1. Sistem Koordinat
Salah satu sistem koordinat yang dikenal adalah sistem koordinat
kartesian yang digunakan untuk membedakan lokasi atau posisi
sembarang titik atau objek dengan titik atau objek yang lain. Sistem
koordinat kartesian terdiri atas sistem koordinat kartesian 2 dimensi dan
71
sistem koordinat kartesian 3 dimensi.Dalam sistem koordinat 3 dimensi
terdapat satu sumbu lain selain sumbu x dan sumbu y, yaitu sumbu z yang
arahnya tegak lurus terhadap sumbu x dan sumbu y. Hadirnya sumbu z
menyebabkan sistem koordinat ini menjadi lebih hidup karena memunculkan
efek jauh dekat. Untuk lebih jelasnya, lihat pada gambar di bawah ini :
Gambar 6 Koordinat
2. Pemodelan Objek 3 Dimensi

Benda tiga dimensi disusun dari sekumpulan permukaan objek. Gambar di
bawah memberikan contoh bagaimana permukaan objek digunakan untuk
menyusun benda tiga dimensi.
Gambar 7 Surface
Permukaan objek atau surface dapat dibuat dari rangkaian Polygon. Polygon
adalah bentuk yang disusun dari serangkaian garis yang terhubung satu
dengan yang lain dan berbentuk kurva tertutup sehingga membentuk
sebuah objek gambar. Titik sudut dari Polygon disebut vertex
sedangkan garis penyusun Polygon disebut edge.
72
Gambar 8 Vertex dan Edge
Polygon digambar dengan menggambar masing-masing edge dengan

setiap edge merupakan pasangan dari – kecuali
untuk edge terakhir merupakan pasangan dari – .
Bentuk polygon yang paling tepat digunakan untuk membuat
permukaan benda tiga dimensii adalah polygon segitiga (triangle). Hal
ini disebabkan polygon segitiga akan selalu berada dalam keadaan
planar (datar) sementara polygon dengan vertex lebih dari 3 dapat
berada dalam kondisi non-planar karena salah satu vertex tidak berada
di lokasi yang sejajar. Satu hal yang harus diperhatikan pada saat
menggunakan polygon segitiga adalah winding. Winding adalah urutan
dan arah vertex-vertex penyusun polygon. Winding menganggap
bahwa arah vertex berlawanan jarum jam sebagai tampak depan
sedangkan arah vertex searah jarum jam dianggap sebagai bagian
belakang benda.
Pembuatan kode program untuk pembuatan objek 3 dimensi dirancang dengan
melibatkan beberapa file java untuk memudahkan dalam pengaturan dan operasi
transformasi geometri.
Ketikkan script program java berikut untuk mendapatkan keluaran 3 dimensi
yang diharapkan.
73
Buat laporan berdasarkan script program dengan menjelaskan fungsi-fungsi dari
masing-masing perintah dan argument yang terdapat dalam script yang
dibutuhkan untuk membangun objek 3 dimensi sesuai keluaran yang tampak.
Keluaran Program yang diharapkan
Perancangan class diagram
74
lwjgl.OpenGL
CGApplication
PrimitiveDrawing3D
-x : int
-y : int
-z : int
+glTriangle() : void
+main() : void
CfgApplication.java
import static org.lwjgl.util.glu.GLU.*;
import java.awt.Font;
import org.lwjgl.Sys;
public abstract class CfgApplication {

protected long lastFrame;
protected int fps;
protected long last;
protected String windowTitle = "";
protected int width;
protected int height;
protected boolean fullscreen;
protected boolean vsync;
public final int DEFAULT_FONT_SIZE = 14;
protected boolean showFPS;
protected int oldfps;
protected int activeFontTextureId;
public void start(int width, int height, boolean fullscreen,
boolean vsync,
boolean showFPS, String windowTitle) {
this.windowTitle = windowTitle;
this.height = height;
this.width = width;
this.fullscreen = fullscreen;
this.vsync = vsync;
this.showFPS = showFPS;
try {
75
createWindow();
init();
while (!Display.isCloseRequested()
&& !Keyboard.isKeyDown(Keyboard.KEY_ESCAPE))
{
render();
Display.update();
}
deinit();
Display.destroy();
} catch (Exception e) {
e.printStackTrace();
System.exit(0);
}
}
public abstract void render();
public abstract void deinit();
private void createWindow() throws LWJGLException {
Display.setTitle(windowTitle);
Display.setFullscreen(fullscreen);
Display.setVSyncEnabled(vsync);
DisplayMode displayMode = null;
DisplayMode d[] = Display.getAvailableDisplayModes();
for (int i = 0; i < d.length; i++) {
if (d[i].getWidth() == width && d[i].getHeight() ==
height && d[i].getBitsPerPixel() == 32) {
displayMode = d[i];
break;
}
}
Display.setDisplayMode(displayMode);
Display.create();
}
private void setOrthoMode() {
glViewport(0, 0, width, height);
glPushMatrix();
glLoadIdentity();
gluOrtho2D(0, width, height, 0);
glPushMatrix();
glLoadIdentity();
}
private void unsetOrthoMode() {
glPopMatrix();
glPopMatrix();
}
public abstract void init();
}
PrimitiveDrawing3D.java
76
import setting.CGApplication;
public class PrimitiveDrawing3D extends CGApplication {

private boolean wireframe = false;
private boolean pressed = false;
@Override
public void init() {
}
@Override
public void update(int delta) {
toggleWireframe();
}
public void toggleWireframe() {
if (Keyboard.isKeyDown(Keyboard.KEY_R)) {
if (!pressed) {
wireframe = !wireframe;
pressed = true;
}
} else {
pressed = false;
}
}
@Override
glLoadIdentity();
gluPerspective(45.0f, width / height, 1.0f, 100.0f);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
if (wireframe) {
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
} else {
glPolygonMode(GL_FRONT_AND_BACK, GL_FILL);
}
// 4-side of pyramid
glColor3f(0.0f, 1.0f, 0.0f);
glVertex3f(-2, -2, -10);
glVertex3f(2, -2, -10);
glVertex3f(0, 4, -12);
glColor3f(0.0f, 1.0f, 1.0f);

glVertex3f(2, -2, -10);
glVertex3f(2, -2, -14);
glColor3f(1.0f, 1.0f, 0.0f);

glVertex3f(2, -2, -14);
glVertex3f(-2, -2, -14);
glColor3f(0.0f, 0.0f, 1.0f);
77
glVertex3f(-2, -2, -10);
glVertex3f(-2, -2, -14);
// Bottom of pyramid
glColor3f(1.0f, 0.0f, 0.0f);
glVertex3f(-2, -2, -10);
glVertex3f(2, -2, -10);
glVertex3f(-2, -2, -14);
glColor3f(1.0f, 0.0f, 0.5f);

glVertex3f(2, -2, -10);
glVertex3f(2, -2, -14);
glVertex3f(-2, -2, -14);
glEnd();
renderText();
}
private void renderText() {
drawString(180, height - 25 ,
"Primitive Drawing : 4-Sisi Piramid Triangles.");
drawString(200,height-35*
getDefaultFont().getLineHeight(),
"Tekann 'R' untuk Gambar Rangka");
}
@Override
public void deinit() {
}

PrimitiveDrawing3D app = new PrimitiveDrawing3D();
app.start(800, 600, false, false, true,
"3D Primitives");
}
}
}
E. Latihan Soal
1. Untuk menggambarkan translasi suatu objek berupa segitiga dengan
koordinat A(3,4) B(2,1) dan C(4,1) dengan tx,ty(2,5), tentukan koordinat yang
barunya ?
78
2. Untuk menggambarkan skala suatu objek berupa segempat dengan
koordinat A(5,2) B(2,2) C(2,4) dan D(5,4) dengan skala faktor (1,2) tentukan
koordinat yang barunya ?
F. Rangkuman
Pembeda objek 2 dimensi dan 3 dimensi adalah kedalaman. Kedalaman
didefinisikan sebagai jarak antara viewer terhadap benda yang dilihat. Ini
berarti berbeda dengan objek 2 dimensi yang hanya menggunakan 2
ukuran, yaitu panjang dan lebar, maka objek 3 dimensi menggunakan 3
ukuran, yaitu panjang, lebar dan kedalaman. Secara geometri ketiga ukuran
tersebut disimbolkan dengan sumbu x, y, dan z.
Sebuah benda tiga dimensi dapat disusun dengan menghubungkan sejumlah
vertex. Kumpulan vertex yang saling terhubung tersebut disebut sebagai
wireframe atau kerangka, sedangkan benda yang disusun dari kumpulan titik
dan permukaan tersebut disebut sebagai mesh.
Transformasi pada dunia 3 dimensi, pada dasarnya sama dengan transformasi
pada 2 dimensi, hanya pada 3 dimensi kita juga memperhitungkan sumbu
79
Z. Sama seperti pada 2 dimensi, ada tiga transformasi dasar yang dapat
dilakukan yaitu translasi, penskalaan, rotasi. Perbedaannya adalah pada
objek 3 dimensi proses transformasinya dilakukan dengan
mempertimbangkan koordinat yang merupakan besarnya kedalaman dari
objek.
G. Umpan Balik

Peserta diklat mampu memahami
sistem koordinat dan struktur
objek 3 dimensi dan berapa
proses pencapaian
kompetensinya
menerapkan operasi-operasi
dasar OpenGL untuk membangun
objek 3 dimensi dan berapa besar
proses pencapaian
kompetensinya
kode program untuk memodelkan
objek 3 dimensi melalui proses
translasi, penskalaan, dan rotasi
dan berapa besar proses
H. Kunci Jawaban
Jawaban no 1
A = (3,4)
B = (2,1)
C = (2,5)
Vektor (V) = (2,5)
Rumus : x’ = x + tx
ta y’ = y + ty
80
A = (3,4) V = (2,5)
X’ = x + tx
=3+2=5
Y’ = y + ty
=4+5=9
A’ = (5,9)
B = (2,1) V = (2,5)
X’ = x + tx
=2+2=4
Y’ = y + ty
=1+5=6
B’ = (4,6) Dengan demikian hasil translasi
segitiga dengan koordinat
C = (4,1) V = (2,5)
X’ = x + tx A’(5,9) B’(4,6) C’(6,6). Segitiga
= 4+2=6
yang baru sama bentuknya dengan
Y’ = y + ty
=1+5=6 segitiga yang lama. Berikut gambar
C’ = (6,6)
translasi setelah perhitungan
Jawaban no 2
A = (5,2)
B = (2,2)
C = (2,4)
D = (5,4)
Skala faktor = (1,2)
Rumus: x’ = x . sx
y’ = y . sy
A = (5,2) Skala faktor = (1,2) C = (2,4) Skala faktor = (1,2)

X’ = X . Sx X’ = X . Sx
=5.1=5 =2.1=2
Y’ = Y. Sy Y’ = Y. Sy
=2.2=4 =4.2=8
A’ = (5,4) C’ = (2,8)
B = (2,2) Skala faktor = (1,2) D = (5,4) Skala faktor = (1,2)

X’ = X . Sx X’ = X . Sx
=2.1=2 =5.1=5
81
Y’ = Y. Sy Y’ = Y. Sy
=2.2=4 =4.2=8
B’ = (2,4) D’ = (5,8)
Dengan demikian hasil skala persegi panjang dengan koordinat A’ = (5,4), B’ =

(2,4), C = (2,8), D = (5,8). Persegi panjang yang baru sama bentuknya dengan
persegi panjang yang lama.Berikut gambar koordinat setelah proses rotasi.
82
83
84
embuatan Teksture

1. Melalui diskusi peserta diklat dapat menganalisis penggunaan teksture dalam
objek 3 dimensi.
2. Melalui praktikum peserta diklat dapat menulis kode program pemasangan
teksture dalam objel 3 dimensi

1. Peserta diklat dapat memahami jenis-jenis tekture dalam OpenGL
2. Peserta diklat mampu menulis kode program dengan memanfaatkan jenis-
jenis teksture yang dalam library OpenGL
C. Uraian Materi
1. Pengantar Texture
Pemetaan Tekstur menurut Chua Hock-Chuan (2012) didefinisikan sebagai
berikut : “Pemetaan Tekstur adalah salah satu langkah pengembangan pertama
dalam membuat gambar benda tiga dimensi yang lebih menarik dan lebih
kompleks.”
Secara umum, pemetaan tekstur adalah proses “melukis” sebuah gambar ke
permukaan dalam sebuah model. Gambar yang telah diberi texture itu bisa
menjadi sangat kompleks – tetapi proses pemetaan teksture pada gambar
kompleks persis sama dengan proses pemetaan teksture pada gambar
sederhana. Penggunaan pemetaan tekstur pada bentuk yang cukup sederhana
dapat membuat objek yang sederhana menjadi lebih realistis. Misalnya, dinding
planar yang diberi tekstur batu dan dipetakan ke model untuk gambar yang
sangat meyakinkan dari tiga-dimensi dinding batu (Contohnya, game check out
3D merupakan contoh permainan komputer yang menggunakan texture
mapping).
85
Gambar 9 Penggunaan teksture dalam game check out 3D
Dengan memanfaatkan proses pemetaan tekstur memungkinkan kita untuk
memberikan fitur tekstur yang ada pada aplikasi grafika computer pada
permukaan gambar yang kita pilih dan kemudian memungkinkan kita melihat
hasil dari perspektif yang berbeda. Gambar dengan resolusi yang lebih tinggi
akan menghasilkan hasil yang lebih baik bila dilihat dari jarak kecil (karena
daerah permukaan yang dilihat tidak berubah, gambar resolusi tinggi
menyediakan lebih banyak data untuk pemetaan pada model tersebut). Untuk
melihat contoh penurunan kualitas gambar, dapat dilihat dalam berbagai contoh
permainan 3D terutama dengan mengamati bagian datar yang memiliki
texturenya untuk mendapatkan efek realistis nyata (dengan asumsi tidak memiliki
kartu video/VGA yang memiliki texture mapping pada hardware).
2. Konsep Texture mapping
Texturing merupakan proses mewarnai, memberi tekstur, atau memberi efek
material pada sebuah model 3D. Texture mapping adalah teknik shading untuk
pengolahan gambar dengan memetakan sebuah fungsi pada permukaan tiga
dimensi dalam scene. Texture mapping merupakan teknik pemetaan sebuah
tekstur pada pola gambar wireframe, dimana wireframe yang telah dibuat akan
ditampilkan memiliki kulit luar seperti tekstur yang diinginkan. Fungsi yang
dipetakan mencakup satu dimensi, dua dimensi, dan tiga dimensi dan dapat
digambarkan sebagai array atau fungsi matematika atau gambar. Beberapa
contoh teknik dalam texture mapping adalah sebagai berikut :
 Bump mapping umumnya digunakan untuk memperjelas karakteristik
permukaan yang bergelombang. Bump mapping merupakan suatu proses
86
dimana tekstur diaplikasikan pada suatu permukaan dalam sebuah program
grafis komputer tiga dimensi (3D) untuk membuat detail yang lebih baik pada
permukaan tersebut. Bump map biasanya digunakan untuk menambahkan
detail pada suatu permukaan, seperti benjolan, bubungan, goresan dan detail
lainnya yang mempengaruhi kemulusan suatu permukaan. Penggunaan
pemetaan (mapping) ini memungkinkan objek yang dibuat oleh program
komputer grafis biasanya dibentuk melalui penggunaan tardisional bump
map, normal, atau parallax map.
 Transparency mapping untuk mengatur intensitas cahaya permukaan
tembus pandang. Pemetaan Transparansi adalah metode lain
menggunakan Bitmap untuk membuat bahan. Perbedaannya adalah
metode ini adalah menggunakan alpha channel untuk menyingkirkan
bagian yang tidak diinginkan dari Bitmap, hanya menyimpan bagian yang
tertutup oleh alpha channel. Proses ini disebut masking.
 Specularity mapping untuk mengubah kehalusan permukaan
 Illumination maaping untuk memodelkan distribusi cahaya yang datang
dari berbagai arah
 Geometrical Mapping adalah salah satu bagian penting dari texture
mapping. Geometrical mapping secara keseluruhan ditentukan dengan
dengan transformasi tiga dimensi terhadap kamera, Transformasi model
yang menggambarkan geometri scene dan pemberian parameter pada
permukaan dengan tujuan memetakan tekstur ke permukaan.
Gambar 10 Teknik pemetaan teksture
87
3. Jenis - Jenis Texture pada OpenGl
 GL_TEXTURE_1D : Gambar pada texture ini semuanya 1
dimensi.Mempunyai lebar tetapi tidak memiliki tinggi atau kedalaman
dimensi.Mempunyai lebar dan tinggi tetapi tidak memiliki kedalaman
dimensi.Mempunyai lebar, tinggi dan kedalaman.
 GL_TEXTURE_RECTANGLE : Gambar dalam teksture ini 2 dimensi
(hanya satu gambar,tidak memiliki multimapping).Koordinat teksture
digunakan untuk teksture yang tidak dengan titik yang sebenarnya.
 GL_TEXTURE_BUFFER: Gambar dalam teksture ini 1 dimensi (hanya
satu gambar,tidak memiliki multimapping).Penyimpanan untuk data ini
dating dari sebuah buffer object.
 GL_TEXTURE_CUBE_MAP : Terdapat 6 sisi dari gambar 2D ,dan
semua memiliki ukuran yang sama
 GL_TEXTURE_1D_ARRAY : Gambar di teksture ini semuanya 1
dimensi.Bagaimanapun terdiri dari banyak set dari 1 gambar dimensi,
semuanya dengan satu teksture. Panjang array adalah bagian dari
ukuran teksture
 GL_TEXTURE_2D_ARRAY : Gambar di teksture ini semuanya 2
dimensi.Bagaimanapun terdiri dari banyak set dari 2 gambar dimensi,
semuanya dengan satu teksture. Panjang array adalah bagian dari
ukuran teksture.
 GL_TEXTURE_CUBE_MAP_ARRAY : Gambar di teksture ini semuanya
peta kubus. Terdiri dari banyak set peta kubus,semuanya dengan satu
teksture.Panjang array * 6 (angka dari sisi kubus) adalah bagian dari
ukuran teksture
 GL_TEXTURE_2D_MULTISAMPLE : Gambar di teksture ini 2 dimensi
(hanya satu gambar,tidak ada multimapping).Kebanyakan pixel di gambar
ini terdiri dari banyak contoh di dalamnya hanya satu nilai
 GL_TEXTURE_2D_MULTISAMPLE_ARRAY : Kombinasi 2D array dan
jenis 2D multisample.tidak ada multimapping
88
Pembuatan kode program untuk texture terhadapa objek 3 dimensi dirancang

dengan melibatkan beberapa file java untuk memudahkan dalam pengaturan dan
operasi transformasi geometri.
Keluaran Program
89
lwjgl.OpenGL
CGApplication
Texture
-width : int
-height : int
+getWidth() : int
+getHight() : int
TextureMappingTransformasi
-Camera : CGApplication = cmr
-Texture : CGApplication = textr
+loadImage() : void
+main() : void
Texture.java
import java.awt.Font;
public abstract class CGApplication {

protected long lastFrame;
protected int fps;
protected long last;
protected String windowTitle = "";
protected int width;
protected int height;
protected boolean fullscreen;
protected boolean vsync;
public final int DEFAULT_FONT_SIZE = 14;
protected boolean showFPS;
protected int oldfps;
protected int activeFontTextureId;
public void start(int width, int height, boolean fullscreen,
boolean vsync,
boolean showFPS, String windowTitle) {
this.windowTitle = windowTitle;
this.height = height;
this.width = width;
this.fullscreen = fullscreen;
this.vsync = vsync;
this.showFPS = showFPS;
try {
90
createWindow();
init();
while (!Display.isCloseRequested()
&& !Keyboard.isKeyDown(Keyboard.KEY_ESCAPE))
{
render();
Display.update();
}
deinit();
Display.destroy();
} catch (Exception e) {
System.exit(0);
}
}
public abstract void render();
public abstract void deinit();
private void createWindow() throws LWJGLException {
Display.setTitle(windowTitle);
Display.setFullscreen(fullscreen);
Display.setVSyncEnabled(vsync);
DisplayMode displayMode = null;
DisplayMode d[] = Display.getAvailableDisplayModes();
for (int i = 0; i < d.length; i++) {
if (d[i].getWidth() == width && d[i].getHeight() ==
height && d[i].getBitsPerPixel() == 32) {
displayMode = d[i];
break;
}
}
Display.setDisplayMode(displayMode);
Display.create();
}
private void setOrthoMode() {
glPushMatrix();
glLoadIdentity();
gluOrtho2D(0, width, height, 0);
glPushMatrix();
glLoadIdentity();
}
private void unsetOrthoMode() {
glPopMatrix();
glPopMatrix();
}
public abstract void init();
}
GCApplication.java
import java.awt.Color;
import java.awt.Graphics;
91
import java.awt.color.ColorSpace;
import java.awt.geom.AffineTransform;
import java.awt.image.AffineTransformOp;
import java.awt.image.BufferedImage;
import java.awt.image.ColorModel;
import java.awt.image.ComponentColorModel;
import java.awt.image.DataBuffer;
import java.awt.image.DataBufferByte;
import java.awt.image.Raster;
import java.awt.image.WritableRaster;
import java.io.IOException;
import java.net.URL;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.util.Hashtable;
import javax.imageio.ImageIO;
import org.newdawn.slick.util.ResourceLoader;
public class Texture {
private ColorModel glAlphaColorModel = new

ComponentColorModel(
ColorSpace.getInstance(ColorSpace.CS_sRGB),
new int[] { 8, 8, 8, 8 }, true, false,
ComponentColorModel.TRANSLUCENT, DataBuffer.TYPE_BYTE);
private ColorModel glColorModel = new ComponentColorModel(
ColorSpace.getInstance(ColorSpace.CS_sRGB),
new int[] { 8, 8, 8, 0 }, false, false,
ComponentColorModel.OPAQUE,
DataBuffer.TYPE_BYTE);
private ByteBuffer imageData;

private int width;
private int height;
private ByteBuffer convertImageData(BufferedImage
bufferedImage) {
ByteBuffer imageBuffer;
WritableRaster raster;
BufferedImage texImage;
int texWidth = bufferedImage.getWidth();

int texHeight = bufferedImage.getHeight();
if (bufferedImage.getColorModel().hasAlpha()) {
raster= Raster.createInterleavedRaster(
DataBuffer.TYPE_BYTE,texWidth, texHeight, 4,
null);
texImage = new BufferedImage(glAlphaColorModel,
raster, false,new Hashtable<String, Object>());
} else {
raster =Raster.createInterleavedRaster(
DataBuffer.TYPE_BYTE,texWidth,texHeight,3,null);
texImage= new BufferedImage(glColorModel,
raster, false,new Hashtable<String, Object>());
92
}
AffineTransform tx =
AffineTransform.getScaleInstance(1, -1);
tx.translate(0, -bufferedImage.getHeight(null));
AffineTransformOp op = new AffineTransformOp(tx,
AffineTransformOp.TYPE_NEAREST_NEIGHBOR);
bufferedImage = op.filter(bufferedImage, null);
Graphics g = texImage.getGraphics();
g.setColor(new Color(0f, 0f, 0f, 0f));
g.fillRect(0, 0, texWidth, texHeight);
g.drawImage(bufferedImage, 0, 0, null);
this.width = texWidth;
this.height = texHeight;
byte[] data=((DataBufferByte)
texImage.getRaster().getDataBuffer()).getData();
imageBuffer = ByteBuffer.allocateDirect(data.length);
imageBuffer.order(ByteOrder.nativeOrder());
imageBuffer.put(data, 0, data.length);
imageBuffer.flip();
return imageBuffer;
}
public boolean load(String ref) {
URL url = ResourceLoader.getResource(ref);
if (url == null) {
return false;
}
try {
BufferedImage bufferedImage =
ImageIO.read(url);
imageData = convertImageData(bufferedImage);
} catch (IOException e) {
return false;
}
return true;
}
public ByteBuffer getImageData() {
return imageData;
}
public int getWidth() {
return width;
}
public int getHeight() {
return height;
}
}
TextureMappingTranformasi.java
import org.lwjgl.BufferUtils;
import setting.Texture;
93
public class TextureMappingTransformasi extends CGApplication {
private Texture m_texture;
private int m_texID;
private float angle;
@Override
// Load image data

m_texture = new Texture();
if (!m_texture.load("pic/tree.png")) {
System.out.println("Failed to load texture\n");
System.exit(1);
return;
}
// Generate ID m_texID
IntBuffer textureIDBuffer =
BufferUtils.createIntBuffer(1);
glGenTextures(textureIDBuffer);
m_texID = textureIDBuffer.get(0);
// Activate texture m_texID
glBindTexture(GL_TEXTURE_2D, m_texID);
// Copy image data into texture memory
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA,
m_texture.getWidth(),m_texture.getHeight(), 0,
GL_RGBA, GL_UNSIGNED_BYTE,m_texture.getImageData());
// Set magnification and minification filter

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER,
GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER,
GL_LINEAR);
glDisable(GL_TEXTURE_2D);
@Override
angle += 0.05f;
}
private void drawTexturedQuads() {

glBegin(GL_QUADS);
glTexCoord2d(0, 0);
glVertex3f(-2.0f, -2.0f, 0.0f);
glTexCoord2d(1, 0);
glVertex3f(2.0f, -2.0f, 0.0f);
glTexCoord2d(1, 1);
glVertex3f(2.0f, 2.0f, 0.0f);
glTexCoord2d(0, 1);
glVertex3f(-2.0f, 2.0f, 0.0f);
glEnd();
94
}
@Override
glLoadIdentity();
gluPerspective(45.0f, (width) / (height), 1.0f,
100.0f);
// Transformasi
glLoadIdentity();
// Zoom-out
glTranslatef(0.0f, 0.0f, -7.0f);
// Rotasi
glRotatef(angle, 0, 1, 0);
glEnable(GL_DEPTH_TEST);
glEnable(GL_ALPHA_TEST);
glAlphaFunc(GL_GREATER, 0.1f);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
// Texturing
glEnable(GL_TEXTURE_2D);
glBindTexture(GL_TEXTURE_2D, m_texID);
drawTexturedQuads();
glRotatef(90, 0, 1, 0);
drawTexturedQuads();
glDisable(GL_ALPHA_TEST);
glDisable(GL_BLEND);
renderText();
}
drawString(0, height –
getDefaultFont().getLineHeight(),"Tekxture dengan
Transformasi.");
}
glDeleteTextures(m_texID);
}
TextureMappingTransformasi app = new
TextureMappingTransformasi();
app.start(800, 600, false, false, true,"Mapping
Teksturing");
}
}
95
E. Latihan Soal
Buatlah ilustrasi teksture mapping pada sebuah gedung seperti dalam keluaran
program di bawah ini :
Disediakan dua buah file gambar seperti berikut ini :
96
gedungA.png gedungB.png
F. Rangkuman

pengolahan gambar yang memetakan sebuah fungsi pada permukaan tiga
dimensi dalam scene. Fungsi yang dipetakan mencakup satu dimensi, dua
dimensi, dan tiga dimensi dan dapat digambarkan sebagai array atau fungsi
matematika atau gambar.
Texture mapping merupakan teknik pemetaan sebuah tekstur pada pola gambar
wireframe, dimana wireframe yang telah dibuat akan ditampilkan memiliki kulit
luar seperti tekstur yang diinginkan. OpenGl menyediakan banyak sekali jenis
texture yang dapat digunakan untuk membuat objek 2 dimensi dan 3 dimensi
menjadi sangat menarik.
97
G. Umpan Balik

Peserta diklat dapat memahami
jenis-jenis tekture dalam OpenGL
dan berapa proses pencapaian
kompetensinya
kode program dengan
memanfaatkan jenis-jenis teksture
yang dalam library OpenGL dan
berapa besar proses pencapaian
kompetensinya
H. Kunci Jawaban
lwjgl.OpenGL
CGApplication
TextureGedung Texture
-Texture : CGApplication = txture -width : int
+loadImage() : void -height : int
+main() : void +getWidth() : int
+getHight() : int
CGApplication.java
Sama dengan kode program pada kegiatan praktikum 6.1
98
Texture.java
TextureGedung.java
import setting.CfgApplication;
import java.awt.geom.Point2D;
import java.nio.IntBuffer;
import java.util.logging.FileHandler;
import static org.lwjgl.opengl.Display.update;
import org.lwjgl.opengl.GL11;
import static org.lwjgl.opengl.GL12.GL_CLAMP_TO_EDGE;
import org.lwjgl.util.glu.GLU;
public class TeksturGedung extends CGApplication {
public static final int DISPLAY_HEIGHT = 480;

public static final int DISPLAY_WIDTH = 640;
private final int[] m_texID = new int[14];
public final static int NO_WRAP = -1;

// TODO code application logic here
TeksturGedung main = new TeksturGedung();
main.start(800,600,false,false,true,"Tekstur Gedung");
}
glLoadIdentity();
gluPerspective(45.0f,(width)/(height), 1.0f, 700.0f);
glLoadIdentity();
glEnable(GL_ALPHA_TEST);
glAlphaFunc(GL_GREATER, 0.1f);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
glPushMatrix();
99
glTranslatef(-50, 0, 25);
for (int row = 0; row < 2; row++) {
glPushMatrix();
for (int col = 0; col < 6; col++) {
drawBuilding(4, 6, 10);
glTranslatef(6, 0, 0);
}
glPopMatrix();
}
glPopMatrix();
glPushMatrix();
glTranslatef(-50, 0, -50);
for (int row = 0; row < 2; row++) {
glPushMatrix();
for (int col = 0; col < 6; col++) {
}
glPopMatrix();
}
glDisable(GL_ALPHA_TEST);
glDisable(GL_BLEND);
}
}
Mouse.destroy();
Keyboard.destroy();
Display.destroy();
}
}
m_texID[0] = textureIDBuffer.get(0);
100
loadTexture(m_texID[10], "pic/gedungA.png", false,
GL_LINEAR, NO_WRAP);
loadTexture(m_texID[11], "pic/gedungB.png", false,
}
private void drawBuilding(float width, float height, int
texID) {
width = width / 2;
glBindTexture(GL_TEXTURE_2D, m_texID[texID]);
glBegin(GL_QUADS);
// front side
glTexCoord2d(0, 0);
glVertex3f(-width, 0, width);
glTexCoord2d(1, 0);
glVertex3f(width, 0, width);
glTexCoord2d(1, 1);
glVertex3f(width, height, width);
glTexCoord2d(0, 1);
glVertex3f(-width, height, width);
// right side
glTexCoord2d(0, 0);
glTexCoord2d(1, 0);
glVertex3f(width, 0, -width);
glTexCoord2d(1, 1);
glVertex3f(width, height, -width);
glTexCoord2d(0, 1);
// back side
glTexCoord2d(0, 0);
glTexCoord2d(1, 0);
glVertex3f(-width, 0, -width);
glTexCoord2d(1, 1);
glVertex3f(-width, height, -width);
glTexCoord2d(0, 1);
// left side
glTexCoord2d(0, 0);
glTexCoord2d(1, 0);
glTexCoord2d(1, 1);
glTexCoord2d(0, 1);
// top side
101
glEnd();
}
private void loadTexture(int texID, String path, boolean
transparent,int filter, int wrap) {
if (!m_texture.load(path)) {
return;
}
glBindTexture(GL_TEXTURE_2D, texID);
if (transparent) {
glTexImage2D(GL_TEXTURE_2D,0,GL_RGBA,
m_texture.getWidth(),
m_texture.getHeight(), 0, GL_RGBA,
GL_UNSIGNED_BYTE,
m_texture.getImageData());
} else {
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB,
m_texture.getHeight(), 0, GL_RGB
, GL_UNSIGNED_BYTE,
}
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER,
filter);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER,
filter);
if (wrap == -1) {
return;
}
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S,
wrap);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T,
wrap);
}
}
102
103
104
Transformasi Proyeksi

1. Melalui diskusi peserta diklat dapat menganalisis pemanfaatan teknik kamera
dengan transformasi proyeksi
2. Melalui praktikum peserta diklat dapat menulis kode program untuk
melakukan pergerakkan objek 3 dimensi melalui transformasi proyeksi

1. Peserta diklat dapat memahami teknik pengambilan gambar dengan kamera
2. Peserta diklat dapat menerapkan transformasi proyeksi, transformasi viewing,
dan transformasi modeling
3. Peserta diklat dapat menulis kode program untuk melakukan pengerakan
objek 3 dimensi melalui transformasi proyeksi, transformasi viewing, dan
transformasi modeling
C. Uraian Materi
1. Kamera
Dalam grafika 3D, sudut pandang (point of view) adalah bagian dari kamera.
Kamera dalam grafika 3D biasanya tidak didefinisikan secara fisik, namun hanya
untuk menentukan sudut pandang kita pada sebuah lingkungan kerja, sehingga
sering disebut virtual camera.
Sebuah kamera dipengaruhi oleh dua buah faktor penting.
 Faktor pertama adalah lokasi (camera location). Lokasi sebuah kamera
ditentukan dengan sebuah titik (x,y,z).
 Faktor kedua adalah arah pandang kamera. Arah pandang kamera
ditunjukkan dengan sebuah sistem yang disebut sistem koordinat acuan
pandang atau sistem (U,N,V).
105
Arah pandang kamera sangat penting dalam membuat sebuah citra, karena letak
dan arah pandang kamera menentukan apa yang terlihat oleh sebuah kamera.
Penentuan apa yang dilihat oleh kamera biasanya ditentukan dengan sebuah titik
(x,y,z) yang disebut camera interest.
Pada kamera, dikenal istilah field of view yaitu daerah yang terlihat oleh sebuah
kamera. Field of view pada grafika 3D berbentuk piramid, karena layar monitor
sebuah komputer berbentuk segiempat. Objek-objek yang berada dalam field of
view ini akan terlihat dari layar monitor, sedang objek-objek yang berada di luar
field of view ini tidak terlihat pada layar monitor. Field of view ini sangat penting
dalam pemilihan objek yang akan diproses dalam rendering. Objek-objek diluar
field of view biasanya tidak akan diperhitungkan, sehingga perhitungan dalam
proses rendering, tidak perlu dilakukan pada seluruh objek.
Gambar 10. Analogi pengambilan gambar oleh kamera
Untuk menghasilkan gambar dari obyek dengan skenario tertentu kita

harus melakukan beberapa proses, yaitu:
 melakukan pengesetan kamera dalam bentuk setting lensa kamera
(Transformasi Proyeksi ),
 mengarah kamera dengan mengatur letak tripod (Transformasi Viewing),
 mengatur letak obyek (Transformasi Modeling), dan
 mengatur skala dan layout dari foto (Transformasi Viewport)
Transformasi Viewport dengan menggunakan perintah glViewport(). Pada bab
ini, akan dipelajari transformasi-transformasi lainnya.
106
2. Transformasi Proyeksi
Lensa kamera dan mata manusia memiliki daerah penglihatan (viewing
volume) yang berbentuk kerucut, namun karena bentuk display yang
biasanya berbentuk segiempat membuat OpenGL (dan hampir semua API
grafika komputer lain) lebih efisien memodelkan daerah penglihatan sebagai
volume berbentuk piramida.
Tipe transformasi proyeksi ada dua macam, bergantung pada parameter dan
bentuk piramidanya. Dua tipe transformasi tersebut adalah Transformasi
Ortogonal/Paralel (Orthogonal Transformation) dan Transformasi
Perspektif(Perspective Transformation).
Gambar 11 Transformasi Ortogonal dan Transformasi Proyektif.

Transformasi orthogonal dengan parameter default. Transformasi ini membuat
jarak benda relatif terhadap kamera tidak berpengaruh pada citra benda
tersebut.
Biasanya transformasi ini digunakan pada aplikasi-aplikasi teknik seperti gambar
teknik (cf. Gambar 6). Untuk merubah parameter transformasi ortogonal dapat
107
menggunakan perintah glOrtho() dengan didahului proses merubah status
OpenGL ke mode proyeksi dengan perintah
glMatrixMode(GL_PROJECTION).
Gambar 12. Transformasi ortogonal

Pada transformasi jenis ini jarak benda akan mempengaruhi gambar yang di
buat. Parameter transformasi jenis ini dapat dirubah dengan menggunakan
gluPerspective()/glFrustum() , juga dengan didahului proses merubah status
OpenGL ke mode proyeksi dengan perintah glMatrixMode(GL_PROJECTION).
glLoadIdentity( );
gluPerspective(fovy, aspect, near, far);
fovy adalah sudut antara bidang bottom dan up.Dalam gambar berikut ini
ditunjukkan ilustrasi dari implementasi kode program di atas.
108
Gambar 23 Ilustrasi transformasi ortogonal dari kode program
3. Transformasi Viewing
Untuk menghasilkan gambar, kamera perlu diletakkan pada posisi yang
tepat di depan pemandangan yang diinginkan. Secara default, dalam
OpenGL kemera akan berada pada posisi (0,0,0) dengan menghadap ke
arah z = -1 dengan sumbu y mengarah ke atas kamera. Hal ini dapat dilakukan
dengan menggunakan perintah gluLookAt() dengan didahului proses merubah
status OpenGL ke mode proyeksi dengan perintah
glMatrixMode(GL_MODELVIEW).
4. Transformasi Modeling
Selain posisi dan orientasi kamera yang dapat dirubah-rubah, secara natural
obyek juga dapat berpindah posisi dan orientasi relatif terhadap yang lain.
Transformasi obyek dapat direpresentasikan dengan dua cara, yaitu:
 menggunakan matriks transformasi (glLoadMatrix)
 menggunakan operasi transformasi (glRotate , glTranslate )
dengan didahului proses merubah status OpenGL ke mode proyeksi
dengan perintah glMatrixMode(GL_MODELVIEW).
Pembuatan kode program untuk mentransformasi 3 dimensi melalui
pemanfaatan seperti pada teknik kamera untuk melihat dan menggerakkan objek
3 dimensi.
109
Keluaran Program
lwjgl.OpenGL
Block
-x : int
-y : int
-z : int
-width : int
-height : int
-dept : int
-shape : int
+getWidth() : int TextureMapping
+getHight() : int -camera_x : float
+render() : void -camera_y : float
-camera_z : float
-camera_rot : float
+kontrolKeyboard() : void
+main() : void
Block.java
import java.util.Random;
110
public class Block {
public float x, y, z, width, height, depth, shade;
public Random rand;
public Block(float xx, float yy, float zz, float ww, float hh,
float dd) {
x = xx;
y = yy;
z = zz;
width = ww;
height = hh;
depth = dd;
rand = new Random();
shade = (rand.nextFloat() + 0.2f);
}
public void tick() {
}
glBegin(GL_QUADS);
glColor3f(0, shade, 1);
//Front
glTexCoord2f(0, 0);
glVertex3f(x, y, z);
glTexCoord2f(1, 0);
glVertex3f(x + width, y, z);
glTexCoord2f(1, 1);
glVertex3f(x + width, y + height, z);
glTexCoord2f(0, 1);
glVertex3f(x, y + height, z);
//Back
glVertex3f(x, y, z + depth);
glVertex3f(x + width, y, z + depth);
glVertex3f(x + width, y + height, z + depth);
glVertex3f(x, y + height, z + depth);
//Left
//Right
//Top
//Bottom
111
glEnd();
}
}
UjiCamera.java
import java.util.Random;
import java.util.ArrayList;
public class UjiCamera {

public static float camera_x, camera_y, camera_z, camera_rot;
public static ArrayList<Block> blocks = new
ArrayList<Block>();
public UjiCamera() {
try {
Display.setTitle("Transformai Proyeksi dengan
Kamera");
Display.create();
} catch (LWJGLException e) {
}
glLoadIdentity();
gluPerspective((float) 45, 800f / 600f, 0.1f, 1000.0f);
glLoadIdentity();
glShadeModel(GL_SMOOTH);
glDepthFunc(GL_LEQUAL);
glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);
generateWorld();
float dt, time, lastTime = 0;
Mouse.setGrabbed(true);
time = Sys.getTime();
dt = (time - lastTime) / 1000.0f;
112
lastTime = time;
render();
tick();
Display.update();
Display.sync(60);
}
Display.destroy();
System.exit(0);
}
public void tick() {
camera_x = 0;
camera_y = 0;
camera_z = 0;
camera_rot = 0;
if (Keyboard.isKeyDown(Keyboard.KEY_SPACE)) {
camera_z = +1;
} else if (Keyboard.isKeyDown(Keyboard.KEY_MINUS)) {
camera_z = -1;
}
if (Keyboard.isKeyDown(Keyboard.KEY_RIGHT)) {
camera_x = +1;
} else if (Keyboard.isKeyDown(Keyboard.KEY_LEFT)) {
camera_x = -1;
}
if (Keyboard.isKeyDown(Keyboard.KEY_DOWN)) {
camera_y = -1;
} else if (Keyboard.isKeyDown(Keyboard.KEY_UP)) {
camera_y = +1;
}
while (Keyboard.next()) {
if (Keyboard.isKeyDown(Keyboard.KEY_R)) {
generateWorld();
}
}
for (int i = 0; i < blocks.size(); i++) {
blocks.get(i).tick();
}
camera_rot += Mouse.getDX();
}
glTranslatef(camera_x, camera_y, camera_z);
glRotatef(camera_rot, 0, 1, 0);
for (int i = 0; i < blocks.size(); i++) {

blocks.get(i).render();
}
}
public void generateWorld() {
blocks.clear();
int heightlevel = 0;
Random r = new Random();
for (int i = 0; i < 50; i++) {
for (int j = 0; j < 50; j++) {
113
if (r.nextBoolean() == false) {
heightlevel -= 4;
} else {
heightlevel += 4;
}
blocks.add(new Block((i * 4)-64,
-8+heightlevel,(j*4)-64,4,4,4));
float y = -8 + heightlevel;
for (int k = 0; k < 10; k++) {
blocks.add(new Block((i * 4)-64,y-(k * 4),
(j * 4)-64,4,4,4));
}
}
}
}
public static void main(String[] arguments) {
new UjiCamera();
}
}
Keterangan
Tombol keyboard Panah Atas(Pg Up)-> Pergerakkan ke atas
Tombol keyboard Panah Bawah(Pg Dn)-> Pergerakkan ke bawah
Tombol keyboard Panah Kanan(End)-> Pergerakkan ke kanan
Tombol keyboard Panah Kiri(Home)-> Pergerakkan ke kiri
Tombol keyboard Spasi-> Pergerakkan ke maju
Tombol keyboard Minus-> Pergerakkan ke mundur
E. Latihan Soal
1. Perhatikan gambar dibawah ini sebuah titik Pref berada dalam Word
Coordinates system dilihat menggunakan kamera di posisi Peye. Dalam hal ini
kamera bertindak sebagai Viewer Coordinates System.
Jelaskan ilustrasi gambar di bawah ini :
114
2. Perhatikan gambar di bawah ini, Gambar (a) Obyek grafik yang berada di
dunia dinyatakan dalam ruang koordinat 3D. (b) Gambar obyek tersebut
ditampilkan di layar yang dinyatakan sebagai koordinat bidang 2D setelah
melalui proses proyeksi.
Jelaskan ilustrasi yang ditunjukkan dalam gambar di atas.
F. Rangkuman
untuk menentukan sudut pandang kita pada sebuah world, sehingga sering
disebut virtual camera.Lensa kamera dan mata manusia memiliki daerah
penglihatan (viewing volume) yang berbentuk kerucut, namun karena bentuk
display yang biasanya berbentuk segiempat membuat OpenGL (dan hampir
semua API grafika komputer lain) lebih efisien memodelkan daerah penglihatan
115
sebagai volume berbentuk piramida. Tipe transformasi proyeksi ada dua
macam, bergantung pada parameter dan bentuk piramidanya. Dua tipe
transformasi tersebut adalah Transformasi Ortogonal/Paralel (Orthogonal
Transformation) dan Transformasi Perspektif(Perspective Transformation).
G. Umpan Balik

Peserta diklat dapat memahami
teknik pengambilan gambar
dengan kamera dan berapa
proses pencapaian
kompetensinya
Peserta diklat dapat menerapkan
transformasi proyeksi,
transformasi viewing, dan
transformasi modeling dan berapa
kompetensinya
Peserta diklat dapat menulis kode
program untuk melakukan
pengerakan objek 3 dimensi
melalui transformasi proyeksi,
transformasi viewing, dan
transformasi modeling dan berapa
kompetensinya
H. Kunci Jawaban
Jawaban no 1
Gambar pada soal no 1 menunjukkan : (a) Sebuah titik dengan posisi Pref pada
obyek silinder dilihat (menggunakan kamera) pada posisi Peye. (b) Sistem
koordinat dunia yang digunakan untuk mengukur posisi titik Pref dan posisi mata
Peye.
116
Untuk menyatakan titik-titik dalam Word Coordinates system menjadi titik-titik
dalam Viewer Coordinates System maka diperlukan beberapa parameter berikut:
 Posisi mata pengamat Peye.
 Posisi titik referensi Pref.
 vektor arah pandang atas Vup
Jawaban no 2
Titik-titik dalam Viewer Coordinates system tersimpan dalam koordinat ruang 3D.
Titik-titik ini akan ditampilkan di layar yang dinyatakan sebagai koordinat bidang
2D. Untuk itu kita perlu mentransformasi titik-titik dalam koordinat ruang 3D
menjadi titik-titik dalam koordinat bidang 2D. Yang menjadi permasalahan adalah
bagaimana mentransformasi titik-titik dalam ruang 3D kedalam bidang 2D.
Jawabannya adalah proyeksi. Proyeksi digunakan untuk mentransformasi titik
dalam ruang 3D kedalam bidang 2D.
117
118
119
120
Rendering

1. Melalui diskusi peserta diklat dapat menganalisis pemanfaatan rendering
pada image melalui lighting dan shading.
2. Melalui praktikum peserta diklat dapat menulis kode program untuk
melakukan rendering pada image melalui lighting dan shanding.

1. Peserta diklat mampu menggambarkan proses rendering pada sebuah image
2. Peserta diklat mampu menerapkan proses lighting dan shading
3. Peserta diklat mampu menulis kode program untuk melakukan rendering
pada sebuah image melalui lighting dan shanding
C. Uraian Materi
Rendering merupakan salah satu teknik pencitraan objek 3 dimensi untuk

mendapatkan image yang realistis dengan penambahan beberapa efek, seperti
pencahayaan dan shading. Kebanyakan manusia menggemari sesuatu yang
hidup, bukan yang kaku dan statik.
1. Warna
Warna sebenarnya merupakan persepsi kita terhadap pantulan cahaya dari
benda-benda di depan mata. Tidak ada ketentuan jumlah warna dasar tetapi
dalam implementasi dengan komputer hanya dibutuhkan tiga warna dasar.
Ada berbagai model untuk menyatakan warna dasar serta rentang warna
yang dihasilkan, salah satu diantaranya adalah RGB.
Model warna RGB dapat digambarkan sebagai sebuah kotak yang
mempunyai tiga sumbu yaitu : R(red), G(green), B(blue), dimana nilai
masing-masing sumbu berkisar dari 0 sampaii 1. Warna ditentukan
berdasarkan lokasi warna tersebut terhadap Sumbu RGB.
121
2. Pencahayaan (Lighting)
Salah satu tujuan dari grafika komputer adalah menghasilkan tampilan yang
senyata mungkin, dan karena pengaruh cahaya sangat besar terhadap hasil
nyata maka dalam membuat tampilan akhir faktor pencahayaan harus
diperhitungkan pula. Tetapi mengingat bahwa grafika komputer adalah
model matematika dari kehidupan nyata maka pencahayaan juga harus
diubah menjadi model matematika. Model matematika itu harus memenuhi
persyaratan sebagai berikut :
 Menghasilkan efek seperti cahaya sungguhan
 Dapat dihitung dengan cepat
Model pencahayaan tiga dimensi menyangkut yang realistik menyangkut dua
elemen penting yang sangat berkaitan erat dengan shading model, yaitu :
 Keakuratan dalam menggambarkan objek.
 Teknik pencahayaan yang baik.
Saat cahaya menimpa permukaan benda maka sebagian cahaya akan
dipantulkan dan sebagian lain diserap. Bergantung kepada frekuensi
atau panjang gelombang yang dipantulkan dan diserap maka kita akan
melihat warna. Mata kita selain sensitif terhadap warna juga sensitif
terhadap intensitas cahaya (brightness). Secara awam kita menyebut
intensitas cahaya sebagai kecerahan.
Bergantung kepada materi penyusun benda maka ada tiga kemungkinan
arah pantulan cahaya ketika cahaya menimpa permukaan benda :
diffuse, specular, translucent.
a) Cahaya Tersebar (Diffuse)
Suatu objek yang mempunyai permukaan yang kasar maka cahaya yang
dipantulkan cenderung akan menyebar ke segala arah, cahaya yang
menyebar ini disebut cahaya tersebar. Beberapa cahaya menembus
permukaan dan diradiasi kembali secara seragam ke dalam semua arah.
Penghitungan cahaya tersebar menggunakan m, v dan s.
 Sebagaimana cahaya tersebar disebarkan secara seragam dalam semua
arah, lokasi mata, v, tidak penting kecuali kalau v.m < 0 jika
diinginkan intensitas cahaya I = 0
122
 Hubungan antara kecerahan permukaan dan orientasinya cahaya
didasarkan pada cos(θ).
Keterangan :
= kuat cahaya tersebar (diffuse)
= kuat cahaya di sumber cahaya
= koefisien pantulan tersebar (diffuse)
3. Metode Flat Shading
Flat shading adalah salah satu teknik shading dimana satu face
mempunyai warna yang sama. Pada metode ini sebuah intensitas tunggal
dihitung untuk masing-masing Polygon, semua titik pada permukaan Polygon
dipaparkan dengan nilai intensitas yang sama.
Karakteristik flat shading diantaranya :
 Pemberian tone yang sama untuk setiap Polygon
 Penghitungan jumlah cahaya mulai dari titik tunggal pada permukaan.
 Penggunaan satu normal untuk seluruhnya.
Secara umum flat shading dapat menghasilkan shading yang akurat dengan
ketentuan sebagi berikut :
 Objek berbentuk polihendra (segi banyak), yaitu jaring yang mempunyai
ruang terhingga dan tertutup.
Semua sumber cahaya jauh dari permukaan objek, maka adalah tetap
untuk semua permukaan Polygon.
Posisi penglihatan yang cukup jauh dari permukaan sehingga adalah
tetap untuk semua permukaan Polygon.
Definisi matematik :
̅ : Vektor sumber cahaya (arah) membentur permukaan (yang disingkat untuk '
L', tetapi ingat ini adalah suatu garis vektor).
̅ : Vektor sudut pandang (eyepoint) pemandangan di permukaan (yang
disingkat untuk ' V', tetapi ingat ini adalah suatu garis vektor).
123
̅ : Vektor normal (tegak lurus) pada permukaan (yang disingkat untuk '
N', tetapi ingat ini adalah suatu garis vektor).
Sekalipun semua kondisi-kondisi ini tidak benar, kita masih bisa memperkirakan
efek cahaya permukaan dengan menggunakan permukaan Polygon kecil
dengan menggunakan flat shading dan menghitung intensitas untuk setiap
permukaan, khususnya pada pusat Polygon.
4. Metode Gouraud Shading

Metode ini merender sebuah permukaan Polygon dengan interpolasi linier
yaitu nilai intensitas yang mengenai setiap permukaan berbeda. Warna yang
dipantulkan dihitung tiap vertex kemudian secara halus diinterpolasikan.
Membuat suatu permukaan Polygon dengan menginterpolasikan nilai
intensitas secara linier ke seberang permukaan. Nilai intensitas untuk masing-
masing Polygon dipasangkan dengan nilai dari Polygon yang bersebelahan
sepanjang tepi (edges) yang umum, dengan begitu menghentikan
penghapusan intensitas yang dapat terjadi di flat shading.
Penggunaan level abu-abu yang berbeda di sepanjang Polygon
diinterpolasikan di antara titik. Masing-masing permukaan Polygon dibuat
menggunakan gouraud shading dengan melakukan perhitungan sebagai
berikut :
 Tentukan satuan vektor normal rata-rata pada setiap titik ujung Polygon.
 Pakaikan model iluminasi untuk setiap titik untuk menghitung intensitas
titik.
 Interpolasikan secara linier intensitas titik pada permukaan Polygon.
Pembuatan kode program untuk rendering terhadapa objek 3 dimensi dirancang
dengan melibatkan beberapa file java untuk memudahkan dalam pengaturan dan
operasi transformasi geometri.
124
Keluaran Program
125
lwjgl.OpenGL
CGApplication
Texture
-width : int
-height : int
+getWidth() : int
+getHight() : int
LightingShading Camera
-Camera : CGApplication = cmr -viewCamX : int
-Texture : CGApplication = textr -viewCamY : int
+loadImage() : void -viewCamZ : int
+main() : void -upCamX : int
-upCamY : int
-upCamZ : int
-posCamX : int
-posCamY : int
-posCamZ : int
-camaera_speed : int
+moveCamera() : void
+rotateCamera() : void
+strafeCamera() : void
+render() : void
CGApplication.java
Texture.java
Camera.java
public class Camera {
private float viewCamX, viewCamY, viewCamZ, upCamX, upCamY,
upCamZ,posCamX, posCamY, posCamZ, CAMERA_SPEED;
private void moveCamera(float speed) {
126
float x = viewCamX - posCamX;
float z = viewCamZ - posCamZ;
posCamX = posCamX + x * speed;
posCamZ = posCamZ + z * speed;
viewCamX = viewCamX + x * speed;
viewCamZ = viewCamZ + z * speed;
}
private void rotateCamera(float speed) {
viewCamZ =(float)(posCamZ+Math.sin(speed)*x+
Math.cos(speed) * z);
viewCamX = (float) (posCamX + Math.cos(speed) * x –
Math.sin(speed) * z);
}
private void strafeCamera(float speed) {
float orthoX = -z;
float orthoZ = x;
posCamX = posCamX + orthoX * speed;
posCamZ = posCamZ + orthoZ * speed;
viewCamX = viewCamX + orthoX * speed;
viewCamZ = viewCamZ + orthoZ * speed;
}
private void mouseMove() {
int width, height, mouseX, mouseY;
width = Display.getWidth();
height = Display.getHeight();
int midX = width >> 1;

int midY = height >> 1;
float angleY = 0.0f;
float angleZ = 0.0f;
// Get mouse position

mouseX = Mouse.getX();
mouseY = Mouse.getY();
if ((mouseX == midX) && (mouseY == midY)) {
return;
}
Mouse.setCursorPosition(midX, midY);
angleY = (float) ((midX - mouseX)) / 1000;
angleZ = (float) ((midY - mouseY)) / 1000;
viewCamY += angleZ * 2;
if ((viewCamY - posCamY) > 8) {
viewCamY = posCamY + 8;
}
if ((viewCamY - posCamY) < -8) {

viewCamY = posCamY - 8;
}
rotateCamera(-angleY);
}
127
posCamX = 0.0f;
posCamY = 1.0f;
posCamZ = 8.0f;
viewCamX = 0.0f;
viewCamY = 1.0f;
viewCamZ = 0.0f;
upCamX = 0.0f;
upCamY = 1.0f;
upCamZ = 0.0f;
CAMERA_SPEED = 0.01f;
Mouse.setGrabbed(true);
}
public void setCameraSpeed(float speed) {
CAMERA_SPEED = speed;
}
public void update() {
if (Keyboard.isKeyDown(Keyboard.KEY_W)) {
moveCamera(CAMERA_SPEED);
}
if (Keyboard.isKeyDown(Keyboard.KEY_S)) {
moveCamera(-CAMERA_SPEED);
}
if (Keyboard.isKeyDown(Keyboard.KEY_A)) {
strafeCamera(-CAMERA_SPEED);
}
if (Keyboard.isKeyDown(Keyboard.KEY_D)) {
strafeCamera(CAMERA_SPEED);
}
mouseMove();
}
gluLookAt(posCamX, posCamY, posCamZ, viewCamX,
viewCamY, viewCamZ,upCamX, upCamY, upCamZ);
}
}
LightingShading.java
import java.nio.FloatBuffer;
import java.nio.IntBuffer;
import setting.Camera;
public class LightingShading extends CGApplication {

private final int[] m_texID = new int[2];
private boolean KEY_0_pressed, KEY_1_pressed, KEY_2_pressed,
light0_ON,light1_ON, light2_ON;
public final static int NO_WRAP = -1;
128
private Camera camera;
@Override
camera = new Camera();
camera.init();
camera.setCameraSpeed(0.005f);
KEY_0_pressed = KEY_1_pressed = KEY_2_pressed = false;
light0_ON = light1_ON = light2_ON = false;
textureIDBuffer.get(m_texID);
loadTexture(m_texID[0], "pic/marble.png", false,
GL_LINEAR, GL_REPEAT);
loadTexture(m_texID[1], "pic/crate.png", false,
FloatBuffer ambientPointLight = (FloatBuffer)

BufferUtils.createFloatBuffer(4).put(new float[] {
0.5f, 0.5f, 0.5f, 1.0f }).flip();
FloatBuffer diffusePointLight = (FloatBuffer)
0.5f, 0.5f, 0.5f, 1.0f }).flip();
FloatBuffer specularPointLight = (FloatBuffer)
1.0f, 1.0f, 1.0f, 1.0f }).flip();
FloatBuffer ambientDirectionalLight = (FloatBuffer)
0.0f, 1.0f, 0.0f, 1.0f }).flip();
FloatBuffer diffuseDirectionalLight = (FloatBuffer)
0.0f, 1.0f, 0.0f, 1.0f }).flip();
FloatBuffer ambientSpotLight = (FloatBuffer)
1.0f, 0.0f, 0.0f, 1.0f }).flip();
FloatBuffer diffuseSpotLight = (FloatBuffer)
1.0f, 0.0f, 0.0f, 1.0f }).flip();
FloatBuffer directionallightPosition = (FloatBuffer)
6.0f, 0.5f, 0.0f, 0.0f }).flip();
FloatBuffer pointlightPosition = (FloatBuffer)
6.0f, 0.5f, 0.0f, 1.0f }).flip();
FloatBuffer spotlightPosition = (FloatBuffer)
10.0f, 3.0f, 0.0f, 1.0f }).flip();
FloatBuffer spotlightDirection = (FloatBuffer)
-1.0f, 0.0f, -1.0f, 1.0f }).flip();
FloatBuffer matAmbient = (FloatBuffer)
1.0f, 1.0f, 1.0f, 1.0f }).flip();
FloatBuffer matDiff = (FloatBuffer)
129
1.0f, 1.0f, 1.0f, 1.0f }).flip();
FloatBuffer matSpecular = (FloatBuffer) BufferUtils
.createFloatBuffer(4).put(new float[] {
1.0f, 1.0f, 1.0f, 1.0f }).flip();
glLight(GL_LIGHT0, GL_AMBIENT, ambientPointLight);

glLight(GL_LIGHT0, GL_DIFFUSE, diffusePointLight);
glLight(GL_LIGHT0, GL_SPECULAR, specularPointLight);
glLight(GL_LIGHT0, GL_POSITION, pointlightPosition);
glLight(GL_LIGHT1,GL_AMBIENT,ambientDirectionalLight);
glLight(GL_LIGHT1, GL_DIFFUSE, diffuseDirectionalLight);
glLight(GL_LIGHT1,GL_POSITION, directionallightPosition);
glLight(GL_LIGHT2, GL_AMBIENT, ambientSpotLight);
glLight(GL_LIGHT2, GL_DIFFUSE, diffuseSpotLight);
glLight(GL_LIGHT2, GL_POSITION, spotlightPosition);
glLightf(GL_LIGHT2, GL_SPOT_CUTOFF, 15.0f);
glLightf(GL_LIGHT2, GL_SPOT_EXPONENT, 5.0f);
glLight(GL_LIGHT2,GL_SPOT_DIRECTION, spotlightDirection);
glEnable(GL_COLOR_MATERIAL);
glColorMaterial(GL_FRONT, GL_AMBIENT_AND_DIFFUSE);
glMaterial(GL_FRONT, GL_SPECULAR, matSpecular);
glMaterial(GL_FRONT, GL_AMBIENT, matAmbient);
glMaterial(GL_FRONT, GL_DIFFUSE, matDiff);
glMaterialf(GL_FRONT, GL_SHININESS, 10.0f);
}
@Override
camera.update();
toggleKey();
}
public void toggleKey() {
if (Keyboard.isKeyDown(Keyboard.KEY_0)) {
if (!KEY_0_pressed) {
light0_ON = !light0_ON;
KEY_0_pressed = true;
}
} else {
KEY_0_pressed = false;
}
}
} else {
}
}
} else {
130
}
}
void drawCube(int texID, float width, float height) {
width = width / 2;
glBegin(GL_QUADS);
glNormal3f(0, 0, 1);
glTexCoord2d(0, 0);
glTexCoord2d(1, 0);
glTexCoord2d(1, 1);
glTexCoord2d(0, 1);
// right side
glTexCoord2d(0, 0);
glTexCoord2d(1, 0);
glTexCoord2d(1, 1);
glTexCoord2d(0, 1);
// back side
glNormal3f(0, 0, -1);
glTexCoord2d(0, 0);
glTexCoord2d(1, 0);
glTexCoord2d(1, 1);
glTexCoord2d(0, 1);
// left side
glNormal3f(-1, 0, 0);
glTexCoord2d(0, 0);
glTexCoord2d(1, 0);
glTexCoord2d(1, 1);
glTexCoord2d(0, 1);
// top side
glTexCoord2d(0, 0);
glTexCoord2d(1, 0);
glTexCoord2d(1, 1);
glTexCoord2d(0, 1);
131
// bottom side
glNormal3f(0, -1, 0);
glTexCoord2d(0, 0);
glTexCoord2d(1, 0);
glTexCoord2d(1, 1);
glTexCoord2d(0, 1);
glEnd();
}
void drawFloor(int texID, float width) {

// floor
glBegin(GL_QUADS);
glTexCoord2d(0, 0);
glTexCoord2d(width, 0);
glTexCoord2d(width, width);
glTexCoord2d(0, width);
glEnd();
}
private void loadTexture(int texID, String path, boolean

transparent,
int filter, int wrap) {
if (!m_texture.load(path)) {
return;
}
if (transparent) {
glTexImage2D(GL_TEXTURE_2D,0,GL_RGBA, m_tex
ture.getWidth(),
m_texture.getHeight(), 0, GL_RGBA, GL_UNSIGNED_BYTE,
} else
{
glTexImage2D(GL_TEXTURE_2D,0,GL_RGB,
m_texture.getHeight(), 0, GL_RGB, GL_UNSIGNED_BYTE,
}
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,filter);
glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER, filter);
if (wrap == NO_WRAP) {
132
return;
}
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, wrap);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, wrap);
}
private void toggleLighting(int lightID, boolean on) {
if (on) {
glEnable(lightID);
} else {
glDisable(lightID);
}
}
// Setting up default viewport
// Set perspective projection
glLoadIdentity();
gluPerspective(45.0f, (width) / (height), 1.0f, 100.0f);
// Transformation
glLoadIdentity();
// Clear color buffer to black
// Set background color to black
camera.render();
// Zoom out
glTranslatef(0.0f, -3.0f, -10.0f);
// Enable lighting
glEnable(GL_LIGHTING);
// toggle lighting
toggleLighting(GL_LIGHT0, light0_ON);
// Enable Depth Testing for correct z-ordering
// Enable texture 2D
drawFloor(m_texID[0], 10);
// Draw cube
drawCube(m_texID[1], 2, 2);
renderText();
}
drawString(300, height - 25 ,"Lighting & Shading");
drawString(100, height - 42 * getDefaultFont().getLineHeight(),
"Tekan 0, 1, 2, Untuk ON-OFF point light, directional
light, spot light");
}
@Override
133
glDeleteTextures(m_texID[0]);
glDeleteTextures(m_texID[1]);
}
LightingShading app = new LightingShading();
app.start(800, 600, false, false, true,"Lighting & Shading");
}
}
E. Latihan Soal
1. Rancang dan buatlah Virtual Kota seperti dalam gambar di bawah ini dengan
menggunakan file gambar yang sudah disediakan class yang harus dibuat
antara lain :
 CGApplication.java bisa disalin dari kode program pada Kegiatan
Belajar 6-7
 Camera.java bisa disalin dari kode program Kegiatan Belajar 6 -7
 Texture.java bisa disalin dari kode program Kegiatan Belajar 6 -7
 Class baru yang harus dibuat adalah VirtualGedungKota.java yang
merupakan implementasi dari kode program
134
File gambar sebagai berikut (berekstensi .jpg atau ,png) :
135
F. Rangkuman
pencahayaan dan shading.
Model pencahayaan tiga dimensi menyangkut yang realistik menyangkut dua
elemen penting yang sangat berkaitan erat dengan shading model keakuratan
dalam menggambarkan objek dan teknik pencahayaan yang baik.
Saat cahaya menimpa permukaan benda maka sebagian cahaya akan
dipantulkan dan sebagian lain diserap. Bergantung kepada frekuensi atau
panjang gelombang yang dipantulkan dan diserap maka kita akan melihat
warna. Mata kita selain sensitif terhadap warna juga sensitif terhadap
intensitas cahaya (brightness). Secara awam kita menyebut intensitas cahaya
sebagai kecerahan.
136
dipaparkan dengan nilai intensitas yang sama. Karakteristik flat shading
diantaranya pemberian tone yang sama untuk setiap Polygon,penghitungan
jumlah cahaya mulai dari titik tunggal pada permukaan dan penggunaan satu
normal untuk seluruhnya.
G. Umpan Balik

menggambarkan proses
rendering pada sebuah imagedan
berapa proses pencapaian
kompetensinya
menerapkan proses lighting dan
shading dan berapa besar proses
kode program untuk melakukan
rendering pada sebuah image
melalui lighting dan shanding dan
berapa besar proses pencapaian
kompetensinya
137
H. Kunci Jawaban
lwjgl.OpenGL
CGApplication
Texture
-width : int
-height : int
+getWidth() : int
+getHight() : int
VirtualGedungKota Camera
-Camera : CGApplication = cmr -viewCamX : int
-Texture : CGApplication = textr -viewCamY : int
+loadImage() : void -viewCamZ : int
+main() : void -upCamX : int
-upCamY : int
-upCamZ : int
-posCamX : int
-posCamY : int
-posCamZ : int
-camaera_speed : int
+moveCamera() : void
+rotateCamera() : void
+strafeCamera() : void
+render() : void
138
PENUTUP
Kesimpulan dan Saran
Modul diklat PKB Guru RPL level 7 ini merupakan bagian dari Standar
Kompetensi Guru (SKG) pada empat kompetensi utama yaitu pada kompetensi
profesional. Kompetensi Inti Guru (KIG) sesuai permendiknas 16 tahun 2007
pada kompetensi profesional pada poin 20 menyebutkan guru harus “Menguasai
materi, struktur, konsep dan pola pikir keilmuan yang mendukung mata pelajaran
yang diampu”. Modul ini dibuat sesuai dengan Indikator Pencapaian
Kompetensi(IPK), dimana setiap IPK dituangkan ke dalam Kegiatan Belajar(KB)
1- sampai KB 8 yang berisikan pengembangan pengetahuan dalam uraian materi
dan praktikum yang tertuang dalam kegiatan praktikum. Latihan atau tugas
berisikan permasalahan-permasalan yang nyata dalam kehidupan sehari-hari.
Solusi yang ditawarkan dalam setiap penyelesaian masalah dalam bentuk UML
class diagram dan kode program dalam bahasa C++ dan java sehingga
pengguna dapat memilih sesuai dengan bahasa pemrograman yang sering
digunakan.
Grafik komputer 3D (dimensi) merupakan bentuk dari benda yang memiliki
panjang, lebar, dan tinggi. perbedaan dengan grafik 2D pada pemodelan 3D
memiliki 3 titik kordinat yakni titik x, y, dan z. Representasi dari data geometrik 3
dimensi sebagai hasil dari pemrosesan dan pemberian efek cahaya terhadap
grafika komputer 2D. Tiga Dimensi, biasanya digunakan dalam penanganan
grafis. 3D secara umum merujuk pada kemampuan dari sebuah video card (link).
pemodelan ini juga berfungsi untuk menampilkan efek realistis pada video
maupun game. Grafik 3D merupakan perkembangan dari grafik 2D. Di dalam
grafika komputer, 3D merupakan bentuk grafik yang menggunakan representasi
data geometri tiga dimensi. Suatu objek rangka 3D apabila disinari dari arah
tertentu akan membentuk bayangan pada permukaan gambar. Proses
pembuatan grafik komputer 3D dapat dibagi ke dalam tiga fase, yaitu 3D
139
modeling yang mendeskripsikan bentuk dari sebuah objek, layout dan animation
yang mendeskripsikan gerakan dan tata letak sebuah objek, dan 3D rendering
yang memproduksi image dari objek tersebut
Pengguna modul ini terutama guru-guru Rekayasa Perangkat Lunak (RPL) dapat
memperkaya dengan memberi latihan-latihan atau tugas yang lebih variatif untuk
siswa-siswa SMK sesuai permasalahan di sekolah masing-masing. Pada
perkembangan saat ini, pemanfaatan teknologi grafika komputer sangat
dibutuhkan untuk memvisualisasikan objek-objek dunia nyata menjadi objek
grafis, dan implementasi yang real yaitu digunakannya teknologi grafika
komputer pada fraktal untuk pembuatan aplikasi desain suatu benda. Dengan
menguasai grafika komputer diharapkan guru dan siswa bisa bersama-sama
membuat projek-projek yang dapat digunakan oleh sekolah dan masyarakat.
140
EVALUASI
1. Elemen-elemen yang menjadi konsentrasi utama pada grafika komputer

adalah , kecuali…..
a. Modeling
b. Rendering
c. Animation
d. Transformation
2. Bagian gambar yang memperlihatkan keseluruhan bentuk dan fitur internal
dari sebuah objek disebut….
a. Raster
b. Pixel
c. Wireframe
d. Scene
3. Sintaks perintah OpenGL mengikuti aturan penulisan dari library dimana
fungsi tersebut berasal, format penulisan fungsi OpenGL adalah ...
a. Semua perintah OpenGL menggunakan awalan gl diikuti dengan huruf
kapital pada setiap kata membentuk nama perintah contoh glClearColor.
b. Semua perintah OpenGL menggunakan awalan GL diikuti dengan huruf
kapital pada setiap kata membentuk nama perintah contoh GLClearColor.
c. Semua perintah OpenGL menggunakan awalan _gl diikuti dengan huruf
kapital pada setiap kata membentuk nama perintah contoh _glClearColor.
d. Semua perintah OpenGL menggunakan awalan _GL diikuti dengan huruf
kapital pada setiap kata membentuk nama perintah contoh
_GLClearColor.
4. Perhatikan posisi titik dalam koordinat cartesian seperti dalam gambar di
bawah, pernyataan yang benar adalah ...
141
a. Satu pixel didefinisikan pada posisi (3,4)
b. Satu pixel didefinisikan pada posisi (4,3)
c. Satu pixel pada posisi(3,4) dapat membentuk gambar
d. Satu pixel pada posisi(4,3) dapat membentuk gambar
5. Perintah glClear(GL_COLOR_BUFFER_BIT); adalah perintah untuk…
a. memberikan fungsi warna
b. mendefinisikan sebuah objek
c. memberi nilai koordinat pada sebuah objek
d. menghapus layar
6. Bidang tertutup yang dibentuk minimal 3 simpul (titik) yang terhubung oleh
garis (sisi) dan garis-garis tersebut tidak saling memotong merupakan
bidang…
a. Poligon
b. Polyline
c. Multigon
d. Oktogonal
7. File-file berikut diperlukan dalam pengintegrasian LWJGL ke dalam ide
netbeans kecuali...
a. Lwjgl-idenetbeans-X.X.zipLwj
b. gl-docs-X.X.zip
c.Lwjgl-source-X.X.zip
d.Lwjgl-applet-X.X.zip
8. Garis a arah horisontal mempunyai panjang 400, dan garis b arah vertikal
mempunyai tinggi 320. Tentukan pasangan titik koordinat untuk menggambar
garis a dan garis b ... .
142
Mengambar Garis
(0,480) (320,100)
a
(100,240)
(0,0) (640,0)
a. Garis a(100,240)(500,240) dan Garis b(320,100)(320,420)

b. Garis a(100,240)(240,500) dan Garis b(320,100)(420,320)
c. Garis a(100,240)(500,240) dan Garis b(320,100)(320,-220)
d. Garis a(100,240)(240,400) dan Garis b(320,100)(320,320)
9. Gambar dibawah ini adalah proses .... pada bidang komputer grafik
a. Translasi
b. Transformasi
c. Rotasi
d. Skala
10. Translasi dilakukan dengan penambahan translasi pada suatu titik koordinat
dengan translation vector, yaitu (tx,ty), dimana tx adalah translasi menurut
sumbu x dan ty adalah translasi menurut sumbu y. Koordinat baru titik
yang ditranslasi adalah ...
a. x’=x + tx dan y’=y + ty sehingga titik setelah translasi adalah (x’,y’)
143
b. x’=x-tx dan y’=y - ty sehingga titik setelah translasi adalah (x’,y’)
c. x’=x * tx dan y’=y * ty sehingga titik setelah translasi adalah (x’,y’)
d. x’=x +(2 tx) dan y’=y +(2 ty) sehingga titik setelah translasi adalah (x’,y’)
11. Tiga elemen dasar dalam sistem koordinat 3D yang diperlukan dalam grafika
komputer adalah ...
a. Titik 3D, vektor 3D, dan matrik 3D
b. Translasi 3D, rotasi 3D, dan skala 3D
c. Titik 3D, translasi 3D, dan rotasi 3D
d. Vektor 3D, translasi 3D, dan rotasi 3D
12. Algoritma yang digunakan untuk menentukan titik-titik dalam dimensi dengan
menggunakan pendekatan garis lurus adalah…
e. Algoritma DDA
f. Algoritma Bessenham
g. Algoritma differential analyzer
h. Algoritma K-Cluster
13. Perintah berikut ini digunakan untuk menampilkan ....
void mydisplay(){
glVertex2f(-0.5, -0.5);
glVertex2f(-0.5, 0.5);
glVertex2f(0.5, 0.5);
a. segitiga dengan tiga titik dengan satuan float

b. segitiga dengan tiga titik dengan satuan integer
c. persegiempat dengan tiga titik dengan satuan integer
d. persegiempat dengan tiga titik dengan satuan float
14. Jika diketahui nilai koordinat dua titik (4,5) dan (10,9) maka dengan
menggunakan algoritma DDA diperoleh nilai step yang tepat adalah…
i. 6
j. 5
k. 4
l. 3
15. Gambar di bawah ini adalah proses pembuatan objek 3D dari sebuah kubus,
Hitunglah jumlah titik, sisi(face), dan jumlah titik setiap face ....
144
a. 8 titik, 6 face , dan setiap face terdiri dari 4 vertex
b. 8 titik, 6 face , dan setiap face terdiri dari 2 vertex
c. 8 titik, 6 face , dan setiap face terdiri dari 6 vertex
d. 8 titik, 6 face , dan setiap face terdiri dari 8 vertex
16. Jika diketahui nilai s adalah 2 Tentukan koordinat baru titik (3,4) setalah
melalui operasi penskalaan adalah ...
a.(5,6)
b.(9,12)
c.(5,12)
d.(9,6)
17. Di bawah ini adalah perintah-perintah untuk memberikan tekstur pada objek 1
dimensi, kecuali…
a. GL_TEXTURE_1D
b. GL_TEXTURE_RECTANGLE
c. GL_TEXTURE_BUFFER
d. GL_TEXTURE_1D_ARRAY
18. Penentuan apa yang dilihat oleh kamera biasanya ditentukan dengan sebuah
titik (x,y,z) yang disebut...
a. camera interest
b. field of view
c. virtual camera
d. camera setting
19. Melakukan pengesetan kamera dalam bentuk setting lensa kamera disebut…
a. trnasformasi viewing
b. transformasi viewport
c. transformasi modeling
d. transformasi proyeksi
145
20. Secara umum flat shading dapat menghasilkan shading yang akurat jika
objek berbentuk….
a. polyhendra
b. polygon
c. oktogonal
d. polyline
146
GLOSARIUM
3 dimensi biasa disebut 3D atau adalah bentuk dari benda yang memiliki
panjang, lebar, dan tinggi. Grafik 3 Dimensi merupakan teknik penggambaran yg
berpatokan pada titik koordinat sumbu x(datar), sumbu y(tegak), dan sumbu
z(miring).
Algoritma DDA adalah algoritma pembentukan garis berdasarkan perhitungan

Δx dan Δy, menggunakan rumus y = m. Δ x. Garis dibuat dengan menentukan
dua endpoint yaitu titik awal dan titik akhir.
dipaparkan dengan nilai intensitas yang sama.
Garis dibuat dengan menentukan posisi titik diantara titik awal dan akhir dari
suatu garis. Untuk menggambar titik (point) digunakan perintah point(x,y) dimana
nilai x dan y adalah koordinat pada layar.
Grafika Komputer adalah proses untuk menciptakan suatu gambar berdasarkan

deskripsi obyek maupun latar belakang yang terkandung pada suatu gambar.
Grafis komputer adalah suatu bidang ilmu yang mempelajari bagaimana

membangun grafik (gambar) baik 2D maupun 3D yang kelihatan nyata dengan
menggunakan komputer. Salah satu bidang grafika komputer yang sangat
terkenal adalah desain grafis
untuk menentukan sudut pandang kita pada sebuah world, sehingga sering
disebut virtual camera.
147
engine yang berjalan dengan dasar bahasa java (open source dan free). Game
engine sendiri merupakan perangkat lunak yang digunakan khusus dalam
pembuatan video game.
Lighting atau Pencahayaan pada grafik komputer bertujuan untuk memberikan

efek nyata pada objek. Efek nyata disini berarti, cahaya yang disebarkan ke
objek dapat memberikan efek cahaya yang sesungguhnya.
Objek grafik 2 dimensi adalah sekumpulan titik-titik 2 dimensi yangdihubungkan

dengan garis lurus, baik berupa polyline, polygon atau kurva.
OpenGL (Open Graphics Library) adalah sebuah program aplikasi interface yang
digunakan untuk mendefinisikan komputer grafis 2D dan 3D. Semua perintah
OpenGL menggunakan awalan gl diikuti dengan huruf kapital pada setiap kata
membentuk nama perintah (sebagai contoh glClearColor).
Polyline adalah suatu fungsi yang digunakan untuk menggambarkan objek 2D

yang sudah didefinisikan di depan, dimana setiap titik pada objek mulai titik ke 0,
1, 2,3,..., n dihubungkan dengan garis lurus sehingga membentuk kurva terbuka.
Primitive Drawing merupakan cara mudah untuk menggambar pada layar

monitor menggunakan teori geometri sederhana. Macam-macam primitive
drawing seperti menggambar sebuah titik, garis, atau gabungan antar keduanya.

pencahayaan dan shading.
perlu di tentukan pusat dan besar sudut putar. sedangkan translasi adalah
148
bawah.
Skala adalah suatu operasi yang membuat suatu objek berubah ukurannya baik
menjadi mengecil ataupun membesar secara seragam atau tidak seragam
tergantung pada faktor penskalaan (scalling factor) yaitu (sx,sy) yang diberikan.
sx adalah faktor penskalaan menurut sumbu x dan sy faktor penskalaan menurut
sumbu y.

pengolahan gambar yang memetakan sebuah fungsi pada permukaan tiga
dimensi dalam scene
Titik (Point) atau dalam istilah komputer dikenal dengan Pixel (Picture Element)
adalah elemen terkecil dari sebuah gambar atau pola dalam tampilan komputer.
Kumpulan dari pixel membentuk sebuah gambar atau pola yang dapat dikenali
dalam variasi warna dan jumlah yang banyak. Kumpulan pixel dalam jumlah
panjang dan lebar tertentu disebut dengan resolusi.
Vertek adalah titik dalam 3 dimensi yang terdiri dari (x,y,z)
149
150
DAFTAR PUSTAKA
Achmad Basuki, Nana Ramadijanti. 2006. Grafika Komputer - Teori dan

Implementasinya. Yogyakarta Andi Offset
Chua Hock-Chuan. 2012. 3D Graphics with OpenGL. Basic Theory.
Listian Pratomo. 2007. Membuat Grafik di Java. www.ilmukomputer.com
Maliki, Irfan.2010. Grafika Komputer. Yogyakarta Andi Offset.
Modul 4 Grafika Komputer Universitas Negeri Malang: Transformasi Objek.

2013.
Prihatmanto, Ary Setijadi. 2007. EC5130 – Grafika Komputer dan

Pemrograman GPU. Suplemen Diktat Kuliah. OpenGL Tutorial dengan GLUT:
Fixed Pipeline.
______________.2015. Learning LWJGL.

http://wiki.lwjgl.org/wiki/Learning_LWJGL (online).
______________.2006. Grafik Komputer :Transformasi Geometri2 Dimensi.

Universitas Gunadarma
______________.Diktat Kuliah Grafika Kompute BAB 2 Transformasi 2D

.http://pdf.nscpolteksby.ac.id/2-Transformasi%202D-20140317.pdf
151

Modul Grafika Komputer LWJGL Edisi 2

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Grafika Komputer LWJGL Edisi 2

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL

PROGRAM KEAHLIAN GANDA

Penulis: EKO SUBIYANTORO,S.Pd.,S.ST.,MT.

Direktorat Jenderal Guru dan Tenaga Kependidikan

Hak Cipta Dilindungi Undang-Undang

Peran guru profesional dalam proses pembelajaran sangat penting

Jakarta, Februari 2016

Sumarna Surapranata, Ph.D

Dr. H. Rusdi, M.Pd,

KATA SAMBUTAN .............................................................................................. iii

Gambar 1 Peta Kedudukan Modul Grafika Komputer .......................................... 3

Tabel 1 Peta Kompetensi..................................................................................... 3

Guru dan tenaga kependidikan wajib melaksanakan kegiatan pengembangan

Pemrograman Web Dinamis

Pemrograman Berorientasi Objek

Desain Sistem Basis Data Sistem Manajemen Basis Data

Gambar 1 Peta kedudukan Modul Grafika Komputer

Tabel 1 Peta kompetensi Grafika Komputer :

Standar Kompetensi Guru

20.13.4 Membuat pergerakan

Kegiatan Belajar 1 Kegiatan Belajar 5

Topik 1 Topik 2 Topik 3 Topik 4

Gambar 2 Struktur modul PKB Guru RPL Grade 7 Grafika Komputer

E. Saran Cara Penggunaan Modul

B. Indikator Pencapaian Kompetensi

1. Pengertian Grafika Komputer

Aplikasi grafika komputer telah digunakan secara luas dalam bisnis,

Pixel merupakan singkatan dari picture element, kadang-kadang juga disebut

Grafis jenis vektor merupakan perkembangan dari sistem grafis bitmap

Dalam grafika komputer memiliki tiga tema utama, yaitu :

2. Peran dan Penggunaan Grafika Komputer

Kegiatan Praktikum 1.1

1. Topik diskusi 1 : Teknik dan Teknologi dalam Grafika Komputer

2. Topik diskusi 2 : Penerapan Grafika Komputer

IPK Hasil Yang Dicapai Rencana Tindak Lanjut

Setelah mengikuti kegiatan belajar 2 ini peserta diklat diharapkan dapat :

B. Indikator Pencapaian Kompetensi

Langkah-langkah instalasi LWJGL ke dalam IDE NetBeans

Tulis Project Name dengan nama “TutorialLWJGL”

4. Berikan nama library dengan LWJGL atau LWJGL-X.X

6. Pergi ke folder ekstrak LWJGL-X.X.zip dan folder Jar. lwjgl.jar,

7. Pilih Tab Sources, kemudian klik Add JAR/Folder. Pergi ke folder

9. Klik OK. Selesai. Library sudah ditambahkan ke dalam Netbeans.

b) Menambahkan library LWJGL ke dalam library di aplikasi

4. Konfigurasi VM dengan cara klik kanan pada Tutorial lwjgl dan

Kegiatan Praktikum ini adalah kegiatan praktikum menggunakan struktur

2. Bagian kedua dari program adalah bagian yang digunakan untuk

private void update() {

public void destroy() {

1. OpenGL (Open Graphics Library) bersifat Open-Source, multi-platform dan

1. Objek 2 dimensi dan objek 3 dimensi

Setelah mengikuti kegiatan belajar 3 ini peserta diklat diharapkan dapat :

B. Indikator Pencapaian Kompetensi

1. Peserta diklat mampu menerapkan konsep konsep dasar grafika computer

2. Titik dan Garis

3. Membuat Titik dan Garis

Kegiatan Praktikum 3.1

public void render() {

public static void main(String[] args) {

private void run() {

public class Create_Line {

public void render() {

public static void main(String[] args) {

private void create() throws LWJGLException {